update

src/layouts/Admin.vue

@@ -4,7 +4,7 @@
       <v-app-bar
         app
         clipped-right
-        color="blue-grey"
+        color="primary"
         dark
       >
         <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>

src/layouts/Delegate.vue

@@ -2,13 +2,18 @@
   <v-main>
     <div v-if="enabled">
       <v-toolbar
-        color="primary"
+        color="orange darken-3"
         dark
         flat
       >
-        <v-toolbar-title>{{ $store.state.delegateAdminName }}</v-toolbar-title>
+        <v-toolbar-title>{{ $store.state.delegate.adminName }}</v-toolbar-title>
         <v-spacer></v-spacer>
-        <v-btn outlined class="mr-3" @click="openPublishModal()">
+        <v-btn
+          outlined
+          class="mr-3"
+          :disabled="$store.state.delegate.validationState === 'pending'"
+          @click="openPublishModal()"
+        >
           Publier
         </v-btn>
         <v-menu bottom close-on-content-click>
@@ -44,7 +49,7 @@
             v-model="tab"
             centered
             show-arrows
-            slider-color="yellow"
+            slider-color="accent"
             ref="tabs"
           >
             <v-tab @click="navigate('DelegateMain')">
@@ -71,9 +76,40 @@
       <v-container fluid>
         <v-row class="justify-center">
           <v-col cols="12" sm="12" md="8" lg="7" xl="5">
+            <v-alert
+              v-if="$store.state.delegate.validationState === 'rejected'"
+              prominent
+              type="info"
+              border="left"
+              color="error">
+              <v-row align="center">
+                <v-col class="grow">
+                  Les changements apportés ont été refusés, vous devez donc les modifiers
+                </v-col>
+                <v-col class="shrink">
+                  <v-btn outlined @click="rejectionDetailsModal = true">Pourquoi ?</v-btn>
+                </v-col>
+              </v-row>
+            </v-alert>
+            <v-alert
+              v-if="$store.state.delegate.validationState === 'pending'"
+              type="error"
+              color="error">
+              Votre association est verrouillé car elle est en attente d'une vérification, même si vous pouvez faire des changements il sera impossible de les sauvegarder.
+            </v-alert>
             <router-view></router-view>
             <div class="mt-3 d-flex justify-end">
-              <v-btn color="success" :loading="isSaving" @click="save()">Sauvegarder</v-btn>
+              <v-btn
+                color="success"
+                :loading="isSaving"
+                @click="save()"
+                :disabled="$store.state.delegate.validationState === 'pending'"
+              >
+                <v-icon left>
+                  check_circle
+                </v-icon>
+                Sauvegarder
+              </v-btn>
             </div>
           </v-col>
         </v-row>
@@ -108,15 +144,30 @@
         </v-card-actions>
       </v-card>
     </div>
-    <v-dialog v-model="publishModal">
-      <v-card max-width="700px">
+    <v-dialog v-model="publishModal" max-width="700px">
+      <v-card>
         <v-card-title>
-          Publier les modifications apportés à votre association
+          Demander une vérification humaine
         </v-card-title>
         <v-card-text>
-          <p>
-            Aliquyam est dolores voluptua consetetur stet erat eos sit. Est eirmod ut et voluptua, et sed eos sanctus sit erat.
-          </p>
+          <div v-if="canPublish">
+            <p>
+              Avant que vos changements ne soient publiés et accessibles à l'adresse <a :href="$store.state.delegate.publicUrl">{{ $store.state.delegatePublicUrl }}</a>, ils doivent être vérifié par la personne en charge de la publication.
+            </p>
+            <p>
+              Veillez à ne pas demander de vérification manuelle trop souvent : veuillez limiter vos demandes.
+              Nous vous demandons de bien relire vos différentes modifications apportés afin de corriger d'éventuelles erreurs
+            </p>
+            <p>
+              La vérification étant manuelle et prenant du temps humain nous vous demandons de bien vouloir être patient, le résultat de cette vérification sera notifé à l'adresse {{ this.$store.state.delegate.email }}.
+            </p>
+            <v-alert type="warning" class="mb-0">
+              Attention, l'action de demander une vérification entraîne le verouillage de l'association, il ne sera plus possible de faire des modifications sur cette interface jusqu'a ce que vos changements soient validés ou rejectés.
+            </v-alert>
+          </div>
+          <v-alert v-else type="error" class="mt-2 mb-0">
+            Vous ne pouvez pas être publié car vous n'avez pas remplis les champs requis
+          </v-alert>
         </v-card-text>
         <v-card-actions>
           <v-btn color="primary" text @click="publishModal = false">Fermer</v-btn>
