From 46953da4cc82ab178394d01c5769a6de5697fb26 Mon Sep 17 00:00:00 2001
From: Matthieu Bessat <spamfree@matthieubessat.fr>
Date: Thu, 23 Jul 2020 12:42:43 +0200
Subject: [PATCH] bugs fixes

---
 src/components/AdditionalContacts.vue |   2 +-
 src/components/AvatarEditor.vue       |  12 ++-
 src/layouts/Delegate.vue              | 141 +++++++++++++++++---------
 src/store/index.ts                    |   7 ++
 src/views/Delegate/Contact.vue        |   3 +-
 src/views/Delegate/Gallery.vue        |   7 +-
 src/views/Delegate/Main.vue           |  21 ++--
 7 files changed, 131 insertions(+), 62 deletions(-)

diff --git a/src/components/AdditionalContacts.vue b/src/components/AdditionalContacts.vue
index 7297383..39f361a 100644
--- a/src/components/AdditionalContacts.vue
+++ b/src/components/AdditionalContacts.vue
@@ -156,7 +156,7 @@ export default {
       ]
     }
   }),
-  created () {
+  mounted () {
     let peoples = this.$store.state.data.contacts.peoples
     if (!Array.isArray(peoples)) {
       peoples = []
diff --git a/src/components/AvatarEditor.vue b/src/components/AvatarEditor.vue
index b8bd8b2..446cff4 100644
--- a/src/components/AvatarEditor.vue
+++ b/src/components/AvatarEditor.vue
@@ -9,14 +9,15 @@
       <v-card-text>
         <v-layout justify-center>
           <croppa
+            ref="croppa"
             class="canvas-container"
             v-model="plugin"
-            :show-remove-button="false"
             canvas-color="white"
-            :width="width"
-            :height="height"
             accept="image/jpeg,image/png"
             prevent-white-space
+            :width="width"
+            :height="height"
+            :show-remove-button="false"
             :initial-image="imageUrl"
             :placeholder-font-size="22"
             @file-size-exceed="handleFileSizeExceed"
@@ -108,6 +109,11 @@ export default {
   methods: {
     toggle: function () {
       this.enabled = !this.enabled
+      this.$nextTick(() => {
+        if (this.enabled) {
+          this.$refs.croppa.refresh()
+        }
+      })
     },
     clear: function () {
       this.plugin.remove()
diff --git a/src/layouts/Delegate.vue b/src/layouts/Delegate.vue
index 92ea7b7..c43dd93 100644
--- a/src/layouts/Delegate.vue
+++ b/src/layouts/Delegate.vue
@@ -29,6 +29,9 @@
           </template>
 
           <v-list>
+            <v-list-item @click="openPreviewModal()">
+              <v-list-item-title>Prévisualiser votre page</v-list-item-title>
+            </v-list-item>
             <v-list-item @click="goToPage()">
               <v-list-item-title>Ouvrir la page publique</v-list-item-title>
             </v-list-item>
@@ -205,11 +208,24 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
+    <Preview
+      ref="preview"
+      :enabled="previewModal"
+      :id="$store.state.delegate._id"
+      :slug="$store.state.delegate.slug"
+      :dialogTitle="'Prévisualiser votre page publique'"
+      @close="previewModal = false"
+    />
   </div>
 </template>
 
 <script>
+import Preview from '../components/Preview'
+
 export default {
+  components: {
+    Preview
+  },
   data: () => ({
     enabled: false,
     loading: true,
@@ -222,7 +238,8 @@ export default {
     publishModal: false,
     askingApprovalLoading: false,
     rejectionDetailsModal: false,
-    showPassword: false
+    showPassword: false,
+    previewModal: false
   }),
   created () {
     this.init()
@@ -252,6 +269,14 @@ export default {
     // }, 3000)
   },
   methods: {
+    openPreviewModal () {
+      this.save(false).then(() => {
+        this.$refs.preview.reload()
+        this.previewModal = true
+      }).catch((err) => {
+        console.log(err)
+      })
+    },
     selectRoute (route) {
       const path = route.path.split('/')
       const name = path[path.length - 1]
@@ -295,8 +320,10 @@ export default {
         const proposedVersion = res.data.data.organization.proposedVersion
         const tags = res.data.data.tags
         this.$store.commit('SET_DELEGATE', {
+          _id: organization._id,
           adminName: organization.adminName,
           email: organization.email,
+          slug: organization.slugs[organization.slugs.length - 1],
           publicUrl: process.env.VUE_APP_BASE_URL + '/association/' + organization.slugs[organization.slugs.length - 1],
           validationState: organization.validationState,
           rejectionDescription: organization.rejectionDescription
@@ -326,41 +353,47 @@ export default {
       window.localStorage.removeItem('delegateToken')
       this.$router.push('/')
     },
-    save () {
-      this.isSaving = true
-      const data = this.$store.state.data
-      data.pricing = data.pricing.map(i => {
-        delete i._id
-        return i
-      })
-      data.schedule = data.schedule.map(i => {
-        delete i._id
-        if (Array.isArray(i.when) && i.when.length > 0) {
-          i.when = i.when.map(w => {
-            delete w._id
-            return w
+    save (showSuccessAlert = true) {
+      return new Promise((resolve, reject) => {
+        this.isSaving = true
+        const data = this.$store.state.data
+        data.pricing = data.pricing.map(i => {
+          delete i._id
+          return i
+        })
+        data.schedule = data.schedule.map(i => {
+          delete i._id
+          if (Array.isArray(i.when) && i.when.length > 0) {
+            i.when = i.when.map(w => {
+              delete w._id
+              return w
+            })
+          }
+          return i
+        })
+        if (Array.isArray(data.contacts.peoples)) {
+          data.contacts.peoples = data.contacts.peoples.map(p => {
+            delete p._id
+            return p
           })
         }
-        return i
-      })
-      if (Array.isArray(data.contacts.peoples)) {
-        data.contacts.peoples = data.contacts.peoples.map(p => {
-          delete p._id
-          return p
-        })
-      }
-      this.$apitator.put('/delegate', data, { withAuth: true }).then(() => {
-        this.isSaving = false
-        this.$store.commit('ADD_ALERT', {
-          color: 'success',
-          text: 'Vos changements ont été sauvegardés !'
-        })
-      }).catch(err => {
-        console.log(err.data)
-        this.isSaving = false
-        this.$store.commit('ADD_ALERT', {
-          color: 'error',
-          text: 'Impossible de sauvegarder vos changements'
+        this.$apitator.put('/delegate', data, { withAuth: true }).then(() => {
+          this.isSaving = false
+          if (showSuccessAlert) {
+            this.$store.commit('ADD_ALERT', {
+              color: 'success',
+              text: 'Vos changements ont été sauvegardés !'
+            })
+          }
+          resolve()
+        }).catch(err => {
+          console.log(err.data)
+          this.isSaving = false
+          this.$store.commit('ADD_ALERT', {
+            color: 'error',
+            text: 'Impossible de sauvegarder vos changements'
+          })
+          reject(err)
         })
       })
     },
@@ -378,20 +411,34 @@ export default {
       window.open(this.$store.state.delegate.publicUrl, '_blank').focus()
     },
     openPublishModal () {
-      // compute if the user can ask approval
-      this.$store.commit('VALIDATE_MAIN', isValid => {
-        if (isValid) {
-          this.publishModal = true
-          this.save()
-        } else {
-          this.$store.commit('ADD_ALERT', {
-            color: 'error',
-            text: 'Vous devez remplir tout les champs requis afin de publier'
-          })
-          this.publishModal = false
-        }
-        this.canPublish = isValid
+      const open = () => {
+        // compute if the user can ask approval
+        this.$store.commit('VALIDATE_MAIN', isValid => {
+          if (isValid) {
+            this.publishModal = true
+            this.save(false).catch((err) => {
+              console.log(err)
+            })
+          } else {
+            this.$store.commit('ADD_ALERT', {
+              color: 'error',
+              text: 'Vous devez remplir tout les champs requis afin de publier'
+            })
+            this.publishModal = false
+          }
+          this.canPublish = isValid
+        })
+      }
+      this.$store.state.validateMain = false
+      this.$router.push({ name: 'DelegateMain' }, () => {
+        this.$store.commit('ON_MAIN_READY', () => {
+          open()
+          return true
+        })
       })
+      if (this.$route.name === 'DelegateMain') {
+        open()
+      }
     },
     askApproval () {
       this.askingApprovalLoading = true
diff --git a/src/store/index.ts b/src/store/index.ts
index d4267ac..457f8ae 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -18,6 +18,7 @@ interface State {
   debug: boolean;
   validateMain: boolean;
   validateMainCallback: any;
+  onMainReady: any;
 }
 
 const defaultState: State = {
@@ -52,6 +53,8 @@ const defaultState: State = {
     }
   },
   delegate: {
+    _id: '',
+    slug: '',
     validationState: 'unaware',
     admiName: '',
     email: '',
@@ -59,6 +62,7 @@ const defaultState: State = {
   },
   debug: false,
   validateMain: false,
+  onMainReady: () => false,
   validateMainCallback: (d = false) => d
 }
 
@@ -99,6 +103,9 @@ export default new Vuex.Store({
         state.validateMain = false
         return callback(d)
       }
+    },
+    ON_MAIN_READY (state: State, callback) {
+      state.onMainReady = callback
     }
   },
   actions: {
diff --git a/src/views/Delegate/Contact.vue b/src/views/Delegate/Contact.vue
index d04a1c6..e5cd458 100644
--- a/src/views/Delegate/Contact.vue
+++ b/src/views/Delegate/Contact.vue
@@ -17,6 +17,7 @@
       prepend-icon="public"
       label="Site web"
       outlined
+      :rules="rules.website"
       v-model="$store.state.data.contacts.website" />
     <v-textarea
       prepend-icon="room"
@@ -94,7 +95,7 @@ export default {
   data: () => ({
     rules: {
       website: [
-        v => v === '' || /.+@.+\..+/.test(v) || "L'email doit être valide"
+        v => v === '' || /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w.-]+)+[\w\-._~:/?#[\]@!$&'()*+,;=.]+$/gm.test(v) || "L'adresse web doit être valide"
       ],
       address: [
         v => v.length < 200 || 'Maximum 200 caractères'
diff --git a/src/views/Delegate/Gallery.vue b/src/views/Delegate/Gallery.vue
index a861307..50bb7af 100644
--- a/src/views/Delegate/Gallery.vue
+++ b/src/views/Delegate/Gallery.vue
@@ -119,8 +119,7 @@
               <span>Décaler vers la droite</span>
             </v-tooltip>
             <v-spacer />
-
-            <v-tooltip bottom>
+            <v-tooltip bottom v-if="media.contentType.split('/')[0] === 'image'">
               <template v-slot:activator="{ on, attrs }">
                 <v-btn
                   icon
@@ -351,14 +350,14 @@ export default {
     },
     clearCover () {
       this.$store.commit('SET_DATA', {
-        cover: undefined
+        cover: null
       })
     },
     openMedia (item) {
       window.open(item.location, '_blank').focus()
     },
     chooseAsCover (item) {
-      this.coverImage = item.location
+      this.coverImage = process.env.VUE_APP_BASE_URL + '/proxy-s3/' + item.key
       this.$refs.avatarEditor.toggle()
     }
   }
diff --git a/src/views/Delegate/Main.vue b/src/views/Delegate/Main.vue
index a2071ad..95e7ee6 100644
--- a/src/views/Delegate/Main.vue
+++ b/src/views/Delegate/Main.vue
@@ -127,20 +127,29 @@ export default {
   //   })
   // },
 
+  mounted () {
+    if (this.$store.state.onMainReady()) {
+      this.validate()
+    }
+  },
+
   watch: {
     '$store.state.validateMain' (val) {
       if (val) {
-        this.validateLogo = true
-        this.$store.state.validateMainCallback(
-          this.$refs.form.validate() &&
-          this.$store.state.data.thumbnail.location.length > 1
-        )
+        this.validate()
       }
     }
   },
 
   methods: {
-    handleAvatarEditorSubmitted: function (blob) {
+    validate () {
+      this.validateLogo = true
+      this.$store.state.validateMainCallback(
+        this.$refs.form.validate() &&
+        this.$store.state.data.thumbnail.location.length > 1
+      )
+    },
+    handleAvatarEditorSubmitted (blob) {
       const form = new FormData()
       form.append('file', blob, blob.filename)
       this.logoLoading = true