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

2
src/components/Preview.vue
View file

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

20
src/layouts/Delegate.vue
View file

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

2
src/main.ts
View file

@ -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,

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

@ -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', {
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

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

@ -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.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