From cf5975e7ba8f784494db88c8ac98237c46c2b7b9 Mon Sep 17 00:00:00 2001
From: les <lesion@autistici.org>
Date: Sun, 25 Oct 2020 00:31:38 +0200
Subject: [PATCH] split add event in smaller components

---
 pages/add/DateInput.vue    | 237 +++++++++++++++++++++++++++++++++++++
 pages/add/HourInput.vue    |  77 ++++++++++++
 pages/add/ImportDialog.vue |   2 +-
 pages/add/WhenInput.vue    | 187 -----------------------------
 pages/add/WhereInput.vue   |  60 ++++++++++
 pages/add/_edit.vue        | 184 ++++++++--------------------
 6 files changed, 423 insertions(+), 324 deletions(-)
 create mode 100644 pages/add/DateInput.vue
 create mode 100644 pages/add/HourInput.vue
 delete mode 100644 pages/add/WhenInput.vue
 create mode 100644 pages/add/WhereInput.vue

diff --git a/pages/add/DateInput.vue b/pages/add/DateInput.vue
new file mode 100644
index 00000000..1a36244d
--- /dev/null
+++ b/pages/add/DateInput.vue
@@ -0,0 +1,237 @@
+<template lang="pug">
+v-row
+    v-menu(
+      v-model="datePickerMenu"
+      :close-on-content-click="false"
+      :nudge-right="40"
+      transition="scale-transition"
+      offset-y
+      min-width="290px"
+    )
+      template(v-slot:activator="{ on, attrs }")
+        v-text-field.col-md-8(
+          v-model='date'
+          :label="$t('common.when')"
+          :rules="[$validators.required('common.when')]"
+          prepend-icon='mdi-calendar'
+          readonly
+          v-bind="attrs"
+          v-on="on")
+      v-date-picker(
+        :min='today'
+        v-model="date"
+        :range="type === 'multidate'"
+        :locale='settings.locale'
+        @input="pick")
+
+    v-btn-toggle.col-md-4(@change='changeType' color='primary' :value='type')
+      v-btn(value='normal') {{$t('event.normal')}}
+      v-btn(value='multidate') {{$t('event.multidate')}}
+      v-menu(v-if='settings.allow_recurrent_event' offset-y open-on-hover)
+        template(v-slot:activator="{ on, attrs }")
+          v-btn(value='recurrent' v-on='on') {{$t('event.recurrent')}}
+        v-list
+          v-list-item(v-for='f in frequencies' :key='f.value'
+            @click='selectFrequency(f.value)') {{f.text}}
+
+    //- //- p.col-12 {{$t(`event.${type}_description`)}}
+    //- v-btn-toggle(v-if="type === 'recurrent'" v-model='recurrent.frequency' color='primary')
+    //-   v-btn(v-for='f in frequencies' :value='f.value') {{f.text}}
+
+    //- .datePicker
+    //-   v-date-picker(
+    //-     :mode='datePickerMode'
+    //-     v-model='date'
+    //-     :rules="[$validators.required('event.when')]"
+    //-     :locale='$i18n.locale'
+    //-     :is-dark="settings['theme.is_dark']"
+    //-     is-inline
+    //-     is-expanded
+    //-     :min-date='type !== "recurrent" && new Date()')
+
+    div.text-center.mb-2(v-if='type === "recurrent"')
+      span(v-if='recurrent.frequency !== "1m" && recurrent.frequency !== "2m"') {{whenPatterns}}
+      v-btn-toggle.mt-1(v-else v-model='recurrent.type' color='primary')
+        v-btn(v-for='whenPattern in whenPatterns' :value='whenPattern.key' :key='whenPatterns.key' small)
+          span {{whenPattern.label}}
+
+    //- List(v-if='type==="normal" && todayEvents.length' :events='todayEvents' :title='$t("event.same_day")')
+
+</template>
+<script>
+// import VInput from 'vuetify/es5/components/VInput'
+import dayjs from 'dayjs'
+import { mapState } from 'vuex'
+import List from '@/components/List'
+
+export default {
+  name: 'WhenInput',
+  components: { List },
+  props: {
+    value: { type: Object, default: () => ({ date: null, type: 'normal', recurrent: {} }) }
+  },
+  data () {
+    return {
+      date: null,
+      datePickerMenu: false,
+      today: dayjs().format('YYYY-MM-DD'),
+      type: 'normal',
+      recurrent: { },
+      frequencies: [
+        { value: '1w', text: this.$t('event.each_week') },
+        { value: '2w', text: this.$t('event.each_2w') },
+        { value: '1m', text: this.$t('event.each_month') }
+      ]
+    }
+  },
+  computed: {
+    ...mapState(['settings', 'events']),
+    datePickerMode () {
+      const modeMap = {
+        multidate: 'range',
+        normal: 'single',
+        recurrent: 'single'
+      }
+      return modeMap[this.type]
+    },
+    whenPatterns () {
+      if (!this.date) { return }
+      const date = dayjs(this.date)
+
+      const freq = this.recurrent.frequency
+      const weekDay = date.format('dddd')
+      if (freq === '1w' || freq === '2w') {
+        return this.$t(`event.recurrent_${freq}_days`, { days: weekDay })
+      } else if (freq === '1m' || freq === '2m') {
+        const monthDay = date.format('D')
+        console.error('monthDay ', monthDay)
+
+        const n = Math.floor((monthDay - 1) / 7) + 1
+
+        const patterns = [
+          { label: this.$t(`event.recurrent_${freq}_days`, { days: monthDay }), key: 'ordinal' }
+          // { label: this.$tc(`event.recurrent_${freq}_ordinal`, { n, days: weekDay }), key: 'weekday' }
+        ]
+
+        // if selected day is in last week, propose also this type of selection
+        const lastWeek = date.daysInMonth() - monthDay < 7
+        if (lastWeek) {
+          patterns.push(
+            {
+              label: this.$t(`event.recurrent_${freq}_ordinal`,
+                { n: this.$t('ordinal.-1'), days: weekDay }),
+              key: 'weekday'
+            }
+          )
+        }
+
+        if (n < 5) {
+          patterns.push(
+            {
+              label: this.$t(`event.recurrent_${freq}_ordinal`,
+                { n: this.$t(`ordinal.${n}`), days: weekDay }),
+              key: 'weekday'
+            }
+          )
+        }
+        return patterns
+      } else if (freq === '1d') {
+        return this.$t('event.recurrent_each_day')
+      }
+      return ''
+    }
+    // todayEvents () {
+    //   if (this.type === 'multidate') {
+    //     if (!this.date || !this.date.start) { return }
+    //     const date_start = dayjs(this.date.start)
+    //     const date_end = dayjs(this.date.end)
+    //     return this.events.filter(e =>
+    //       !e.multidate
+    //         ? date_start.isSame(dayjs.unix(e.start_datetime), 'day') ||
+    //         (date_start.isBefore(dayjs.unix(e.start_dateime)) && date_end.isAfter(dayjs.unix(e.start_datetime)))
+    //         : date_start.isSame(dayjs.unix(e.start_datetime), 'day') || date_start.isSame(dayjs.unix(e.end_datetime)) ||
+    //         (date_start.isAfter(dayjs.unix(e.start_datetime)) && date_start.isBefore(dayjs.unix(e.end_datetime))))
+    //   } else if (this.type === 'recurrent') {
+    //     return []
+    //   } else {
+    //     const date = dayjs(this.date)
+    //     return this.events.filter(e =>
+    //       !e.multidate
+    //         ? !e.recurrent && date.isSame(dayjs.unix(e.start_datetime), 'day')
+    //         : dayjs.unix(e.start_datetime).isSame(date, 'day') ||
+    //           (dayjs.unix(e.start_datetime).isBefore(date) && dayjs.unix(e.end_datetime).isAfter(date))
+    //     )
+    //   }
+    // },
+    // attributes () {
+    //   let attributes = []
+    //   // attributes.push({ key: 'today', dates: new Date(), highlight: { color: 'red' } })
+
+    //   const date = dayjs(this.date)
+    //   const start = date.toDate()
+    //   attributes = attributes.concat(this.events
+    //     .filter(e => !e.multidate && (!e.parentId || this.type === 'recurrent'))
+    //     .map(e => ({ key: e.id, dot: { color: this.type === 'recurrent' ? 'orange' : 'green' }, dates: dayjs.unix(e.start_datetime).toDate() })))
+
+    //   if (this.type === 'recurrent' && this.date && this.date.length) {
+    //     let dates = {}
+    //     if (this.recurrent.frequency !== '1m') {
+    //       dates = {
+    //         weeklyInterval: this.recurrent.frequency === '1w' ? 1 : 2,
+    //         weekdays: date.day(),
+    //         start
+    //       }
+    //     } else if (this.recurrent.type === 'ordinal') {
+    //       const day = date.date()
+    //       dates = {
+    //         monthlyInterval: 1,
+    //         start,
+    //         days
+    //       }
+    //     } else if (this.recurrent.type === 'weekday') {
+    //       dates = {
+    //         monthlyInterval: 1,
+    //         start,
+    //         days: [Math.floor((date.day() - 1 / 7) + 1), date.day()]
+    //       }
+    //     } else {
+    //       dates = {
+    //         monthlyInterval: 1,
+    //         start,
+    //         days: [-1, date.day()]
+    //       }
+    //     }
+    //     attributes.push({
+    //       key: 'recurrent',
+    //       dot: { color: 'orange' },
+    //       dates
+    //     })
+    //   }
+    //   attributes = attributes.concat(this.events
+    //     .filter(e => e.multidate && !e.parentId)
+    //     .map(e => ({
+    //       key: e.id,
+    //       highlight: {},
+    //       dates: { start: dayjs.unix(e.start_datetime).toDate(), end: dayjs.unix(e.end_datetime).toDate() }
+    //     })))
+
+    //   return attributes
+    // }
+  },
+  methods: {
+    changeType (type) {
+      this.date = null
+      this.type = type || 'normal'
+    },
+    selectFrequency (f) {
+      this.recurrent.frequency = f
+      this.type = 'recurrent'
+    },
+    pick (value) {
+      if (this.type === 'normal' || this.type === 'recurrent' || this.date.length === 2) {
+        this.datePickerMenu = false
+      }
+    }
+  }
+}
+</script>
diff --git a/pages/add/HourInput.vue b/pages/add/HourInput.vue
new file mode 100644
index 00000000..96916284
--- /dev/null
+++ b/pages/add/HourInput.vue
@@ -0,0 +1,77 @@
+<template lang="pug">
+  v-row
+    v-col.col-6
+      v-menu(v-model='startTimeMenu'
+        :close-on-content-click="false"
+        transition="slide-x-transition"
+        ref='startTimeMenu'
+        :return-value.sync="time.start"
+        offset-y
+        absolute
+        top
+        max-width="290px"
+        min-width="290px")
+        template(v-slot:activator='{ on }')
+          v-text-field(
+            :label="$t('event.from')"
+            :rules="[$validators.required('event.from')]"
+            :value='time.start'
+            v-on='on'
+            clearable)
+        v-time-picker(
+          v-if='startTimeMenu'
+          :label="$t('event.from')"
+          format="24hr"
+          ref='time_start'
+          :allowed-minutes="[0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55]"
+          v-model='time.start'
+          @click:minute="selectTime('start')")
+
+    v-col.col-6
+      v-menu(v-model='endTimeMenu'
+          :close-on-content-click="false"
+          transition="slide-x-transition"
+          ref='endTimeMenu'
+          :return-value.sync="time.end"
+          offset-y
+          absolute
+          top
+          max-width="290px"
+          min-width="290px")
+        template(v-slot:activator='{ on }')
+          v-text-field(
+            :label="$t('event.due')"
+            :value='time.end'
+            v-on='on'
+            clearable
+            readonly)
+        v-time-picker(
+          v-if='endTimeMenu'
+          :label="$t('event.due')"
+          format="24hr"
+          :allowed-minutes="[0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55]"
+          v-model='time.end'
+          @click:minute="selectTime('end')")
+
+</template>
+<script>
+export default {
+  name: 'HourInput',
+  props: {
+    value: { type: Object, default: () => { } }
+  },
+  data () {
+    return {
+      time: {},
+      startTimeMenu: false,
+      endTimeMenu: false
+    }
+  },
+  methods: {
+    selectTime (type) {
+      this.$refs[`${type}TimeMenu`].save(this.time.end)
+      this.$emit('input', this.time)
+    }
+  }
+}
+</script>
diff --git a/pages/add/ImportDialog.vue b/pages/add/ImportDialog.vue
index b1ced6c7..a61cfaa7 100644
--- a/pages/add/ImportDialog.vue
+++ b/pages/add/ImportDialog.vue
@@ -13,7 +13,7 @@
         v-file-input(
           v-model='file'
           accept=".ics"
-          :label="$t('common.ics')"
+          :label="$t('event.ics')"
           :hint="$t('event.import_ICS')"
           persistent-hint
         )
