@kalisio/kdk 2.0.0 → 2.1.0

package/core/client/components/time/KAbsoluteTimeRange.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="row justify-start items-center q-pl-sm q-pr-sm no-wrap">
+    <div id="start-date" class="k-datetime text-body2">
+      {{ formattedStartDate }}
+      <q-tooltip>{{ $t('KAbsoluteTimeRange.PICK_START_DATE_LABEL') }}</q-tooltip>
+      <q-popup-proxy ref="popup" transition-show="scale" transition-hide="scale">
+        <q-date
+          id="start-date-popup"
+          v-model="startDate"
+          :mask="dateFormat"
+          :title="startDate"
+          :options="checkStartDate"
+          @update:model-value="onTimeRangeChanged"
+        />
+      </q-popup-proxy>
+    </div>
+    <div>&nbsp;</div>
+    <div id="start-time" class="k-datetime text-body2">
+      {{ formattedStartTime }}
+      <q-tooltip>{{ $t('KAbsoluteTimeRange.PICK_START_TIME_LABEL') }}</q-tooltip>
+      <q-popup-proxy ref="popup" transition-show="scale" transition-hide="scale">
+        <q-time
+          id="start-time-popup"
+          v-model="startTime"
+          :mask="hourFormat"
+          :options="checkStartTime"
+          @update:model-value="onTimeRangeChanged"
+        />
+      </q-popup-proxy>
+    </div>
+    <div>&nbsp;-&nbsp;</div>
+    <div id="end-date" class="k-datetime text-body2">
+      {{ formattedEndDate }}
+      <q-tooltip>{{ $t('KAbsoluteTimeRange.PICK_END_DATE_LABEL') }}</q-tooltip>
+      <q-popup-proxy ref="popup" transition-show="scale" transition-hide="scale">
+        <q-date
+          id="end-date-popup"
+          v-model="endDate"
+          :mask="dateFormat"
+          :title="endDate"
+          :options="checkEndDate"
+          @update:model-value="onTimeRangeChanged"
+        />
+      </q-popup-proxy>
+    </div>
+    <div>&nbsp;</div>
+    <div id="end-time" class="k-datetime text-body2">
+      {{ formattedEndTime }}
+      <q-tooltip>{{ $t('KAbsoluteTimeRange.PICK_END_TIME_LABEL') }}</q-tooltip>
+      <q-popup-proxy ref="popup" transition-show="scale" transition-hide="scale">
+        <q-time
+          id="end-time-popup"
+          v-model="endTime"
+          :mask="hourFormat"
+          :options="checkEndTime"
+          @update:model-value="onTimeRangeChanged"
+        />
+      </q-popup-proxy>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import { Time } from '../../time'
+
+const dateFormat = 'DD/MM/YYYY'
+const hourFormat = 'HH:mm'
+const checkDateFormat = 'YYYY/MM/DD'
+
+// Convert from moment date/time to quasar format in local time zone
+function toQuasarDate (date) {
+  return Time.convertToLocal(date).format(dateFormat)
+}
+function toQuasarTime (date) {
+  return Time.convertToLocal(date).format(hourFormat)
+}
+// Convert from quasar format in local time zone to moment date/time
+function fromQuasarDate (date, format) {
+  return (Time.getFormatTimezone()
+    ? moment.tz(date, format, Time.getFormatTimezone())
+    : moment(date, format))
+}
+function fromQuasarTime (time, format) {
+  return (Time.getFormatTimezone()
+    ? moment.tz(time, format, Time.getFormatTimezone())
+    : moment(time, format))
+}
+
+export default {
+  name: 'k-absolute-time-range',
+  props: {
+    dense: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    const { start, end } = Time.getRange()
+    return {
+      dateFormat,
+      hourFormat,
+      checkDateFormat,
+      startDate: toQuasarDate(start),
+      startTime: toQuasarTime(start),
+      endDate: toQuasarDate(end),
+      endTime: toQuasarTime(end)
+    }
+  },
+  computed: {
+    start () {
+      const date = fromQuasarDate(this.startDate, this.dateFormat)
+      const time = fromQuasarTime(this.startTime, this.hourFormat)
+      date.set({ hour: time.hour(), minute: time.minute() })
+      return date.utc()
+    },
+    formattedStartDate () {
+      return Time.format(this.start, 'date.short')
+    },
+    formattedStartTime () {
+      return Time.format(this.start, 'time.long')
+    },
+    end () {
+      const date = fromQuasarDate(this.endDate, this.dateFormat)
+      const time = fromQuasarTime(this.endTime, this.hourFormat)
+      date.set({ hour: time.hour(), minute: time.minute() })
+      return date.utc()
+    },
+    formattedEndDate () {
+      return Time.format(this.end, 'date.short')
+    },
+    formattedEndTime () {
+      return Time.format(this.end, 'time.long')
+    }
+  },
+  methods: {
+    checkStartDate (date) {
+      date = fromQuasarDate(date, this.checkDateFormat)
+      const time = fromQuasarTime(this.startTime, this.hourFormat)
+      date.set({ hour: time.hour(), minute: time.minute() })
+      return date.utc().isBefore(this.end)
+    },
+    checkStartTime (hour, minute) {
+      const date = fromQuasarDate(this.startDate, this.dateFormat)
+      date.set({ hour, minute })
+      return date.utc().isBefore(this.end)
+    },
+    checkEndDate (date) {
+      date = fromQuasarDate(date, this.checkDateFormat)
+      const time = fromQuasarTime(this.endTime, this.hourFormat)
+      date.set({ hour: time.hour(), minute: time.minute() })
+      return date.utc().isAfter(this.start)
+    },
+    checkEndTime (hour, minute) {
+      const date = fromQuasarDate(this.endDate, this.dateFormat)
+      date.set({ hour, minute })
+      return date.utc().isAfter(this.start)
+    },
+    onTimeRangeChanged () {
+      Time.patchRange({ start: this.start, end: this.end })
+    },
+    onTimeRangeUpdated () {
+      const { start, end } = Time.getRange()
+      this.startDate = toQuasarDate(start)
+      this.startTime = toQuasarTime(start)
+      this.endDate = toQuasarDate(end)
+      this.endTime = toQuasarTime(end)
+    }
+  },
+  created () {
+    this.$events.on('time-range-changed', () => this.onTimeRangeUpdated())
+  },
+  beforeUnmount () {
+    this.$events.off('time-range-changed', () => this.onTimeRangeUpdated())
+  }
+}
+</script>
+
+<style lang="scss">
+  .k-datetime:hover {
+    cursor: pointer;
+  }
+</style>

