ayanova/src/views/home-schedule.vue

@@ -107,10 +107,26 @@
           ></div>
         </template>
       </v-calendar>
-
+      <!-- NEW ITEM DIALOG -->
+      <template>
+        <v-row justify="center">
+          <v-dialog max-width="360px" persistent v-model="newItemDialog">
+            <v-card>
+              <v-card-text>
+                create workorder create reminder
+              </v-card-text>
+              <v-card-actions>
+                <v-btn text @click="cancelAddNew" color="primary">{{
+                  $ay.t("Cancel")
+                }}</v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-dialog>
+        </v-row>
+      </template>
       <!-- MORE INFO DIALOG -->
       <v-menu
-        v-model="selectedOpen"
+        v-model="moreInfoDialog"
         :close-on-content-click="false"
         :activator="selectedElement"
         offset-x
@@ -214,7 +230,7 @@
               $ay.t("Open")
             }}</v-btn>
             <v-spacer></v-spacer>
-            <v-btn color="primary" text @click="selectedOpen = false">
+            <v-btn color="primary" text @click="moreInfoDialog = false">
               {{ $ay.t("Close") }}
             </v-btn>
           </v-card-actions>
@@ -333,7 +349,7 @@ export default {
       firstTime: "8:00",
       selectedEvent: {},
       selectedElement: null,
-      selectedOpen: false,
+      moreInfoDialog: false,
       events: [],
       evInfo: {},
       dragEvent: null,
@@ -356,12 +372,17 @@ export default {
       rights: window.$gz.role.defaultRightsObject(),
       calendarHeight: 600,
       settingsDialog: false,
+      newItemDialog: false,
       timeZoneName: window.$gz.locale.getResolvedTimeZoneName(),
       languageName: window.$gz.locale.getResolvedLanguage(),
       hour12: window.$gz.locale.getHour12()
     };
   },
   methods: {
+    cancelAddNew() {
+      this.events.splice(this.events.length - 1);
+      this.newItemDialog = false;
+    },
     startDrag({ event }) {
       // console.log("startDrag", event);
 
@@ -404,55 +425,68 @@ export default {
       //on extend then extendEvent (actual event), extendOriginal and createStart are set, dragEvent is null
       //on create then createStart is only value set, dragEvent is null and extendEvent is null
 
+      console.log("endDragExtend ", {
+        dragEvent: this.dragEvent,
+        extendEvent: this.extendEvent,
+        createStart: this.createStart
+      });
+
       //Handle the event, could be one of three things: changing an event start time, changing an event length or creating a new event
 
-      //ADJUSTMENT EVENTS
+      if (this.extendEvent && this.extendEvent.type == 0) {
-      if (this.dragEvent || 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)
-        let param = { type: null, id: null, start: null, end: null };
+        //Open create dialog here
+        this.newItemDialog = true;
+      } else {
+        //New or modify existing
+        if (this.dragEvent || this.extendEvent) {
+          let param = { type: null, id: null, start: null, end: null };
 
-        if (this.dragEvent) {
+          if (this.dragEvent) {
-          param.type = this.dragEvent.type;
+            param.type = this.dragEvent.type;
-          param.id = this.dragEvent.id;
+            param.id = this.dragEvent.id;
-          param.start = window.$gz.locale.localScheduleFormatToUTC8601String(
+            param.start = window.$gz.locale.localScheduleFormatToUTC8601String(
-            this.dragEvent.start,
+              this.dragEvent.start,
-            this.timeZoneName
+              this.timeZoneName
-          );
+            );
-          param.end = window.$gz.locale.localScheduleFormatToUTC8601String(
+            param.end = window.$gz.locale.localScheduleFormatToUTC8601String(
-            this.dragEvent.end,
+              this.dragEvent.end,
-            this.timeZoneName
+              this.timeZoneName
-          );
+            );
-        } else {
-          param.type = this.extendEvent.type;
-          param.id = this.extendEvent.id;
-          param.start = window.$gz.locale.localScheduleFormatToUTC8601String(
-            this.extendEvent.start,
-            this.timeZoneName
-          );
-          param.end = window.$gz.locale.localScheduleFormatToUTC8601String(
-            this.extendEvent.end,
-            this.timeZoneName
-          );
-        }
-
-        try {
-          window.$gz.form.deleteAllErrorBoxErrors(this);
-
-          let res = await window.$gz.api.post("schedule/adjust", param);
-
-          if (res.error) {
-            this.formState.serverError = res.error;
-            window.$gz.form.setErrorBoxErrors(this);
           } else {
+            param.type = this.extendEvent.type;
+            param.id = this.extendEvent.id;
+            param.start = window.$gz.locale.localScheduleFormatToUTC8601String(
+              this.extendEvent.start,
+              this.timeZoneName
+            );
+            param.end = window.$gz.locale.localScheduleFormatToUTC8601String(
+              this.extendEvent.end,
+              this.timeZoneName
+            );
+          }
+
+          try {
+            window.$gz.form.deleteAllErrorBoxErrors(this);
+
+            let res = await window.$gz.api.post("schedule/adjust", param);
+
+            if (res.error) {
+              this.formState.serverError = res.error;
+              window.$gz.form.setErrorBoxErrors(this);
+            } else {
+            }
+          } catch (error) {
+            window.$gz.errorHandler.handleFormError(error, this);
           }
-        } catch (error) {
-          window.$gz.errorHandler.handleFormError(error, this);
         }
-      } else if (this.createStart && !this.dragEvent && !this.extendEvent) {
-        // console.log(
-        //   "endDragExtend: event is CREATE for new event",
-        //   new Date(this.createStart).toString()
-        // );
       }
+      // else if (this.createStart && !this.dragEvent && !this.extendEvent) {
+      //   // console.log(
+      //   //   "endDragExtend: event is CREATE for new event",
+      //   //   new Date(this.createStart).toString()
+      //   // );
+      // }
 
       this.dragTime = null;
       this.dragEvent = null;
@@ -501,7 +535,7 @@ export default {
         //console.log("DRAG DAY VIEW:", { mouse: mouse, tms: tms });
       } else if (this.extendEvent && this.createStart !== null) {
         //# EXTENDING PATH
-        console.log("mouseMoveDayView:Extending path");
+        //console.log("mouseMoveDayView:Extending path");
         const mouseRounded = this.roundTime(mouse, false);
         //console.log("mouseMoveDayView mouseRounded:", mouseRounded);
         const min = Math.min(mouseRounded, this.createStart);
@@ -547,19 +581,17 @@ export default {
     },
 
     startTime(tms) {
-      //console.log("startTime", tms);
+      //This is called on the start of dragging an existing schedule item or drag extending a NEW schedule item
+      // console.log("startTime", tms);
       const mouse = this.toTime(tms);
 
       if (this.dragEvent && this.dragTime === null) {
-        //const start = new Date(this.dragEvent.start).getTime();
+        //# DAY VIEW *DRAG* EXISTING START EVENT (not extend)
         const start = this.dragEvent.start;
-
         this.dragTime = mouse - start;
-        //note: this captures once at start of drag
-        // console.log("startTime dragTime is", this.dragTime);
       } else {
+        //# DAY VIEW CREATE START EVENT
         this.createStart = this.roundTime(mouse);
-        //TODO: implement speed dial create new item here
         // console.log(
         //   "startTime::STUB Create new element, popup FAB speeddial here"
         // );
@@ -575,7 +607,6 @@ export default {
           id: 0,
           editable: true
         };
-        //console.log("startTime, pushing event:", this.extendEvent);
         this.events.push(this.extendEvent);
       }
     },
@@ -687,12 +718,12 @@ export default {
         this.selectedEvent = event;
         this.selectedElement = nativeEvent.target;
         requestAnimationFrame(() =>
-          requestAnimationFrame(() => (this.selectedOpen = true))
+          requestAnimationFrame(() => (this.moreInfoDialog = true))
         );
       };
 
-      if (this.selectedOpen) {
+      if (this.moreInfoDialog) {
-        this.selectedOpen = false;
+        this.moreInfoDialog = false;
         requestAnimationFrame(() => requestAnimationFrame(() => open()));
       } else {
         open();