ayanova/src/views/home-schedule.vue

@@ -73,7 +73,7 @@
         @mousedown:event="startDrag"
         @mousedown:time="startTime"
         @mousemove:time="mouseMove"
-        @mouseup:time="endDrag"
+        @mouseup:time="endDragExtend"
         @mouseleave.native="cancelDrag"
         :event-more-text="$ay.t('More')"
       >
@@ -267,7 +267,9 @@ SETTINGS:
       https://vuetifyjs.com/en/components/floating-action-buttons/#speed-dial
 
       issues:
-        drag losing end time for event
+        drag/extend needs to actually update the work order
+        drag/extend should not affect locked workorders!!
+          Add canModify or something to event data so no need to even start the op if it can't be done
 
     
     Test: overlapping sched items that start or end outside of view
@@ -344,7 +346,8 @@ export default {
   },
   methods: {
     startDrag({ event, timed }) {
-      //console.log("startDrag");
+      console.log("startDrag");
+      //TODO: IF event is not editable then just return here to prevent the drag
       if (event && timed) {
         //My work around to disambiguate dragging and clicking
         clearTimeout(this.dragTimeout);
@@ -358,39 +361,71 @@ export default {
         this.extendOriginal = null;
       }
     },
-    startTime(tms) {
-      //console.log("startTime", tms);
-      const mouse = this.toTime(tms);
-
-      if (this.dragEvent && this.dragTime === null) {
-        //const start = new Date(this.dragEvent.start).getTime();
-        const start = this.dragEvent.start;
-
-        this.dragTime = mouse - start;
-        //console.log("startTime dragTime is", this.dragTime);
-      } else {
-        this.createStart = this.roundTime(mouse);
-        console.log(
-          "startTime::STUB Create new element, popup FAB speeddial here"
-        );
-        // //console.log("startTime, create start:", this.createStart);
-        // this.createEvent = {
-        //   name: `Event #${this.events.length}`,
-        //   color: this.rndElement(this.colors),
-        //   start: this.createStart,
-        //   end: this.createStart,
-        //   timed: true
-        // };
-        // //console.log("startTime, pushing event:", this.createEvent);
-        // this.events.push(this.createEvent);
-      }
-    },
     extendBottom(event) {
-      //console.log("extendBottom", event);
+      console.log("extendBottom", event);
+      //TODO: if event is not editable then just return here to prevent extend
+
+      //My work around to disambiguate extending and clicking
+      clearTimeout(this.dragTimeout);
+      this.dragged = false;
+      this.dragTimeout = setTimeout(() => {
+        this.dragged = true;
+      }, 100); // Minimal delay to be regarded as extend instead of click
+
+      //this.dragEvent = event;
       this.createEvent = event;
       this.createStart = event.start;
       this.extendOriginal = event.end;
     },
+    endDragExtend() {
+      //On drag then dragEvent and dragTime are set
+      //on extend then createEvent (actual event), extendOriginal and createStart are set
+      //on create then createStart is only value set, dragEvent is null and createEvent is null
+
+      if (this.dragEvent) {
+        console.log("endDragExtend: event is DRAG of existing event");
+      }
+      if (this.createEvent) {
+        console.log("endDragExtend: event is EXTEND of existing event");
+      }
+      if (this.createStart && !this.dragEvent && !this.createEvent) {
+        console.log("endDragExtend: event is CREATE for new event");
+      }
+
+      // console.log("endDragExtend, deets: ", {
+      //   dragEvent: this.dragEvent,
+      //   dragTime: this.dragTime,
+      //   createEvent: this.createEvent,
+      //   createStart: this.createStart,
+      //   extendOriginal: this.extendOriginal
+      // });
+
+      this.dragTime = null;
+      this.dragEvent = null;
+      this.createEvent = null;
+      this.createStart = null;
+      this.extendOriginal = null;
+    },
+    cancelDrag() {
+      // console.log("cancelDrag");
+      if (this.createEvent) {
+        console.log("Cancel drag A path (cancel?)");
+        if (this.extendOriginal) {
+          this.createEvent.end = this.extendOriginal;
+        } else {
+          console.log("Cancel drag B path (do it?)");
+          const i = this.events.indexOf(this.createEvent);
+          if (i !== -1) {
+            this.events.splice(i, 1);
+          }
+        }
+      }
+
+      this.createEvent = null;
+      this.createStart = null;
+      this.dragTime = null;
+      this.dragEvent = null;
+    },
     mouseMove(tms) {
       // //console.log("moustMove", tms);
       const mouse = this.toTime(tms);
@@ -398,10 +433,9 @@ export default {
       //console.log("mouseMove got time:", mouse);
 
       if (this.dragEvent && this.dragTime !== null) {
-        // console.log("mosueMove:A", {
+        //# DRAGGING PATH
-        //   dragEvent: JSON.stringify(this.dragEvent),
+        console.log("MouseMove: DRAGGING");
-        //   dragTime: JSON.stringify(this.dragTime)
+
-        // });
         //new Date(this.dragEvent.start).getTime();
         const start = this.dragEvent.start;
         const end = this.dragEvent.end;
@@ -421,7 +455,8 @@ export default {
         this.dragEvent.start = newStart;
         this.dragEvent.end = newEnd;
       } else if (this.createEvent && this.createStart !== null) {
-        //  console.log("mosueMove:B");
+        //# EXTENDING PATH
+        console.log("mosueMove: EXTENDING");
         const mouseRounded = this.roundTime(mouse, false);
         //console.log("mouseMove mouseRounded:", mouseRounded);
         const min = Math.min(mouseRounded, this.createStart);
@@ -431,32 +466,34 @@ export default {
         this.createEvent.end = max;
       }
     },
-    endDrag() {
+    startTime(tms) {
-      // console.log("endDrag");
+      //console.log("startTime", tms);
+      const mouse = this.toTime(tms);
 
-      this.dragTime = null;
+      if (this.dragEvent && this.dragTime === null) {
-      this.dragEvent = null;
+        //const start = new Date(this.dragEvent.start).getTime();
-      this.createEvent = null;
+        const start = this.dragEvent.start;
-      this.createStart = null;
+
-      this.extendOriginal = null;
+        this.dragTime = mouse - start;
-    },
+        //note: this captures once at start of drag
-    cancelDrag() {
+        // console.log("startTime dragTime is", this.dragTime);
-      // console.log("cancelDrag");
+      } else {
-      if (this.createEvent) {
+        this.createStart = this.roundTime(mouse);
-        if (this.extendOriginal) {
+        //TODO: implement speed dial create new item here
-          this.createEvent.end = this.extendOriginal;
+        console.log(
-        } else {
+          "startTime::STUB Create new element, popup FAB speeddial here"
-          const i = this.events.indexOf(this.createEvent);
+        );
-          if (i !== -1) {
+        // //console.log("startTime, create start:", this.createStart);
-            this.events.splice(i, 1);
+        // this.createEvent = {
-          }
+        //   name: `Event #${this.events.length}`,
-        }
+        //   color: this.rndElement(this.colors),
+        //   start: this.createStart,
+        //   end: this.createStart,
+        //   timed: true
+        // };
+        // //console.log("startTime, pushing event:", this.createEvent);
+        // this.events.push(this.createEvent);
       }
-
-      this.createEvent = null;
-      this.createStart = null;
-      this.dragTime = null;
-      this.dragEvent = null;
     },
     roundTime(time, down = true) {
       //console.log("roundtime...");