diff --git a/pages/add/WhenInput.vue b/pages/add/WhenInput.vue
deleted file mode 100644
index 856c59f5..00000000
--- a/pages/add/WhenInput.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<template lang="pug">
-.when
-  .text-center
-    v-btn-toggle(v-model="type" color='primary')
-      v-btn(value='normal' label="normal") {{$t('event.normal')}}
-      v-btn(value='multidate' label="multidate") {{$t('event.multidate')}}
-      v-btn(v-if='settings.allow_recurrent_event' value='recurrent' label="recurrent") {{$t('event.recurrent')}}
-
-    p {{$t(`event.${type}_description`)}}
-    v-select(v-if='type==="recurrent"'
-      :items="frequencies"
-      v-model='recurrent.frequency')
-    client-only
-      .datePicker
-        v-date-picker(
-          :mode='datePickerMode'
-          :attributes='attributes'
-          v-model='date'
-          :locale='$i18n.locale'
-          :is-dark="settings['theme.is_dark']"
-          is-inline
-          is-expanded
-          :min-date='type !== "recurrent" && new Date()')
-
-  div.text-center.mb-2(v-if='type === "recurrent"')
-    span(v-if='recurrent.frequency !== "1m" && recurrent.frequency !== "2m"') {{whenPatterns}}
-    v-btn-toggle.mt-1(v-else v-model='recurrent.type' color='primary')
-      v-btn(v-for='whenPattern in whenPatterns' :value='whenPattern.key' :key='whenPatterns.key' small)
-        span {{whenPattern.label}}
-
-  List(v-if='type==="normal" && todayEvents.length' :events='todayEvents' :title='$t("event.same_day")')
-
-  
-</template>
-<script>
-// import VInput from 'vuetify/es5/components/VInput'
-import dayjs from 'dayjs'
-import { mapState } from 'vuex'
-import List from '@/components/List'
-
-export default {
-  name: 'WhenInput',
-  components: { List },
-  props:{
-    value: { type: Object, default: () => ({ type: 'normal', recurrent: {} }) }
-  },
-  data () {
-    return {
-      date: null,
-      type: 'normal',
-      recurrent: { },
-      frequencies: [
-        { value: '1w', text: this.$t('event.each_week') },
-        { value: '2w', text: this.$t('event.each_2w') },
-        { value: '1m', text: this.$t('event.each_month') }
-      ]
-    }
-  },
-  computed: {
-    ...mapState(['settings', 'events']),
-    datePickerMode () {
-      const modeMap = {
-        multidate: 'range',
-        normal: 'single',
-        recurrent: 'single'
-      }
-      return modeMap[this.type]
-    },
-    whenPatterns () {
-      if (!this.date) return
-      const date = dayjs(this.date)
-
-      const freq = this.recurrent.frequency
-      const weekDay = date.day()
-      if (freq === '1w' || freq === '2w') {
-        return this.$t(`event.recurrent_${freq}_day`, { day: weekDay })
-      } else if (freq === '1m' || freq === '2m') {
-        const monthDay = date.date()
-
-        const n = Math.floor((monthDay - 1) / 7) + 1
-
-        const patterns = [
-          { label: this.$t(`event.recurrent_${freq}_days`, { day: monthDay }), key: 'ordinal' },
-          { label: this.$t(`event.recurrent_${freq}_ordinal`, { n, day: weekDay }), key: 'weekday' },
-        ]
-
-        // if selected day is in last week, propose also this type of selection
-        const lastWeek = date.daysInMonth()-monthDay < 7
-        if (lastWeek) {
-          patterns.push(
-            { label: this.$t(`event.recurrent_${freq}_ordinaldesc`, { n, day: weekDay }), key: 'weekday_desc' }
-          )
-        }
-        return patterns
-      } else if (freq === '1d') {
-        return this.$t('event.recurrent_each_day')
-      }
-      return ''
-    },
-    todayEvents () {
-      if (this.type === 'multidate') {
-        if (!this.date || !this.date.start) { return }
-        const date_start = dayjs(this.date.start)
-        const date_end = dayjs(this.date.end)
-        return this.events.filter(e =>
-          !e.multidate
-            ? date_start.isSame(dayjs.unix(e.start_datetime), 'day') ||
-            (date_start.isBefore(dayjs.unix(e.start_dateime)) && date_end.isAfter(dayjs.unix(e.start_datetime)))
-            : date_start.isSame(dayjs.unix(e.start_datetime), 'day') || date_start.isSame(dayjs.unix(e.end_datetime)) ||
-            (date_start.isAfter(dayjs.unix(e.start_datetime)) && date_start.isBefore(dayjs.unix(e.end_datetime))))
-      } else if (this.type === 'recurrent') {
-        return []
-      } else {
-        const date = dayjs(this.date)
-        return this.events.filter(e =>
-          !e.multidate
-            ? !e.recurrent && date.isSame(dayjs.unix(e.start_datetime), 'day')
-            : dayjs.unix(e.start_datetime).isSame(date, 'day') ||
-              (dayjs.unix(e.start_datetime).isBefore(date) && dayjs.unix(e.end_datetime).isAfter(date))
-        )
-      }
-    },
-    attributes () {
-      let attributes = []
-      // attributes.push({ key: 'today', dates: new Date(), highlight: { color: 'red' } })
-
-      const date = dayjs(this.date)
-      const start = date.toDate()
-      attributes = attributes.concat(this.events
-        .filter(e => !e.multidate && (!e.parentId || this.type === 'recurrent'))
-        .map(e => ({ key: e.id, dot: { color: this.type === 'recurrent' ? 'orange' : 'green' }, dates: dayjs.unix(e.start_datetime).toDate() })))
-
-      if (this.type === 'recurrent' && this.date && this.date.length) {
-        let dates = {}
-        if (this.recurrent.frequency !== '1m') {
-          dates = {
-            weeklyInterval: this.recurrent.frequency === '1w' ? 1 : 2,
-            weekdays: date.day(),
-            start
-          } 
-        } else {
-          if (this.recurrent.type === 'ordinal') {
-            const day = date.date()
-            dates = {
-              monthlyInterval: 1,
-              start,
-              days
-            }
-          } else if (this.recurrent.type === 'weekday') {
-            dates = {
-              monthlyInterval: 1,
-              start,
-              days: [Math.floor((date.day() -1 /7)+1), date.day()]
-            }
-          } else {
-            dates = {
-              monthlyInterval: 1,
-              start,
-              days: [-1, date.day()]
-            }
-          }
-        }
-        attributes.push({
-          key: 'recurrent',
-          dot: { color: 'orange' },
-          dates
-        })
-      }
-      attributes = attributes.concat(this.events
-        .filter(e => e.multidate && !e.parentId)
-        .map(e => ({
-          key: e.id,
-          highlight: {},
-          dates: { start: dayjs.unix(e.start_datetime).toDate(), end: dayjs.unix(e.end_datetime).toDate() }
-        })))
-
-      return attributes
-    }
-  },
-  methods: {
-    dateChanged (value) {
-      console.error('date changed', value)
-    }
-  }
-  // extends: VInput
-}
-</script>
\ No newline at end of file
diff --git a/pages/add/WhereInput.vue b/pages/add/WhereInput.vue
new file mode 100644
index 00000000..0b278c18
--- /dev/null
+++ b/pages/add/WhereInput.vue
@@ -0,0 +1,60 @@
+<template lang="pug">
+  v-row
+    v-combobox.col-md-6(ref='place'
+      :rules="[$validators.required('common.where')]"
+      :label="$t('common.where')"
+      :hint="$t('event.where_description')"
+      :hide-no-data="!place._name"
+      :search-input.sync="place._name"
+      persistent-hint
+      :items="places"
+      item-text='name'
+      @change='selectPlace')
+      template(v-slot:no-data)
+        v-list-item
+          p Create {{place._name}}
+
+    v-text-field.col-md-6(ref='address'
+      :disabled='disableAddress'
+      :rules="[$validators.required('common.address')]"
+      :label="$t('common.address')"
+      @change="changeAddress"
+      :value="place.address")
+
+</template>
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'WhereInput',
+  data () {
+    return {
+      place: { _name: '' },
+      disableAddress: true
+    }
+  },
+  computed: {
+    ...mapState(['places'])
+  },
+  methods: {
+    selectPlace (p) {
+      console.error(p)
+      const place = p && this.places.find(place => place.id === p.id)
+      if (place && place.address) {
+        this.place.name = p.name
+        this.place.address = place.address
+        this.disableAddress = true
+      } else {
+        this.disableAddress = false
+        this.$refs.place.blur()
+        this.$refs.address.focus()
+      }
+      this.$emit('input', this.place)
+    },
+    changeAddress (v) {
+      this.place.address = v
+      this.$emit('input', this.place)
+    }
+  }
+}
+</script>
diff --git a/pages/add/_edit.vue b/pages/add/_edit.vue
index 0e95fb01..c9d0d6b8 100644
--- a/pages/add/_edit.vue
+++ b/pages/add/_edit.vue
@@ -4,130 +4,59 @@
       v-card-title
         h4 {{edit?$t('common.edit_event'):$t('common.add_event')}}
         v-spacer
