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/components/Account/Identities.vue

@@ -8,8 +8,8 @@
       <li v-for="identity in identities" :key="identity.id">
         <div class="media identity" v-bind:class="{ 'is-current-identity': isCurrentIdentity(identity) }">
           <div class="media-left">
-            <figure class="image is-48x48">
-              <img class="is-rounded" :src="identity.avatarUrl">
+            <figure class="image is-48x48" v-if="identity.avatar">
+              <img class="is-rounded" :src="identity.avatar.url">
             </figure>
           </div>
 

js/src/components/Event/EventCard.vue

@@ -2,7 +2,7 @@
   <router-link class="card" :to="{ name: 'Event', params: { uuid: event.uuid } }">
     <div class="card-image" v-if="!event.image">
       <figure class="image is-16by9">
-        <div class="tag-container">
+        <div class="tag-container" v-if="event.tags">
           <b-tag v-for="tag in event.tags.slice(0, 3)" :key="tag.slug" type="is-secondary">{{ tag.title }}</b-tag>
         </div>
         <img src="https://picsum.photos/g/400/225/?random">

js/src/components/Group/GroupCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="card">
-    <div class="card-image" v-if="!group.bannerUrl">
+    <div class="card-image" v-if="!group.banner">
       <figure class="image is-4by3">
         <img src="https://picsum.photos/g/400/200/">
       </figure>

js/src/components/NavBar.vue

@@ -40,8 +40,8 @@
                 v-if="currentUser.isLoggedIn && loggedPerson"
                 :to="{ name: 'MyAccount' }"
               >
-                <figure class="image is-24x24">
-                  <img :src="loggedPerson.avatarUrl">
+                <figure class="image is-24x24" v-if="loggedPerson.avatar">
+                  <img :src="loggedPerson.avatar.url">
                 </figure>
                 <span>{{ loggedPerson.preferredUsername }}</span>
               </router-link>

js/src/components/PictureUpload.vue

@@ -0,0 +1,29 @@
+<template>
+    <b-field class="file">
+        <b-upload v-model="pictureFile" @input="onFileChanged">
+            <a class="button is-primary">
+                <b-icon icon="upload"></b-icon>
+                <span>Click to upload</span>
+            </a>
+        </b-upload>
+        <span class="file-name" v-if="pictureFile">
+            {{ pictureFile.name }}
+        </span>
+    </b-field>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import { IPictureUpload } from '@/types/picture.model';
+
+@Component
+export default class PictureUpload extends Vue {
+  picture!: IPictureUpload;
+  pictureFile: File|null = null;
+
+  onFileChanged(file: File) {
+    this.picture = { file, name: file.name, alt: '' };
+    this.$emit('change', this.picture);
+  }
+}
+</script>