person: new person modal: add email field + re-order fields

This commit is contained in:
nobohan 2021-12-01 14:45:20 +01:00
parent 64d3edfc42
commit bcdddcde9b
2 changed files with 22 additions and 8 deletions

View File

@ -21,14 +21,19 @@
<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')" />
<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')" />
<label for="firstname">{{ $t('person.firstname') }}</label>
</div>
<div class="form-floating mb-3">
<input class="form-control form-control-lg" id="lastname" v-model="lastName" v-bind:placeholder="$t('person.lastname')" />
<label for="lastname">{{ $t('person.lastname') }}</label>
<div v-for="(a, i) in config.altNames" :key="a.key" class="form-floating mb-3">
<input class="form-control form-control-lg" :id="a.key" v-model="altNames[i]" />
<label :for="a.key">{{ a.labels.fr }}</label>
</div>
<!-- TODO fix placeholder if undefined
@ -43,11 +48,6 @@
<label>{{ $t('person.gender.title') }}</label>
</div>
<div v-for="(a, i) in config.altNames" :key="a.key" class="form-floating mb-3">
<input class="form-control form-control-lg" :id="a.key" v-model="altNames[i]" />
<label :for="a.key">{{ a.labels.fr }}</label>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="birthdate"><i class="fa fa-fw fa-birthday-cake"></i></span>
<input type="date"
@ -76,6 +76,15 @@
aria-describedby="mobilenumber" />
</div>
<div class="input-group mb-3">
<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')"
aria-describedby="email" />
</div>
</div>
</template>
@ -145,6 +154,10 @@ export default {
set(value) { this.person.mobilenumber = value; },
get() { return this.person.mobilenumber; }
},
email: {
set(value) { this.person.email = value; },
get() { return this.person.email; }
},
genderClass() {
switch (this.person.gender) {
case 'woman':

View File

@ -30,6 +30,7 @@ const personMessages = {
phonenumber: "Téléphone",
mobilenumber: "Mobile",
altnames: "Autres noms",
email: "Courriel",
gender: {
title: "Genre",
placeholder: "Choisissez le genre de l'usager",