Prevent picture resend on event update, handle duplicate pictures

properly in backend and add a proper default picture

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

js/src/views/Event/Edit.vue

@@ -259,7 +259,7 @@ import TagInput from '@/components/Event/TagInput.vue';
 import { TAGS } from '@/graphql/tags';
 import { ITag } from '@/types/tag.model';
 import AddressAutoComplete from '@/components/Event/AddressAutoComplete.vue';
-import { buildFileFromIPicture, buildFileVariable } from '@/utils/image';
+import { buildFileFromIPicture, buildFileVariable, readFileAsync } from '@/utils/image';
 import IdentityPickerWrapper from '@/views/Account/IdentityPickerWrapper.vue';
 import { RouteName } from '@/router';
 
@@ -377,10 +377,12 @@ export default class EditEvent extends Vue {
   }
 
   async createEvent() {
+    const variables = await this.buildVariables();
+
     try {
       const { data } = await this.$apollo.mutate({
         mutation: CREATE_EVENT,
-        variables: this.buildVariables(),
+        variables,
         update: (store, { data: { createEvent } }) => this.postCreateOrUpdate(store, createEvent),
         refetchQueries: ({ data: { createEvent } }) => this.postRefetchQueries(createEvent),
       });
@@ -403,10 +405,12 @@ export default class EditEvent extends Vue {
   }
 
   async updateEvent() {
+    const variables = await this.buildVariables();
+
     try {
       await this.$apollo.mutate({
         mutation: EDIT_EVENT,
-        variables: this.buildVariables(),
+        variables,
         update: (store, { data: { updateEvent } }) => this.postCreateOrUpdate(store, updateEvent),
         refetchQueries: ({ data: { updateEvent } }) => this.postRefetchQueries(updateEvent),
       });
@@ -489,7 +493,7 @@ export default class EditEvent extends Vue {
   /**
    * Build variables for Event GraphQL creation query
    */
-  private buildVariables() {
+  private async buildVariables() {
     let res = this.event.toEditJSON();
     if (this.event.organizerActor) {
       res = Object.assign(res, { organizerActorId: this.event.organizerActor.id });
@@ -502,8 +506,17 @@ export default class EditEvent extends Vue {
     }
 
     const pictureObj = buildFileVariable(this.pictureFile, 'picture');
+    res = Object.assign({}, res, pictureObj);
 
-    return Object.assign({}, res, pictureObj);
+    if (this.event.picture) {
+      const oldPictureFile = await buildFileFromIPicture(this.event.picture) as File;
+      const oldPictureFileContent = await readFileAsync(oldPictureFile);
+      const newPictureFileContent = await readFileAsync(this.pictureFile as File);
+      if (oldPictureFileContent === newPictureFileContent) {
+        res.picture = { pictureId: this.event.picture.id };
+      }
+    }
+    return res;
   }
 
   private async getEvent() {

js/src/views/Event/Event.vue

@@ -4,14 +4,8 @@ import {ParticipantRole} from "@/types/event.model";
     <b-loading :active.sync="$apollo.loading"></b-loading>
     <transition appear name="fade" mode="out-in">
       <div v-if="event">
-        <div class="header-picture" :style="`background-image: url('${event.picture ? event.picture.url : 'https://picsum.photos/600/200/'}')`">
-          <!--<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>
+        <div class="header-picture" v-if="event.picture" :style="`background-image: url('${event.picture.url}')`" />
+        <div class="header-picture-default" v-else />
           <section>
             <div class="title-and-participate-button">
               <div class="title-wrapper">
@@ -552,14 +546,17 @@ export default class Event extends EventMixin {
     opacity: 0;
   }
 
-  .header-picture {
+  .header-picture, .header-picture-default {
     height: 400px;
     background-size: cover;
-    // background-position: center center;
-    background-attachment: fixed;
+    background-position: center;
     background-repeat: no-repeat;
   }
 
+  .header-picture-default {
+    background-image: url('/img/mobilizon_default_card.png');
+  }
+
   div.sidebar {
     display: flex;
     flex-wrap: wrap;