cleaning DateInput

pages/add/DateInput.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.when {{value}}
+.when
   .text-center
     v-btn-toggle.v-col-6.flex-column.flex-sm-row(v-model='type' color='primary' @change='type => change("type", type)')
       v-btn(value='normal' label="normal") {{$t('event.normal')}}
@@ -12,19 +12,22 @@
     v-btn-toggle.v-col-6.flex-column.flex-sm-row(v-if='type === "recurrent"' color='primary' :value='value.recurrent.frequency' @change='fq => change("frequency", fq)')
       v-btn(v-for='f in frequencies' :key='f.value' :value='f.value') {{f.text}}
 
+    p {{value}}
     client-only
       .datePicker.mt-3
-        v-date-picker(
+        v-input(:value='fromDate'
-          :value='fromDate'
+            :rules="[$validators.required('common.when')]")
-          @input="date => change('date', date)"
+          v-date-picker(
-          :is-range='type === "multidate"'
+            :value='fromDate'
-          :attributes='attributes'
+            @input="date => change('date', date)"
-          :locale='$i18n.locale'
+            :is-range='type === "multidate"'
-          :from-page.sync='page'
+            :attributes='attributes'
-          :is-dark="settings['theme.is_dark']"
+            :locale='$i18n.locale'
-          is-inline
+            :from-page.sync='page'
-          is-expanded
+            :is-dark="settings['theme.is_dark']"
-          :min-date='type !== "recurrent" && new Date()')
+            is-inline
+            is-expanded
+            :min-date='type !== "recurrent" && new Date()')
 
   div.text-center.mb-2(v-if='type === "recurrent"')
     span(v-if='value.recurrent.frequency !== "1m" && value.recurrent.frequency !== "2m"') {{whenPatterns}}
@@ -33,11 +36,12 @@
 
   v-row.mt-3.col-md-6.mx-auto
     v-col.col-12.col-sm-6
-      v-select(dense :label="$t('event.from')" :value='fromHour'
+      v-select(dense :label="$t('event.from')" :value='fromHour' clearable
+        :rules="[$validators.required('event.from')]"
         :items='hourList' @change='hr => change("fromHour", hr)')
 
     v-col.col-12.col-sm-6
-      v-select(dense :label="$t('event.due')" :value='dueHour'
+      v-select(dense :label="$t('event.due')" :value='dueHour' clearable
         :items='hourList' @change='hr => change("dueHour", hr)')
 
   //- div.col-md-12(v-if='isRecurrent')
@@ -78,20 +82,17 @@ export default {
   computed: {
     ...mapState(['settings', 'events']),
     fromDate () {
-      console.error('davvero in fromdate', this.value)
       if (this.value.multidate) {
-        console.error(this.value)
+        return ({ start: dayjs(this.value.from).toDate(), end: dayjs(this.value.due).toDate() })
-        console.error('son qui dentro!')
-        return ({ start: this.value.from, end: this.value.due })
       }
-      return dayjs(this.value.from || 0).toDate()
+      return this.value.from ? dayjs(this.value.from).toDate() : null
     },
 
     fromHour () {
-      return dayjs(this.value.from || 0).format('HH:mm')
+      return this.value.from && this.value.fromHour ? dayjs(this.value.from).format('HH:mm') : null
     },
     dueHour () {
-      return dayjs(this.value.due || 0).format('HH:mm')
+      return this.value.due && this.value.dueHour ? dayjs(this.value.due).format('HH:mm') : null
     },
     hourList () {
       const hourList = []
@@ -183,26 +184,50 @@ export default {
       } else if (what === 'frequency') {
         this.$emit('input', { ...this.value, recurrent: { ...this.value.recurrent, frequency: value } })
       } else if (what === 'fromHour') {
-        const [hour, minute] = value.split(':')
+        if (value) {
-        const from = dayjs(this.value.from).hour(hour).minute(minute)
+          const [hour, minute] = value.split(':')
-        this.$emit('input', { ...this.value, from })
+          const from = dayjs(this.value.from).hour(hour).minute(minute)
-      } else if (what === 'dueHour') {
+          this.$emit('input', { ...this.value, from, fromHour: true })
-        const [hour, minute] = value.split(':')
+        } else {
-        const fromHour = dayjs(this.value.from).hour()
+          this.$emit('input', { ...this.value, fromHour: false })
-
+        }
-        // add a day
+      } else if (what === 'dueHour') {
-        let due = dayjs(this.value.due)
+        if (value) {
-        if (fromHour > Number(hour)) {
+          const [hour, minute] = value.split(':')
-          due = due.add(1, 'day')
+          const fromHour = dayjs(this.value.from).hour()
+
+          // add a day
+          let due = dayjs(this.value.due)
+          if (fromHour > Number(hour) && !this.value.multidate) {
+            due = due.add(1, 'day')
+          }
+          due = due.hour(hour).minute(minute)
+          this.$emit('input', { ...this.value, due, dueHour: true })
+        } else {
+          this.$emit('input', { ...this.value, dueHour: false })
         }
-        due = due.hour(hour).minute(minute)
-        this.$emit('input', { ...this.value, due })
       } else if (what === 'date') {
         console.error('dentro what date', value)
         if (this.value.multidate) {
-          this.$emit('input', { ...this.value, from: value.start, due: value.end })
+          let from = value.start
+          let due = value.end
+          if (this.value.fromHour) {
+            from = dayjs(value.start).hour(dayjs(this.value.from).hour())
+          }
+          if (this.value.dueHour) {
+            due = dayjs(value.end).hour(dayjs(this.value.due).hour())
+          }
+          this.$emit('input', { ...this.value, from, due })
         } else {
-          this.$emit('input', { ...this.value, from: value, due: value })
+          let from = value
+          let due = value
+          if (this.value.fromHour) {
+            from = dayjs(value).hour(dayjs(this.value.from).hour())
+          }
+          if (this.value.dueHour) {
+            due = dayjs(value).hour(dayjs(this.value.due).hour())
+          }
+          this.$emit('input', { ...this.value, from, due })
         }
       }
     },
@@ -214,12 +239,6 @@ export default {
     selectFrequency (f) {
       this.$emit('input', { recurrent: { frequency: f }, from: this.value.from, due: this.value.due })
     }
-    // pick (date) {
-    //   if (this.value.type === 'normal' || this.value.type === 'recurrent' || (this.value.date && this.value.date.length === 2)) {
-    //     this.datePickerMenu = false
-    //   }
-    //   this.$emit('input', { date, recurrent: this.value.recurrent })
-    // }
   }
 }
 </script>