From 90cd5ec5829b6e933cea442f1019c17d46ce06d9 Mon Sep 17 00:00:00 2001
From: Matthieu Bessat <spamfree@matthieubessat.fr>
Date: Sun, 19 Jul 2020 15:27:26 +0200
Subject: [PATCH] update

---
 src/components/AvatarEditor.vue      |  2 ++
 src/components/Preview.vue           | 44 ++++++++++++++++++++++++----
 src/layouts/Delegate.vue             |  8 +----
 src/store/index.ts                   |  7 +++--
 src/views/Admin/OrganizationList.vue | 19 +++++++++---
 src/views/Delegate/Gallery.vue       |  6 +++-
 src/views/Delegate/Main.vue          | 29 ++++++++++++++----
 7 files changed, 89 insertions(+), 26 deletions(-)

diff --git a/src/components/AvatarEditor.vue b/src/components/AvatarEditor.vue
index 9ea2871..a8619f0 100644
--- a/src/components/AvatarEditor.vue
+++ b/src/components/AvatarEditor.vue
@@ -15,6 +15,7 @@
             canvas-color="white"
             :width="width"
             :height="height"
+            accept="image/jpeg,image/png"
             prevent-white-space
             :placeholder-font-size="22"
             @file-size-exceed="handleFileSizeExceed"
@@ -60,6 +61,7 @@
           text
           :loading="loading"
           color="primary"
+          :disabled="$store.state.delegate.validationState === 'pending'"
           @click="submit">
           Sauvegarder
         </v-btn>
diff --git a/src/components/Preview.vue b/src/components/Preview.vue
index 320a614..c93b9d2 100644
--- a/src/components/Preview.vue
+++ b/src/components/Preview.vue
@@ -26,11 +26,27 @@
           <slot />
         </v-toolbar-items>
       </v-toolbar>
-      <v-card-text class="frame-container">
-        <iframe
-          class="frame"
-          :src="frameUrl">
-        </iframe>
+      <v-card-text class="preview-content">
+        <!-- <v-tabs
+          v-model="tab"
+          centered
+          show-arrows
+          slider-color="accent"
+          ref="tabs"
+        >
+          <v-tab @click="tab = 0">
+            Accueil
+          </v-tab>
+          <v-tab @click="tab = 1">
+            Page
+          </v-tab>
+        </v-tabs> -->
+        <div class="frame-container">
+          <iframe
+            class="frame"
+            :src="frameUrl">
+          </iframe>
+        </div>
       </v-card-text>
     </v-card>
   </v-dialog>
