Publish validation fix

src/layouts/Delegate.vue

@@ -413,7 +413,21 @@ export default {
     openPublishModal () {
       const open = () => {
         // compute if the user can ask approval
-        this.$store.commit('VALIDATE_MAIN', isValid => {
+        // check against rules in the store
+        const validation = []
+        const keys = Object.keys(this.$store.state.mainRules)
+        keys.forEach(key => {
+          let value = ''
+          if (key.indexOf('contacts.') !== -1) {
+            value = this.$store.state.data.contacts[key.replace('contacts.', '')]
+          } else {
+            value = this.$store.state.data[key]
+          }
+          const rules = this.$store.state.mainRules[key]
+          validation.push(rules.map(r => r(value)).filter(r => r === true).length === rules.length)
+        })
+        validation.push(this.$store.state.data.thumbnail.location.length > 1)
+        const isValid = validation.filter(v => v).length === validation.length
         if (isValid) {
           this.publishModal = true
           this.save(false).catch((err) => {
@@ -424,21 +438,22 @@ export default {
             color: 'error',
             text: 'Vous devez remplir tout les champs requis afin de publier'
           })
+          if (this.$route.name !== 'DelegateMain') {
+            this.$store.commit('ON_MAIN_READY', () => {
+              return true
+            })
+            this.$router.push({ name: 'DelegateMain' }, () => {
+              this.$store.commit('VALIDATE_MAIN')
+            })
+          } else {
+            this.$store.commit('VALIDATE_MAIN')
+          }
           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

src/store/index.ts

@@ -19,6 +19,7 @@ interface State {
   validateMain: boolean;
   validateMainCallback: any;
   onMainReady: any;
+  mainRules: any;
 }
 
 const defaultState: State = {
@@ -63,7 +64,20 @@ const defaultState: State = {
   debug: false,
   validateMain: false,
   onMainReady: () => false,
-  validateMainCallback: (d = false) => d
+  validateMainCallback: (d = false) => d,
+  mainRules: {
+    name: [
+      (v: any) => v.length >= 3 || 'Au minimum 3 caractères',
+      (v: any) => v.length <= 50 || 'Au maximum 50 caractères'
+    ],
+    descriptionShort: [
+      (v: any) => v.length >= 20 || 'Au minimum 20 caractères',
+      (v: any) => v.length <= 200 || 'Au maximum 200 caractères'
+    ],
+    tags: [(v: any) => (Array.isArray(v) && v.length > 0) || 'Vous devez choisir au minimum une catégorie'],
+    'contacts.email': [(v: any) => /.+@.+\..+/.test(v) || "L'email est requis et doit être valide"],
+    'contacts.person': [(v: any) => v.length >= 4 || 'Au minimum 4 caractères']
+  }
 }
 
 export default new Vuex.Store({
@@ -99,6 +113,11 @@ export default new Vuex.Store({
     },
     VALIDATE_MAIN (state: State, callback) {
       state.validateMain = true
+      if (callback === undefined) {
+        callback = (d: boolean) => {
+          return true
+        }
+      }
       state.validateMainCallback = (d: boolean) => {
         state.validateMain = false
         return callback(d)

src/views/Delegate/Main.vue

@@ -45,7 +45,7 @@
         prepend-icon="tag"
         outlined
         v-model="$store.state.data.name"
-        :rules="rules.name" />
+        :rules="$store.state.mainRules.name" />
 
       <v-select
         label="Catégorie(s) de l'association"
@@ -55,7 +55,7 @@
         item-text="name"
         item-value="_id"
         v-model="$store.state.data.tags"
-        :rules="rules.tags"
+        :rules="$store.state.mainRules.tags"
         :items="$store.state.tags">
       </v-select>
 
@@ -66,7 +66,7 @@
             label="Personne responsable"
             outlined
             v-model="$store.state.data.contacts.person"
-            :rules="rules.person" />
+            :rules="$store.state.mainRules['contacts.person']" />
         </v-col>
         <v-col cols="12" sm="6" class="py-0">
           <v-text-field
@@ -74,7 +74,7 @@
             label="Email"
             outlined
             v-model="$store.state.data.contacts.email"
-            :rules="rules.email" />
+            :rules="$store.state.mainRules['contacts.email']" />
         </v-col>
       </v-row>
 
@@ -83,7 +83,7 @@
         outlined
         prepend-icon="description"
         label="Description ou résumé rapide"
-        :rules="rules.descriptionShort"
+        :rules="$store.state.mainRules.descriptionShort"
         counter
         v-model="$store.state.data.descriptionShort" />
     </v-form>
@@ -104,20 +104,7 @@ export default {
   data: () => ({
     formValid: true,
     logoLoading: false,
-    validateLogo: false,
-    rules: {
-      name: [
-        v => v.length >= 3 || 'Au minimum 3 caractères',
-        v => v.length <= 50 || 'Au maximum 50 caractères'
-      ],
-      descriptionShort: [
-        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 doit être valide"],
-      person: [v => v.length >= 4 || 'Au minimum 4 caractères']
-    }
+    validateLogo: false
   }),
 
   // mounted () {