From dc3aaa22c0389174d732c55e1bed97f621963805 Mon Sep 17 00:00:00 2001 From: Matthieu Bessat Date: Tue, 4 Aug 2020 22:51:18 +0200 Subject: [PATCH] fix: a lot a fixes and validation improvements on Pricing; Schedule; AdditionalContacts and Delegate --- src/components/AdditionalContacts.vue | 21 +++- src/components/Preview.vue | 2 +- src/layouts/Delegate.vue | 20 ---- src/main.ts | 2 + src/views/Delegate/Pricing.vue | 77 ++++++++----- src/views/Delegate/Schedule.vue | 155 +++++++++++++++++--------- 6 files changed, 171 insertions(+), 106 deletions(-) diff --git a/src/components/AdditionalContacts.vue b/src/components/AdditionalContacts.vue index 39f361a..bf03a46 100644 --- a/src/components/AdditionalContacts.vue +++ b/src/components/AdditionalContacts.vue @@ -67,7 +67,7 @@ - + - + Valider @@ -154,7 +157,8 @@ export default { phone: [ v => v.length === 0 || /^(\+[0-9]{2}|0)?([0-9](\s)?([0-9]{2}(\s)?){4})$/gm.test(v) || 'Le numéro de téléphone est requis et doit être valide' ] - } + }, + formValid: false }), mounted () { let peoples = this.$store.state.data.contacts.peoples @@ -183,6 +187,11 @@ export default { this.mode = 'add' this.item = Object.assign({}, this.defaultItem) this.itemModal = true + this.formValid = false + + this.$nextTick(() => { + this.$refs.form.resetValidation() + }) }, save () { if (!this.$refs.form.validate()) { @@ -190,7 +199,7 @@ export default { } let peoples = this.$store.state.data.contacts.peoples if (this.mode === 'add') { - this.item._id = Date.now().toString() + this.item._id = this.$generateID() peoples.push(this.item) } else { if (this.item.isResponsable) { @@ -199,6 +208,7 @@ export default { peoples = peoples.map(i => i === this.oldEdit ? this.item : i) } this.setPeoples(peoples) + this.$refs.form.resetValidation() this.itemModal = false }, openEditModal (item) { @@ -206,6 +216,9 @@ export default { this.oldEdit = item this.mode = 'edit' this.itemModal = true + this.$nextTick(() => { + this.$refs.form.resetValidation() + }) }, openDeleteModal (item) { this.deleteModal = true diff --git a/src/components/Preview.vue b/src/components/Preview.vue index c2dbc0f..098aa7c 100644 --- a/src/components/Preview.vue +++ b/src/components/Preview.vue @@ -97,7 +97,7 @@ export default { methods: { reload () { // add random data to force the frame to reload - this.additional = Date.now().toString() + this.additional = this.$generateID() } } } diff --git a/src/layouts/Delegate.vue b/src/layouts/Delegate.vue index 82fbfde..ef2a977 100644 --- a/src/layouts/Delegate.vue +++ b/src/layouts/Delegate.vue @@ -362,26 +362,6 @@ export default { 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 - }) - } this.$apitator.put('/delegate', data, { withAuth: true }).then(() => { this.isSaving = false if (showSuccessAlert) { diff --git a/src/main.ts b/src/main.ts index 4912cc6..c328ab2 100644 --- a/src/main.ts +++ b/src/main.ts @@ -26,6 +26,8 @@ Vue.use(TiptapVuetifyPlugin, { }) Vue.use(Croppa) +Vue.prototype.$generateID = () => Math.random().toString(36).substring(7) + '_' + Date.now().toString() + new Vue({ router, store, diff --git a/src/views/Delegate/Pricing.vue b/src/views/Delegate/Pricing.vue index fee1324..279a5fc 100644 --- a/src/views/Delegate/Pricing.vue +++ b/src/views/Delegate/Pricing.vue @@ -61,21 +61,26 @@ - - - + + + + + @@ -85,7 +90,7 @@ Fermer - + Valider @@ -129,11 +134,26 @@ export default { removeExampleData: false, exampleData: [ { + isExample: true, priceLabel: '12 €', name: "Tarif d'exemple", description: 'Dans cet onglet, vous pouvez spécifier différents tarifs ou réductions' } - ] + ], + rules: { + priceLabel: [ + (v) => v.length <= 10 || 'Au maximum 10 caractères', + (v) => v.length >= 2 || 'Au minimum 2 caractères' + ], + name: [ + (v) => v.length <= 25 || 'Au maximum 25 caractères', + (v) => v.length >= 3 || 'Au minimum 3 caractères' + ], + description: [ + (v) => v.length <= 50 || 'Au maximum 50 caractères' + ] + }, + formValid: false }), computed: { @@ -143,17 +163,13 @@ export default { created () { if (this.$store.state.data.pricing.length === 0) { this.removeExampleData = true - this.$store.commit('SET_DATA', { - pricing: this.exampleData - }) + this.$store.commit('SET_DATA', { pricing: this.exampleData }) } }, destroyed () { if (this.removeExampleData) { - this.$store.commit('SET_DATA', { - pricing: [] - }) + this.$store.commit('SET_DATA', { pricing: [] }) } }, @@ -165,6 +181,9 @@ export default { this.mode = 'add' this.item = Object.assign({}, this.defaultItem) this.itemModal = true + this.$nextTick(() => { + this.$refs.form.resetValidation() + }) }, save () { let pricing = this.$store.state.data.pricing @@ -173,20 +192,24 @@ export default { this.removeExampleData = false } if (this.mode === 'add') { - this.item._id = Date.now().toString() + this.item._id = this.$generateID() pricing.push(this.item) } else { - pricing = pricing.map(i => i === this.oldEdit ? this.item : i) + pricing = pricing.map(i => this.oldEdit._id === i._id ? this.item : i) } this.$store.commit('SET_DATA', { pricing }) this.itemModal = false + this.$refs.form.resetValidation() }, openEditModal (item) { - this.item = item - this.oldEdit = item + this.item = Object.assign({}, item) + this.oldEdit = Object.assign({}, item) this.mode = 'edit' this.itemModal = true + this.$nextTick(() => { + this.$refs.form.resetValidation() + }) }, openDeleteModal (item) { this.deleteModal = true diff --git a/src/views/Delegate/Schedule.vue b/src/views/Delegate/Schedule.vue index b5c91b1..b9ddfac 100644 --- a/src/views/Delegate/Schedule.vue +++ b/src/views/Delegate/Schedule.vue @@ -145,16 +145,20 @@ - - + + + + @@ -165,7 +169,7 @@ @click="saveCategory()" text color="success" - :disabled="category.name.length < 3" + :disabled="!formValid" > Valider @@ -196,37 +200,42 @@ - - - - - - - - - - - + + + + + + + + + + + + + Valider @@ -315,6 +325,7 @@ export default { removeExampleData: false, exampleData: [ { + isExample: true, name: "Catégorie d'horaire d'exemple", description: ` Dans cet onglet vous pouvez renseigner les différents crénaux horaires que votre association propose. @@ -330,7 +341,8 @@ export default { ], mode: '', categoryModal: false, - category: { name: '', description: '' }, + category: {}, + defaultCategory: { name: '', description: '', when: [] }, deleteCategoryModal: false, toDeleteCategory: {}, oldEditCategory: {}, @@ -343,7 +355,19 @@ export default { toMenu: false, days: ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'], formattedFrom: null, - formattedTo: null + formattedTo: null, + rules: { + name: [ + (v) => v.length <= 30 || 'Au maximum 30 caractères', + (v) => v.length >= 3 || 'Au minimum 3 caractères' + ], + description: [(v) => v.length <= 50 || 'Au maximum 50 caractères'], + hour: [ + (v) => /^[0-9]{1,2}:[0-9]{1,2}$/gm.test(v) || 'Vous devez respectez le format HEURE:MINUTES' + ] + }, + formValid: false, + whenFormValid: false }), created () { @@ -371,12 +395,12 @@ export default { 'when.from' () { this.formattedFrom = /^[0-9]{1,2}:[0-9]{1,2}$/gm.test(this.when.from) ? this.when.from : null }, 'when.to' () { this.formattedTo = /^[0-9]{1,2}:[0-9]{1,2}$/gm.test(this.when.to) ? this.when.to : null }, 'formattedTo' (val) { - if (val !== this.when.to) { + if (val !== null && val !== this.when.to) { this.when.to = val } }, 'formattedFrom' (val) { - if (val !== this.when.from) { + if (val !== null && val !== this.when.from) { this.when.from = val } } @@ -384,30 +408,42 @@ export default { methods: { openAddCategoryModal () { + this.category = Object.assign({}, this.defaultCategory) this.mode = 'add' this.categoryModal = true + this.formValid = false + this.$nextTick(() => { + this.$refs.form.resetValidation() + }) }, openEditCategoryModal (item) { - this.category = item - this.oldEditCategory = item + this.category = Object.assign({}, item) + this.oldEditCategory = Object.assign({}, item) this.mode = 'edit' this.categoryModal = true + this.formValid = false + this.$nextTick(() => { + this.$refs.form.resetValidation() + }) }, openDeleteCategoryModal (item) { this.deleteCategoryModal = true this.toDeleteCategory = item }, saveCategory () { + if (!this.$refs.form.validate()) { + return + } let schedule = this.$store.state.data.schedule if (this.removeExampleData) { schedule = [] this.removeExampleData = false } if (this.mode === 'add') { - this.category._id = Date.now().toString() + this.category._id = this.$generateID() schedule.push(this.category) } else { - schedule = schedule.map(i => i.name === this.oldEditCategory.name && i.description === this.oldEditCategory.description ? this.category : i) + schedule = schedule.map(i => i._id === this.oldEditCategory._id ? this.category : i) } this.category = { @@ -415,11 +451,12 @@ export default { description: '' } this.$store.commit('SET_DATA', { schedule }) + this.$refs.form.resetValidation() this.categoryModal = false }, deleteCategory () { let schedule = this.$store.state.data.schedule - schedule = schedule.filter(item => item.name !== this.toDeleteCategory.name && item.description !== this.toDeleteCategory.description) + schedule = schedule.filter(item => item._id !== this.toDeleteCategory._id) this.$store.commit('SET_DATA', { schedule }) this.deleteCategoryModal = false }, @@ -451,11 +488,15 @@ export default { this.mode = 'add' this.whenParent = parent this.whenModal = true + this.whenFormValid = false this.when = { day: '', from: '', to: '' } + this.$nextTick(() => { + this.$refs.whenForm.resetValidation() + }) }, openEditWhenModal (item, parent) { this.when = item @@ -463,6 +504,9 @@ export default { this.mode = 'edit' this.whenModal = true this.whenParent = parent + this.$nextTick(() => { + this.$refs.whenForm.resetValidation() + }) }, openDeleteWhenModal (item, parent) { this.deleteWhenModal = true @@ -470,16 +514,19 @@ export default { this.whenParent = parent }, saveWhen () { + if (!this.$refs.whenForm.validate()) { + return + } let schedule = this.$store.state.data.schedule if (this.mode === 'add') { - this.when._id = Date.now().toString() + this.when._id = this.$generateID() schedule = schedule.map(i => { if (this.whenParent._id === i._id) { if (!Array.isArray(i.when)) { i.when = [] } this.when.day.forEach((d) => { - i.when.push({ ...this.when, day: d, _id: Date.now().toString() }) + i.when.push({ ...this.when, day: d, _id: this.$generateID() }) }) } // sort all days