@@ -125,6 +176,25 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
+    <v-dialog v-model="rejectionDetailsModal" max-width="700px">
+      <v-card>
+        <v-card-title>
+          Détails sur le refus de publication
+        </v-card-title>
+        <v-card-text>
+          <p>
+            Vos changements ont été refusés, veuillez prendre connaissance de la raison :
+          </p>
+          <blockquote>
+            {{ $store.state.delegate.rejectionDescription }}
+          </blockquote>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn color="primary" text @click="rejectionDetailsModal = false">Fermer</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </v-main>
 </template>
 
@@ -139,7 +209,9 @@ export default {
     tab: 0,
     slug: '',
     canPublish: false,
-    publishModal: false
+    publishModal: false,
+    askingApprovalLoading: false,
+    rejectionDetailsModal: false
   }),
   created () {
     this.init()
@@ -216,9 +288,13 @@ export default {
         ) {
           proposedVersion.tag = proposedVersion.tag._id
         }
-        this.slug = organization.slug
-        this.$store.commit('SET_DELEGATE_ADMIN_NAME', organization.adminName)
-        this.$store.commit('SET_DELEGATE_EMAIL', organization.email)
+        this.$store.commit('SET_DELEGATE', {
+          adminName: organization.adminName,
+          email: organization.email,
+          publicUrl: process.env.VUE_APP_BASE_URL + '/association/' + organization.slug,
+          validationState: organization.validationState,
+          rejectionDescription: organization.rejectionDescription
+        })
         this.$store.commit('SET_DATA', proposedVersion)
         this.$store.commit('SET_TAGS', tags)
         this.$nextTick(() => {
@@ -287,14 +363,35 @@ export default {
       }
     },
     goToPage () {
-      window.open(process.env.VUE_APP_BASE_URL + '/association/' + this.slug, '_blank').focus()
+      window.open(this.publicUrl, '_blank').focus()
     },
     openPublishModal () {
       // compute if the user can ask approval
       this.publishModal = true
+      const data = this.$store.state.data
+      this.canPublish =
+        data.name.length > 0 &&
+        data.descriptionShort.length > 15
     },
     askApproval () {
-      this.publishModal = false
+      this.askingApprovalLoading = true
+      this.$apitator.post('/delegate/submit', {}, { withAuth: true }).then(res => {
+        console.log(res.data.data)
+        this.publishModal = false
+        this.askingApprovalLoading = false
+        this.$store.commit('SET_DELEGATE', { validationState: 'pending' })
+        this.$store.commit('ADD_ALERT', {
+          color: 'success',
+          text: 'Les changements vont êtres soumis à une vérification manuelle'
+        })
+      }).catch(err => {
+        console.log(err.data)
+        this.isSaving = false
+        this.$store.commit('ADD_ALERT', {
+          color: 'error',
+          text: "Impossible de soumettre l'association"
+        })
+      })
     }
   }
 }

src/plugins/vuetify.ts

@@ -4,6 +4,7 @@ import fr from 'vuetify/src/locale/fr'
 import FacebookIcon from '../icons/Facebook.vue'
 import InstagramIcon from '../icons/Instagram.vue'
 import TwitterIcon from '../icons/Twitter.vue'
+import colors from 'vuetify/lib/util/colors'
 
 Vue.use(Vuetify)
 
@@ -24,5 +25,14 @@ export default new Vuetify({
         component: InstagramIcon
       }
     }
+  },
+  theme: {
+    themes: {
+      light: {
+        primary: colors.orange.darken2,
+        accent: colors.orange.lighten2,
+        error: colors.red.darken2
+      }
+    }
   }
 })

src/store/index.ts

@@ -33,8 +33,12 @@ export default new Vuex.Store({
         phone: ''
       }
     },
