media preview + improve import dialog

pages/add/ImportDialog.vue

@@ -4,22 +4,22 @@
     v-card-text
       p(v-html="$t('event.import_description')")
       v-form(v-model='valid' ref='form' lazy-validation @submit.prevent='importGeneric')
-        v-text-field(v-model='URL'
-          :label="$t('common.url')"
-          :hint="$t('event.import_URL')"
-          persistent-hint
-          :loading='loading' :error='error'
-          :error-messages='errorMessage')
+        v-row
+          v-col
+            v-text-field(v-model='URL'
+              :label="$t('common.url')"
+              :hint="$t('event.import_URL')"
+              persistent-hint
+              :loading='loading' :error='error'
+              :error-messages='errorMessage')
+          v-col
+            v-file-input(
+              v-model='file'
+              accept=".ics"
+              :label="$t('event.ics')"
+              :hint="$t('event.import_ICS')"
+              persistent-hint)
 
-        v-file-input(
-          v-model='file'
-          accept=".ics"
-          :label="$t('event.ics')"
-          :hint="$t('event.import_ICS')"
-          persistent-hint
-        )
-
-      p {{events}}
     v-card-actions
       v-spacer
       v-btn(@click='$emit("close")' color='warning') {{$t('common.cancel')}}
@@ -29,6 +29,8 @@
 </template>
 <script>
 import ical from 'ical.js'
+import get from 'lodash/get'
+import { mapState } from 'vuex'
 
 export default {
   name: 'ImportDialog',
@@ -40,9 +42,10 @@ export default {
       loading: false,
       valid: false,
       URL: '',
-      events: {}
+      event: {}
     }
   },
+  computed: mapState(['places']),
   methods: {
     importGeneric () {
       if (this.file) {
@@ -55,15 +58,24 @@ export default {
       const reader = new FileReader()
       reader.readAsText(this.file)
       reader.onload = () => {
-        const event = ical.parse(reader.result)
+        const ret = ical.parse(reader.result)
+        const component = new ical.Component(ret)
+        const events = component.getAllSubcomponents('vevent')
+        const event = new ical.Event(events[0])
         this.event = {
-          title: event.name
+          title: get(event, 'summary', ''),
+          description: get(event, 'description', ''),
+          place: { name: get(event, 'location', '') },
+          start_datetime: get(event, 'startDate', '').toUnixTime(),
+          end_datetime: get(event, 'endDate', '').toUnixTime()
         }
+
+        this.$emit('imported', this.event)
       }
     },
     async importURL () {
       if (!this.URL) {
-        this.errorMessage = this.$validators.required('common.URL')('')
+        this.errorMessage = this.$validators.required('common.url')('')
         this.error = true
         return
       }

pages/add/WhereInput.vue

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

pages/add/_edit.vue

@@ -56,6 +56,7 @@
                 :delimiters="[',', ' ']"
                 :items="tags.map(t => t.tag)"
                 :label="$t('common.tags')")
+              v-img.col-12.col-sm-2.ml-3(v-if='mediaPreview' :src='mediaPreview')
 
       v-card-actions
         v-spacer
@@ -70,12 +71,11 @@ import Editor from '@/components/Editor'
 import List from '@/components/List'
 import ImportDialog from './ImportDialog'
 import DateInput from './DateInput'
-import HourInput from './HourInput'
 import WhereInput from './WhereInput'
 
 export default {
   name: 'NewEvent',
-  components: { List, Editor, ImportDialog, WhereInput, HourInput, DateInput },
+  components: { List, Editor, ImportDialog, WhereInput, DateInput },
   validate ({ store }) {
     return (store.state.auth.loggedIn || store.state.settings.allow_anon_event)
   },
@@ -107,6 +107,7 @@ export default {
       data.event.description = event.description
       data.event.id = event.id
       data.event.tags = event.tags
+      data.event.image_path = event.image_path
       return data
     }
     return {}
@@ -117,6 +118,7 @@ export default {
     return {
       valid: false,
       openImportDialog: false,
+      openMediaDialog: false,
       event: {
         place: { name: '', address: '' },
         title: '',
@@ -140,12 +142,27 @@ export default {
     }
   },
   computed: {
-    ...mapState(['tags', 'places', 'settings'])
+    ...mapState(['tags', 'places', 'settings']),
+    mediaPreview () {
+      if (!this.event.image && !this.event.image_path) {
+        return false
+      }
+      const url = this.event.image ? URL.createObjectURL(this.event.image) : `/media/thumb/${this.event.image_path}`
+      return url
+    }
   },
   methods: {
     ...mapActions(['updateMeta']),
     eventImported (event) {
       this.event = Object.assign(this.event, event)
+      this.date = {
+        recurrent: this.event.recurrent,
+        from: new Date(dayjs.unix(this.event.start_datetime)),
+        due: new Date(dayjs.unix(this.event.end_datetime)),
+        multidate: event.multidate,
+        fromHour: true,
+        dueHour: true
+      }
     },
     cleanFile () {
       this.event.image = {}

pages/event/_id.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-v-container
+v-container#event
   //- EVENT PAGE
   //- gancio supports microformats (http://microformats.org/wiki/h-event)
   v-card.h-event
@@ -15,7 +15,7 @@ v-container
             :src='imgPath'
             :lazy-src='thumbImgPath'
             v-if='event.image_path')
-          .p-description.text-body-1(v-else v-html='event.description')
+          .p-description.text-body-1.pa-3.grey.darken-4.rounded(v-else v-html='event.description')
 
             //- template(v-slot:placeholder)
               //- v-row(
@@ -66,7 +66,7 @@ v-container
                     :href='`/api/event/${event.slug || event.id}.ics`')
                     v-icon mdi-calendar-export
 
-      .p-description.text-body-1(v-if='event.image_path' v-html='event.description')
+      .p-description.text-body-1.pa-3.grey.darken-4.rounded(v-if='event.image_path && event.description' v-html='event.description')
 
       //- resources from fediverse
       #resources.mt-1(v-if='settings.enable_federation')