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

<template>
  <div>
    <span class="v-label theme--light ">
      {{ label }}
    </span>
    <template>
      <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="'durationdays:' + testId"
            :error="!!hasErrors"
          ></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="'durationhours:' + testId"
            :error="!!hasErrors"
          ></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="'durationminutes:' + testId"
            :error="!!hasErrors"
          ></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="'durationseconds:' + testId"
            :error="!!hasErrors"
          ></v-text-field>
        </v-col>
      </v-row>
    </template>
    <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>
/*  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 {
  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 },
    showSeconds: { type: Boolean, default: true },
    showDays: { type: Boolean, default: true },
    testId: { type: String, default: null }
  },
  computed: {
    hasErrors() {
      return this.errorMessages != null && this.errorMessages.length > 0;
    },
    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.errorMessages != null && this.errorMessages.length > 0) {
        ret += this.errorMessages.toString();
      }
      return ret;
    },
    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 = "";
      //NOTE: even though a user may type a text value into the input, because it's set to "Number"
      //it always has a value of zero if it's not a digit even though the user typed Q for example (firefox at least)
      //so no parsing here to handle weird entries is required AFAICT
      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}`;
      this.$emit("input", ret);
    }
  }
};
</script>