From 0eb4c481ba5904c6a5fcefd589d0b782073948e0 Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Tue, 26 Nov 2019 21:16:14 +0000
Subject: [PATCH]

---
 ayanova/src/components/time-control.vue | 285 ++++++++++++++++++++++++
 ayanova/src/main.js                     |   2 +
 2 files changed, 287 insertions(+)
 create mode 100644 ayanova/src/components/time-control.vue

diff --git a/ayanova/src/components/time-control.vue b/ayanova/src/components/time-control.vue
new file mode 100644
index 00000000..c0e8e367
--- /dev/null
+++ b/ayanova/src/components/time-control.vue
@@ -0,0 +1,285 @@
+<template>
+  <div>
+    <v-row row wrap v-if="!readonly">
+      <v-col cols="12">
+        <v-dialog v-model="dlgtime" persistent width="290px">
+          <template v-slot:activator="{ on }">
+            <v-text-field
+              v-on="on"
+              v-model="formatTime"
+              label
+              prepend-icon="fa-clock"
+              @click:prepend="dlgtime = true"
+              readonly
+              :error="!!error"
+            ></v-text-field>
+          </template>
+          <v-time-picker scrollable ampm-in-title v-model="timeOnly">
+            <v-spacer></v-spacer>
+            <v-btn text color="primary" @click="dlgtime = false">OK</v-btn>
+          </v-time-picker>
+        </v-dialog>
+      </v-col>
+    </v-row>
+    <v-text-field
+      v-if="readonly"
+      v-model="formatDateTime"
+      v-bind:label="label"
+      prepend-icon="fa-calendar-alt"
+      disabled
+    ></v-text-field>
+    <p v-show="error" class="form__error v-messages theme--light error--text">
+      {{ error }}
+    </p>
+  </div>
+</template>
+<script>
+/*  Xeslint-disable */
+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 }),
+  props: {
+    label: String,
+    rules: Array,
+    value: String,
+    readonly: { type: Boolean, default: false },
+    error: {
+      type: String,
+      required: false
+    }
+  },
+  watch: {
+    date() {
+      //this tortuous fuckery is required so that the input and change events only fire on a real change, not initial page load
+      //also it shouldn't signal a change if the values are the same and nothing was effectively changed
+      var hasChanged = false;
+      if (this.oldDate != null && this.date != this.oldDate) {
+        hasChanged = true;
+      }
+      this.oldDate = this.date;
+      if (hasChanged) {
+        this.$emit("input", this.date); //always in UTC
+        this.$emit("change", this.date); //always in UTC
+      }
+    },
+    value() {
+      this.date = this.value; //always in UTC
+    }
+  },
+  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)
+        : "";
+    },
+    formatTime() {
+      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();
+      }
+    },
+    timeOnly: {
+      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;
+      },
+      set(value) {
+        this.date = window.$gz.dayjs
+          .utc(this.dateOnly + " " + value)
+          .subtract(window.$gz.locale.format().timeZoneOffset, "hour")
+          .toISOString();
+      }
+    }
+  }
+};
+</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>
+// -->
diff --git a/ayanova/src/main.js b/ayanova/src/main.js
index acad4dce..443a2254 100644
--- a/ayanova/src/main.js
+++ b/ayanova/src/main.js
@@ -33,6 +33,7 @@ import "@/assets/css/main.css";
 //controls
 import dateTimeControl from "./components/date-time-control.vue";
 import dateControl from "./components/date-control.vue";
+import timeControl from "./components/time-control.vue";
 import tagPicker from "./components/tag-picker.vue";
 import customFieldsControl from "./components/custom-fields-control.vue";
 import errorhandler from "./api/errorhandler";
@@ -165,6 +166,7 @@ Vue.filter("boolastext", function vueFilterBoolAsText(value) {
 //
 Vue.component("gz-date-time-picker", dateTimeControl);
 Vue.component("gz-date-picker", dateControl);
+Vue.component("gz-time-picker", timeControl);
 Vue.component("gz-tag-picker", tagPicker);
 Vue.component("gz-custom-fields", customFieldsControl);