refactoring add/modify event

pages/add/DateInput.vue

@@ -1,80 +1,51 @@
 <template lang="pug">
-v-row
+.when {{value}}
-  v-date-picker.col-md-6(
+  .text-center
-    mode='dateTime'
+    v-btn-toggle.v-col-6.flex-column.flex-sm-row(v-model='type' color='primary' @change='type => change("type", type)')
-    is24hr
+      v-btn(value='normal' label="normal") {{$t('event.normal')}}
-    :input-debounce="200"
+      v-btn(value='multidate' label='multidate') {{$t('event.multidate')}}
-    :min-date='new Date()'
+      v-btn(v-if='settings.allow_recurrent_event' value='recurrent' label="recurrent") {{$t('event.recurrent')}}
-    :minute-increment="5"
-    is-dark
-    is-expanded
-    @input='v => change("from", v)'
-    :value="value.from"
-    :locale='$i18n.locale')
-    template(v-slot="{ inputValue, inputEvents }")
-      v-text-field(
-        :value='inputValue'
-        :label="$t('event.from')"
-        :rules="[$validators.required('common.when')]"
-        ref='date'
-        prepend-icon='mdi-calendar'
-        persistent-hint
-        readonly
-        v-on="inputEvents")
 
-  v-date-picker.col-md-4(
+    p {{$t(`event.${type}_description`)}}
-    mode='dateTime'
+    //- v-select.col-md-6(v-if='type==="recurrent"'
-    is24hr
+    //-   :items="frequencies" :value='value.recurrent.frequency' @change='freq => updateRecurrent({...value.recurrent, frequency: freq})')
-    :min-date='new Date()'
+    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)')
-    :minute-increment="5"
+      v-btn(v-for='f in frequencies' :key='f.value' :value='f.value') {{f.text}}
-    :input-debounce="200"
-    is-dark
-    is-expanded
-    @input='v => change("due", v)'
-    :value="value.due"
-    :locale='$i18n.locale')
-    template(v-slot="{ inputValue, inputEvents }")
-      v-text-field(
-        :value='inputValue'
-        :label="$t('event.due')"
-        ref='date'
-        prepend-icon='mdi-calendar'
-        persistent-hint
-        readonly
-        v-on="inputEvents")
 
-    //- v-btn-toggle(v-if="type === 'recurrent'" v-model='value.recurrent.frequency' color='primary')
+    client-only
-    //-   v-btn(v-for='f in frequencies' :value='f.value') {{f.text}}
+      .datePicker.mt-3
+        v-date-picker(
+          :value='fromDate'
+          @input="date => change('date', date)"
+          :is-range='type === "multidate"'
+          :attributes='attributes'
+          :locale='$i18n.locale'
+          :from-page.sync='page'
+          :is-dark="settings['theme.is_dark']"
+          is-inline
+          is-expanded
+          :min-date='type !== "recurrent" && new Date()')
 
-    //- .datePicker
+  div.text-center.mb-2(v-if='type === "recurrent"')
-    //-   v-date-picker(
+    span(v-if='value.recurrent.frequency !== "1m" && value.recurrent.frequency !== "2m"') {{whenPatterns}}
-    //-     :mode='datePickerMode'
+    v-btn-toggle.mt-1.flex-column.flex-sm-row(v-else :value='value.recurrent.type' color='primary' @change='fq => change("", fq)')
-    //-     v-model='date'
+      v-btn(v-for='whenPattern in whenPatterns' :value='whenPattern.key' :key='whenPatterns.key' small) {{whenPattern.label}}
-    //-     :rules="[$validators.required('event.when')]"
-    //-     :locale='$i18n.locale'
-    //-     :is-dark="settings['theme.is_dark']"
-    //-     is-inline
-    //-     is-expanded
-    //-     :min-date='type !== "recurrent" && new Date()')
 
