pagesassos/panel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity

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

Browse source
This commit is contained in:
Matthieu Bessat 2020-08-04 22:51:18 +02:00
parent ee02257362
commit dc3aaa22c0
6 changed files with 171 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/AdditionalContacts.vue
View file

@ -67,7 +67,7 @@
<v-card> <v-card>
<v-card-title v-text="itemModalTitle + ' un contact'" /> <v-card-title v-text="itemModalTitle + ' un contact'" />
<v-card-text> <v-card-text>
<v-form ref="form" lazy-validation> <v-form v-model="formValid" ref="form" lazy-validation>
<v-text-field <v-text-field
label="Nom du contact" label="Nom du contact"
prepend-icon="person" prepend-icon="person"
@ -98,7 +98,10 @@
Fermer Fermer
</v-btn> </v-btn>
<v-spacer /> <v-spacer />
<v-btn @click="save()" text color="success"> <v-btn
text color="success"
:disabled="!formValid"
@click="save()">
Valider Valider
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
@ -154,7 +157,8 @@ export default {
phone: [ 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' 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 () { mounted () {
let peoples = this.$store.state.data.contacts.peoples let peoples = this.$store.state.data.contacts.peoples
@ -183,6 +187,11 @@ export default {
this.mode = 'add' this.mode = 'add'
this.item = Object.assign({}, this.defaultItem) this.item = Object.assign({}, this.defaultItem)
this.itemModal = true this.itemModal = true
this.formValid = false
this.$nextTick(() => {
this.$refs.form.resetValidation()
})
}, },
save () { save () {
if (!this.$refs.form.validate()) { if (!this.$refs.form.validate()) {
@ -190,7 +199,7 @@ export default {
} }
let peoples = this.$store.state.data.contacts.peoples let peoples = this.$store.state.data.contacts.peoples
if (this.mode === 'add') { if (this.mode === 'add') {
this.item._id = Date.now().toString() this.item._id = this.$generateID()
peoples.push(this.item) peoples.push(this.item)
} else { } else {
if (this.item.isResponsable) { if (this.item.isResponsable) {
@ -199,6 +208,7 @@ export default {
peoples = peoples.map(i => i === this.oldEdit ? this.item : i) peoples = peoples.map(i => i === this.oldEdit ? this.item : i)
} }
this.setPeoples(peoples) this.setPeoples(peoples)
this.$refs.form.resetValidation()
this.itemModal = false this.itemModal = false
}, },
openEditModal (item) { openEditModal (item) {
@ -206,6 +216,9 @@ export default {
this.oldEdit = item this.oldEdit = item
this.mode = 'edit' this.mode = 'edit'
this.itemModal = true this.itemModal = true
this.$nextTick(() => {
this.$refs.form.resetValidation()
})
}, },
openDeleteModal (item) { openDeleteModal (item) {
this.deleteModal = true this.deleteModal = true

2
src/components/Preview.vue
View file

@ -97,7 +97,7 @@ export default {
methods: { methods: {
reload () { reload () {
// add random data to force the frame to reload // add random data to force the frame to reload
this.additional = Date.now().toString() this.additional = this.$generateID()
} }
} }
} }

20
src/layouts/Delegate.vue
View file

@ -362,26 +362,6 @@ export default {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.isSaving = true this.isSaving = true
const data = this.$store.state.data 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.$apitator.put('/delegate', data, { withAuth: true }).then(() => {
this.isSaving = false this.isSaving = false
if (showSuccessAlert) { if (showSuccessAlert) {

2
src/main.ts
View file

@ -26,6 +26,8 @@ Vue.use(TiptapVuetifyPlugin, {
}) })
Vue.use(Croppa) Vue.use(Croppa)
Vue.prototype.$generateID = () => Math.random().toString(36).substring(7) + '_' + Date.now().toString()
new Vue({ new Vue({
router, router,
store, store,

77
src/views/Delegate/Pricing.vue
View file

@ -61,21 +61,26 @@
<v-card> <v-card>
<v-card-title v-text="itemModalTitle + ' un tarif'" /> <v-card-title v-text="itemModalTitle + ' un tarif'" />
<v-card-text> <v-card-text>
<v-text-field <v-form ref="form" v-model="formValid">
v-model="item.priceLabel" <v-text-field
label="Tarif" v-model="item.priceLabel"
hint="Requis" :rules="rules.priceLabel"
/> label="Tarif"
<v-text-field hint="Requis"
v-model="item.name" />
label="Nom/Titre du tarif" <v-text-field
hint="Requis" v-model="item.name"
/> :rules="rules.name"
<v-text-field label="Nom/Titre du tarif"
v-model="item.description" hint="Requis"
label="Description/Sous Titre du tarif" />
hint="Optionel" <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"> <!-- <div class="d-flex justify-center">
<v-btn small @click="loadDummy()">Préremplir</v-btn> <v-btn small @click="loadDummy()">Préremplir</v-btn>
</div> --> </div> -->
@ -85,7 +90,7 @@
Fermer Fermer
</v-btn> </v-btn>
<v-spacer /> <v-spacer />
<v-btn @click="save()" text color="success"> <v-btn @click="save()" :disabled="!formValid" text color="success">
Valider Valider
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
@ -129,11 +134,26 @@ export default {
removeExampleData: false, removeExampleData: false,
exampleData: [ exampleData: [
{ {
isExample: true,
priceLabel: '12 €', priceLabel: '12 €',
name: "Tarif d'exemple", name: "Tarif d'exemple",
description: 'Dans cet onglet, vous pouvez spécifier différents tarifs ou réductions' 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: { computed: {
@ -143,17 +163,13 @@ export default {
created () { created () {
if (this.$store.state.data.pricing.length === 0) { if (this.$store.state.data.pricing.length === 0) {
this.removeExampleData = true this.removeExampleData = true
this.$store.commit('SET_DATA', { this.$store.commit('SET_DATA', { pricing: this.exampleData })
pricing: this.exampleData
})
} }
}, },
destroyed () { destroyed () {
if (this.removeExampleData) { 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.mode = 'add'
this.item = Object.assign({}, this.defaultItem) this.item = Object.assign({}, this.defaultItem)
this.itemModal = true this.itemModal = true
this.$nextTick(() => {
this.$refs.form.resetValidation()
})
}, },
save () { save () {
let pricing = this.$store.state.data.pricing let pricing = this.$store.state.data.pricing
@ -173,20 +192,24 @@ export default {
this.removeExampleData = false this.removeExampleData = false
} }
if (this.mode === 'add') { if (this.mode === 'add') {
this.item._id = Date.now().toString() this.item._id = this.$generateID()
pricing.push(this.item) pricing.push(this.item)
} else { } 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.$store.commit('SET_DATA', { pricing })
this.itemModal = false this.itemModal = false
this.$refs.form.resetValidation()
}, },
openEditModal (item) { openEditModal (item) {
this.item = item this.item = Object.assign({}, item)
this.oldEdit = item this.oldEdit = Object.assign({}, item)
this.mode = 'edit' this.mode = 'edit'
this.itemModal = true this.itemModal = true
this.$nextTick(() => {
this.$refs.form.resetValidation()
})
}, },
openDeleteModal (item) { openDeleteModal (item) {
this.deleteModal = true this.deleteModal = true

155
src/views/Delegate/Schedule.vue
View file

@ -145,16 +145,20 @@
<v-card> <v-card>
<v-card-title v-text="modalTitle + ' une catégorie horaire'" /> <v-card-title v-text="modalTitle + ' une catégorie horaire'" />
<v-card-text> <v-card-text>
<v-text-field <v-form ref="form" v-model="formValid">
v-model="category.name" <v-text-field
label="Nom" v-model="category.name"
hint="Requis" label="Nom"
/> hint="Requis"
<v-text-field :rules="rules.name"
v-model="category.description" />
label="Description" <v-text-field
hint="Optionel" v-model="category.description"
/> label="Description"
hint="Optionel"
:rules="rules.description"
/>
</v-form>
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
<v-btn @click="categoryModal = false" text color="primary"> <v-btn @click="categoryModal = false" text color="primary">
@ -165,7 +169,7 @@
@click="saveCategory()" @click="saveCategory()"
text text
color="success" color="success"
:disabled="category.name.length < 3" :disabled="!formValid"
> >
Valider Valider
</v-btn> </v-btn>
@ -196,37 +200,42 @@
<v-card> <v-card>
<v-card-title v-text="modalTitle + ' un crénau horaire'" /> <v-card-title v-text="modalTitle + ' un crénau horaire'" />
<v-card-text> <v-card-text>
<v-select <v-form v-model="whenFormValid" ref="whenForm">
prepend-icon="event" <v-select
v-model="when.day" prepend-icon="event"
:multiple="mode == 'add'" v-model="when.day"
:items="days" :multiple="mode == 'add'"
label="Sélectionnez un jour" :items="days"
></v-select> label="Sélectionnez un jour"
<v-row> ></v-select>
<v-col cols="12" sm="6" class="py-0"> <v-row>
<v-text-field <v-col cols="12" sm="6" class="py-0">
v-model="when.from" <v-text-field
label="Heure de début" v-model="when.from"
prepend-icon="schedule" label="Heure de début"
></v-text-field> prepend-icon="schedule"
<v-time-picker :rules="rules.hour"
v-model="formattedFrom" ></v-text-field>
format="24hr" <v-time-picker
:max="formattedTo" /> v-model="formattedFrom"
</v-col> format="24hr"
<v-col cols="12" sm="6" class="py-0"> :max="formattedTo"
<v-text-field />
v-model="when.to" </v-col>
label="Heure de fin" <v-col cols="12" sm="6" class="py-0">
prepend-icon="schedule" <v-text-field
></v-text-field> v-model="when.to"
<v-time-picker label="Heure de fin"
v-model="formattedTo" prepend-icon="schedule"
format="24hr" :rules="rules.hour"
:min="formattedFrom" /> ></v-text-field>
</v-col> <v-time-picker
</v-row> v-model="formattedTo"
format="24hr"
:min="formattedFrom" />
</v-col>
</v-row>
</v-form>
<!-- <v-menu <!-- <v-menu
ref="fromMenu" ref="fromMenu"
v-model="fromMenu" v-model="fromMenu"
@ -282,7 +291,8 @@
@click="saveWhen()" @click="saveWhen()"
text text
color="success" 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 Valider
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
@ -315,6 +325,7 @@ export default {
removeExampleData: false, removeExampleData: false,
exampleData: [ exampleData: [
{ {
isExample: true,
name: "Catégorie d'horaire d'exemple", name: "Catégorie d'horaire d'exemple",
description: ` description: `
Dans cet onglet vous pouvez renseigner les différents crénaux horaires que votre association propose. Dans cet onglet vous pouvez renseigner les différents crénaux horaires que votre association propose.
@ -330,7 +341,8 @@ export default {
], ],
mode: '', mode: '',
categoryModal: false, categoryModal: false,
category: { name: '', description: '' }, category: {},
defaultCategory: { name: '', description: '', when: [] },
deleteCategoryModal: false, deleteCategoryModal: false,
toDeleteCategory: {}, toDeleteCategory: {},
oldEditCategory: {}, oldEditCategory: {},
@ -343,7 +355,19 @@ export default {
toMenu: false, toMenu: false,
days: ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'], days: ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'],
formattedFrom: null, 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 () { 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.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 }, 'when.to' () { this.formattedTo = /^[0-9]{1,2}:[0-9]{1,2}$/gm.test(this.when.to) ? this.when.to : null },
'formattedTo' (val) { 'formattedTo' (val) {
if (val !== this.when.to) { if (val !== null && val !== this.when.to) {
this.when.to = val this.when.to = val
} }
}, },
'formattedFrom' (val) { 'formattedFrom' (val) {
if (val !== this.when.from) { if (val !== null && val !== this.when.from) {
this.when.from = val this.when.from = val
} }
} }
@ -384,30 +408,42 @@ export default {
methods: { methods: {
openAddCategoryModal () { openAddCategoryModal () {
this.category = Object.assign({}, this.defaultCategory)
this.mode = 'add' this.mode = 'add'
this.categoryModal = true this.categoryModal = true
this.formValid = false
this.$nextTick(() => {
this.$refs.form.resetValidation()
})
}, },
openEditCategoryModal (item) { openEditCategoryModal (item) {
this.category = item this.category = Object.assign({}, item)
this.oldEditCategory = item this.oldEditCategory = Object.assign({}, item)
this.mode = 'edit' this.mode = 'edit'
this.categoryModal = true this.categoryModal = true
this.formValid = false
this.$nextTick(() => {
this.$refs.form.resetValidation()
})
}, },
openDeleteCategoryModal (item) { openDeleteCategoryModal (item) {
this.deleteCategoryModal = true this.deleteCategoryModal = true
this.toDeleteCategory = item this.toDeleteCategory = item
}, },
saveCategory () { saveCategory () {
if (!this.$refs.form.validate()) {
return
}
let schedule = this.$store.state.data.schedule let schedule = this.$store.state.data.schedule
if (this.removeExampleData) { if (this.removeExampleData) {
schedule = [] schedule = []
this.removeExampleData = false this.removeExampleData = false
} }
if (this.mode === 'add') { if (this.mode === 'add') {
this.category._id = Date.now().toString() this.category._id = this.$generateID()
schedule.push(this.category) schedule.push(this.category)
} else { } 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 = { this.category = {
@ -415,11 +451,12 @@ export default {
description: '' description: ''
} }
this.$store.commit('SET_DATA', { schedule }) this.$store.commit('SET_DATA', { schedule })
this.$refs.form.resetValidation()
this.categoryModal = false this.categoryModal = false
}, },
deleteCategory () { deleteCategory () {
let schedule = this.$store.state.data.schedule 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.$store.commit('SET_DATA', { schedule })
this.deleteCategoryModal = false this.deleteCategoryModal = false
}, },
@ -451,11 +488,15 @@ export default {
this.mode = 'add' this.mode = 'add'
this.whenParent = parent this.whenParent = parent
this.whenModal = true this.whenModal = true
this.whenFormValid = false
this.when = { this.when = {
day: '', day: '',
from: '', from: '',
to: '' to: ''
} }
this.$nextTick(() => {
this.$refs.whenForm.resetValidation()
})
}, },
openEditWhenModal (item, parent) { openEditWhenModal (item, parent) {
this.when = item this.when = item
@ -463,6 +504,9 @@ export default {
this.mode = 'edit' this.mode = 'edit'
this.whenModal = true this.whenModal = true
this.whenParent = parent this.whenParent = parent
this.$nextTick(() => {
this.$refs.whenForm.resetValidation()
})
}, },
openDeleteWhenModal (item, parent) { openDeleteWhenModal (item, parent) {
this.deleteWhenModal = true this.deleteWhenModal = true
@ -470,16 +514,19 @@ export default {
this.whenParent = parent this.whenParent = parent
}, },
saveWhen () { saveWhen () {
if (!this.$refs.whenForm.validate()) {
return
}
let schedule = this.$store.state.data.schedule let schedule = this.$store.state.data.schedule
if (this.mode === 'add') { if (this.mode === 'add') {
this.when._id = Date.now().toString() this.when._id = this.$generateID()
schedule = schedule.map(i => { schedule = schedule.map(i => {
if (this.whenParent._id === i._id) { if (this.whenParent._id === i._id) {
if (!Array.isArray(i.when)) { if (!Array.isArray(i.when)) {
i.when = [] i.when = []
} }
this.when.day.forEach((d) => { 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 // sort all days