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

<template>
  <v-row>
    <template v-if="!readonly">
      <v-col xs6>
        <v-dialog v-model="dlgdate" width="290px">
          <template v-slot:activator="{ on }">
            <v-text-field
              v-on="on"
              prepend-icon="$ayiCalendarAlt"
              @click:prepend="dlgdate = true"
              :value="dateValue"
              v-bind:label="label"
              v-bind:rules="rules"
              readonly
              :error="!!error"
              :data-cy="'dtfpick:' + testId"
            ></v-text-field>
          </template>
          <v-date-picker
            :value="dateValue"
            @input="updateDateValue"
            :locale="defaultLocale"
            :data-cy="'dpick:' + 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="dlgdate = false">{{
              $ay.t("OK")
            }}</v-btn>
          </v-date-picker>
        </v-dialog>
      </v-col>
      <v-col xs6>
        <v-dialog v-model="dlgtime" width="300px">
          <template v-slot:activator="{ on }">
            <v-text-field
              v-on="on"
              :value="readonlyTimeFormat()"
              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'"
            :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="setNow()">{{
              $ay.t("Now")
            }}</v-btn>
            <v-spacer></v-spacer>
            <v-btn text color="primary" @click="dlgtime = false">{{
              $ay.t("OK")
            }}</v-btn>
          </v-time-picker>
        </v-dialog>
      </v-col>
    </template>
    <template v-else>
      <v-text-field
        :value="readonlyFormat()"
        :label="label"
        readonly
        disabled
        prepend-icon="$ayiCalendarAlt"
      ></v-text-field>
      <p v-show="error" class="form__error v-messages theme--light error--text">
        {{ error }}
      </p>
    </template>
  </v-row>
</template>
<script>
/*  Xeslint-disable */
export default {
  data: () => ({
    dlgdate: false,
    dlgtime: false,
    //cache display format stuff
    timeZoneName: window.$gz.locale.getBrowserTimeZoneName(),
    languageName: window.$gz.locale.getBrowserLanguages(),
    hour12: window.$gz.locale.getHour12(),
    defaultLocale: window.$gz.locale.getBrowserFirstLanguage().split("-", 1)[0]
  }),
  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
    },
    testId: String
  },
  computed: {
    timeValue() {
      return window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
        this.value,
        this.timeZoneName
      );
    },
    dateValue() {
      return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
        this.value,
        this.timeZoneName
      );
    }
  },
  methods: {
    setNow() {
      let v = window.$gz.locale.nowUTC8601String().split("T")[1];
      this.updateTimeValue(v);
      this.dlgtime = false;
    },
    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,
        this.languageName,
        this.hour12
      );
    },
    readonlyTimeFormat() {
      return window.$gz.locale.utcDateToShortTimeLocalized(
        this.value,
        this.timeZoneName,
        this.languageName,
        this.hour12
      );
    },
    updateTimeValue(v) {
      this.updateValue(this.dateValue, v);
    },
    updateDateValue(v) {
      this.updateValue(v, this.timeValue);
      this.dlgdate = false;
    },
    updateValue(theDate, theTime) {
      let vm = this;

      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);
    }
  }
};
</script>