From c7a9cdc8ee958be06a5582eeeb352aabcedf94be Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Fri, 7 Feb 2020 00:10:31 +0000
Subject: [PATCH]

---
 ayanova/src/components/date-time-control.vue |  63 +----
 ayanova/src/components/time-control.vue      | 242 ++++---------------
 2 files changed, 46 insertions(+), 259 deletions(-)

diff --git a/ayanova/src/components/date-time-control.vue b/ayanova/src/components/date-time-control.vue
index c19d9a3b..9e9ee277 100644
--- a/ayanova/src/components/date-time-control.vue
+++ b/ayanova/src/components/date-time-control.vue
@@ -79,20 +79,6 @@
 <script>
 /*  Xeslint-disable */
 export default {
-  // created() {
-  //   debugger;
-  // },
-  beforeCreate() {
-    //check pre-requisites exist just in case
-    if (window.$gz.errorHandler.devMode()) {
-      if (!window.$gz.dayjs) {
-        throw "DateTimeControl: the DayJS library is required and missing";
-      }
-      if (!window.$gz.locale) {
-        throw "DateTimeControl: $gz.locale is required and missing";
-      }
-    }
-  },
   data: () => ({
     date: null,
     oldDate: null,
@@ -146,12 +132,6 @@ export default {
         this.languageName,
         this.hour12
       );
-      // return this.value
-      //   ? window.$gz.dayjs
-      //       .utc(this.value)
-      //       .add(window.$gz.locale.format().timeZoneOffset, "hour")
-      //       .format(window.$gz.locale.format().shortDateAndTime)
-      //   : "";
     },
     formatDate() {
       return window.$gz.locale.utcDateToShortDateLocalized(
@@ -159,12 +139,6 @@ export default {
         this.timeZoneName,
         this.languageName
       );
-      // return this.value
-      //   ? window.$gz.dayjs
-      //       .utc(this.value)
-      //       .add(window.$gz.locale.format().timeZoneOffset, "hour")
-      //       .format(window.$gz.locale.format().shortDate)
-      //   : "";
     },
     formatTime() {
       return window.$gz.locale.utcDateToShortTimeLocalized(
@@ -173,47 +147,14 @@ export default {
         this.languageName,
         this.hour12
       );
-      // return this.value
-      //   ? window.$gz.dayjs
-      //       .utc(this.value)
-      //       .add(window.$gz.locale.format().timeZoneOffset, "hour")
-      //       .format(window.$gz.locale.format().shortTime)
-      //   : "";
     },
     dateOnly: {
-      //----------------------------
-      // get() {
-      //   //TODO: this will likely need an improvement for forms where there should be an automatic pre-set time chosen like workorder labor;
-      //   var defaultDateString = window.$gz
-      //     .dayjs()
-      //     .utc()
-      //     .add(window.$gz.locale.format().timeZoneOffset, "hour")
-      //     .format("YYYY-MM-DD");
-
-      //   return this.value
-      //     ? window.$gz.dayjs
-      //         .utc(this.value)
-      //         .add(window.$gz.locale.format().timeZoneOffset, "hour")
-      //         .format("YYYY-MM-DD")
-      //     : defaultDateString;
-      // },
-      // set(value) {
-      //   this.date = window.$gz.dayjs
-      //     .utc(value + " " + this.timeOnly)
-      //     .subtract(window.$gz.locale.format().timeZoneOffset, "hour")
-      //     .toISOString();
-      // }
-      //---------------------------
       get() {
-        //TODO: return date only portion converted to local working time zone: YYYY-MM-DD
-
-        var v = window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
+        //return date only portion converted to local working time zone: YYYY-MM-DD
+        return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
           this.value,
           this.timeZoneName
         );
-        console.log(this.value);
-        console.log(v);
-        return v;
       },
       set(value) {
         this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
diff --git a/ayanova/src/components/time-control.vue b/ayanova/src/components/time-control.vue
index 290653a5..529a1dc1 100644
--- a/ayanova/src/components/time-control.vue
+++ b/ayanova/src/components/time-control.vue
@@ -44,23 +44,15 @@
 /*  Xeslint-disable */
 //******************************** NOTE: this control also captures the date even though it's time only, this is an intentional design decision to support field change to date or date AND time and is considered a display issue */
 export default {
-  beforeCreate() {
-    //debugger;
-    //this is a nothing line as a test
-    //check pre-requisites exist just in case
-    if (window.$gz.errorHandler.devMode()) {
-      if (!window.$gz.dayjs) {
-        throw "DateTimeControl: the DayJS library is required and missing";
-      }
-      if (!window.$gz.locale) {
-        throw "DateTimeControl: $gz.locale is required and missing";
-      }
-    }
-  },
   data: () => ({
     date: null,
     oldDate: null,
     dlgtime: false,
+    //cache display format stuff
+    timeZoneName: window.$gz.locale.getTimeZoneName(),
+    languageName: window.$gz.locale.getBrowserLanguages(),
+    hour12: window.$gz.store.state.locale.hour12,
+    defaultLocale: window.$gz.locale.getBrowserFirstLanguage().split("-", 1)[0],
     ampmFormat: window.$gz.locale.format().hour12 ? "ampm" : "24hr"
   }),
   props: {
@@ -98,206 +90,60 @@ export default {
   },
   computed: {
     formatDateTime() {
-      return this.value
-        ? window.$gz.dayjs
-            .utc(this.value)
-            .add(window.$gz.locale.format().timeZoneOffset, "hour")
-            .format(window.$gz.locale.format().shortDateAndTime)
-        : "";
-    },
-    formatDate() {
-      return this.value
-        ? window.$gz.dayjs
-            .utc(this.value)
-            .add(window.$gz.locale.format().timeZoneOffset, "hour")
-            .format(window.$gz.locale.format().shortDate)
-        : "";
+      return window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+        this.value,
+        this.timeZoneName,
+        this.languageName,
+        this.hour12
+      );
     },
+    // formatDate() {
+    //   return this.value
+    //     ? window.$gz.dayjs
+    //         .utc(this.value)
+    //         .add(window.$gz.locale.format().timeZoneOffset, "hour")
+    //         .format(window.$gz.locale.format().shortDate)
+    //     : "";
+    // },
     formatTime() {
-      return this.value
-        ? window.$gz.dayjs
-            .utc(this.value)
-            .add(window.$gz.locale.format().timeZoneOffset, "hour")
-            .format(window.$gz.locale.format().shortTime)
-        : "";
+      return window.$gz.locale.utcDateToShortTimeLocalized(
+        this.value,
+        this.timeZoneName,
+        this.languageName,
+        this.hour12
+      );
     },
     dateOnly: {
       get() {
-        //TODO: this will likely need an improvement for forms where there should be an automatic pre-set time chosen like workorder labor;
-        var defaultDateString = window.$gz
-          .dayjs()
-          .utc()
-          .add(window.$gz.locale.format().timeZoneOffset, "hour")
-          .format("YYYY-MM-DD");
-
-        return this.value
-          ? window.$gz.dayjs
-              .utc(this.value)
-              .add(window.$gz.locale.format().timeZoneOffset, "hour")
-              .format("YYYY-MM-DD")
-          : defaultDateString;
+        //return date only portion converted to local working time zone: YYYY-MM-DD
+        return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
+          this.value,
+          this.timeZoneName
+        );
       },
       set(value) {
-        this.date = window.$gz.dayjs
-          .utc(value + " " + this.timeOnly)
-          .subtract(window.$gz.locale.format().timeZoneOffset, "hour")
-          .toISOString();
+        this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
+          value + "T" + this.timeOnly,
+          this.timeZoneName
+        );
       }
     },
     timeOnly: {
+      //expects just the hours minutes seconds portion: 18:18:49
+      //Needs to convert into and out of the desired time zone or the control will show the UTC time instead
       get() {
-        //TODO: this will likely need an improvement for forms where there should be an automatic pre-set time chosen like workorder labor;
-        var defaultTimeString = window.$gz.dayjs
-          .utc()
-          .add(window.$gz.locale.format().timeZoneOffset, "hour")
-          .format("HH:mm:ss");
-
-        return this.value
-          ? window.$gz.dayjs
-              .utc(this.value)
-              .add(window.$gz.locale.format().timeZoneOffset, "hour")
-              .format("HH:mm:ss")
-          : defaultTimeString;
+        return window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
+          this.value,
+          this.timeZoneName
+        );
       },
       set(value) {
-        this.date = window.$gz.dayjs
-          .utc(this.dateOnly + " " + value)
-          .subtract(window.$gz.locale.format().timeZoneOffset, "hour")
-          .toISOString();
+        this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
+          this.dateOnly + "T" + value,
+          this.timeZoneName
+        );
       }
     }
   }
 };
 </script>
-
-//
-<!--
-
-// NOTE: this component was created based on a reddit query and answer below.
-// Note also that the date and time coming in to this component are expected to be an ISO8601 format date and time string in UTC
-// and it's kept in UTC and only localized temporarily for display and selection and update after selection in the date and time picker components
-
-// re: combined date/time component
-
-// from theRetrograde sent 4 hours ago
-
-// We are using this in a dynamic form that will display a textbox, when the user clicks the textbox a modal opens to show the pickers. 
-// I'm not sure why it wouldn't be rendering initially.
-// Here are the props we pass to the component, maybe this will help:
-
-// <template v-else-if="get_field_type(key) == 'datetime'">
-//                     <AppDateTimePicker 
-//                       v-model="editedItem[key]"
-//                       v-bind:key="key"
-//                       v-bind:readonly="is_readonly(key)"
-//                       v-bind:label="pretty_field(key)">
-//                     </AppDateTimePicker>
-//              </template>
-
-
-// <template>
-//   <div>
-//     <v-layout row wrap v-if="!readonly">
-//       <v-flex xs6>
-//         <v-dialog v-model="modal" persistent lazy full-width width="290px">
-//           <v-text-field
-//             slot="activator"
-//             v-model="formatDate"
-//             v-bind:label="label"
-//             prepend-icon="event"
-//             readonly
-//           ></v-text-field>
-//           <v-date-picker v-model="dateOnly" @input="modal = false">
-//             <v-spacer></v-spacer>
-//             <v-btn flat color="primary" @click="modal = false">Close</v-btn>
-//           </v-date-picker>
-//         </v-dialog>
-//       </v-flex>
-//       <v-flex xs6>
-//         <v-dialog v-model="modal2" persistent lazy full-width width="290px">
-//           <v-text-field
-//             slot="activator"
-//             v-model="formatTime"
-//             label
-//             prepend-icon="access_time"
-//             readonly
-//           ></v-text-field>
-//           <v-time-picker v-model="timeOnly">
-//             <v-spacer></v-spacer>
-//             <v-btn flat color="primary" @click="modal2 = false">OK</v-btn>
-//           </v-time-picker>
-//         </v-dialog>
-//       </v-flex>
-//     </v-layout>
-//     <v-text-field
-//       v-else
-//       v-model="formatDateTime"
-//       v-bind:label="label"
-//       prepend-icon="event"
-//       disabled
-//     ></v-text-field>
-//   </div>
-// </template> 
-
-// // <script>
-// // export default {
-// //   data: () => ({ date: null, modal: false, modal2: false }),
-// //   props: { label: String, value: String, readonly: Boolean },
-// //   watch: {
-// //     date() {
-// //       this.$emit("input", this.date);
-// //     },
-// //     value() {
-// //       this.date = this.value;
-// //     }
-// //   },
-// //   computed: {
-// //     formatDateTime() {
-// //       let momentObj = this.$moment.utc();
-// //       if (this.value) {
-// //         momentObj = this.$moment.utc(this.value);
-// //       }
-// //       return momentObj.local().format("dddd MM/DD/YYYY h:mm a");
-// //     },
-// //     formatDate() {
-// //       let momentObj = this.$moment.utc();
-// //       if (this.value) {
-// //         momentObj = this.$moment.utc(this.value);
-// //       }
-// //       return momentObj.local().format("dddd MM/DD/YYYY");
-// //     },
-// //     dateOnly: {
-// //       get() {
-// //         let momentObj = this.$moment.utc();
-// //         if (this.value) {
-// //           momentObj = this.$moment.utc(this.value);
-// //         }
-// //         return momentObj.local().format("YYYY-MM-DD");
-// //       },
-// //       set(value) {
-// //         this.date = value + " " + this.timeOnly;
-// //       }
-// //     },
-// //     timeOnly: {
-// //       get() {
-// //         let momentObj = this.$moment.utc();
-// //         if (this.value) {
-// //           momentObj = this.$moment.utc(this.value);
-// //         }
-// //         return momentObj.local().format("HH:mm:ss");
-// //       },
-// //       set(value) {
-// //         this.date = this.dateOnly + " " + value;
-// //       }
-// //     },
-// //     formatTime() {
-// //       let momentObj = this.$moment.utc();
-// //       if (this.value) {
-// //         momentObj = this.$moment.utc(this.value);
-// //       }
-// //       return momentObj.local().format("h:mm a");
-// //     }
-// //   }
-// // };
-// // </script>
-// -->