-        v-btn(link text color='primary' @click='openImportDialog=true') 
+        v-btn(link text color='primary' @click='openImportDialog=true')
           <v-icon>mdi-file-import</v-icon> {{$t('common.import')}}
       v-dialog(v-model='openImportDialog')
         ImportDialog(@close='openImportDialog=false' @imported='eventImported')
 
       v-card-text
         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')")
 
-          //- Not logged event
-          div(v-if='!$auth.loggedIn')
-            v-divider <v-icon name='user-secret'/> {{$t('event.anon')}}
-            p(v-html="$t('event.anon_description')")
+              //- Title
+              v-text-field.col-12(
+                @change='v => event.title = v'
+                :value = 'event.title'
+                :rules="[$validators.required('common.title')]"
+                :hint="$t('event.what_description')"
+                :label="$t('common.title')"
+                autofocus
+                ref='title')
 
-          //- Title
-          v-text-field.mb-3(
-            @change='v => event.title = v'
-            :value = 'event.title'
-            :rules="[$validators.required('common.title')]"
-            :label="$t('event.what_description')" 
-            autofocus
-            ref='title')
+              //- Where
+              WhereInput.col-12(v-model='event.place')
 
-          //- Description
-          Editor(
-            v-model='event.description'
-            :placeholder="$t('event.description_description')"
-            max-height='400px')
+              //- When
+              DateInput.col-12(v-model='date')
+              HourInput.col-12(v-model='time')
 
