ayanova/src/components/date-time-control.vue

@@ -4,8 +4,8 @@
       <v-col cols="6">
         <v-text-field
           ref="dateField"
-          :value="dateControlFormat()"
-          @input="handleDateInput"
+          :value="splitValue.date"
+          @input="updateValue()"
           :readonly="readonly"
           :disabled="disabled"
           :label="label"
@@ -18,8 +18,8 @@
       <v-col cols="6">
         <v-text-field
           ref="timeField"
-          :value="timeControlFormat()"
-          @input="handleTimeInput"
+          :value="splitValue.time"
+          @input="updateValue()"
           :readonly="readonly"
           :disabled="disabled"
           type="time"
@@ -43,15 +43,10 @@
 export default {
   data() {
     return {
-      internalValue: null,
       timeZoneName: window.$gz.locale.getBrowserTimeZoneName()
     };
   },
-  watch: {
-    value(val) {
-      this.internalValue = val;
-    }
-  },
+
   props: {
     label: String,
     rules: Array,
@@ -65,6 +60,20 @@ export default {
     },
     testId: String
   },
+  computed: {
+    splitValue() {
+      return {
+        date: window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
+          this.value,
+          this.timeZoneName
+        ),
+        time: window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
+          this.value,
+          this.timeZoneName
+        )
+      };
+    }
+  },
   methods: {
     allErrors() {
       let ret = "";
@@ -84,40 +93,20 @@ export default {
         this.hour12
       );
     },
-    dateControlFormat() {
-      //yyyy-mm-dd
-      return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
-        this.internalValue,
-        this.timeZoneName
-      );
-    },
-    timeControlFormat() {
-      //hh:mm:ss in 24 hour format
-      return window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
-        this.internalValue,
-        this.timeZoneName
-      );
-    },
-    handleDateInput(value) {
-      //combine the time and dates into a consolidated value
-      let TimePortion = window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
-        this.internalValue,
-        this.timeZoneName
-      );
-      if (!TimePortion) {
-        TimePortion = "00:00:00";
-      }
-      let newValue = window.$gz.locale.localTimeDateStringToUTC8601String(
-        value + "T" + TimePortion,
-        this.timeZoneName
-      );
-      this.$emit("input", newValue);
-    },
-    handleTimeInput(value) {
-      let DatePortion = window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
-        this.internalValue,
-        this.timeZoneName
+    updateValue() {
+      let vm = this;
+
+      let dateValue = vm.$refs.dateField.$refs.input.value;
+      console.log(
+        "date-time-control::updateValue var datevalue is:",
+        dateValue
       );
+      // let DatePortion = window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
+      //   dateValue,
+      //   vm.timeZoneName
+      // );
+      let DatePortion = dateValue;
+
       if (!DatePortion) {
         let v = new Date();
         let fullYear = v.getFullYear();
@@ -131,11 +120,32 @@ export default {
         }
         DatePortion = fullYear + "-" + fullMonth + "-" + fullDay;
       }
-      let newValue = window.$gz.locale.localTimeDateStringToUTC8601String(
-        DatePortion + "T" + value,
+
+      let timeValue = vm.$refs.timeField.$refs.input.value;
+      console.log(
+        "date-time-control::updateValue var timevalue is:",
+        timeValue
+      );
+      // let TimePortion = window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
+      //   timeValue,
+      //   vm.timeZoneName
+      // );
+      let TimePortion = timeValue;
+      if (!TimePortion) {
+        TimePortion = "00:00:00";
+      }
+
+      // console.log(
+      //   "date-time-control::updateValue var timeportion is:",
+      //   TimePortion
+      // );
+
+      let ret = window.$gz.locale.localTimeDateStringToUTC8601String(
+        DatePortion + "T" + TimePortion,
         this.timeZoneName
       );
-      this.$emit("input", newValue);
+      console.log("date-time-control::updateValue emitting:", ret);
+      this.$emit("input", ret);
     }
   }
 };

ayanova/src/components/duration-control.vue

@@ -86,38 +86,6 @@
 //maybe split by colon first then subsplit first and last elements into days and MS
 //{"data":{"testTSDaysWMS":"22.10:15:22.0330000","testTSHMS":"05:16:33","testTS_DHMS":"5.10:15:33","testTS_MS":"00:15:33","testTS_S":"00:00:33","testTS_D":"22.00:00:00"}}
 export default {
-  // created() {
-  //   console.log("created, value is:", this.value);
-  //   this.handleUpdate(this.value);
-  // },
-  // beforeMount() {
-  //   console.log("beforeMount, value is:", this.value);
-  // },
-  // mounted() {
-  //   console.log("mounted, value is:", this.value);
-  // },
-  // beforeUpdate() {
-  //   console.log("beforeUpdate, value is:", this.value);
-  // },
-  // updated() {
-  //   console.log("updated, value is:", this.value);
-  // },
-  // data() {
-  //   return {
-  //     internalValue: null,
-  //     days: 0,
-  //     hours: 0,
-  //     minutes: 0,
-  //     seconds: 0
-  //   };
-  // },
-  // watch: {
-  //   value(val) {
-  //     console.log("Val is ", val);
-  //     //   this.internalValue = val;
-  //     this.handleUpdate(val);
-  //   }
-  // },
   props: {
     label: String,
     rules: Array,
@@ -198,7 +166,6 @@ export default {
       // DD.HH:MM:SS.ms
       let ret = "";
       let vm = this;
-      //this.$refs.daysPicker.$refs.input.value
       let daysValue = this.$refs.daysPicker.$refs.input.value || 0;
       let hoursValue = this.$refs.hoursPicker.$refs.input.value || 0;
       let minutesValue = this.$refs.minutesPicker.$refs.input.value || 0;
@@ -209,7 +176,6 @@ export default {
       }
 
       ret += `${hoursValue}:${minutesValue}:${secondsValue}`;
-      console.log("updateSpan, ret is ", ret);
       this.$emit("input", ret);
     }
   }