Squashed commit of the following:

commit 9e767fa3e0788d87437c235e51fcdc4f26f75d98
Author: Julien Fastré <julien.fastre@champs-libres.coop>
Date:   Mon Jan 17 15:28:02 2022 +0100

    traductions

commit db65134743
Author: nobohan <juminet@gmail.com>
Date:   Mon Jan 17 12:17:22 2022 +0100

    add person: increase z-index of toast and wait for validation before closing modal

commit 7af4c3434e
Merge: a09c8ee8a 46c6d0e29
Author: Julien Fastré <julien.fastre@champs-libres.coop>
Date:   Sun Jan 16 22:51:45 2022 +0100

    Merge remote-tracking branch 'origin/master' into issue357_front_end_validation

commit a09c8ee8af
Author: nobohan <juminet@gmail.com>
Date:   Wed Jan 12 15:47:11 2022 +0100

    upd CHANGELOG

commit a312a9463d
Author: nobohan <juminet@gmail.com>
Date:   Wed Jan 12 15:29:32 2022 +0100

    address: display error message if some fields are empty (street & streetnumber)

commit 0035128138
Author: nobohan <juminet@gmail.com>
Date:   Wed Jan 12 14:47:43 2022 +0100

    address: display error message if some fields are empty

commit 49cb154672
Author: nobohan <juminet@gmail.com>
Date:   Tue Jan 11 20:58:00 2022 +0100

    address: add field validation (WIP)

commit 1a7ec9e396
Author: nobohan <juminet@gmail.com>
Date:   Tue Jan 11 17:16:43 2022 +0100

    Activity: fix vuejs warning

commit fa0b9271c2
Author: nobohan <juminet@gmail.com>
Date:   Tue Jan 11 16:13:23 2022 +0100

    location: treat 422 error when POSTing new location

commit c7b9a1a3fe
Author: nobohan <juminet@gmail.com>
Date:   Tue Jan 11 16:00:29 2022 +0100

    location: fix error when creating a new location: a new location could not be added to the availableLocations due to refactoring

commit f1c61a2387
Author: nobohan <juminet@gmail.com>
Date:   Tue Jan 11 15:20:33 2022 +0100

    person: treat 422 error in AddPerson for thirdparty

commit 8f6a70b240
Author: nobohan <juminet@gmail.com>
Date:   Tue Jan 11 11:30:05 2022 +0100

    person: add validation for required fields in on-the-fly person

commit 40e4bf953f
Author: nobohan <juminet@gmail.com>
Date:   Tue Jan 11 09:34:15 2022 +0100

    vuejs: better violations message in 422 error handling

commit 378f3a16fc
Author: nobohan <juminet@gmail.com>
Date:   Mon Jan 10 18:11:02 2022 +0100

    person: on-the-fly person: first implementation of makeFetch for posting person
This commit is contained in:
2022-01-17 15:28:49 +01:00
parent 5e3d421b56
commit 7e932e838f
18 changed files with 226 additions and 77 deletions

View File