-    delegateAdminName: '',
-    delegateEmail: ''
+    delegate: {
+      validationState: 'none',
+      admiName: '',
+      email: '',
+      publicUrl: ''
+    }
   },
   mutations: {
     SET_TITLE (state, payload) {
@@ -58,11 +62,8 @@ export default new Vuex.Store({
     SET_TAGS (state, payload) {
       state.tags = payload
     },
-    SET_DELEGATE_ADMIN_NAME (state, payload) {
-      state.delegateAdminName = payload
-    },
-    SET_DELEGATE_EMAIL (state, payload) {
-      state.delegateEmail = payload
+    SET_DELEGATE (state, payload) {
+      state.delegate = { ...state.delegate, ...payload }
     }
   },
   actions: {

src/views/Admin/OrganizationList.vue

@@ -51,6 +51,13 @@
                     v-model="editedItem.validationState"
                     label="DEBUG: status de la validation"
                   ></v-select>
+                  <v-textarea
+                    rows="2"
+                    row-height="15"
+                    v-if="editedItem.validationState === 'rejected' && editedIndex !== -1"
+                    v-model="editedItem.rejectionDescription"
+                    label="Description du refus de publication">
+                  </v-textarea>
                   <div v-if="editedIndex === -1">
                     <p>
                       Remarque : Lorsque vous allez créer cette association un email contenant le lien de connexion va être automatiquement envoyé sur l'adresse renseignée.
@@ -298,7 +305,8 @@ export default {
     const item = {
       adminName: '',
       email: '',
-      validationState: 'none'
+      validationState: 'none',
+      rejectionDescription: ''
     }
     return {
       dialog: false,
@@ -399,7 +407,8 @@ export default {
         this.$apitator.put('/admin/organizations/' + this.editedItem._id, {
           adminName: this.editedItem.adminName,
           email: this.editedItem.email,
-          validationState: this.editedItem.validationState
+          validationState: this.editedItem.validationState,
+          rejectionDescription: this.editedItem.rejectionDescription
         }, { withAuth: true }).then(res => {
           console.log(res.data)
           this.$store.commit('ADD_ALERT', {

src/views/Delegate/Gallery.vue

@@ -11,14 +11,23 @@
           @click="$refs.avatarEditor.toggle()"
           color="white"
         >Changer la couverture</v-btn>
-        <v-btn
-          v-if="$store.state.data.cover !== null"
-          class="ml-3"
-          @click="clearCover()"
-          color="white"
-          icon
-          outlined
-        ><v-icon>clear</v-icon></v-btn>
+        <v-tooltip bottom>
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn
+              v-if="$store.state.data.cover !== null"
+              class="ml-3"
+              @click="clearCover()"
+              color="white"
+              v-bind="attrs"
+              v-on="on"
+              icon
+              outlined
+            >
+              <v-icon>clear</v-icon>
+            </v-btn>
+          </template>
+          <span>Supprimer la couverture</span>
+        </v-tooltip>
       </div>
     </div>
 
@@ -67,24 +76,38 @@
             class="grey darken-4"
           ></v-img>
           <v-card-actions>
-            <v-btn
-              icon
-              color="gray"
-              small
-              :disabled="index === 0"
-              @click="shiftLeftMedia(media)"
-            >
-              <v-icon>keyboard_arrow_left</v-icon>
-            </v-btn>
-            <v-btn
-              icon
-              color="gray"
-              small
-              :disabled="index + 1 === $store.state.data.gallery.length"
-              @click="shiftRightMedia(media)"
-            >
-              <v-icon>keyboard_arrow_right</v-icon>
-            </v-btn>
+            <v-tooltip bottom>
+              <template v-slot:activator="{ on, attrs }">
+                <v-btn
+                  icon
+                  color="gray"
+                  small
+                  v-bind="attrs"
+                  v-on="on"
+                  :disabled="index === 0"
+                  @click="shiftLeftMedia(media)"
+                >
+                  <v-icon>keyboard_arrow_left</v-icon>
+                </v-btn>
+              </template>
+              <span>Décaler vers la gauche</span>
+            </v-tooltip>
+            <v-tooltip bottom>
+              <template v-slot:activator="{ on, attrs }">
+                <v-btn
+                  icon
+                  color="gray"
+                  small
+                  v-bind="attrs"
+                  v-on="on"
+                  :disabled="index + 1 === $store.state.data.gallery.length"
+                  @click="shiftRightMedia(media)"
+                >
+                  <v-icon>keyboard_arrow_right</v-icon>
+                </v-btn>
+              </template>
+              <span>Décaler vers la droite</span>
+            </v-tooltip>
             <v-spacer />
             <v-btn icon color="error" small @click="openDeleteMediaModal(media)">
               <v-icon small>delete</v-icon>

src/views/Delegate/Main.vue

@@ -8,6 +8,9 @@
       </v-col>
       <v-col cols="12" sm="12" md="6" style="align-items: center; justify-content: center; display: flex;">
         <v-btn @click="$refs.avatarEditor.toggle()" color="primary" outlined>
+          <v-icon left>
+            edit
+          </v-icon>
           Changer le logo
         </v-btn>
       </v-col>

src/views/Delegate/Pricing.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="d-flex justify-end">
-      <v-btn @click="openAddModal()" color="teal" outlined>
+      <v-btn @click="openAddModal()" color="primary" outlined>
         <v-icon left>add</v-icon>
         Ajouter un tarif
       </v-btn>
@@ -18,18 +18,18 @@
         Aucune catégorie horaires ajoutées pour le moment
       </v-alert>
     </div>
-    <v-row v-else>
+    <v-row v-else class="justify-content: center">
       <v-col
         v-for="pricing in $store.state.data.pricing"
         :key="pricing._id"
         cols="12"
         sm="12"
         md="6"
-        lg="6"
+        lg="4"
       >
         <v-card
           class="mx-auto"
-          max-width="344"
+          max-width="400"
         >
           <v-card-text>
             <div v-text="pricing.name" />

src/views/Delegate/Schedule.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="d-flex justify-end">
-      <v-btn @click="openAddCategoryModal()" color="teal" outlined>
+      <v-btn @click="openAddCategoryModal()" color="primary" outlined>
         <v-icon left>add</v-icon>
         Ajouter une catégorie
       </v-btn>