ayanova/src/views/home-schedule.vue

@@ -72,7 +72,9 @@
         @change="fetchEvents"
         @mousedown:event="startDrag"
         @mousedown:time="startTime"
-        @mousemove:time="mouseMove"
+        @mousemove:time="mouseMoveDayView"
+        @mousemove:day="mouseMoveMonthView"
+        @mouseup:day="endDragExtend"
         @mouseup:time="endDragExtend"
         @mouseleave.native="cancelDrag"
         :event-more-text="$ay.t('More')"
@@ -266,25 +268,36 @@ SETTINGS:
       https://vuetifyjs.com/en/components/calendars/#drag-and-drop
       https://vuetifyjs.com/en/components/floating-action-buttons/#speed-dial
 
+      Speed dial create wo
+
       issues:        
         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
+        week view drag works to another day if you do it quickly (<100ms event fucking it up maybe?)
+          but it works properly in same day, what's up with that? duelling events maybe??
+            alt-key modifier to drag if conflicting events or WTF horizontal vs vertical?
 
-
+      settings form persist to server
+      reminders (create / modify)
+      reviews (can't create from here but can modify / open)
     
     TESTING:
-      overlapping sched items that start or end outside of view this is a test of the query in schedulecontroller at server
+      drag/extend in all views working?      
       touch mode still can do all ops
       ultimately test on devices
     
+
+    Move common functionality out of home-schedule to be re-used in svc-schedule and also potentially other scheds like customer view of workorders or visual calendar view of work for a single customer for techs etc
+      the more I can move out of it the easier to do more scheds in other places
+
+    DOCS:
+      how to use the schedule
+
     reporting - make it happen
       could just default to regular reporting list, doesn't absolutely need to be a calendar at least at first
       as long as it has all appointments consolidated in single list
     
-FUTURE NOT INITIAL RELEASE  
+
-  (these might be required for service-schedule view for moving around/planning etc visually which is needed there, not necessarily here)
-  Drag and drop and extend
-  controls to change time/date etc
 
 */
 
@@ -348,9 +361,10 @@ export default {
   },
   methods: {
     startDrag({ event, timed }) {
-      console.log("startDrag");
+      // console.log("startDrag", event);
       //TODO: IF event is not editable then just return here to prevent the drag
-      if (event && timed) {
+      //if (event && timed) {
+      if (event) {
         //My work around to disambiguate dragging and clicking
         clearTimeout(this.dragTimeout);
         this.dragged = false;
@@ -364,7 +378,7 @@ export default {
       }
     },
     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
@@ -428,10 +442,10 @@ export default {
           window.$gz.errorHandler.handleFormError(error, this);
         }
       } else if (this.createStart && !this.dragEvent && !this.extendEvent) {
-        console.log(
+        // console.log(
-          "endDragExtend: event is CREATE for new event",
+        //   "endDragExtend: event is CREATE for new event",
-          new Date(this.createStart).toString()
+        //   new Date(this.createStart).toString()
-        );
+        // );
       }
 
       this.dragTime = null;
@@ -443,11 +457,11 @@ export default {
     cancelDrag() {
       // console.log("cancelDrag");
       if (this.extendEvent) {
-        console.log("Cancel drag A path (cancel?)");
+        // console.log("Cancel drag A path (cancel?)");
         if (this.extendOriginal) {
           this.extendEvent.end = this.extendOriginal;
         } else {
-          console.log("Cancel drag B path (do it?)");
+          //console.log("Cancel drag B path (do it?)");
           const i = this.events.indexOf(this.extendEvent);
           if (i !== -1) {
             this.events.splice(i, 1);
@@ -460,10 +474,16 @@ export default {
       this.dragTime = null;
       this.dragEvent = null;
     },
-    mouseMove(tms) {
+
+    mouseMoveDayView(tms) {
+      //no event being dragged or exgtended?
+      if (!this.dragEvent && !this.extendEvent) {
+        return;
+      }
       const mouse = this.toTime(tms);
       if (this.dragEvent && this.dragTime !== null) {
         //# DRAGGING PATH
+        //console.log("mouseMoveDayView tms:", JSON.stringify(tms));
         const start = this.dragEvent.start;
         const end = this.dragEvent.end;
         const duration = end - start;
@@ -472,10 +492,11 @@ export default {
         const newEnd = newStart + duration;
         this.dragEvent.start = newStart;
         this.dragEvent.end = newEnd;
+        //console.log("DRAG DAY VIEW:", { mouse: mouse, tms: tms });
       } else if (this.extendEvent && this.createStart !== null) {
         //# EXTENDING PATH
         const mouseRounded = this.roundTime(mouse, false);
-        //console.log("mouseMove mouseRounded:", mouseRounded);
+        //console.log("mouseMoveDayView mouseRounded:", mouseRounded);
         const min = Math.min(mouseRounded, this.createStart);
         const max = Math.max(mouseRounded, this.createStart);
 
@@ -483,6 +504,41 @@ export default {
         this.extendEvent.end = max;
       }
     },
+    mouseMoveMonthView(dd) {
+      if (!this.dragEvent) {
+        return;
+      }
+      // console.log(
+      //   "mouseMoveMonthView:",
+      //   JSON.stringify({
+      //     dd: dd,
+      //     dragEvent: this.dragEvent
+      //   })
+      // );
+      /*
+      NOTE: dd Date is the actual start of the event being dragged helpfully, NOT the mouse itself so I can just use that date as the appointment start date as it starts with that date but on 
+      release it ends with whatever date is dragged to
+      mouseMoveMonthView: {
+        "dd":{"date":"2021-11-10","time":"","year":2021,"month":11,"day":10,"weekday":3,"hour":0,"minute":0,"hasDay":true,"hasTime":false,"past":false,"present":false,"future":true},
+      "dragEvent":{"start":1636515000000,"end":1636523100000,"timed":true,"name":"6 Parker, Ryan and Denesik","color":"#00ccff","textColor":"black","type":41,"id":33}
+      }
+      */
+      //# DRAGGING PATH MONTH VIEW
+      //need to get the actual start time as it isn't in the mouse date
+      const dragEventStartDate = new Date(this.dragEvent.start);
+      // console.log("eventStartDate", eventStartDate);
+      const mouseDate = new Date(
+        dd.year,
+        dd.month - 1,
+        dd.day,
+        dragEventStartDate.getHours(),
+        dragEventStartDate.getMinutes()
+      ).getTime();
+      const moveDelta = mouseDate - this.dragEvent.start;
+      this.dragEvent.start = mouseDate;
+      this.dragEvent.end = this.dragEvent.end + moveDelta;
+    },
+
     startTime(tms) {
       //console.log("startTime", tms);
       const mouse = this.toTime(tms);