From 23167cf6dca88ac97d4dd580e797156a8ef8fc32 Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Mon, 4 Oct 2021 23:19:10 +0000
Subject: [PATCH]

---
 ayanova/src/views/home-schedule.vue |  72 +----
 ayanova/src/views/svc-schedule.vue  | 465 +++++++++++++---------------
 2 files changed, 223 insertions(+), 314 deletions(-)

diff --git a/ayanova/src/views/home-schedule.vue b/ayanova/src/views/home-schedule.vue
index 14e2879a..3e248cc5 100644
--- a/ayanova/src/views/home-schedule.vue
+++ b/ayanova/src/views/home-schedule.vue
@@ -138,7 +138,7 @@
       <template>
         <v-row justify="center">
           <v-dialog max-width="600px" v-model="moreInfoDialog">
-            <v-card color="grey lighten-4" min-width="350px" flat>
+            <v-card>
               <v-toolbar>
                 <v-btn icon @click="openScheduledItem()">
                   <v-icon color="primary">{{ iconForSelectedEvent() }}</v-icon>
@@ -411,7 +411,6 @@
 </template>
 <script>
 const FORM_KEY = "home-schedule";
-const CLICK_DETECT_TIMEOUT = 100; //100 is a bit too fast to recognize a click
 export default {
   async created() {
     const vm = this;
@@ -526,12 +525,6 @@ export default {
     extendBottom(event) {
       //console.log("extend bottom fired");
       if (event.editable) {
-        //My work around to disambiguate extending 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
         //capture time to see if it's a click or a drag/extend
         this.lastMouseDownMS = new Date().getTime();
         this.extendEvent = event;
@@ -540,12 +533,6 @@ export default {
       }
     },
     async endDragExtend() {
-      // console.log("EndDragExtend", {
-      //   extendEvent: this.extendEvent,
-      //   dragged: this.dragged,
-      //   dragEvent: this.dragEvent,
-      //   lastMS: this.lastMouseDownMS
-      // });
       //On drag then dragged is set to true and dragEvent and dragTime are set
       //on extend then dragged is set to true extendEvent (actual event), extendOriginal and createStart are set, dragEvent is null
       //on create then dragged is set to false and createStart is only value set, dragEvent is null and extendEvent is null
@@ -555,12 +542,7 @@ export default {
         //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 {
-        // 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
-        //   this.dragEvent = null; //this needs to be set or it will keep dragging off an editable event even as the moreinfo dialog show
-        //   return;
-        // }
-
+        //MORE INFO
         if (this.lastMouseDownMS != null && this.itWasAClickNotADrag()) {
           await this.showMoreInfo(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
@@ -632,34 +614,22 @@ export default {
     },
     startDrag({ event }) {
       //# mouse down on an event triggers this call
-      //console.log("StartDrag, event:", JSON.stringify(event));
       if (event) {
         this.lastMouseDownMS = new Date().getTime(); //snapshot time to disambiguate drag vs click
         if (event.editable) {
-          //My work around to disambiguate dragging and clicking
-          //clearTimeout(this.dragTimeout);
-          //  console.log("startDrag in editable set dragged false");
           this.dragged = false;
-          // this.dragTimeout = setTimeout(() => {
-          //   this.dragged = true;
-          //   console.log("startDrag event timer fired, dragged set to 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;
           this.dragEvent = event;
-          // this.extendEvent = null;
           this.dragTime = null;
         }
       }
     },
     itWasAClickNotADrag() {
       if (this.lastMouseDownMS == null) {
-        //console.trace("lastMouseDownMS is null!!");
-        //  return true;
         if (this.$ay.dev) {
           throw new Error("lastMouseDownMS is null!");
         } else {
@@ -672,7 +642,6 @@ export default {
       }
       const elapsed = new Date().getTime() - this.lastMouseDownMS;
       this.lastMouseDownMS = null;
-      // console.log("itWasAClickNotADrag elapsed:", elapsed);
       return elapsed < 200;
     },
     mouseMoveDayView(tms) {
@@ -727,7 +696,6 @@ export default {
         if (this.dragEvent.editable) {
           const start = this.dragEvent.start;
           this.dragTime = mouse - start;
-        } else {
         }
       } else {
         //# DAY VIEW CREATE START EVENT
@@ -762,21 +730,6 @@ export default {
         tms.minute
       ).getTime();
     },
-    diagInfo() {
-      if (this.$refs.calendar) {
-        return (
-          "cal" +
-          JSON.stringify({
-            start: this.$refs.calendar.start,
-            end: this.$refs.calendar.end,
-            focus: this.focus,
-            firstInterval: this.$refs.calendar.firstInterval
-          })
-        );
-      } else {
-        return "no calendar";
-      }
-    },
     typeToLabel() {
       switch (this.viewType) {
         case "month":
@@ -822,12 +775,6 @@ export default {
       });
     },
     async showMoreInfo(event) {
-      //console.log("showMoreInfo, event is", event);
-      //workaround to disambiguate drag click from view more info click
-      // if (this.dragged) {
-      //   return;
-      // }
-      //  console.log("showMoreINfo not dragged, popping up");
       this.selectedEvent = event;
       let route = null;
       this.evInfo = {};
@@ -852,21 +799,6 @@ export default {
           window.$gz.form.setErrorBoxErrors(this);
         }
       }
-      // 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 {
diff --git a/ayanova/src/views/svc-schedule.vue b/ayanova/src/views/svc-schedule.vue
index b793c709..529b7299 100644
--- a/ayanova/src/views/svc-schedule.vue
+++ b/ayanova/src/views/svc-schedule.vue
@@ -74,7 +74,6 @@
         :locale="languageName"
         :event-more-text="$ay.t('More')"
         :first-time="formUserOptions.firstTime"
-        @click:event="showMoreInfo"
         @click:more="viewDay"
         @click:date="viewDay"
         @change="fetchEvents"
@@ -152,193 +151,202 @@
         </v-row>
       </template>
       <!-- MORE INFO DIALOG -->
-      <v-menu
-        v-model="moreInfoDialog"
-        :close-on-content-click="false"
-        :activator="selectedElement"
-        offset-x
-      >
-        <v-card color="grey lighten-4" min-width="350px" flat>
-          <v-toolbar>
-            <v-btn icon @click="openScheduledItem()">
-              <v-icon color="primary">{{ iconForSelectedEvent() }}</v-icon>
-            </v-btn>
-            <v-toolbar-title>{{ selectedEvent.name }}</v-toolbar-title>
-          </v-toolbar>
-          <v-card-text>
-            <!--reminder -->
-            <template v-if="selectedEvent.type == $ay.ayt().Reminder">
-              <div>
-                <span class="text-h6">{{ $ay.t("ReminderName") }}:</span>
-                <span class="text-body-1 ml-2">{{ evInfo.name }}</span>
-              </div>
-              <div>
-                <span class="text-h6">{{ $ay.t("DashboardScheduled") }}:</span>
-                <span class="text-body-1 ml-2"
-                  >{{ $ay.dt(evInfo.startDate) }}&nbsp;&mdash;&nbsp;{{
-                    $ay.dt(evInfo.stopDate)
-                  }}</span
-                >
-              </div>
-              <div>
-                <span class="text-h6">{{ $ay.t("ReminderNotes") }}:</span>
-                <span class="text-body-1 ml-2">
-                  <v-icon class="mr-3" :color="evInfo.color"
-                    >$ayiSquareFull</v-icon
-                  >{{ evInfo.notes }}</span
-                >
-              </div>
-            </template>
-            <!--review -->
-            <template v-if="selectedEvent.type == $ay.ayt().Review">
-              <div class="mb-1" v-if="evInfo.aType">
-                <v-icon
-                  large
-                  color="primary"
-                  @click="openObject(evInfo.aType, evInfo.objectId)"
-                  >{{ $ay.util().iconForType(evInfo.aType) }}</v-icon
-                ><span
-                  class="text-h6"
-                  @click="openObject(evInfo.aType, evInfo.objectId)"
-                >
-                  {{ evInfo.reviewObjectViz }}</span
-                >
-              </div>
-              <div>
-                <span class="text-h6">{{ $ay.t("ReviewName") }}:</span>
-                <span class="text-body-1 ml-2">{{ evInfo.name }}</span>
-              </div>
-              <div>
-                <span class="text-h6">{{ $ay.t("ReviewDate") }}:</span>
-                <span class="text-body-1 ml-2">{{
-                  $ay.dt(evInfo.reviewDate)
-                }}</span>
-              </div>
-              <div>
-                <span class="text-h6">{{ $ay.t("ReviewNotes") }}:</span>
-                <span class="text-body-1 ml-2"> {{ evInfo.notes }}</span>
-              </div>
+      <template>
+        <v-row justify="center">
+          <v-dialog max-width="600px" v-model="moreInfoDialog">
+            <v-card>
+              <v-toolbar>
+                <v-btn icon @click="openScheduledItem()">
+                  <v-icon color="primary">{{ iconForSelectedEvent() }}</v-icon>
+                </v-btn>
+                <v-toolbar-title>{{ selectedEvent.name }}</v-toolbar-title>
+              </v-toolbar>
+              <v-card-text>
+                <!--reminder -->
+                <template v-if="selectedEvent.type == $ay.ayt().Reminder">
+                  <div>
+                    <span class="text-h6">{{ $ay.t("ReminderName") }}:</span>
+                    <span class="text-body-1 ml-2">{{ evInfo.name }}</span>
+                  </div>
+                  <div>
+                    <span class="text-h6"
+                      >{{ $ay.t("DashboardScheduled") }}:</span
+                    >
+                    <span class="text-body-1 ml-2"
+                      >{{ $ay.dt(evInfo.startDate) }}&nbsp;&mdash;&nbsp;{{
+                        $ay.dt(evInfo.stopDate)
+                      }}</span
+                    >
+                  </div>
+                  <div>
+                    <span class="text-h6">{{ $ay.t("ReminderNotes") }}:</span>
+                    <span class="text-body-1 ml-2">
+                      <v-icon class="mr-3" :color="evInfo.color"
+                        >$ayiSquareFull</v-icon
+                      >{{ evInfo.notes }}</span
+                    >
+                  </div>
+                </template>
+                <!--review -->
+                <template v-if="selectedEvent.type == $ay.ayt().Review">
+                  <div class="mb-1" v-if="evInfo.aType">
+                    <v-icon
+                      large
+                      color="primary"
+                      @click="openObject(evInfo.aType, evInfo.objectId)"
+                      >{{ $ay.util().iconForType(evInfo.aType) }}</v-icon
+                    ><span
+                      class="text-h6"
+                      @click="openObject(evInfo.aType, evInfo.objectId)"
+                    >
+                      {{ evInfo.reviewObjectViz }}</span
+                    >
+                  </div>
+                  <div>
+                    <span class="text-h6">{{ $ay.t("ReviewName") }}:</span>
+                    <span class="text-body-1 ml-2">{{ evInfo.name }}</span>
+                  </div>
+                  <div>
+                    <span class="text-h6">{{ $ay.t("ReviewDate") }}:</span>
+                    <span class="text-body-1 ml-2">{{
+                      $ay.dt(evInfo.reviewDate)
+                    }}</span>
+                  </div>
+                  <div>
+                    <span class="text-h6">{{ $ay.t("ReviewNotes") }}:</span>
+                    <span class="text-body-1 ml-2"> {{ evInfo.notes }}</span>
+                  </div>
 
-              <template v-if="evInfo.completedDate">
-                <div>
-                  <span class="text-h6"
-                    >{{ $ay.t("ReviewCompletedDate") }}:</span
-                  >
-                  <span class="text-body-1 ml-2">{{
-                    $ay.dt(evInfo.completedDate)
-                  }}</span>
-                </div>
-                <div>
-                  <span class="text-h6"
-                    >{{ $ay.t("ReviewCompletionNotes") }}:</span
-                  >
-                  <span class="text-body-1 ml-2">
-                    {{ evInfo.completionNotes }}</span
-                  >
-                </div>
-              </template>
-            </template>
-            <!--woitemscheduleduser -->
-            <template
-              v-if="selectedEvent.type == $ay.ayt().WorkOrderItemScheduledUser"
-            >
-              <div>
-                <span class="text-h6">{{ $ay.t("WorkOrder") }}:</span>
-                <span class="text-body-1 ml-2"
-                  >{{ evInfo.serial }}&nbsp; {{ evInfo.customerViz }}</span
+                  <template v-if="evInfo.completedDate">
+                    <div>
+                      <span class="text-h6"
+                        >{{ $ay.t("ReviewCompletedDate") }}:</span
+                      >
+                      <span class="text-body-1 ml-2">{{
+                        $ay.dt(evInfo.completedDate)
+                      }}</span>
+                    </div>
+                    <div>
+                      <span class="text-h6"
+                        >{{ $ay.t("ReviewCompletionNotes") }}:</span
+                      >
+                      <span class="text-body-1 ml-2">
+                        {{ evInfo.completionNotes }}</span
+                      >
+                    </div>
+                  </template>
+                </template>
+                <!--woitemscheduleduser -->
+                <template
+                  v-if="
+                    selectedEvent.type == $ay.ayt().WorkOrderItemScheduledUser
+                  "
                 >
-              </div>
-              <div>
-                <span class="text-h6">{{ $ay.t("Tags") }}:</span>
-                <span class="text-body-1 ml-2">{{
-                  $ay.util().formatTags(evInfo.wotags)
-                }}</span>
-              </div>
-              <div>
-                <span class="text-h6">{{ $ay.t("DashboardScheduled") }}:</span>
-                <span class="text-body-1 ml-2"
-                  >{{ $ay.dt(evInfo.startDate) }}&nbsp;&mdash;&nbsp;{{
-                    $ay.dt(evInfo.stopDate)
-                  }}</span
-                >
-              </div>
-              <div>
-                <span class="text-h6"
-                  >{{
-                    $ay.t("WorkOrderItemScheduledUserEstimatedQuantity")
-                  }}:</span
-                >
-                <span class="text-body-1 ml-2">{{ evInfo.qty }}</span>
-              </div>
-              <div>
-                <span class="text-h6"
-                  >{{ $ay.t("WorkOrderItemScheduledUserServiceRateID") }}:</span
-                >
-                <span class="text-body-1 ml-2">{{ evInfo.rate }}</span>
-              </div>
+                  <div>
+                    <span class="text-h6">{{ $ay.t("WorkOrder") }}:</span>
+                    <span class="text-body-1 ml-2"
+                      >{{ evInfo.serial }}&nbsp; {{ evInfo.customerViz }}</span
+                    >
+                  </div>
+                  <div>
+                    <span class="text-h6">{{ $ay.t("Tags") }}:</span>
+                    <span class="text-body-1 ml-2">{{
+                      $ay.util().formatTags(evInfo.wotags)
+                    }}</span>
+                  </div>
+                  <div>
+                    <span class="text-h6"
+                      >{{ $ay.t("DashboardScheduled") }}:</span
+                    >
+                    <span class="text-body-1 ml-2"
+                      >{{ $ay.dt(evInfo.startDate) }}&nbsp;&mdash;&nbsp;{{
+                        $ay.dt(evInfo.stopDate)
+                      }}</span
+                    >
+                  </div>
+                  <div>
+                    <span class="text-h6"
+                      >{{
+                        $ay.t("WorkOrderItemScheduledUserEstimatedQuantity")
+                      }}:</span
+                    >
+                    <span class="text-body-1 ml-2">{{ evInfo.qty }}</span>
+                  </div>
+                  <div>
+                    <span class="text-h6"
+                      >{{
+                        $ay.t("WorkOrderItemScheduledUserServiceRateID")
+                      }}:</span
+                    >
+                    <span class="text-body-1 ml-2">{{ evInfo.rate }}</span>
+                  </div>
 
-              <div v-if="evInfo.haswostatus">
-                <span class="text-h6">{{ $ay.t("WorkOrderStatus") }}:</span>
-                <span class="text-body-1 ml-2">{{ evInfo.wostatus }}</span>
-                <v-icon :color="evInfo.wostatuscolor" class="ml-4"
-                  >$ayiFlag</v-icon
-                >
-                <v-icon
-                  color="primary"
-                  v-if="evInfo.wostatuslocked"
-                  class="ml-4"
-                  >$ayiLock</v-icon
-                >
-                <v-icon
-                  color="primary"
-                  v-if="evInfo.wostatuscompleted"
-                  class="ml-4"
-                  >$ayiCheckCircle</v-icon
-                >
-              </div>
+                  <div v-if="evInfo.haswostatus">
+                    <span class="text-h6">{{ $ay.t("WorkOrderStatus") }}:</span>
+                    <span class="text-body-1 ml-2">{{ evInfo.wostatus }}</span>
+                    <v-icon :color="evInfo.wostatuscolor" class="ml-4"
+                      >$ayiFlag</v-icon
+                    >
+                    <v-icon
+                      color="primary"
+                      v-if="evInfo.wostatuslocked"
+                      class="ml-4"
+                      >$ayiLock</v-icon
+                    >
+                    <v-icon
+                      color="primary"
+                      v-if="evInfo.wostatuscompleted"
+                      class="ml-4"
+                      >$ayiCheckCircle</v-icon
+                    >
+                  </div>
 
-              <div>
-                <span class="text-h6"
-                  >{{ $ay.t("WorkOrderItemSummary") }}:</span
-                >
-                <span class="text-body-1 ml-2">
-                  <v-icon class="mr-3" :color="evInfo.woitemstatuscolor"
-                    >$ayiCircle</v-icon
-                  >{{ evInfo.woitemstatus }}</span
-                >
-              </div>
+                  <div>
+                    <span class="text-h6"
+                      >{{ $ay.t("WorkOrderItemSummary") }}:</span
+                    >
+                    <span class="text-body-1 ml-2">
+                      <v-icon class="mr-3" :color="evInfo.woitemstatuscolor"
+                        >$ayiCircle</v-icon
+                      >{{ evInfo.woitemstatus }}</span
+                    >
+                  </div>
 
-              <div>
-                <span class="text-h6"
-                  >{{ $ay.t("WorkOrderItemPriorityID") }}:</span
-                >
-                <span class="text-body-1 ml-2">
-                  <v-icon class="mr-3" :color="evInfo.woitemprioritycolor"
-                    >$ayiFireAlt</v-icon
-                  >{{ evInfo.woitempriority }}</span
-                >
-              </div>
-              <div>
-                <span class="text-h6">{{ $ay.t("WorkOrderItemTags") }}:</span>
-                <span class="text-body-1 ml-2">{{
-                  $ay.util().formatTags(evInfo.woitemtags)
-                }}</span>
-              </div>
-            </template>
-          </v-card-text>
-          <v-card-actions>
-            <v-btn color="primary" text @click="openScheduledItem()">{{
-              $ay.t("Open")
-            }}</v-btn>
+                  <div>
+                    <span class="text-h6"
+                      >{{ $ay.t("WorkOrderItemPriorityID") }}:</span
+                    >
+                    <span class="text-body-1 ml-2">
+                      <v-icon class="mr-3" :color="evInfo.woitemprioritycolor"
+                        >$ayiFireAlt</v-icon
+                      >{{ evInfo.woitempriority }}</span
+                    >
+                  </div>
+                  <div>
+                    <span class="text-h6"
+                      >{{ $ay.t("WorkOrderItemTags") }}:</span
+                    >
+                    <span class="text-body-1 ml-2">{{
+                      $ay.util().formatTags(evInfo.woitemtags)
+                    }}</span>
+                  </div>
+                </template>
+              </v-card-text>
+              <v-card-actions>
+                <v-btn color="primary" text @click="openScheduledItem()">{{
+                  $ay.t("Open")
+                }}</v-btn>
 
-            <v-spacer v-if="!$vuetify.breakpoint.xs"></v-spacer>
+                <v-spacer v-if="!$vuetify.breakpoint.xs"></v-spacer>
 
-            <v-btn color="primary" text @click="moreInfoDialog = false">
-              {{ $ay.t("Close") }}
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-menu>
+                <v-btn color="primary" text @click="moreInfoDialog = false">
+                  {{ $ay.t("Close") }}
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-dialog>
+        </v-row>
+      </template>
     </v-sheet>
     <template>
       <v-row justify="center">
@@ -399,7 +407,6 @@
 </template>
 <script>
 const FORM_KEY = "svc-schedule";
-const CLICK_DETECT_TIMEOUT = 200; //100 is a bit too fast to recognize a click
 export default {
   async created() {
     const vm = this;
@@ -452,7 +459,8 @@ export default {
       hour12: window.$gz.locale.getHour12(),
       formUserOptions: {},
       tempFirstTime: null,
-      availableUsers: []
+      availableUsers: [],
+      lastMouseDownMS: null
     };
   },
   methods: {
@@ -514,13 +522,8 @@ export default {
 
     extendBottom(event) {
       if (event.editable) {
-        //My work around to disambiguate extending 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
-
+        //capture time to see if it's a click or a drag/extend
+        this.lastMouseDownMS = new Date().getTime();
         this.extendEvent = event;
         this.createStart = event.start;
         this.extendOriginal = event.end;
@@ -538,21 +541,16 @@ export default {
 
       //Handle the event, could be one of three things: changing an event start time, changing an event length or creating a new event
       if (this.extendEvent && this.extendEvent.type == 0) {
-        // console.log(
-        //   "endDragExtend::extendEvent",
-        //   JSON.stringify(this.extendEvent)
-        // );
         //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("dragged:", this.dragged);
-        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
+        //MORE INFO
+        if (this.lastMouseDownMS != null && this.itWasAClickNotADrag()) {
+          await this.showMoreInfo(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;
         }
         //MODIFY existing event, drag or extend
-        //console.log("endDragExtend::dragEvent", JSON.stringify(this.dragEvent));
         if (this.dragEvent || this.extendEvent) {
           const param = { type: null, id: null, start: null, end: null };
 
@@ -613,29 +611,40 @@ export default {
       this.createStart = null;
       this.dragTime = null;
       this.dragEvent = null;
+      this.lastMouseDownMS = null;
     },
     startDrag({ event }) {
       //# mouse down on an event triggers this call
       if (event) {
+        this.lastMouseDownMS = new Date().getTime(); //snapshot time to disambiguate drag vs click
         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;
           this.dragEvent = event;
-          // this.extendEvent = null;
           this.dragTime = null;
         }
       }
     },
+    itWasAClickNotADrag() {
+      if (this.lastMouseDownMS == null) {
+        if (this.$ay.dev) {
+          throw new Error("lastMouseDownMS is null!");
+        } else {
+          window.$gz.store.commit(
+            "logItem",
+            "home-schedule:lastMouseDownMS is unexpectedly null"
+          );
+          return true; //least dangerous option in production
+        }
+      }
+      const elapsed = new Date().getTime() - this.lastMouseDownMS;
+      this.lastMouseDownMS = null;
+      return elapsed < 200;
+    },
     mouseMoveDayView(tms) {
       //no event being dragged or exgtended?
       if (!this.dragEvent && !this.extendEvent) {
@@ -684,22 +693,18 @@ export default {
       if (!tms.category && this.viewType == "category") {
         return;
       }
-      console.log("startTime, tms:", JSON.stringify(tms));
+
       //This is called on the start of dragging an existing schedule item or drag extending a NEW schedule item
       const mouse = this.toTime(tms);
       if (this.dragEvent && this.dragTime === null) {
-        console.log("startTime drag path");
         //# DAY VIEW *DRAG* EXISTING START EVENT (not extend)
         //(also called on simple click to view schedule more info)
         if (this.dragEvent.editable) {
           const start = this.dragEvent.start;
           this.dragTime = mouse - start;
-        } else {
-          console.log("startTime NOT EDITABLE!");
         }
       } else {
         //# DAY VIEW CREATE START EVENT
-        console.log("startTime create start path");
         this.createStart = this.roundTime(mouse);
         this.extendEvent = {
           name: "-",
@@ -731,21 +736,6 @@ export default {
         tms.minute
       ).getTime();
     },
-    diagInfo() {
-      if (this.$refs.calendar) {
-        return (
-          "cal" +
-          JSON.stringify({
-            start: this.$refs.calendar.start,
-            end: this.$refs.calendar.end,
-            focus: this.focus,
-            firstInterval: this.$refs.calendar.firstInterval
-          })
-        );
-      } else {
-        return "no calendar";
-      }
-    },
     typeToLabel() {
       switch (this.viewType) {
         case "month":
@@ -791,11 +781,8 @@ export default {
         id: this.selectedEvent.id
       });
     },
-    async showMoreInfo({ nativeEvent, event }) {
-      //workaround to disambiguate drag click from view more info click
-      if (this.dragged) {
-        return;
-      }
+    async showMoreInfo(event) {
+      this.selectedEvent = event;
       let route = null;
       this.evInfo = {};
       switch (event.type) {
@@ -813,22 +800,12 @@ export default {
         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);
         }
       }
-      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();
-      }
-      nativeEvent.stopPropagation();
     },
     async fetchEvents({ start, end }) {
       try {