fix: a lot a fixes and validation improvements on Pricing; Schedule; AdditionalContacts and Delegate

src/components/AdditionalContacts.vue

@@ -67,7 +67,7 @@
       <v-card>
         <v-card-title v-text="itemModalTitle + ' un contact'" />
         <v-card-text>
-          <v-form ref="form" lazy-validation>
+          <v-form v-model="formValid" ref="form" lazy-validation>
             <v-text-field
               label="Nom du contact"
               prepend-icon="person"
@@ -98,7 +98,10 @@
             Fermer
           </v-btn>
           <v-spacer />
-          <v-btn @click="save()" text color="success">
+          <v-btn
+            text color="success"
+            :disabled="!formValid"
+            @click="save()">
             Valider
           </v-btn>
         </v-card-actions>
@@ -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

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()
     }
   }
 }

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) {

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,

src/views/Delegate/Pricing.vue

@@ -61,21 +61,26 @@
       <v-card>
         <v-card-title v-text="itemModalTitle + ' un tarif'" />
         <v-card-text>
+          <v-form ref="form" v-model="formValid">
             <v-text-field
               v-model="item.priceLabel"
+              :rules="rules.priceLabel"
               label="Tarif"
               hint="Requis"
             />
             <v-text-field
               v-model="item.name"
+              :rules="rules.name"
               label="Nom/Titre du tarif"
               hint="Requis"
             />
             <v-text-field
               v-model="item.description"
+              :rules="rules.description"
               label="Description/Sous Titre du tarif"
               hint="Optionel"
             />
+          </v-form>
           <!-- <div class="d-flex justify-center">
             <v-btn small @click="loadDummy()">Préremplir</v-btn>
           </div> -->
@@ -85,7 +90,7 @@
             Fermer
           </v-btn>
           <v-spacer />
-          <v-btn @click="save()" text color="success">
+          <v-btn @click="save()" :disabled="!formValid" text color="success">
             Valider
           </v-btn>
         </v-card-actions>
@@ -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', {
+      this.$store.commit('SET_DATA', { pricing: this.exampleData })
-        pricing: this.exampleData
-      })
     }
   },
 
   destroyed () {
     if (this.removeExampleData) {
-      this.$store.commit('SET_DATA', {
+      this.$store.commit('SET_DATA', { pricing: [] })
-        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.item = Object.assign({}, item)
-      this.oldEdit = item
+      this.oldEdit = Object.assign({}, item)
       this.mode = 'edit'
       this.itemModal = true
+      this.$nextTick(() => {
+        this.$refs.form.resetValidation()
+      })
     },
     openDeleteModal (item) {
       this.deleteModal = true

src/views/Delegate/Schedule.vue

@@ -145,16 +145,20 @@
       <v-card>
         <v-card-title v-text="modalTitle + ' une catégorie horaire'" />
         <v-card-text>
+          <v-form ref="form" v-model="formValid">
             <v-text-field
               v-model="category.name"
               label="Nom"
               hint="Requis"
+              :rules="rules.name"
             />
             <v-text-field
               v-model="category.description"
               label="Description"
               hint="Optionel"
+              :rules="rules.description"
             />
+          </v-form>
         </v-card-text>
         <v-card-actions>
           <v-btn @click="categoryModal = false" text color="primary">
@@ -165,7 +169,7 @@
             @click="saveCategory()"
             text
             color="success"
-            :disabled="category.name.length < 3"
+            :disabled="!formValid"
           >
             Valider
           </v-btn>
@@ -196,6 +200,7 @@
       <v-card>
         <v-card-title v-text="modalTitle + ' un crénau horaire'" />
         <v-card-text>
+          <v-form v-model="whenFormValid" ref="whenForm">
             <v-select
               prepend-icon="event"
               v-model="when.day"
@@ -209,17 +214,20 @@
                   v-model="when.from"
                   label="Heure de début"
                   prepend-icon="schedule"
+                  :rules="rules.hour"
                 ></v-text-field>
                 <v-time-picker
                   v-model="formattedFrom"
                   format="24hr"
-                :max="formattedTo" />
+                  :max="formattedTo"
+                />
               </v-col>
               <v-col cols="12" sm="6" class="py-0">
                 <v-text-field
                   v-model="when.to"
                   label="Heure de fin"
                   prepend-icon="schedule"
+                  :rules="rules.hour"
                 ></v-text-field>
                 <v-time-picker
                   v-model="formattedTo"
@@ -227,6 +235,7 @@
                   :min="formattedFrom" />
               </v-col>
             </v-row>
+          </v-form>
           <!-- <v-menu
             ref="fromMenu"
             v-model="fromMenu"
@@ -282,7 +291,8 @@
             @click="saveWhen()"
             text
             color="success"
-            :disabled="(mode == 'add' ? when.day.length === 0 : when.day.length < 4) || when.to === null || when.from === null || when.to.length !== 5 || when.from.length !== 5">
+            :disabled="!whenFormValid">
+            <!-- || (mode == 'add' ? when.day.length === 0 : when.day.length < 4) || when.to === null || when.from === null || when.to.length !== 5 || when.from.length !== 5 -->
             Valider
           </v-btn>
         </v-card-actions>
@@ -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.category = Object.assign({}, item)
-      this.oldEditCategory = 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