-          //- Where
-          v-combobox.mt-2(v-model='event.place.name'
-            :rules="[$validators.required('common.where')]"
-            :label="$t('common.where')"
-            :hint="$t('event.where_description')"
-            persistent-hint
-            :items="places"
-            item-text='name'
-            @change='selectPlace')
-            //- template(v-slot:item="{ item }")
-              v-list-item(color='primary')
-                v-list-item-content(color='pink')
-                  v-list-item-title {{item.name}}
-                  v-list-item-subtitle {{item.address}}
+              //- Description
+              Editor.col-12.mb-3(
+                v-model='event.description'
+                :placeholder="$t('event.description_description')"
+                max-height='400px')
 
-          v-text-field.mt-3(ref='address'
-            :rules="[$validators.required('common.address')]"
-            :label="$t('common.address')"
-            @change="v => event.place.address = v"
-            :value="event.place.address"
-            :disabled='disableAddress')
+              //- MEDIA / FLYER / POSTER
 
-          //- When
-          WhenInput(v-model='date'
-            :rules="$validators.required('common.when')")
+              v-file-input.col-6.mt-3(
+                :label="$t('common.media')"
+                :hint="$t('event.media_description')"
+                prepend-icon="mdi-camera"
+                v-model='event.image'
+                persistent-hint
+                accept='image/*')
 
