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

ayanova/src/views/home-schedule.vue

@@ -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??
+    Dragging vs info SUCKS and bug riddled!!!
-    if too slow a click it ignores it
 
+  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;
+        //(also called on simple click to view schedule more info)
-        this.dragTime = mouse - start;
+        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",