@@ -39,6 +55,10 @@
 <script>
 export default {
   props: {
+    id: {
+      type: String,
+      required: true
+    },
     slug: {
       type: String,
       required: true
@@ -56,15 +76,27 @@ export default {
       default: 'proposed'
     }
   },
+  data: () => ({
+    tab: 0
+  }),
   computed: {
     frameUrl () {
-      return process.env.VUE_APP_BASE_URL + '/association/' + this.slug + '?version=' + this.version
+      if (this.tab === 1) {
+        return process.env.VUE_APP_BASE_URL + '/association/' + this.slug + '?version=' + this.version
+      } else {
+        return process.env.VUE_APP_BASE_URL + '?only=' + this.id
+      }
     }
   }
 }
 </script>
 
 <style scoped>
+.preview-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
 .frame-container {
   height: 100%;
   display: flex;
diff --git a/src/layouts/Delegate.vue b/src/layouts/Delegate.vue
index 5af7d4c..dfa23aa 100644
--- a/src/layouts/Delegate.vue
+++ b/src/layouts/Delegate.vue
@@ -293,16 +293,10 @@ export default {
         const organization = res.data.data.organization
         const proposedVersion = res.data.data.organization.proposedVersion
         const tags = res.data.data.tags
-        if (
-          proposedVersion.tag !== undefined &&
-          proposedVersion.tag !== null
-        ) {
-          proposedVersion.tag = proposedVersion.tag._id
-        }
         this.$store.commit('SET_DELEGATE', {
           adminName: organization.adminName,
           email: organization.email,
-          publicUrl: process.env.VUE_APP_BASE_URL + '/association/' + organization.slug,
+          publicUrl: process.env.VUE_APP_BASE_URL + '/association/' + organization.slugs[organization.slugs.length - 1],
           validationState: organization.validationState,
           rejectionDescription: organization.rejectionDescription
         })
diff --git a/src/store/index.ts b/src/store/index.ts
index d226422..73839a8 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -14,6 +14,7 @@ export default new Vuex.Store({
     tags: [],
     data: {
       name: '',
+      tags: [],
       descriptionShort: '',
       descriptionLong: '',
       thumbnail: {
@@ -41,7 +42,7 @@ export default new Vuex.Store({
     },
     debug: false,
     validateMain: false,
-    validateMainCallback: () => false
+    validateMainCallback: (d: boolean) => false
   },
   mutations: {
     SET_DEBUG (state, payload) {
@@ -74,9 +75,9 @@ export default new Vuex.Store({
     },
     VALIDATE_MAIN (state, callback) {
       state.validateMain = true
-      state.validateMainCallback = () => {
+      state.validateMainCallback = (d: boolean) => {
         state.validateMain = false
-        return callback()
+        return callback(d)
       }
     }
   },
diff --git a/src/views/Admin/OrganizationList.vue b/src/views/Admin/OrganizationList.vue
index ee72f98..09f2ce7 100644
--- a/src/views/Admin/OrganizationList.vue
+++ b/src/views/Admin/OrganizationList.vue
@@ -209,6 +209,11 @@
                 <v-list-item-title>{{ toSeeItem.token }}</v-list-item-title>
                 <v-list-item-subtitle>Token/clé</v-list-item-subtitle>
               </v-list-item-content>
+              <v-list-item-action>
+                <v-btn color="info" outlined @click="openPanel(toSeeItem)" small icon>
+                  <v-icon small>launch</v-icon>
+                </v-btn>
+              </v-list-item-action>
             </v-list-item>
 
             <v-divider />
@@ -233,7 +238,6 @@
             </div>
 
             <div v-if="toSeeItem.publishedAt !== undefined">
-              <v-divider  />
               <v-list-item>
                 <v-list-item-action />
                 <v-list-item-content>
@@ -281,7 +285,8 @@
     </v-dialog>
     <Preview
       :enabled="approveModal"
-      :slug="toApproveItem.slug"
+      :id="toApproveItem._id"
+      :slug="toApproveItem.slugs[0]"
       :dialogTitle="approveModalTitle"
       @close="approveModal = false"
     >
@@ -325,11 +330,12 @@ export default {
 
   data: () => {
     const item = {
+      _id: '',
       adminName: '',
       email: '',
       validationState: 'unaware',
       rejectionDescription: '',
-      slug: ''
+      slugs: ['']
     }
     return {
       dialog: false,
@@ -518,7 +524,12 @@ export default {
     },
 
     openExternal (item) {
-      window.open(process.env.VUE_APP_BASE_URL + '/association/' + item.slug + '?version=proposed', '_blank').focus()
+      window.open(process.env.VUE_APP_BASE_URL + '/association/' + item.slugs[item.slug.length - 1] + '?version=proposed', '_blank').focus()
+    },
+
+    openPanel (item) {
+      const routeData = this.$router.resolve({ name: 'DelegateMain', query: { delegateToken: item.token } })
+      window.open(routeData.href, '_blank').focus()
     },
 
     openApproveModal (item) {
diff --git a/src/views/Delegate/Gallery.vue b/src/views/Delegate/Gallery.vue
index d83f437..1be770e 100644
--- a/src/views/Delegate/Gallery.vue
+++ b/src/views/Delegate/Gallery.vue
@@ -43,7 +43,11 @@
     />
     <!-- COVER END -->
     <div class="d-flex justify-end mb-3">
-      <v-btn color="primary" outlined @click="addMediaModal = true">
+      <v-btn
+        color="primary"
+        outlined
+        :disabled="$store.state.delegate.validationState === 'pending'"
+        @click="addMediaModal = true">
         <v-icon left>add</v-icon>
         Ajouter un média
       </v-btn>
diff --git a/src/views/Delegate/Main.vue b/src/views/Delegate/Main.vue
index a288cc2..4fec376 100644
--- a/src/views/Delegate/Main.vue
+++ b/src/views/Delegate/Main.vue
@@ -19,13 +19,24 @@
             <img :src="$store.state.data.thumbnail.location" />
           </v-avatar>
         </v-col>
-        <v-col cols="12" sm="6" style="align-items: center; justify-content: center; display: flex;">
-          <v-btn @click="$refs.avatarEditor.toggle()" color="primary" outlined>
+        <v-col cols="12" sm="6" style="align-items: center; justify-content: center; display: flex; flex-direction: column">
+          <v-btn
+            color="primary"
+            outlined
+            :disabled="$store.state.delegate.validationState === 'pending'"
+            @click="$refs.avatarEditor.toggle()"
+          >
             <v-icon left>
               edit
             </v-icon>
-            Changer le logo
+            <span v-if="$store.state.data.thumbnail.location === ''">Définir un logo</span>
+            <span v-else>Changer le logo</span>
           </v-btn>
+          <div
+            v-if="$store.state.data.thumbnail.location === '' && validateLogo"
+            class="red--text mt-2">
+            Vous devez définir un logo !
+          </div>
         </v-col>
       </v-row>
 
@@ -39,10 +50,12 @@
       <v-select
         label="Catégorie(s) de l'association"
         outlined
+        multiple
         prepend-icon="category"
         item-text="name"
         item-value="_id"
-        v-model="$store.state.data.tag"
+        v-model="$store.state.data.tags"
+        :rules="rules.tags"
         :items="$store.state.tags">
       </v-select>
 
@@ -91,6 +104,7 @@ export default {
   data: () => ({
     formValid: true,
     logoLoading: false,
+    validateLogo: false,
     rules: {
       name: [
         v => v.length >= 3 || 'Au minimum 3 caractères',
@@ -100,6 +114,7 @@ export default {
         v => v.length >= 20 || 'Au minimum 20 caractères',
         v => v.length <= 200 || 'Au maximum 200 caractères'
       ],
+      tags: [v => (Array.isArray(v) && v.length > 0) || 'Vous devez choisir au minimum une catégorie'],
       email: [v => /.+@.+\..+/.test(v) || "L'email est requis et dois être valide"],
       person: [v => v.length >= 4 || 'Au minimum 4 caractères']
     }
@@ -115,7 +130,11 @@ export default {
   watch: {
     '$store.state.validateMain' (val) {
       if (val) {
-        this.$store.state.validateMainCallback(this.$refs.form.validate())
+        this.validateLogo = true
+        this.$store.state.validateMainCallback(
+          this.$refs.form.validate() &&
+          this.$store.state.data.thumbnail.location.length > 1
+        )
       }
     }
   },