-          v-row
-              v-col
-                v-menu(v-model='fromDateMenu'
-                    :close-on-content-click="false"
-                    transition="slide-x-transition"
-                    ref='fromDateMenu'
-                    :return-value.sync="time.start"
-                    offset-y
-                    absolute
-                    top
-                    max-width="290px"
-                    min-width="290px")
-                  template(v-slot:activator='{ on }')
-                    v-text-field(
-                      :label="$t('event.from')"
-                      :rules="[$validators.required('event.from')]"
-                      :value='time.start'
-                      v-on='on'
-                      clearable)
-                  v-time-picker(
-                    v-if='fromDateMenu'
-                    :label="$t('event.from')"
-                    format="24hr"
-                    ref='time_start'
-                    :allowed-minutes="[0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55]"
-                    v-model='time.start'
-                    @click:minute="$refs.fromDateMenu.save(time.start)")
-
-              v-col
-                v-menu(v-model='dueDateMenu'
-                    :close-on-content-click="false"
-                    transition="slide-x-transition"
-                    ref='dueDateMenu'
-                    :return-value.sync="time.end"
-                    offset-y
-                    absolute
-                    top
-                    max-width="290px"
-                    min-width="290px")
-                  template(v-slot:activator='{ on }')
-                    v-text-field(
-                      :label="$t('event.due')"
-                      :value='time.end'
-                      v-on='on'
-                      clearable
-                      readonly)
-                  v-time-picker(
-                    v-if='dueDateMenu'
-                    :label="$t('event.due')"
-                    format="24hr"
-                    :allowed-minutes="[0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55]"
-                    v-model='time.end'
-                    @click:minute="$refs.dueDateMenu.save(time.end)")    
-
-          //- MEDIA / FLYER / POSTER
-
-          v-file-input(
-            :label="$t('common.media')"
-            :hint="$t('event.media_description')"
-            prepend-icon="mdi-camera"
-            v-model='event.image'
-            persistent-hint
-            accept='image/*')
-
-          //- tags
-          v-combobox.mt-3(v-model='event.tags'
-            chips small-chips multiple deletable-chips hide-no-data hide-selected persistent-hint
-            :delimiters="[',', ' ']"
-            :items="tags.map(t => t.tag)"
-            :label="$t('common.tags')")
+              //- tags
+              v-combobox.col-6.mt-3(v-model='event.tags'
+                chips small-chips multiple deletable-chips hide-no-data hide-selected persistent-hint
+                :delimiters="[',', ' ']"
+                :items="tags.map(t => t.tag)"
+                :label="$t('common.tags')")
 
       v-card-actions
         v-spacer
