Time control ported over

ayanova/src/components/time-control.vue

@@ -1,25 +1,30 @@
 <template>
-  <div>
+  <v-row>
-    <v-row v-if="!readonly">
+    <template v-if="!readonly">
       <v-col cols="12">
-        <v-dialog v-model="dlgtime" persistent width="290px">
+        <v-dialog v-model="dlgtime" width="290px">
           <template v-slot:activator="{ on }">
             <v-text-field
               v-on="on"
-              v-model="formatTime"
+              :value="timeValue"
               v-bind:label="label"
               prepend-icon="$ayiClock"
               @click:prepend="dlgtime = true"
               readonly
               :error="!!error"
+              :data-cy="'ttfpick:' + testId"
             ></v-text-field>
           </template>
           <v-time-picker
             scrollable
             ampm-in-title
             :format="hour12 ? 'ampm' : '24hr'"
-            v-model="timeOnly"
+            :value="timeValue"
-          >
+            @input="updateTimeValue"
+            :data-cy="'tpick:' + testId"
+            ><v-btn text color="primary" @click="$emit('input', null)">{{
+              $ay.t("Delete")
+            }}</v-btn>
             <v-spacer></v-spacer>
             <v-btn text color="primary" @click="dlgtime = false">{{
               $ay.t("OK")
@@ -27,26 +32,27 @@
           </v-time-picker>
         </v-dialog>
       </v-col>
-    </v-row>
+    </template>
-    <v-text-field
+    <template v-else>
-      v-if="readonly"
+      <v-text-field
-      v-model="formatDateTime"
+        :value="readonlyFormat()"
-      v-bind:label="label"
+        :label="label"
-      prepend-icon="$ayiCalendarAlt"
+        prepend-icon="$ayiClock"
-      disabled
+        disabled
-    ></v-text-field>
+        readonly
-    <p v-show="error" class="form__error v-messages theme--light error--text">
+      ></v-text-field>
-      {{ error }}
+      <p v-show="error" class="form__error v-messages theme--light error--text">
-    </p>
+        {{ error }}
-  </div>
+      </p>
+    </template>
+  </v-row>
 </template>
 <script>
 /*  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 */
+//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 {
   data: () => ({
-    date: null,
-    oldDate: null,
     dlgtime: false,
     //cache display format stuff
     timeZoneName: window.$gz.locale.getBrowserTimeZoneName(),
@@ -57,33 +63,42 @@ export default {
   props: {
     label: String,
     rules: Array,
+    "error-messages": { type: Array, default: null },
     value: String,
     readonly: { type: Boolean, default: false },
+    disabled: { 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
-      let hasChanged = false;
-      if (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() {
+    testId: String
-      this.date = this.value; //always in UTC
-    }
   },
   computed: {
-    formatDateTime() {
+    timeValue() {
+      return window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
+        this.value,
+        this.timeZoneName
+      );
+    },
+    dateValue() {
+      return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
+        this.value,
+        this.timeZoneName
+      );
+    }
+  },
+  methods: {
+    allErrors() {
+      let ret = "";
+      if (this.error != null) {
+        ret = this.error;
+      }
+      if (this.errorMessages != null && this.errorMessages.length > 0) {
+        ret += this.errorMessages.toString();
+      }
+      return ret;
+    },
+    readonlyFormat() {
       return window.$gz.locale.utcDateToShortDateAndTimeLocalized(
         this.value,
         this.timeZoneName,
@@ -91,65 +106,35 @@ export default {
         this.hour12
       );
     },
-    formatTime() {
+    updateTimeValue(v) {
-      return window.$gz.locale.utcDateToShortTimeLocalized(
+      this.updateValue(this.dateValue, v);
-        this.value,
+    },
-        this.timeZoneName,
+    updateValue(theDate, theTime) {
-        this.languageName,
+      let vm = this;
-        this.hour12
+
+      if (!theDate) {
+        let v = new Date();
+        let fullYear = v.getFullYear();
+        let fullMonth = v.getMonth() + 1;
+        if (fullMonth < 10) {
+          fullMonth = "0" + fullMonth.toString();
+        }
+        let fullDay = v.getDate();
+        if (fullDay < 10) {
+          fullDay = "0" + fullDay.toString();
+        }
+        theDate = fullYear + "-" + fullMonth + "-" + fullDay;
+      }
+
+      if (!theTime) {
+        theTime = "00:00:00";
+      }
+
+      let ret = window.$gz.locale.localTimeDateStringToUTC8601String(
+        theDate + "T" + theTime,
+        vm.timeZoneName
       );
-    },
+      vm.$emit("input", ret);
-    dateOnly: {
-      get() {
-        //return date only portion converted to local working time zone: YYYY-MM-DD
-        return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
-          this.value,
-          this.timeZoneName
-        );
-      },
-      set(value) {
-        //2017-08-15T12:10:34.4443084+03:00
-        let TimePortion = this.timeOnly;
-        if (!TimePortion) {
-          TimePortion = "00:00:00";
-        }
-        this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
-          value + "T" + TimePortion,
-          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() {
-        return window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
-          this.value,
-          this.timeZoneName
-        );
-      },
-      set(value) {
-        let DatePortion = this.dateOnly;
-        if (!DatePortion) {
-          let v = new Date();
-          let fullYear = v.getFullYear();
-          let fullMonth = v.getMonth() + 1;
-          if (fullMonth < 10) {
-            fullMonth = "0" + fullMonth.toString();
-          }
-          let fullDay = v.getDate();
-          if (fullDay < 10) {
-            fullDay = "0" + fullDay.toString();
-          }
-
-          DatePortion = fullYear + "-" + fullMonth + "-" + fullDay;
-        }
-
-        this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
-          DatePortion + "T" + value,
-          this.timeZoneName
-        );
-      }
     }
   }
 };