Refactor media upload

Use Upload Media logic from Pleroma

Backend changes for picture upload

Move AS <-> Model conversion to separate module

Front changes

Downgrade apollo-client: https://github.com/Akryum/vue-apollo/issues/577

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/views/Event/Create.vue

@@ -1,5 +1,5 @@
 <template>
-  <section>
+  <section class="container">
     <h1 class="title">
       <translate>Create a new event</translate>
     </h1>
@@ -22,6 +22,8 @@
           </b-select>
         </b-field>
 
+        <picture-upload @change="handlePictureUploadChange" />
+
         <button class="button is-primary">
           <translate>Create my event</translate>
         </button>
@@ -41,8 +43,11 @@ import {
     } from '@/types/event.model';
 import { LOGGED_PERSON } from '@/graphql/actor';
 import { IPerson, Person } from '@/types/actor';
+import PictureUpload from '@/components/PictureUpload.vue';
+import { IPictureUpload } from '@/types/picture.model';
 
 @Component({
+  components: { PictureUpload },
   apollo: {
     loggedPerson: {
       query: LOGGED_PERSON,
@@ -55,6 +60,8 @@ export default class CreateEvent extends Vue {
   loggedPerson: IPerson = new Person();
   categories: string[] = Object.keys(Category);
   event: IEvent = new EventModel();
+  pictureFile?: File;
+  pictureName?: String;
 
   createEvent(e: Event) {
     e.preventDefault();
@@ -62,15 +69,18 @@ export default class CreateEvent extends Vue {
     this.event.attributedTo = this.loggedPerson;
 
     if (this.event.uuid === '') {
+      console.log('event', this.event);
       this.$apollo
         .mutate({
           mutation: CREATE_EVENT,
           variables: {
             title: this.event.title,
             description: this.event.description,
-            beginsOn: this.event.beginsOn,
+            beginsOn: this.event.beginsOn.toISOString(),
             category: this.event.category,
             organizerActorId: this.event.organizerActor.id,
+            picture_file: this.pictureFile,
+            picture_name: this.pictureName,
           },
         })
         .then(data => {
@@ -100,6 +110,12 @@ export default class CreateEvent extends Vue {
     }
   }
 
+  handlePictureUploadChange(picture: IPictureUpload) {
+    console.log('picture upload change', picture);
+    this.pictureFile = picture.file;
+    this.pictureName = picture.name;
+  }
+
   // getAddressData(addressData) {
   //   if (addressData !== null) {
   //     this.event.address = {

js/src/views/Event/Event.vue

@@ -3,7 +3,10 @@
     <b-loading :active.sync="$apollo.loading"></b-loading>
     <div v-if="event">
       <div class="header-picture container">
-        <figure class="image is-3by1">
+        <figure class="image is-3by1" v-if="event.picture">
+          <img :src="event.picture.url">
+        </figure>
+        <figure class="image is-3by1" v-else>
           <img src="https://picsum.photos/600/200/">
         </figure>
       </div>
@@ -95,10 +98,10 @@
                 <translate
                         :translate-params="{name: event.organizerActor.name ? event.organizerActor.name : event.organizerActor.preferredUsername}"
                         v-if="event.organizerActor">By %{ name }</translate>
-                  <figure v-if="event.organizerActor.avatarUrl" class="image is-48x48">
+                  <figure v-if="event.organizerActor.avatar" class="image is-48x48">
                     <img
                             class="is-rounded"
-                            :src="event.organizerActor.avatarUrl"
+                            :src="event.organizerActor.avatar.url"
                             :alt="$gettextInterpolate('%{actor}\'s avatar', {actor: event.organizerActor.preferredUsername})" />
                   </figure>
                 </router-link>
@@ -185,8 +188,8 @@
 <!--          >-->
 <!--            <div>-->
 <!--              <figure>-->
-<!--                <img v-if="!participant.actor.avatarUrl" src="https://picsum.photos/125/125/">-->
-<!--                <img v-else :src="participant.actor.avatarUrl">-->
+<!--                <img v-if="!participant.actor.avatar.url" src="https://picsum.photos/125/125/">-->
+<!--                <img v-else :src="participant.actor.avatar.url">-->
 <!--              </figure>-->
 <!--              <span>{{ participant.actor.preferredUsername }}</span>-->
 <!--            </div>-->