@@ -66,9 +66,10 @@
<div class="create-button">
<on-the-fly
v-if="query.length >= 3"
v-bind:buttonText="$t('onthefly.create.button', {q: query})"
:buttonText="$t('onthefly.create.button', {q: query})"
action="create"
@saveFormOnTheFly="saveFormOnTheFly">
@saveFormOnTheFly="saveFormOnTheFly"
:canCloseModal="canCloseOnTheFlyModal">
</on-the-fly>
</div>
@@ -91,8 +92,7 @@ import Modal from 'ChillMainAssets/vuejs/_components/Modal';
import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
import PersonSuggestion from './AddPersons/PersonSuggestion';
import { searchEntities } from 'ChillPersonAssets/vuejs/_api/AddPersons';
import { postPerson } from "ChillPersonAssets/vuejs/_api/OnTheFly";
import { postThirdparty } from "ChillThirdPartyAssets/vuejs/_api/OnTheFly";
import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
export default {
name: 'AddPersons',
@@ -120,7 +120,8 @@ export default {
suggested: [],
selected: [],
priorSuggestion: {}
}
},
canCloseOnTheFlyModal: false
}
},
computed: {
@@ -267,22 +268,36 @@ export default {
saveFormOnTheFly({ type, data }) {
console.log('saveFormOnTheFly from addPersons, type', type, ', data', data);
if (type === 'person') {
console.log('type person with', data);
postPerson(data)
.then(person => new Promise((resolve, reject) => {
console.log('onthefly create: post person', person);
this.newPriorSuggestion(person);
resolve();
}));
makeFetch('POST', '/api/1.0/person/person.json', data)
.then(response => {
this.newPriorSuggestion(response);
this.canCloseOnTheFlyModal = true;
})
.catch((error) => {
if (error.name === 'ValidationException') {
for (let v of error.violations) {
this.$toast.open({message: v });
}
} else {
this.$toast.open({message: 'An error occurred'});
}
})
}
else if (type === 'thirdparty') {
console.log('type thirdparty with', data);
postThirdparty(data)
.then(thirdparty => new Promise((resolve, reject) => {
console.log('onthefly create: post thirdparty', thirdparty);
this.newPriorSuggestion(thirdparty);
resolve();
}));
makeFetch('POST', '/api/1.0/thirdparty/thirdparty.json', data)
.then(response => {
this.newPriorSuggestion(response);
this.canCloseOnTheFlyModal = true;
})
.catch((error) => {
if (error.name === 'ValidationException') {
for (let v of error.violations) {
this.$toast.open({message: v });
}
} else {
this.$toast.open({message: 'An error occurred'});
}
})
}
}
},

View File

@@ -22,24 +22,45 @@
<div v-else-if="action === 'edit' || action === 'create'">
<div class="form-floating mb-3">
<input class="form-control form-control-lg" id="lastname" v-model="lastName" v-bind:placeholder="$t('person.lastname')" />
<input
class="form-control form-control-lg"
id="lastname"
v-model="lastName"
:placeholder="$t('person.lastname')"
@change="checkErrors"
/>
<label for="lastname">{{ $t('person.lastname') }}</label>
</div>
<div class="form-floating mb-3">
<input class="form-control form-control-lg" id="firstname" v-model="firstName" v-bind:placeholder="$t('person.firstname')" />
<input
class="form-control form-control-lg"
id="firstname"
v-model="firstName"
:placeholder="$t('person.firstname')"
@change="checkErrors"
/>
<label for="firstname">{{ $t('person.firstname') }}</label>
</div>
<div v-for="(a) in config.altNames" :key="a.key" class="form-floating mb-3">
<input class="form-control form-control-lg" :id="a.key" @input="onAltNameInput" />
<input
class="form-control form-control-lg"
:id="a.key"
@input="onAltNameInput"
/>
<label :for="a.key">{{ a.labels.fr }}</label>
</div>
<!-- TODO fix placeholder if undefined
-->
<div class="form-floating mb-3">
<select class="form-select form-select-lg" id="gender" v-model="gender">
<select
class="form-select form-select-lg"
id="gender"
v-model="gender"
@change="checkErrors"
>
<option selected disabled >{{ $t('person.gender.placeholder') }}</option>
<option value="woman">{{ $t('person.gender.woman') }}</option>
<option value="man">{{ $t('person.gender.man') }}</option>
@@ -62,8 +83,8 @@
<span class="input-group-text" id="phonenumber"><i class="fa fa-fw fa-phone"></i></span>
<input class="form-control form-control-lg"
v-model="phonenumber"
v-bind:placeholder="$t('person.phonenumber')"
v-bind:aria-label="$t('person.phonenumber')"
:placeholder="$t('person.phonenumber')"
:aria-label="$t('person.phonenumber')"
aria-describedby="phonenumber" />
</div>
@@ -71,8 +92,8 @@
<span class="input-group-text" id="mobilenumber"><i class="fa fa-fw fa-mobile"></i></span>
<input class="form-control form-control-lg"
v-model="mobilenumber"
v-bind:placeholder="$t('person.mobilenumber')"
v-bind:aria-label="$t('person.mobilenumber')"
:placeholder="$t('person.mobilenumber')"
:aria-label="$t('person.mobilenumber')"
aria-describedby="mobilenumber" />
</div>
@@ -80,11 +101,17 @@
<span class="input-group-text" id="email"><i class="fa fa-fw fa-at"></i></span>
<input class="form-control form-control-lg"
v-model="email"
v-bind:placeholder="$t('person.email')"
v-bind:aria-label="$t('person.email')"
:placeholder="$t('person.email')"
:aria-label="$t('person.email')"
aria-describedby="email" />
</div>
<div class="alert alert-warning" v-if="errors.length">
<ul>
<li v-for="(e, i) in errors" :key="i">{{ e }}</li>
</ul>
</div>
</div>
</template>
@@ -108,6 +135,7 @@ export default {
config: {
altNames: []
},
errors: []
}
},
computed: {
@@ -183,6 +211,18 @@ export default {
}
},
methods: {
checkErrors(e) {
this.errors = [];
if (!this.person.lastName) {
this.errors.push("Le nom ne doit pas être vide.");
}
if (!this.person.firstName) {
this.errors.push("Le prénom ne doit pas être vide.");
}
if (!this.person.gender) {
this.errors.push("Le genre doit être renseigné");
}
},
loadData() {
getPerson(this.id)
.then(person => new Promise((resolve, reject) => {