diff --git a/ayanova/src/views/home-schedule.vue b/ayanova/src/views/home-schedule.vue
index f50cf7c1..ff4d1820 100644
--- a/ayanova/src/views/home-schedule.vue
+++ b/ayanova/src/views/home-schedule.vue
@@ -212,13 +212,15 @@
>{{ $ay.t("ReviewCompletedDate") }}:
{{
- $ay.dt(evInfo.reviewCompletedDate)
+ $ay.dt(evInfo.completedDate)
}}
- {{ $ay.t("ReviewNotes") }}:
+ {{ $ay.t("ReviewCompletionNotes") }}:
- {{ evInfo.reviewNotes }}
@@ -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",