admin/raven-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

For one (likely brief) shining moment the schedule events behave as they should

Browse Source
This commit is contained in:
John Cardinal
2021-09-21 21:52:24 +00:00
parent 1dae5548c2
commit df11f653f2
1 changed files with 94 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
ayanova/src/views/home-schedule.vue
View File

@@ -212,13 +212,15 @@
>{{ $ay.t("ReviewCompletedDate") }}:</span
>
<span class="text-body-1 ml-2">{{
$ay.dt(evInfo.reviewCompletedDate)
$ay.dt(evInfo.completedDate)
}}</span>
</div>
<div>
<span class="text-h6">{{ $ay.t("ReviewNotes") }}:</span>
<span class="text-h6"
>{{ $ay.t("ReviewCompletionNotes") }}:</span
>
<span class="text-body-1 ml-2">
{{ evInfo.reviewNotes }}</span
{{ evInfo.completionNotes }}</span
>
</div>
</template>
@@ -377,9 +379,29 @@ TODO NEXT:
Needs a refresh button at top
Issue
needs a fast click to open an item for more info, related to 100ms??
if too slow a click it ignores it
Dragging vs info SUCKS and bug riddled!!!
todo: Before gutting, see if can use the pixel move trick instead of the timer trick, that seems more reliable and portable
Google calendar handles it a bit differently:
click and hold until see fourway cursor and event dims but stays where it was while a new non dim copy is draggable and on drop the old dimmed event vanishes and the new bold one is there
This is what I should replicate, so a long press to move and a short click to open
HOWEVER
It *also* allows immediate drag, so it must be keying in on both the timer and the pixel move trick.
ugh
todo: make a copy of this schedule form, gut it entirely for all events and start again from scratch, it's ugly dirty and nonsensical in places
instead of click event handled for opening item it's mouse up for all ops
mouseup when hasn't entered dragging mode yet opens more info (and cancels dragging mode countdown)
mouseup in dragging mode makes the move
mouseup always cancels dragging mode
mousedown starts a timer of about 500ms, if it times out still moused down then it enters drag mode and UI changes
if it doesn't reach timeout on mouse up then stops drag mode countdown
mousemove in drag mode moves item, if not yet in drag mode the mouse doesn't move
todo: red current time line is cool, see if can implement (also follows google calendar ui)
todo: ### find all trans keys and make sure they are fetched in initform ###
TESTING:
drag/extend in all views working?
@@ -403,7 +425,9 @@ TODO NEXT:
// const FORM_CUSTOM_TEMPLATE_KEY = "home-schedule";
const FORM_KEY = "home-schedule";
const CLICK_DETECT_TIMEOUT = 200;
const CLICK_DETECT_TIMEOUT = 100;
let mouseX = 0;
let mouseY = 0;
export default {
async created() {
let vm = this;
@@ -441,6 +465,9 @@ export default {
extendOriginal: null,
dragged: false,
dragTimeout: null,
dragStartX: null,
dragStartY: null,
draggingEvent: false,
formState: {
ready: false,
dirty: false,
@@ -517,24 +544,7 @@ export default {
this.events.splice(this.events.length - 1);
this.newItemDialog = false;
},
startDrag({ event }) {
if (event) {
if (event.editable) {
//My work around to disambiguate dragging and clicking
clearTimeout(this.dragTimeout);
this.dragged = false;
this.dragTimeout = setTimeout(() => {
this.dragged = true;
}, CLICK_DETECT_TIMEOUT); // Min delay to be regarded as extend instead of click, also affects click time to display more info, too short needs faster click
this.dragEvent = event;
this.dragTime = null;
this.extendOriginal = null;
} else {
this.dragged = false;
}
}
},
extendBottom(event) {
if (event.editable) {
//My work around to disambiguate extending and clicking
@@ -544,10 +554,15 @@ export default {
this.dragged = true;
}, CLICK_DETECT_TIMEOUT); // Min delay to be regarded as extend instead of click, also affects click time to display more info, too short needs faster click
//this.dragEvent = event;
//console.log("extendBottom setting extendEvent");
this.extendEvent = event;
this.createStart = event.start;
this.extendOriginal = event.end;
} else {
//probably don't need this, was diagnosing new on click on locked items
////console.log("extendBottom not editable");
// // this.dragged = false;
// // this.extendEvent = null;
}
},
async endDragExtend() {
@@ -556,16 +571,22 @@ export default {
//on create then dragged is set to false and createStart is only value set, dragEvent is null and extendEvent is null
//Handle the event, could be one of three things: changing an event start time, changing an event length or creating a new event
////console.log("end drag extend");
if (this.extendEvent && this.extendEvent.type == 0) {
//console.log("end drag extend NEW");
//NEW, prompt for deets and create or if cancelled then just remove this faux event from events list (it will be the last one in the array)
this.newItemDialog = true;
} else {
////console.log("end drag extend MODIFY??");
if (!this.dragged) {
//we're here due to mouse up but it's not a drag or an extend so it's a More Info mouse up click so bail out now
//console.log("end drag extend NOPE NOT MODIFY, MUST BE MOREINFO", {
// dragEvent: this.dragEvent
// });
this.dragEvent = null; //this needs to be set or it will keep dragging off an editable event even as the moreinfo dialog show
return;
}
//console.log("end drag extend YES MODIFY");
//MODIFY existing event, drag or extend
if (this.dragEvent || this.extendEvent) {
let param = { type: null, id: null, start: null, end: null };
@@ -613,6 +634,7 @@ export default {
}
this.dragTime = null;
this.dragEvent = null;
//console.log("endDragExtend setting extendEvent to null");
this.extendEvent = null;
this.createStart = null;
this.extendOriginal = null;
@@ -620,6 +642,7 @@ export default {
cancelDrag() {
if (this.extendEvent) {
if (this.extendOriginal) {
//console.log("cancelDrag setting extendEvent");
this.extendEvent.end = this.extendOriginal;
} else {
const i = this.events.indexOf(this.extendEvent);
@@ -628,20 +651,54 @@ export default {
}
}
}
//console.log("cancelDrag setting extendEvent to null");
this.extendEvent = null;
this.createStart = null;
this.dragTime = null;
this.dragEvent = null;
},
startDrag({ event }) {
//# mouse down on an event triggers this call
if (event) {
if (event.editable) {
//console.log("startDrag editable event: ", event);
//testtest
this.draggingEvent = true;
//My work around to disambiguate dragging and clicking
clearTimeout(this.dragTimeout);
this.dragged = false;
this.dragTimeout = setTimeout(() => {
this.dragged = true;
}, CLICK_DETECT_TIMEOUT); // Min delay to be regarded as extend instead of click, also affects click time to display more info, too short needs faster click
this.dragEvent = event;
this.dragTime = null;
this.extendOriginal = null;
} else {
//console.log("startDrag not editable");
this.dragged = false;
this.dragEvent = event;
// this.extendEvent = null;
this.dragTime = null;
}
}
},
mouseMoveDayView(tms) {
//no event being dragged or exgtended?
if (!this.dragEvent && !this.extendEvent) {
return;
}
//console.log("mouseMoveDayView has event, processing...");
const mouse = this.toTime(tms);
if (this.dragEvent && this.dragTime !== null) {
//console.log("mousemovedayview dragging");
////console.log("mouseMoveDAyView::dragging path ", {
// dragged: this.dragged,
// dragEvent: this.dragEvent,
// dragTime: this.dragTime
// });
//# DRAGGING PATH
const start = this.dragEvent.start;
const end = this.dragEvent.end;
@@ -652,6 +709,7 @@ export default {
this.dragEvent.start = newStart;
this.dragEvent.end = newEnd;
} else if (this.extendEvent && this.createStart !== null) {
//console.log("mouseMoveDAyView::extending path ", this.extendEvent);
//# EXTENDING PATH
const mouseRounded = this.roundTime(mouse, false);
const min = Math.min(mouseRounded, this.createStart);
@@ -685,11 +743,18 @@ export default {
if (this.dragEvent && this.dragTime === null) {
//# DAY VIEW *DRAG* EXISTING START EVENT (not extend)
const start = this.dragEvent.start;
this.dragTime = mouse - start;
//(also called on simple click to view schedule more info)
if (this.dragEvent.editable) {
//console.log("startTime calculating this.dragTime");
const start = this.dragEvent.start;
this.dragTime = mouse - start;
} else {
//console.log("startTime AVOIDED calculating this.dragTime");
}
} else {
//# DAY VIEW CREATE START EVENT
this.createStart = this.roundTime(mouse);
//console.log("startTime setting extendEvent");
this.extendEvent = {
name: "-",
color: this.$store.state.darkMode ? "white" : "black",