location: client-side form validation

This commit is contained in:
nobohan 2021-11-03 11:59:06 +01:00
parent c8bc6ac495
commit f4bd55262a
2 changed files with 41 additions and 35 deletions

View File

@ -22,7 +22,7 @@
<p v-if="errors.length"> <p v-if="errors.length">
<b>{{ $t('activity.errors') }}</b> <b>{{ $t('activity.errors') }}</b>
<ul> <ul>
<li v-for="error in errors">{{ error }}</li> <li v-for="error in errors" :key="error">{{ error }}</li>
</ul> </ul>
</p> </p>
</div> </div>
@ -30,7 +30,7 @@
<div class="form-floating mb-3"> <div class="form-floating mb-3">
<select class="form-select form-select-lg" id="type" required v-model="selectType"> <select class="form-select form-select-lg" id="type" required v-model="selectType">
<option selected disabled value="">{{ $t('activity.choose_location_type') }}</option> <option selected disabled value="">{{ $t('activity.choose_location_type') }}</option>
<option v-for="t in locationTypes" :value="t.id"> <option v-for="t in locationTypes" :value="t.id" :key="t.id">
{{ t.title.fr }} {{ t.title.fr }}
</option> </option>
</select> </select>
@ -93,7 +93,7 @@ export default {
return { return {
errors: [], errors: [],
selected: { selected: {
type: {}, type: null,
name: null, name: null,
addressId: null, addressId: null,
phonenumber1: null, phonenumber1: null,
@ -129,7 +129,7 @@ export default {
return this.selected.type; return this.selected.type;
}, },
set(value) { set(value) {
this.selected.type = value this.selected.type = value;
} }
}, },
inputName: { inputName: {
@ -173,16 +173,20 @@ export default {
}, },
methods: { methods: {
checkForm() { checkForm() {
console.log('check form') let cond = true;
if (this.selected.type) { console.log('check form');
return true;
}
this.errors = []; this.errors = [];
console.log(this.selected.type)
if (!this.selected.type) { if (this.selected.type) {
this.errors.push('Type of location required'); //TODO conditional requirements for field
//if (this.selected.type.addressRequired = 'required') ...
cond = true;
} else {
this.errors.push('Type de localisation requis');
cond = false;
} }
return cond;
}, },
getLocationTypesList() { getLocationTypesList() {
getLocationTypes().then(response => new Promise(resolve => { getLocationTypes().then(response => new Promise(resolve => {
@ -195,29 +199,30 @@ export default {
this.modal.showModal = true; this.modal.showModal = true;
}, },
saveNewLocation() { saveNewLocation() {
this.checkForm(); if (this.checkForm()) {
console.log('saveNewLocation', this.selected); console.log('saveNewLocation', this.selected);
let body = { let body = {
type: 'location', type: 'location',
name: this.selected.name, name: this.selected.name,
address: { address: {
id: this.selected.addressId id: this.selected.addressId
}, },
locationType: { locationType: {
id: this.selected.type, id: this.selected.type,
type: 'location-type' type: 'location-type'
}, },
phonenumber1: this.selected.phonenumber1, phonenumber1: this.selected.phonenumber1,
phonenumber2: this.selected.phonenumber2, phonenumber2: this.selected.phonenumber2,
email: this.selected.email, email: this.selected.email,
} };
postLocation(body).then(location => new Promise(resolve => { postLocation(body).then(location => new Promise(resolve => {
console.log('postLocation', location); console.log('postLocation', location);
this.locations.push(location); this.locations.push(location);
this.$store.dispatch('updateLocation', location); this.$store.dispatch('updateLocation', location);
resolve(); resolve();
this.modal.showModal = false; this.modal.showModal = false;
})); }));
};
}, },
submitNewAddress(payload) { submitNewAddress(payload) {
console.log('submitNewAddress', payload); console.log('submitNewAddress', payload);

View File

@ -4,6 +4,7 @@ const activityMessages = {
fr: { fr: {
activity: { activity: {
// //
errors: "Le formulaire contient des erreurs",
social_issues: "Problématiques sociales", social_issues: "Problématiques sociales",
choose_other_social_issue: "Ajouter une autre problématique sociale...", choose_other_social_issue: "Ajouter une autre problématique sociale...",
social_actions: "Actions d'accompagnement", social_actions: "Actions d'accompagnement",