-    //- v-btn-toggle.col-md-4(@change='changeType' color='primary' :value='value.type')
+  v-row.mt-3.col-md-6.mx-auto
-    //-   v-btn(value='normal') {{$t('event.normal')}}
+    v-col.col-12.col-sm-6
-    //-   v-btn(value='multidate') {{$t('event.multidate')}}
+      v-select(dense :label="$t('event.from')" :value='fromHour'
-  v-switch.col-md-2(:input-value='isRecurrent' :label="$t('event.recurrent')" inset @change='updateRecurrent')
+        :items='hourList' @change='hr => change("fromHour", hr)')
-  //- v-menu(v-if='settings.allow_recurrent_event && isRecurrent' offset-y open-on-hover)
-  //-   template(v-slot:activator="{ on, attrs }")
-  //-     v-btn.col-md-2.mt-2(color='primary' value='recurrent' v-on='on') {{$t('event.recurrent')}}
-  //- v-btn-group(v-if='settings.allow_recurrent_event && isRecurrent')
-  v-btn-toggle.col-md-12(dense group text link v-if='isRecurrent' color='primary' v-model='value.recurrent.frequency')
-    v-btn(text link v-for='f in frequencies' :key='f.value' :value='f.value'
-      @click='selectFrequency(f.value)') {{f.text}}
 
-  div.col-md-12(v-if='isRecurrent')
+    v-col.col-12.col-sm-6
-    p(v-if='value.recurrent.frequency !== "1m" && value.recurrent.frequency !== "2m"') 🡲 {{whenPatterns}}
+      v-select(dense :label="$t('event.due')" :value='dueHour'
-    v-btn-toggle(v-else dense group v-model='value.recurrent.type' color='primary')
+        :items='hourList' @change='hr => change("dueHour", hr)')
-      v-btn(text link v-for='whenPattern in whenPatterns' :value='whenPattern.key' :key='whenPatterns.key') {{whenPattern.label}}
 
-    //- List(v-if='type==="normal" && todayEvents.length' :events='todayEvents' :title='$t("event.same_day")')
+  //- div.col-md-12(v-if='isRecurrent')
+  //-   p(v-if='value.recurrent.frequency !== "1m" && value.recurrent.frequency !== "2m"') 🡲 {{whenPatterns}}
+  //-   v-btn-toggle(v-else dense group v-model='value.recurrent.type' color='primary')
+  //-     v-btn(text link v-for='whenPattern in whenPatterns' :value='whenPattern.key' :key='whenPatterns.key') {{whenPattern.label}}
+
+  //- List(v-if='event.type==="normal" && todayEvents.length' :events='todayEvents' :title='$t("event.same_day")')
 
 </template>
 <script>
