client/src/components/time-control.vue

@@ -0,0 +1,173 @@
+<template>
+  <div>
+    <v-row dense>
+      <template v-if="!readonly">
+        <template v-if="!$store.state.nativeDateTimeInput">
+          <v-col cols="12">
+            <v-dialog v-model="dlgtime" width="300px">
+              <template v-slot:activator="{ on }">
+                <v-text-field
+                  dense
+                  :value="readonlyFormat()"
+                  :label="label"
+                  :rules="rules"
+                  prepend-icon="$sockiClock"
+                  readonly
+                  :error="!!hasErrors"
+                  v-on="on"
+                  @click:prepend="dlgtime = true"
+                ></v-text-field>
+              </template>
+              <v-time-picker
+                dense
+                scrollable
+                ampm-in-title
+                :format="hour12 ? 'ampm' : '24hr'"
+                :value="timeValue"
+                @input="updateTimeValue"
+                ><v-btn text color="primary" @click="$emit('input', null)">{{
+                  $sock.t("Delete")
+                }}</v-btn>
+                <v-spacer></v-spacer>
+                <v-btn text color="primary" @click="setNow()">{{
+                  $sock.t("Now")
+                }}</v-btn>
+                <v-spacer></v-spacer>
+                <v-btn text color="primary" @click="dlgtime = false">{{
+                  $sock.t("OK")
+                }}</v-btn>
+              </v-time-picker>
+            </v-dialog>
+          </v-col>
+        </template>
+        <template v-if="$store.state.nativeDateTimeInput">
+          <v-col cols="6">
+            <v-text-field
+              ref="timeField"
+              dense
+              :value="timeValue"
+              :readonly="readonly"
+              :disabled="disabled"
+              :label="label"
+              type="time"
+              :data-cy="`${dataCy}:time`"
+              @change="updateTimeValue"
+            ></v-text-field>
+          </v-col>
+        </template>
+      </template>
+      <template v-else>
+        <v-col cols="12">
+          <v-text-field
+            dense
+            :value="readonlyFormat()"
+            :label="label"
+            prepend-icon="$sockiClock"
+            readonly
+          ></v-text-field>
+        </v-col>
+      </template>
+    </v-row>
+    <div class="v-messages theme--light error--text mt-n5" role="alert">
+      <div class="v-messages__wrapper">
+        <div class="v-messages__message">{{ allErrors() }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+//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 {
+  props: {
+    label: { type: String, default: null },
+    rules: { type: Array, default: undefined },
+    errorMessages: { type: Array, default: null },
+    value: { type: String, default: null },
+    readonly: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    dataCy: { type: String, default: null }
+  },
+  data: () => ({
+    dlgtime: false,
+    timeZoneName: window.$gz.locale.getResolvedTimeZoneName(),
+    languageName: window.$gz.locale.getResolvedLanguage(),
+    hour12: window.$gz.locale.getHour12()
+  }),
+  computed: {
+    hasErrors() {
+      return this.errorMessages != null && this.errorMessages.length > 0;
+    },
+    timeValue() {
+      return window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
+        this.value,
+        this.timeZoneName
+      );
+    },
+    dateValue() {
+      return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
+        this.value,
+        this.timeZoneName
+      );
+    }
+  },
+  methods: {
+    setNow() {
+      // const v = window.$gz.locale
+      //   .nowUTC8601String(this.timeZoneName)
+      //   .split("T")[1];
+
+      //now without the milliseconds
+      var nowNoMs = window.$gz.DateTime.local().set({ milliseconds: 0 });
+      const v = nowNoMs.toString().split("T")[1];
+
+      this.updateTimeValue(v);
+      this.dlgtime = false;
+    },
+    allErrors() {
+      let ret = "";
+
+      if (this.errorMessages != null && this.errorMessages.length > 0) {
+        ret += this.errorMessages.toString();
+      }
+      return ret;
+    },
+    readonlyFormat() {
+      return window.$gz.locale.utcDateToShortTimeLocalized(
+        this.value,
+        this.timeZoneName,
+        this.languageName,
+        this.hour12
+      );
+    },
+    updateTimeValue(v) {
+      this.updateValue(this.dateValue, v);
+    },
+    updateValue(theDate, theTime) {
+      const vm = this;
+
+      if (!theDate) {
+        const v = new Date();
+        const 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";
+      }
+      const ret = window.$gz.locale.localTimeDateStringToUTC8601String(
+        theDate + "T" + theTime,
+        vm.timeZoneName
+      );
+      vm.$emit("input", ret);
+    }
+  }
+};
+</script>