ayanova/src/components/dash-scheduser-next-wo.vue

@@ -1,33 +1,48 @@
 <template>
   <gz-dash
-    icon="$ayiSplotch"
-    :add-url="'widgets/0'"
-    :show-more-button="true"
+    icon="$ayiUserClock"
+    :add-url="'svc-workorders/0'"
+    :show-more-button="false"
     :update-frequency="60000"
     :error-message="errorMessage"
     v-bind="$attrs"
     @dash-refresh="getDataFromApi()"
-    @dash-more-click="moreClick()"
     v-on="$listeners"
   >
     <template slot="main">
-      <div class="ml-4 mt-1">
-        <template v-for="(item, i) in obj"
-          ><span :key="i"
-            >{{ localizedCurrency(item[1].v)
-            }}<span class="ml-2"
-              ><a :href="'/widgets/' + item[0].i"> {{ item[0].v }}</a>
-              <br /></span></span
-        ></template>
-      </div>
+      <v-calendar
+        color="primary"
+        type="day"
+        hide-header
+        interval-height="36"
+        :interval-count="intervalCount"
+        :first-time="startAt"
+        :events="events"
+        :event-color="getEventColor"
+        :locale="languageName"
+        @click:event="showEvent"
+      >
+        <template v-slot:event="{ event, eventSummary }">
+          <div>
+            <!-- eslint-disable vue/no-v-html -->
+            <span
+              :class="event.textColor + '--text'"
+              v-html="eventSummary()"
+            /><v-icon
+              v-if="!event.editable"
+              x-small
+              :color="event.textColor"
+              class="ml-n3"
+            >
+              $ayiLock</v-icon
+            >
+          </div>
+        </template>
+      </v-calendar>
     </template>
   </gz-dash>
 </template>
 <script>
-/*
-TODO: LINK TO LIST FROM HERE, GRID VIEW PREFILTERED AND SORTED
-
-*/
 import GzDash from "../components/dash-base.vue";
 
 export default {
@@ -40,57 +55,58 @@ export default {
   data() {
     return {
       obj: [],
+      initialized: false,
+      events: [],
       errorMessage: null,
       timeZoneName: window.$gz.locale.getResolvedTimeZoneName(),
       languageName: window.$gz.locale.getResolvedLanguage(),
       hour12: window.$gz.locale.getHour12(),
-      formUserOptions: {}
+      formUserOptions: {},
+      startAt: "00:00",
+      intervalCount: 24
     };
   },
   computed: {},
-  async created() {
-    await getFormUserOptions(this);
-  },
   methods: {
-    moreClick() {
-      //   const LIST_FORM_KEY = "widget-list";
-      //   //get current settings for the form
-      //   const formSettings = window.$gz.form.getFormSettings(LIST_FORM_KEY);
-      //   //switch to an unsaved listview and substitute this dash widgets list view criteria
-      //   formSettings.temp.page = 0;
-      //   formSettings.saved.dataTable.listViewId = -1;
-      //   formSettings.saved.dataTable.unsavedListView = LIST_VIEW.listView;
-      //   //save back again
-      //   window.$gz.form.setFormSettings(LIST_FORM_KEY, formSettings);
-      //   //now navigate to the data table list view
-      //   this.$router.push({
-      //     name: "widget-list"
-      //   });
+    getEventColor(event) {
+      return event.color;
     },
+    showEvent({ nativeEvent, event }) {
+      nativeEvent.stopPropagation();
+
+      window.$gz.eventBus.$emit("openobject", {
+        type: event.type,
+        id: event.id
+      });
+    },
+
     async getDataFromApi() {
-      //http://localhost:7575/api/v8.0/schedule/personal
-      //{"view":1,"dark":false,"start":"2022-02-21T08:00:00.000Z","end":"2022-02-22T07:59:59.000Z","wisuColorSource":"2","wisu":true,"reviews":true,"reminders":true}
-      //   const lv = LIST_VIEW;
-      //   lv.limit = this.maxListItems;
-      //   const res = await window.$gz.api.post("data-list", lv);
-      //   if (!res.error) {
-      //     this.obj = res.data;
-      //   } else {
-      //     this.obj = [];
-      //   }
-      //========================= commented out for release temporarily =====================
+      //because dash base calls refresh before created can fire here
+      //need to init this way instead
+      if (!this.initialized) {
+        await initialize(this);
+      }
+      let hour = new Date().getHours() - 1;
+      if (hour < 0) {
+        hour = 0;
+      }
+
+      this.startAt = `${hour}:00`;
+      this.intervalCount = 24 - hour;
       try {
         this.errorMessage = null;
         const now = window.$gz.locale.nowUTC8601String(this.timeZoneName);
         const res = await window.$gz.api.post("schedule/personal", {
-          view: window.$gz.util.calendarViewToAyaNovaEnum(this.viewType),
+          view: 1,
           dark: this.$store.state.darkMode,
-          start: now,
+          start: window.$gz.locale.addDurationToUTC8601String(now, {
+            hours: -24
+          }),
           end: window.$gz.locale.addDurationToUTC8601String(now, { hours: 24 }),
           wisuColorSource: this.formUserOptions.wisuColorSource,
-          wisu: this.formUserOptions.wisu, //workorder item scheduled user records
-          reviews: this.formUserOptions.reviews,
-          reminders: this.formUserOptions.reminders
+          wisu: true, //workorder item scheduled user records
+          reviews: false,
+          reminders: false
         });
         if (res.error) {
           this.errorMessage = res.error;
@@ -128,13 +144,17 @@ export default {
         }
       } catch (error) {
         this.errorMessage = error.toString();
-
-        //window.$gz.errorHandler.handleFormError(error, this);
       }
     }
   }
 };
 
+async function initialize(vm) {
+  await fetchTranslatedText();
+  await getFormUserOptions(vm);
+  vm.initialized = true;
+}
+
 async function getFormUserOptions(vm) {
   const res = await window.$gz.api.get(`form-user-options/home-schedule`);
   if (res.error) {
@@ -154,19 +174,10 @@ async function getFormUserOptions(vm) {
     } else {
       vm.formUserOptions = JSON.parse(res.data.options);
     }
-    //takes local time in "HH:MM" format and converts to ISO UTC format for picker consumption
-    const d = new Date();
-    const temp = new Date(
-      d.getFullYear(),
-      d.getMonth(),
-      d.getDate(),
-      vm.formUserOptions.firstTime.split(":")[0],
-      vm.formUserOptions.firstTime.split(":")[1]
-    );
-    vm.tempFirstTime = window.$gz.locale.localTimeDateStringToUTC8601String(
-      temp.toISOString(),
-      vm.timeZoneName
-    );
   }
 }
+
+async function fetchTranslatedText() {
+  await window.$gz.translation.cacheTranslations(["DashboardScheduled"]);
+}
 </script>