wip: KDateTimeRange does not support changes to the min and max properties #1123

wip: KDateTimeRange does not support changes to the min and max properties #1123
docs: added time components

Author: cnouguier

core/client/components/form/KDateTimeRangeField.vue

@@ -17,16 +17,14 @@
     <template v-slot:control>
       <KDateTimeRange
         v-model="model"
-        :options="options"
-        :min="min"
-        :max="max"
+        v-bind="props"
         dense
         @update:modelValue="onChanged"
       />
     </template>
     <!-- Helper -->
     <template v-if="hasHelper" v-slot:append>
-      <k-action
+      <KAction
         :id="properties.name + '-helper'"
         :label="helperLabel"
         :icon="helperIcon"
@@ -44,26 +42,22 @@
 <script>
 import _ from 'lodash'
 import { baseField } from '../../mixins'
+import KAction from '../action/KAction.vue'
 import KDateTimeRange from '../time/KDateTimeRange.vue'
 
 export default {
   mixins: [baseField],
   components: {
+    KAction,
     KDateTimeRange
   },
   computed: {
     formattedDateTimeRange () {
       // TODO
       return this.model
     },
-    options () {
-      return _.get(this.properties.field, 'options', {})
-    },
-    min () {
-      return _.get(this.properties.field, 'min')
-    },
-    max () {
-      return _.get(this.properties.field, 'max')
+    props () {
+      return _.omit(_.get(this.properties, 'field'), ['component', 'dense'])
     }
   },
   methods: {

core/client/components/form/KDatetimeField.vue

@@ -17,16 +17,14 @@
     <template v-slot:control>
       <KDateTime
         v-model="model"
-        :options="options"
-        :min="min"
-        :max="max"
+        v-bind="props"
         dense
         @update:modelValue="onChanged"
       />
     </template>
     <!-- Helper -->
     <template v-if="hasHelper" v-slot:append>
-      <k-action
+      <KAction
         :id="properties.name + '-helper'"
         :label="helperLabel"
         :icon="helperIcon"
@@ -44,26 +42,21 @@
 <script>
 import _ from 'lodash'
 import { baseField } from '../../mixins'
+import KAction from '../action/KAction.vue'
 import KDateTime from '../time/KDateTime.vue'
 
 export default {
   mixins: [baseField],
   components: {
+    KAction,
     KDateTime
   },
   computed: {
     formattedDateTime () {
-      // TODO
       return this.model
     },
-    options () {
-      return _.get(this.properties.field, 'options', {})
-    },
-    min () {
-      return _.get(this.properties.field, 'min')
-    },
-    max () {
-      return _.get(this.properties.field, 'max')
+    props () {
+      return _.omit(_.get(this.properties, 'field'), ['component', 'dense'])
     }
   },
   methods: {

core/client/components/time/KAbsoluteTimeRange.vue

@@ -1,20 +1,19 @@
 <template>
   <KDateTimeRange
     v-model="dateTimeRangeModel"
-    :options="dateTimeRangeOptions"
-    :min="props.min"
-    :max="props.max"
-    :dense="props.dense"
-    :disabled="props.disabled"
+    :min="min"
+    :max="max"
+    :dense="dense"
+    :disabled="disabled"
   />
 </template>
 
 <script setup>
+import moment from 'moment'
 import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
-import KDateTimeRange from './KDateTimeRange.vue'
 import { Events } from '../../events'
 import { Time } from '../../time'
-import moment from 'moment'
+import KDateTimeRange from './KDateTimeRange.vue'
 
 const props = defineProps({
   min: {
@@ -49,12 +48,6 @@ const dateTimeRangeModel = ref({
   start: start.toISOString(),
   end: end.toISOString()
 })
-const dateTimeRangeOptions = ref({
-  separator: '-',
-  date: {
-    format: 'DD/MM/YYYY'
-  }
-})
 
 // Watch
 watch(dateTimeRangeModel, (newDateTimeRange, oldDateTimeRange) => {

core/client/components/time/KDate.vue

@@ -1,18 +1,10 @@
 <template>
-  <q-btn
-    id="date-button"
-    :icon="icon"
-    :label="label"
-    flat
-    no-caps
-    :disable="disabled"
-    :dense="dense"
-  >
+  <q-btn v-bind="computedButton">
     <q-popup-proxy>
       <q-date
         id="date-picker"
-        v-model="model"
-        v-bind="picker"
+        v-model="computedModel"
+        v-bind="computedPicker"
       />
     </q-popup-proxy>
   </q-btn>
@@ -23,16 +15,29 @@ import _ from 'lodash'
 import moment from 'moment'
 import { computed } from 'vue'
 import { Time } from '../../time.js'
+import { i18n } from '../../i18n.js'
 
 // Props
 const props = defineProps({
   modelValue: {
     type: String,
-    default: () => null
+    default: null
   },
-  options: {
+  picker: {
     type: Object,
-    default: () => {}
+    default: () => null
+  },
+  format: {
+    type: String,
+    default: null
+  },
+  placeholder: {
+    type: String,
+    default: null
+  },
+  icon: {
+    type: String,
+    default: 'las la-calendar'
   },
   disabled: {
     type: Boolean,
@@ -51,28 +56,46 @@ const emit = defineEmits(['update:modelValue'])
 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({
+const computedModel = computed({
   get: function () {
     return props.modelValue
   },
   set: function (value) {
     emit('update:modelValue', value)
   }
 })
-const format = computed(() => {
-  const dateDateFormat = _.get(Time.getFormat(), 'date.short')
-  const defaultYearFormat = _.get(Time.getFormat(), 'year.long')
-  return _.get(props.options, 'format', `${dateDateFormat}/${defaultYearFormat}`)
+const computedButton = computed(() => {
+  // compute format
+  let format = props.format
+  if (_.isEmpty(format)) {
+    const dateFormat = _.get(Time.getFormat(), 'date.short')
+    const yearFormat = _.get(Time.getFormat(), 'year.long')
+    format = `${dateFormat}/${yearFormat}`
+  }
+  // compute label
+  let label
+  if (!_.isEmpty(computedModel.value)) label = moment(computedModel.value, mask).format(format)
+  else label = i18n.tie(props.placeholder)
+  // define button spec
+  const spec = {
+    id: 'date-button',
+    label,
+    flat: true,
+    noCaps: true,
+    disable: props.disabled,
+    dense: true,
+    class: props.dense ? 'q-px-xs': 'q-pa-sm'
+  }
+  // add icon if defined
+  if (props.icon) spec.icon = props.icon
+  return spec
 })
-const picker = computed(() => {
-  return _.merge({}, _.get(props.options, 'picker'), { mask })
+const computedPicker = computed(() => {
+  const picker = { mask }
+  return _.merge({}, props.picker, picker)
 })
 
+// Immediate
+if (_.isEmpty(props.modelValue) && 
+    _.isEmpty(props.placeholder)) computedModel.value = moment.utc().format(mask)
 </script>