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

View File

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