raven-client/ayanova/src/components/duration-control.vue

<template>
  <div>
    <span class="v-label theme--light ">
      {{ label }}
    </span>
    <template v-if="!readonly">
      <v-row class="my-n5">
        <v-col cols="3">
          <v-text-field
            v-show="showDays"
            ref="daysPicker"
            :value="splitSpan.days"
            @input="updateSpan()"
            :readonly="readonly"
            :disabled="disabled"
            :label="$ay.t('TimeSpanDays')"
            type="number"
            :data-cy="!!$ay.dev ? 'durationdays:' + testId : false"
          ></v-text-field>
        </v-col>
        <v-col cols="3">
          <v-text-field
            :value="splitSpan.hours"
            ref="hoursPicker"
            @input="updateSpan()"
            :readonly="readonly"
            :disabled="disabled"
            :label="$ay.t('TimeSpanHours')"
            type="number"
            :data-cy="!!$ay.dev ? 'durationhours:' + testId : false"
          ></v-text-field>
        </v-col>
        <v-col cols="3">
          <v-text-field
            :value="splitSpan.minutes"
            ref="minutesPicker"
            @input="updateSpan()"
            :readonly="readonly"
            :disabled="disabled"
            :label="$ay.t('TimeSpanMinutes')"
            type="number"
            :data-cy="!!$ay.dev ? 'durationminutes:' + testId : false"
          ></v-text-field>
        </v-col>
        <v-col cols="3">
          <v-text-field
            v-show="showSeconds"
            :value="splitSpan.seconds"
            ref="secondsPicker"
            @input="updateSpan()"
            :readonly="readonly"
            :disabled="disabled"
            :label="$ay.t('TimeSpanSeconds')"
            type="number"
            :data-cy="!!$ay.dev ? 'durationseconds:' + testId : false"
          ></v-text-field>
        </v-col>
      </v-row>
    </template>
    <template v-else>
      <v-text-field
        :value="readonlyFormat()"
        :label="label"
        readonly
        disabled
      ></v-text-field>
    </template>
    <p v-show="error" class="form__error v-messages theme--light error--text">
      {{ error }}
    </p>
  </div>
</template>
<script>
/*  Xeslint-disable */

/*https://alligator.io/vuejs/add-v-model-support/
  "TimeSpanDays": "days",
  "TimeSpanHours": "hours",
  "TimeSpanMinutes": "minutes",
  "TimeSpanSeconds": "seconds", */
//example serialized json TimeSpans
//seems to be DD.HH:MM:SS.ms at it's most characters
//two colons always with an optional period at each end to separate days and ms
//we don't give a shit about MS and can safely ignore them
//so just look for a period at the top and the rest is split by colons
//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,
    "error-messages": { type: Array, default: null },
    value: { type: String, default: null },
    readonly: { type: Boolean, default: false },
    disabled: { type: Boolean, default: false },
    error: {
      type: String,
      required: false
    },
    showSeconds: { type: Boolean, default: true },
    showDays: { type: Boolean, default: true },
    testId: String
  },
  computed: {
    splitSpan() {
      let vm = this;
      let theDays = 0;
      let theHours = 0;
      let theMinutes = 0;
      let theSeconds = 0;

      if (vm.value == null) {
        theDays = 0;
        theHours = 0;
        theMinutes = 0;
        theSeconds = 0;
      } else {
        let work = vm.value.split(":");
        //has days?
        if (work[0].includes(".")) {
          let dh = work[0].split(".");
          theDays = Number(dh[0]);
          theHours = Number(dh[1]);
        } else {
          theHours = Number(work[0]);
        }
        theMinutes = Number(work[1]);
        //has milliseconds? (ignore them)
        if (work[2].includes(".")) {
          let dh = work[2].split(".");
          theSeconds = Number(dh[0]);
        } else {
          theSeconds = Number(work[2]);
        }
      }

      return {
        days: theDays,
        hours: theHours,
        minutes: theMinutes,
        seconds: theSeconds
      };
    }
  },
  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.utcDateToShortDateLocalized(
        this.internalValue,
        this.timeZoneName,
        this.languageName,
        this.hour12
      );
    },
    updateSpan() {
      //{"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"}}
      // 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;
      let secondsValue = this.$refs.secondsPicker.$refs.input.value || 0;

      if (daysValue > 0) {
        ret = `${daysValue}.`;
      }

      ret += `${hoursValue}:${minutesValue}:${secondsValue}`;
      console.log("updateSpan, ret is ", ret);
      this.$emit("input", ret);
    }
  }
};
</script>