From eacee2af6d5680d8a98fe2a36495724e9fd5cb6d Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Mon, 4 Oct 2021 19:34:04 +0000
Subject: [PATCH] new sched event handling framework in place

---
 ayanova/devdocs/todo.txt            |   8 +-
 ayanova/src/views/home-schedule.vue | 246 ++++++++++++++++++++++------
 2 files changed, 199 insertions(+), 55 deletions(-)

diff --git a/ayanova/devdocs/todo.txt b/ayanova/devdocs/todo.txt
index 3c25f9e2..e0b9b69d 100644
--- a/ayanova/devdocs/todo.txt
+++ b/ayanova/devdocs/todo.txt
@@ -32,8 +32,12 @@
 					this can check and then do moreinfo as it's already handling dragging
 					see if it detects non vs drag and do accordingly?
 					Start drag and end drag should handle it all
-					on start capture time or mouse coords
-					on stop check if too little time or too short distance occured to be a drag and process as showmore else it's a drag
+					TODO:
+					Layer on the functionality, start with drag and move to extend, new and more info
+						the fewer events used the easier can cleaner it will be
+					on event mousedown capture time or mouse coords
+					on event mouseup check if too little time or too short distance occured to be a drag and process as showmore else it's a drag
+					On mouse up or down outside event then it's a new event
 
 
 		should there be a day view at all in svc sched?
diff --git a/ayanova/src/views/home-schedule.vue b/ayanova/src/views/home-schedule.vue
index c508e956..e0dae2d1 100644
--- a/ayanova/src/views/home-schedule.vue
+++ b/ayanova/src/views/home-schedule.vue
@@ -70,15 +70,21 @@
         @click:more="viewDay"
         @click:date="viewDay"
         @change="fetchEvents"
-        @mousedown:event="startDrag"
-        @mousedown:time="startTime"
-        @mousemove:time="mouseMoveDayView"
-        @mousemove:day="mouseMoveMonthView"
-        @mouseup:day="endDragExtend"
-        @mouseup:time="endDragExtend"
-        @mouseleave.native="cancelDrag"
+        @mousedown:event="onMouseDownEvent"
+        @mousedown:time="onMouseDownTime"
+        @mouseup:day="onMouseUpDay"
+        @mouseup:time="onMouseUpTime"
+        @mouseleave.native="onMouseLeave"
+        @mousemove:time="onMouseMoveTime"
+        @mousemove:day="onMouseMoveDay"
       >
