refactoring media in event (multiple in db, focalpoint, alt text)

pages/add/_edit.vue

@@ -45,14 +45,7 @@
 
               //- MEDIA / FLYER / POSTER
               v-col(cols=12 md=6)
-                v-file-input(
-                  :label="$t('common.media')"
-                  :hint="$t('event.media_description')"
-                  prepend-icon="mdi-camera"
-                  v-model='event.image'
-                  persistent-hint
-                  accept='image/*')
-                v-img.col-12.col-sm-2.ml-3(v-if='mediaPreview' :src='mediaPreview')
+                MediaInput(v-model='event.media[0]' :event='event' @remove='event.media=[]')
 
               //- tags
               v-col(cols=12 md=6)
@@ -66,7 +59,7 @@
       v-card-actions
         v-spacer
         v-btn(@click='done' :loading='loading' :disabled='!valid || loading'
-          color='primary') {{edit?$t('common.edit'):$t('common.send')}}
+          color='primary') {{edit?$t('common.save'):$t('common.send')}}
 
 </template>
 <script>
@@ -77,16 +70,17 @@ import List from '@/components/List'
 import ImportDialog from './ImportDialog'
 import DateInput from './DateInput'
 import WhereInput from './WhereInput'
+import MediaInput from './MediaInput'
 
 export default {
   name: 'NewEvent',
-  components: { List, Editor, ImportDialog, WhereInput, DateInput },
+  components: { List, Editor, ImportDialog, MediaInput, WhereInput, DateInput },
   validate ({ store }) {
     return (store.state.auth.loggedIn || store.state.settings.allow_anon_event)
   },
   async asyncData ({ params, $axios, error, store }) {
     if (params.edit) {
-      const data = { event: { place: {} } }
+      const data = { event: { place: {}, media: [] } }
       data.id = params.edit
       data.edit = true
       let event
@@ -112,7 +106,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
+      data.event.media = event.media || []
       return data
     }
     return {}
@@ -128,7 +122,7 @@ export default {
         title: '',
         description: '',
         tags: [],
-        image: null
+        media: []
       },
       page: { month, year },
       fileList: [],
@@ -136,7 +130,6 @@ export default {
       date: { from: 0, due: 0, recurrent: null },
       edit: false,
       loading: false,
-      mediaUrl: '',
       disableAddress: false
     }
   },
@@ -145,16 +138,7 @@ export default {
       title: `${this.settings.title} - ${this.$t('common.add_event')}`
     }
   },
-  computed: {
-    ...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
-    }
-  },
+  computed: mapState(['tags', 'places', 'settings']),
   methods: {
     ...mapActions(['updateMeta']),
     eventImported (event) {
@@ -170,9 +154,6 @@ export default {
       }
       this.openImportDialog = false
     },
-    cleanFile () {
-      this.event.image = {}
-    },
     async done () {
       if (!this.$refs.form.validate()) {
         this.$nextTick(() => {
@@ -187,9 +168,13 @@ export default {
 
       formData.append('recurrent', JSON.stringify(this.date.recurrent))
 
-      if (this.event.image) {
-        formData.append('image', this.event.image)
+      if (this.event.media.length) {
+        formData.append('image', this.event.media[0].image)
+        formData.append('image_url', this.event.media[0].url)
+        formData.append('image_name', this.event.media[0].name)
+        formData.append('image_focalpoint', this.event.media[0].focalpoint)
       }
+
       formData.append('title', this.event.title)
       formData.append('place_name', this.event.place.name)
       formData.append('place_address', this.event.place.address)