package/core/client/components/time/KDate.vue

@@ -0,0 +1,75 @@
+<template>
+  <q-btn
+    id="date-button"
+    :icon="icon"
+    :label="label"
+    flat
+    no-caps
+    :disable="disabled"
+    :dense="dense"
+  >
+    <q-popup-proxy>
+      <q-date
+        id="date-picker"
+        v-model="model"
+        v-bind="picker"
+      />
+    </q-popup-proxy>
+  </q-btn>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import moment from 'moment'
+import { computed } from 'vue'
+
+// Props
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: () => null
+  },
+  options: {
+    type: Object,
+    default: () => {}
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  dense: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Emits
+const emit = defineEmits(['update:modelValue'])
+
+// Data
+const mask = 'YYYY/MM/DD'
+
+// Computed
+const icon = computed(() => {
+  return _.get(props.options, 'icon')
+})
+const label = computed(() => {
+  if (props.modelValue) return moment(props.modelValue, mask).format(format.value)
+  return _.get(props.options, 'helper')
+})
+const model = computed({
+  get: function () {
+    return props.modelValue
+  },
+  set: function (value) {
+    emit('update:modelValue', value)
+  }
+})
+const format = computed(() => {
+  return _.get(props.options, 'format', mask)
+})
+const picker = computed(() => {
+  return _.merge({}, _.get(props.options, 'picker'), { mask })
+})
+
+</script>

package/core/client/components/time/KDateTime.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="row items-center no-wrap">
+    <!-- Date -->
+    <KDate
+      v-model="dateModel"
+      :options="dateOptions"
+      :disabled="disabled"
+      :dense="dense"
+    />
+    <!-- Time -->
+    <KTime
+      v-model="timeModel"
+      :options="timeOptions"
+      :disabled="disabled || dateTime === null"
+      :dense="dense"
+    />
+  </div>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import moment from 'moment'
+import { ref, computed, watch } from 'vue'
+import KDate from './KDate.vue'
+import KTime from './KTime.vue'
+
+// Props
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: () => null,
+    validator: (value) => {
+      if (value) return moment(value).isValid()
+      return true
+    }
+  },
+  options: {
+    type: Object,
+    default: () => {}
+  },
+  format: {
+    type: String,
+    default: 'YYYY/MM/DD HH:mm',
+    validator: (value) => {
+      return !_.isEmpty(value) && value.split(' ').length === 2
+    }
+  },
+  min: {
+    type: String,
+    default: () => null,
+    validator: (value) => {
+      if (value) return moment(value).isValid()
+      return true
+    }
+  },
+  max: {
+    type: String,
+    default: () => null,
+    validator: (value) => {
+      if (value) return moment(value).isValid()
+      return true
+    }
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  dense: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Emits
+const emit = defineEmits(['update:modelValue'])
+
+// Data
+const dateTime = ref(null)
+const minDateTime = ref(null)
+const maxDateTime = ref(null)
+const dateMask = 'YYYY/MM/DD'
+const timeMask = 'HH:mm:ss'
+
+// Computed
+const dateModel = computed({
+  get: function () {
+    return dateTime.value ? dateTime.value.format(dateMask) : null
+  },
+  set: function (value) {
+    const { YYYY, MM, DD } = toYMD(value)
+    if (!dateTime.value) dateTime.value = moment({ year: YYYY, month: MM, date: DD })
+    else dateTime.value.set({ year: YYYY, month: MM, date: DD })
+    emit('update:modelValue', dateTime.value.toISOString())
+  }
+})
+const dateOptions = computed(() => {
+  return _.merge({}, _.get(props.options, 'date'), { picker: { options: checkDate } })
+})
+const timeModel = computed({
+  get: function () {
+    return dateTime.value ? dateTime.value.format(timeMask) : null
+  },
+  set: function (value) {
+    const { HH, mm, ss } = toHMS(value)
+    dateTime.value.set({ hour: HH, minute: mm, second: ss })
+    emit('update:modelValue', dateTime.value.toISOString())
+  }
+})
+const timeOptions = computed(() => {
+  return _.merge({}, _.get(props.options, 'time'), { picker: { options: checkTime } })
+})
+
+// Watch
+watch(() => props.modelValue, (value) => {
+  dateTime.value = moment.utc(value).local()
+})
+watch(() => props.min, (value) => {
+  minDateTime.value = moment.utc(value).local()
+})
+watch(() => props.max, (value) => {
+  maxDateTime.value = moment.utc(value).local()
+})
+
+// Functions
+function checkDate (date) {
+  const { YYYY, MM, DD } = toYMD(date)
+  const dateToCheck = moment({
+    year: YYYY,
+    month: MM,
+    date: DD,
+    hour: dateTime.value ? dateTime.value.hour() : 0,
+    minute: dateTime.value ? dateTime.value.minute() : 0
+  })
+  if (minDateTime.value && dateToCheck.isBefore(minDateTime.value)) return false
+  if (maxDateTime.value && dateToCheck.isAfter(maxDateTime.value)) return false
+  return true
+}
+function checkTime (hours, minutes, seconds) {
+  const timeToCheck = moment({
+    year: dateTime.value.year(),
+    month: dateTime.value.month(),
+    date: dateTime.value.date(),
+    hour: hours || dateTime.value.hour(),
+    minute: minutes || dateTime.value.minute(),
+    second: seconds || dateTime.value.second()
+  })
+  if (minDateTime.value && timeToCheck.isBefore(minDateTime.value)) return false
+  if (maxDateTime.value && timeToCheck.isAfter(maxDateTime.value)) return false
+  return true
+}
+
+// Functions
+function toYMD (value) {
+  return {
+    YYYY: value.substring(0, 4),
+    MM: value.substring(5, 7) - 1,
+    DD: value.substring(8, 10)
+  }
+}
+function toHMS (value) {
+  return {
+    HH: value.substring(0, 2),
+    mm: value.substring(3, 5),
+    ss: value.substring(6, 8)
+  }
+}
+
+// Immedaite
+if (props.modelValue) dateTime.value = moment.utc(props.modelValue).local()
+if (props.min) minDateTime.value = moment.utc(props.min).local()
+if (props.max) maxDateTime.value = moment.utc(props.max).local()
+</script>

package/core/client/components/time/KDateTimeRange.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="row items-center q-gutter-x-sm no-wrap">
+    <!-- Start dateTime -->
+    <KDateTime
+      v-model="startModel"
+      :options="props.options"
+      :min="props.min"
+      :max="props.max"
+      :disabled="disabled"
+      :dense="dense"
+    />
+    <div>
+      {{ separator }}
+    </div>
+    <!-- End dateTime -->
+    <KDateTime
+      v-model="endModel"
+      :options="props.options"
+      :min="startDateTime ? startDateTime.toISOString() : null"
+      :max="props.max"
+      :disabled="disabled || startDateTime === null"
+      :dense="dense"
+    />
+  </div>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import moment from 'moment'
+import { ref, computed, watch } from 'vue'
+import KDateTime from './KDateTime.vue'
+
+// Props
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => null,
+    validator: (value) => {
+      if (value && value.start && !moment(value.start).isValid()) return false
+      if (value && value.end && !moment(value.end).isValid()) return false
+      return true
+    }
+  },
+  options: {
+    type: Object,
+    default: () => {}
+  },
+  min: {
+    type: String,
+    default: () => null,
+    validator: (value) => {
+      if (value) return moment(value).isValid()
+      return true
+    }
+  },
+  max: {
+    type: String,
+    default: () => null,
+    validator: (value) => {
+      if (value) return moment(value).isValid()
+      return true
+    }
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  dense: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Emits
+const emit = defineEmits(['update:modelValue'])
+
+// Data
+const startDateTime = ref(null)
+const endDateTime = ref(null)
+
+// Computed
+const startModel = computed({
+  get: function () {
+    return startDateTime.value ? startDateTime.value.toISOString() : null
+  },
+  set: function (value) {
+    if (endDateTime.value) {
+      if (moment.utc(value).isAfter(endDateTime.value)) endDateTime.value = value
+    } else {
+      endDateTime.value = value
+    }
+    emit('update:modelValue', { start: value, end: endDateTime.value })
+  }
+})
+const endModel = computed({
+  get: function () {
+    return endDateTime.value ? endDateTime.value.toISOString() : null
+  },
+  set: function (value) {
+    emit('update:modelValue', { start: startDateTime.value.toISOString(), end: value })
+  }
+})
+const separator = computed(() => {
+  return _.get(props.options, 'separator', '/')
+})
+
+// Watch
+watch(() => props.modelValue, (value) => {
+  startDateTime.value = value ? moment.utc(value.start) : null
+  endDateTime.value = value ? moment.utc(value.end) : null
+})
+
+// Immedaite
+if (props.modelValue) {
+  startDateTime.value = moment.utc(props.modelValue.start)
+  endDateTime.value = moment.utc(props.modelValue.end)
+}
+</script>