@@ -142,11 +71,13 @@ import dayjs from 'dayjs'
 import Editor from '@/components/Editor'
 import List from '@/components/List'
 import ImportDialog from './ImportDialog'
-import WhenInput from './WhenInput'
+import DateInput from './DateInput'
+import HourInput from './HourInput'
+import WhereInput from './WhereInput'
 
 export default {
   name: 'NewEvent',
-  components: { List, Editor, ImportDialog, WhenInput },
+  components: { List, Editor, ImportDialog, WhereInput, HourInput, DateInput },
   validate ({ store }) {
     return (store.state.auth.loggedIn || store.state.settings.allow_anon_event)
   },
@@ -191,8 +122,6 @@ export default {
     const year = dayjs().year()
     return {
       valid: false,
-      dueDateMenu: false,
-      fromDateMenu: false,
       openImportDialog: false,
       event: {
         type: 'normal',
@@ -200,7 +129,7 @@ export default {
         title: '',
         description: '',
         tags: [],
-        image: {},
+        image: null,
         recurrent: { frequency: '1m', days: [], type: 'weekday_desc' }
       },
       page: { month, year },
@@ -211,29 +140,17 @@ export default {
       edit: false,
       loading: false,
       mediaUrl: '',
-      disableAddress: false,
+      disableAddress: false
     }
   },
   computed: {
-    ...mapState(['tags', 'places', 'events', 'settings']),
+    ...mapState(['tags', 'places', 'events', 'settings'])
   },
   methods: {
     ...mapActions(['addEvent', 'updateEvent', 'updateMeta', 'updateEvents']),
     eventImported (event) {
       this.event = Object.assign(this.event, event)
     },
-    selectPlace (p) {
-      const place = p && this.places.find(place => place.id === p.id)
-      if (place && place.address) {
-        this.event.place.name = p.name
-        this.event.place.address = place.address
-        this.disableAddress = true
-      } else {
-        this.disableAddress = false
-        this.event.place.address = ''
-      }
-      // this.$nextTick(() => this.$refs.address.focus() )
-    },
     // recurrentDays () {
     //   if (this.event.type !== 'recurrent' || !this.date || !this.date.length) { return }
     //   const type = this.event.recurrent.type
@@ -244,7 +161,7 @@ export default {
       this.event.image = {}
     },
     async done () {
-      if (!this.$refs.form.validate()) return
+      if (!this.$refs.form.validate()) { return }
       this.loading = true
       let start_datetime, end_datetime
       const [start_hour, start_minute] = this.time.start.split(':')
@@ -325,11 +242,6 @@ export default {
 }
 </script>
 <style style='less'>
-.datePicker {
-  max-width: 500px !important;
-  margin: 0 auto;
-}
-
 .container {
   max-width: 1400px;
 }