From cfa9371851cff14f5012ae7fd917440d3a54af4d Mon Sep 17 00:00:00 2001 From: Matthieu Bessat Date: Thu, 23 Jul 2020 13:14:31 +0200 Subject: [PATCH] Publish validation fix --- src/layouts/Delegate.vue | 57 +++++++++++++++++++++++-------------- src/store/index.ts | 21 +++++++++++++- src/views/Delegate/Main.vue | 25 ++++------------ 3 files changed, 62 insertions(+), 41 deletions(-) diff --git a/src/layouts/Delegate.vue b/src/layouts/Delegate.vue index c43dd93..88b6b0a 100644 --- a/src/layouts/Delegate.vue +++ b/src/layouts/Delegate.vue @@ -413,32 +413,47 @@ export default { openPublishModal () { 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) + // 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) => { + console.log(err) + }) + } else { + this.$store.commit('ADD_ALERT', { + 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('ADD_ALERT', { - color: 'error', - text: 'Vous devez remplir tout les champs requis afin de publier' - }) - this.publishModal = false + this.$store.commit('VALIDATE_MAIN') } - this.canPublish = isValid - }) + 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() - } + open() }, askApproval () { this.askingApprovalLoading = true diff --git a/src/store/index.ts b/src/store/index.ts index 457f8ae..be8e80c 100644 --- a/src/store/index.ts +++ b/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) diff --git a/src/views/Delegate/Main.vue b/src/views/Delegate/Main.vue index 95e7ee6..660cf26 100644 --- a/src/views/Delegate/Main.vue +++ b/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" /> @@ -66,7 +66,7 @@ label="Personne responsable" outlined v-model="$store.state.data.contacts.person" - :rules="rules.person" /> + :rules="$store.state.mainRules['contacts.person']" /> + :rules="$store.state.mainRules['contacts.email']" /> @@ -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" /> @@ -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 () {