Refactor Picture upload

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

js/src/views/Account/children/EditIdentity.vue

@@ -27,7 +27,7 @@
         <span v-else>{{ $t("I create an identity") }}</span>
       </h1>
 
-      <picture-upload v-model="avatarFile" :defaultImageSrc="avatarUrl" class="picture-upload" />
+      <picture-upload v-model="avatarFile" :defaultImage="identity.avatar" class="picture-upload" />
 
       <b-field horizontal :label="$t('Display name')">
         <b-input
@@ -124,6 +124,7 @@ h1 {
 <script lang="ts">
 import { Component, Prop, Watch } from "vue-property-decorator";
 import { mixins } from "vue-class-component";
+import { IPicture } from "@/types/picture.model";
 import {
   CREATE_PERSON,
   CURRENT_ACTOR_CLIENT,
@@ -136,7 +137,7 @@ import { IPerson, Person } from "../../../types/actor";
 import PictureUpload from "../../../components/PictureUpload.vue";
 import { MOBILIZON_INSTANCE_HOST } from "../../../api/_entrypoint";
 import RouteName from "../../../router/name";
-import { buildFileVariable } from "../../../utils/image";
+import { buildFileFromIPicture, buildFileVariable } from "../../../utils/image";
 import { changeIdentity } from "../../../utils/auth";
 import identityEditionMixin from "../../../mixins/identityEdition";
 
@@ -186,13 +187,6 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
     ) as string;
   }
 
-  get avatarUrl(): string | null {
-    if (this.identity && this.identity.avatar && this.identity.avatar.url) {
-      return this.identity.avatar.url;
-    }
-    return null;
-  }
-
   @Watch("isUpdate")
   async isUpdateChanged(): Promise<void> {
     this.resetFields();
@@ -286,7 +280,6 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
           }
         },
       });
-      this.avatarFile = null;
 
       this.$notifier.success(
         this.$t("Identity {displayName} updated", {

js/src/views/Event/Edit.vue

@@ -10,7 +10,11 @@
 
       <form ref="form">
         <subtitle>{{ $t("General information") }}</subtitle>
-        <picture-upload v-model="pictureFile" :textFallback="$t('Headline picture')" />
+        <picture-upload
+          v-model="pictureFile"
+          :textFallback="$t('Headline picture')"
+          :defaultImage="event.picture"
+        />
 
         <b-field :label="$t('Title')" :type="checkTitleLength[0]" :message="checkTitleLength[1]">
           <b-input size="is-large" aria-required="true" required v-model="event.title" />
@@ -676,6 +680,7 @@ export default class EditEvent extends Vue {
             __typename: "Person",
             id: organizerActor.id,
             participations: {
+              __typename: "PaginatedParticipantList",
               total: 1,
               elements: [
                 {
@@ -763,11 +768,13 @@ export default class EditEvent extends Vue {
       res.endsOn = null;
     }
 
-    const pictureObj = buildFileVariable(this.pictureFile, "picture");
-    res = { ...res, ...pictureObj };
+    if (this.pictureFile) {
+      const pictureObj = buildFileVariable(this.pictureFile, "picture");
+      res = { ...res, ...pictureObj };
+    }
 
     try {
-      if (this.event.picture) {
+      if (this.event.picture && this.pictureFile) {
         const oldPictureFile = (await buildFileFromIPicture(this.event.picture)) as File;
         const oldPictureFileContent = await readFileAsync(oldPictureFile);
         const newPictureFileContent = await readFileAsync(this.pictureFile as File);

js/src/views/Group/GroupSettings.vue

@@ -31,7 +31,7 @@
         </li>
       </ul>
     </nav>
-    <section class="container section" v-if="isCurrentActorAGroupAdmin">
+    <section class="container section" v-if="group && isCurrentActorAGroupAdmin">
       <form @submit.prevent="updateGroup">
         <b-field :label="$t('Group name')">
           <b-input v-model="group.name" />
@@ -43,7 +43,7 @@
           <picture-upload
             :textFallback="$t('Avatar')"
             v-model="avatarFile"
-            :defaultImageSrc="group.avatar ? group.avatar.url : null"
+            :defaultImage="group.avatar"
           />
         </b-field>
 
@@ -51,7 +51,7 @@
           <picture-upload
             :textFallback="$t('Banner')"
             v-model="bannerFile"
-            :defaultImageSrc="group.banner ? group.banner.url : null"
+            :defaultImage="group.banner"
           />
         </b-field>
         <p class="label">{{ $t("Group visibility") }}</p>

js/src/views/Posts/Edit.vue

@@ -12,7 +12,7 @@
         <picture-upload
           v-model="pictureFile"
           :textFallback="$t('Headline picture')"
-          :defaultImageSrc="post.picture ? post.picture.url : null"
+          :defaultImage="post.picture"
         />
 
         <b-field