From 2e8d6945f740401cda5c73d52506875e36181949 Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Thu, 6 Feb 2020 21:04:00 +0000
Subject: [PATCH]

---
 ayanova/src/components/date-time-control.vue | 182 ++++---------------
 1 file changed, 32 insertions(+), 150 deletions(-)

diff --git a/ayanova/src/components/date-time-control.vue b/ayanova/src/components/date-time-control.vue
index 35f63742..599b88f7 100644
--- a/ayanova/src/components/date-time-control.vue
+++ b/ayanova/src/components/date-time-control.vue
@@ -21,7 +21,6 @@
             ></v-text-field>
           </template>
           <v-date-picker
-            ref="theDatePicker"
             v-model="dateOnly"
             @input="dlgdate = false"
             :locale="defaultLocale"
@@ -52,7 +51,6 @@
             ></v-text-field>
           </template>
           <v-time-picker
-            ref="theTimePicker"
             scrollable
             ampm-in-title
             :format="ampmFormat"
@@ -206,159 +204,43 @@ export default {
       }
     },
     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");
+      //The control needs this value in ISO 8601 format but adjusted to user time zone
+      //------------originally
+      // get() {
+      //   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 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();
+      // }
+
+      //-----------------
+      //expects just the hours minutes seconds portion: 18:18:49
+      //TODO: Need to convert to desired time zone first or the control will show the UTC time instead
+      get() {
+        if (this.value) {
+          console.log(this.value.substr(11, 8));
+          return this.value.substr(11, 8);
+        } else {
+          return "";
+        }
       },
       set(value) {
-        this.date = window.$gz.dayjs
-          .utc(this.dateOnly + " " + value)
-          .subtract(window.$gz.locale.format().timeZoneOffset, "hour")
-          .toISOString();
+        this.value = value;
       }
     }
   }
 };
 </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>
-// -->