-        <!-- @click:event="showMoreInfo" -->
+        <!-- 
+          todo: for svc-schedule also mouseup:time-category mouseup:day-category (which is a bit odd needs investigation)
+          @click:event="showMoreInfo" 
+        
+         
+       
+        -->
         <template v-slot:event="{ event, timed, eventSummary }">
           <div class="v-event-draggable">
             <v-icon small :color="event.textColor" class="mr-1">{{
@@ -140,9 +146,10 @@
         v-model="moreInfoDialog"
         :close-on-content-click="false"
         :activator="selectedElement"
-        offset-x
+        min-width="350px"
+        max-width="600"
       >
-        <v-card color="grey lighten-4" min-width="350px" flat>
+        <v-card color="grey lighten-4" flat>
           <v-toolbar>
             <v-btn icon @click="openScheduledItem()">
               <v-icon color="primary">{{ iconForSelectedEvent() }}</v-icon>
@@ -454,10 +461,143 @@ export default {
       languageName: window.$gz.locale.getResolvedLanguage(),
       hour12: window.$gz.locale.getHour12(),
       formUserOptions: {},
-      tempFirstTime: null
+      tempFirstTime: null,
+      //new refactor event stuff
+      activeMouseDownEvent: null,
+      activeMouseDownNewEvent: null,
+      lastMouseDownMS: null
     };
   },
   methods: {
+    onMouseDownEvent(o) {
+      if (!this.activeMouseDownEvent) {
+        //capture time to see if it's a click or a drag/extend
+        this.lastMouseDownMS = new Date().getTime();
+        this.activeMouseDownEvent = o;
+        //this is so the popup dialog is centered around the event clicked on
+        this.selectedElement = o.nativeEvent.target;
+        //console.log("onMouseDownEvent o", o);
+      }
+    },
+    onMouseDownTime(o) {
+      //NOTE: Mouse down DAY is *NOT* supported, new events only in time / day view
+
+      //check if there is an active event, if there is then this has fired after mouse down event and we don't want to mess with it
+      //if there is no active event then this is fired on it's own and user is trying to make a new event
+      if (!this.activeMouseDownEvent) {
+        //capture x,y..actually I don't 5really need to here I think, this is for new events
+        //and they go by actual times and shit so...
+        this.activeMouseDownNewEvent = o;
+        console.log("onMouseDownTime", o);
+      }
+    },
+    async onMouseUpDay(o) {
+      // console.log(
+      //   "onMouseUpDay handling active event:",
+      //   JSON.stringify({ o: o, activeEvent: this.activeMouseDownEvent })
+      // );
+      //this event contains the day month but no time that I need to modify the event to another day
+      if (this.activeMouseDownEvent) {
+        if (this.itWasAClickNotADrag()) {
+          //console.log("onMouseUpDay STUB: SHOW MORE INFO");
+          await this.showMoreInfo(this.activeMouseDownEvent.event);
+        } else {
+          console.log("onMouseUpDay STUB: HANDLE DRAG");
+        }
+      }
+      this.activeMouseDownEvent = null;
+    },
+    async onMouseUpTime(o) {
+      //we could be here due to three reasons
+      //1. end drag existing event
+      //2. end drag new event
+      //3. click to open more info on existing event
+
+      //Existing event handler either more info or modify
+      if (this.activeMouseDownEvent) {
+        if (this.itWasAClickNotADrag()) {
+          // console.log(
+          //   "onMouseUpTime STUB: SHOW EVENT MORE INFO",
+          //   this.activeMouseDownEvent
+          // );
+
+          await this.showMoreInfo(this.activeMouseDownEvent.event);
+        } else {
+          console.log("onMouseUpTime STUB: HANDLE EXISTING EVENT DRAG");
+        }
+        //console.log("onMouseUpTime handling active event:", o);
+        this.activeMouseDownEvent = null;
+        return;
+      }
+      //New event handler
+      if (this.activeMouseDownNewEvent) {
+        console.log("onMouseUpTime STUB: HANDLE NEW EVENT CREATE");
+      }
+    },
+    onMouseLeave(o) {
+      //The user dragged or moved off the control so nothing should be actively happening with events
+      // if (this.activeMouseDownEvent) {
+      //   // console.log("onMouseLeave", JSON.stringify(o));
+      //   console.log(
+      //     "onMouseLeave handling active event:",
+      //     JSON.stringify(this.activeMouseDownEvent)
+      //   );
+      // }
+      this.activeMouseDownEvent = null;
+      this.activeMouseDownNewEvent = null;
+      this.lastMouseDownMS = null;
+    },
+    onMouseMoveTime(o) {
+      //this event is only relevant to painting during drag/extend
+      // if (this.activeMouseDownEvent) {
+      //   console.log("onMouseMoveTime", JSON.stringify(o));
+      // }
+    },
+    onMouseMoveDay(o) {
+      //this event is only relevant to painting during drag extend
+      // if (this.activeMouseDownEvent) {
+      //   console.log("onMouseMoveDay", JSON.stringify(o));
+      // }
+    },
+    itWasAClickNotADrag() {
+      if (this.lastMouseDownMS == null) {
+        //return;
+        throw new Error("lastMouseMS is null!");
+      }
+      const elapsed = new Date().getTime() - this.lastMouseDownMS;
+      this.lastMouseDownMS = null;
+      console.log("itWasAClickNotADrag elapsed:", elapsed);
+      return elapsed < 200;
+    },
+    async showMoreInfo(ayevent) {
+      this.selectedEvent = ayevent;
+      let route = null;
+      this.evInfo = {};
+      switch (ayevent.type) {
+        case window.$gz.type.WorkOrderItemScheduledUser:
+          route = `workorder/items/scheduled-users/sched-info/${ayevent.id}`;
+          break;
+        case window.$gz.type.Reminder:
+          route = `reminder/sched-info/${ayevent.id}`;
+          break;
+        case window.$gz.type.Review:
+          route = `review/sched-info/${ayevent.id}`;
+          break;
+      }
+      if (route) {
+        const res = await window.$gz.api.get(route);
+        if (!res.error) {
+          this.evInfo = res.data;
+          this.moreInfoDialog = true;
+        } else {
+          this.formState.serverError = res.error;
+          window.$gz.form.setErrorBoxErrors(this);
+        }
+      }
+    },
+    ////////////////////////////////////////////////////////////////////////////////
+    ////////////////////////////////////////////////////////////////////////////////
+    ////////////////////////////////////////////////////////////////////////////////
     openObject: function(type, id) {
       window.$gz.eventBus.$emit("openobject", {
         type: type,
@@ -776,48 +916,48 @@ export default {
         id: this.selectedEvent.id
       });
     },
-    async showMoreInfo({ nativeEvent, event }) {
-      console.log("showMoreInfo click event fired");
-      //workaround to disambiguate drag click from view more info click
-      if (this.dragged) {
-        return;
-      }
-      console.log("showMoreINfo not dragged, popping up");
-      let route = null;
-      this.evInfo = {};
-      switch (event.type) {
-        case window.$gz.type.WorkOrderItemScheduledUser:
-          route = `workorder/items/scheduled-users/sched-info/${event.id}`;
-          break;
-        case window.$gz.type.Reminder:
-          route = `reminder/sched-info/${event.id}`;
-          break;
-        case window.$gz.type.Review:
-          route = `review/sched-info/${event.id}`;
-          break;
-      }
-      if (route) {
-        const res = await window.$gz.api.get(route);
-        if (!res.error) {
-          this.evInfo = res.data;
-        }
-      }
-      const open = () => {
-        this.selectedEvent = event;
-        this.selectedElement = nativeEvent.target;
-        requestAnimationFrame(() =>
-          requestAnimationFrame(() => (this.moreInfoDialog = true))
-        );
-      };
-      if (this.moreInfoDialog) {
-        this.moreInfoDialog = false;
-        requestAnimationFrame(() => requestAnimationFrame(() => open()));
-      } else {
-        open();
-      }
-      console.log("show more info stopping propagation");
-      nativeEvent.stopPropagation();
-    },
+    // async showMoreInfo({ nativeEvent, event }) {
+    //   console.log("showMoreInfo click event fired");
+    //   //workaround to disambiguate drag click from view more info click
+    //   if (this.dragged) {
+    //     return;
+    //   }
+    //   console.log("showMoreINfo not dragged, popping up");
+    //   let route = null;
+    //   this.evInfo = {};
+    //   switch (event.type) {
+    //     case window.$gz.type.WorkOrderItemScheduledUser:
+    //       route = `workorder/items/scheduled-users/sched-info/${event.id}`;
+    //       break;
+    //     case window.$gz.type.Reminder:
+    //       route = `reminder/sched-info/${event.id}`;
+    //       break;
+    //     case window.$gz.type.Review:
+    //       route = `review/sched-info/${event.id}`;
+    //       break;
+    //   }
+    //   if (route) {
+    //     const res = await window.$gz.api.get(route);
+    //     if (!res.error) {
+    //       this.evInfo = res.data;
+    //     }
+    //   }
+    //   const open = () => {
+    //     this.selectedEvent = event;
+    //     this.selectedElement = nativeEvent.target;
+    //     requestAnimationFrame(() =>
+    //       requestAnimationFrame(() => (this.moreInfoDialog = true))
+    //     );
+    //   };
+    //   if (this.moreInfoDialog) {
+    //     this.moreInfoDialog = false;
+    //     requestAnimationFrame(() => requestAnimationFrame(() => open()));
+    //   } else {
+    //     open();
+    //   }
+    //   console.log("show more info stopping propagation");
+    //   nativeEvent.stopPropagation();
+    // },
     async fetchEvents({ start, end }) {
       try {
         window.$gz.form.deleteAllErrorBoxErrors(this);