@@ -90,6 +61,12 @@ export default {
   },
   data () {
     return {
+      type: 'normal',
+      time: { start: null, end: null },
+      fromDateMenu: null,
+      dueDateMenu: null,
+      date: null,
+      page: null,
       frequency: '',
       frequencies: [
         { value: '1w', text: this.$t('event.each_week') },
@@ -100,9 +77,37 @@ export default {
   },
   computed: {
     ...mapState(['settings', 'events']),
+    fromDate () {
+      console.error('davvero in fromdate', this.value)
+      if (this.value.multidate) {
+        console.error(this.value)
+        console.error('son qui dentro!')
+        return ({ start: this.value.from, end: this.value.due })
+      }
+      return dayjs(this.value.from || 0).toDate()
+    },
+
+    fromHour () {
+      return dayjs(this.value.from || 0).format('HH:mm')
+    },
+    dueHour () {
+      return dayjs(this.value.due || 0).format('HH:mm')
+    },
+    hourList () {
+      const hourList = []
+      const pad = '00'
+      for (let h = 0; h < 24; h++) {
+        hourList.push(`${(pad + h).slice(-pad.length)}:00`)
+        hourList.push(`${(pad + h).slice(-pad.length)}:30`)
+      }
+      return hourList
+    },
     isRecurrent () {
       return !!this.value.recurrent
     },
+    attributes () {
+      return []
+    },
     whenPatterns () {
       if (!this.value.from) { return }
       const date = dayjs(this.value.from)
@@ -148,14 +153,63 @@ export default {
       return ''
     }
   },
+  mounted () {
+    if (this.value.multidate) {
+      this.type = 'multidate'
+    } else if (this.value.recurrent) {
+      this.type = 'recurrent'
+    } else {
+      this.type = 'normal'
+    }
+  },
   methods: {
     updateRecurrent (value) {
-      this.$emit('input', { ...this.value, recurrent: value ? {} : null })
+      this.$emit('input', { ...this.value, recurrent: value || null })
     },
-    change (what, date) {
+    change (what, value) {
-      const v = this.value
+      // change event's type
-      v[what] = date
+      if (what === 'type') {
-      this.$emit('input', v)
+        if (value === 'recurrent') {
+          this.$emit('input', { ...this.value, recurrent: {}, multidate: false })
+        } else if (value === 'multidate') {
+          this.$emit('input', { ...this.value, recurrent: null, multidate: true })
+        } else {
+          let date = this.value.from
+          if (date && date.start) {
+            date = date.start
+          }
+          this.$emit('input', { ...this.value, from: date, due: date, recurrent: null, multidate: false })
+        }
+      } else if (what === 'frequency') {
+        this.$emit('input', { ...this.value, recurrent: { ...this.value.recurrent, frequency: value } })
+      } else if (what === 'fromHour') {
+        const [hour, minute] = value.split(':')
+        const from = dayjs(this.value.from).hour(hour).minute(minute)
+        this.$emit('input', { ...this.value, from })
+      } else if (what === 'dueHour') {
+        const [hour, minute] = value.split(':')
+        const fromHour = dayjs(this.value.from).hour()
+
+        // add a day
+        let due = dayjs(this.value.due)
+        if (fromHour > Number(hour)) {
+          due = due.add(1, 'day')
+        }
+        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 })
+        } else {
+          this.$emit('input', { ...this.value, from: value, due: value })
+        }
+      }
+    },
+    changeType (type) {
+      if (type === 'recurrent') {
+        this.updateRecurrent({})
+      }
     },
     selectFrequency (f) {
       this.$emit('input', { recurrent: { frequency: f }, from: this.value.from, due: this.value.due })
@@ -169,3 +223,10 @@ export default {
   }
 }
 </script>
+
+<style lang="less">
+.datePicker {
+  max-width: 500px !important;
+  margin: 0 auto;
+}
+</style>

pages/add/WhereInput.vue

@@ -21,7 +21,7 @@
 
     v-text-field.col-md-6(ref='address'
       prepend-icon='mdi-map'
-      :disabled='disableAddress'
+      v-show='!disableAddress'
       :rules="[$validators.required('common.address')]"
       :label="$t('common.address')"
       @change="changeAddress"

pages/add/_edit.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  v-container.container
+  v-container.container.px-0.px-md-3
     v-card
       v-card-title
         h4 {{edit?$t('common.edit_event'):$t('common.add_event')}}
@@ -9,13 +9,12 @@
       v-dialog(v-model='openImportDialog')
         ImportDialog(@close='openImportDialog=false' @imported='eventImported')
 
-      v-card-text
+      v-card-text.px-0.px-xs-2
         v-form(v-model='valid' ref='form' lazy-validation)
           v-container
             v-row
               //- Not logged event
               v-col.col-12(v-if='!$auth.loggedIn')
-                v-divider <v-icon name='user-secret'/> {{$t('event.anon')}}
                 p(v-html="$t('event.anon_description')")
 
               //- Title
@@ -42,7 +41,7 @@
                 max-height='400px')
 
               //- MEDIA / FLYER / POSTER
-              v-file-input.col-6.mt-3(
+              v-file-input.col-12.col-sm-6.mt-3(
                 :label="$t('common.media')"
                 :hint="$t('event.media_description')"
                 prepend-icon="mdi-camera"
@@ -51,7 +50,7 @@
                 accept='image/*')
 
               //- tags
-              v-combobox.col-6.mt-3(v-model='event.tags'
+              v-combobox.col-12.col-sm-6.mt-3(v-model='event.tags'
                 prepend-icon="mdi-tag-multiple"
                 chips small-chips multiple deletable-chips hide-no-data hide-selected persistent-hint
                 :delimiters="[',', ' ']"
@@ -98,7 +97,8 @@ export default {
       data.date = {
         recurrent: event.recurrent,
         from: new Date(dayjs.unix(event.start_datetime)),
-        due: new Date(dayjs.unix(event.end_datetime))
+        due: new Date(dayjs.unix(event.end_datetime)),
+        multidate: event.multidate
       }
 
       data.event.title = event.title
@@ -163,7 +163,7 @@ export default {
       formData.append('place_name', this.event.place.name)
       formData.append('place_address', this.event.place.address)
       formData.append('description', this.event.description)
-      // formData.append('multidate', this.date.type === 'multidate')
+      formData.append('multidate', !!this.date.multidate)
       formData.append('start_datetime', dayjs(this.date.from).unix())
       formData.append('end_datetime', this.date.due && dayjs(this.date.due).unix())