person: add altnames in the onthefly component

This commit is contained in:
nobohan 2021-12-03 12:10:02 +01:00
parent 047083812e
commit 8affeb08d9

View File

@ -31,9 +31,8 @@
<label for="firstname">{{ $t('person.firstname') }}</label> <label for="firstname">{{ $t('person.firstname') }}</label>
</div> </div>
<div v-for="(a, i) in config.altNames" :key="a.key" class="form-floating mb-3"> <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" @change="enterAltName(value, a)" /> --> <input class="form-control form-control-lg" :id="a.key" @input="onAltNameInput" />
<input class="form-control form-control-lg" :id="a.key" v-model="person.altNames[i]" />
<label :for="a.key">{{ a.labels.fr }}</label> <label :for="a.key">{{ a.labels.fr }}</label>
</div> </div>
@ -109,16 +108,12 @@ export default {
config: { config: {
altNames: [] altNames: []
}, },
dataAltNames: []
} }
}, },
computed: { computed: {
firstName: { firstName: {
set(value) { set(value) {
console.log(value)
console.log(this.dataAltNames)
this.person.firstName = value; this.person.firstName = value;
//this.person.altNames = ['CACA'];
}, },
get() { return this.person.firstName; } get() { return this.person.firstName; }
}, },
@ -126,19 +121,6 @@ export default {
set(value) { this.person.lastName = value; }, set(value) { this.person.lastName = value; },
get() { return this.person.lastName; } get() { return this.person.lastName; }
}, },
// altNames: {
// set(value) {
// console.log(value)
// this.person.altNames=
// {
// key: value.key, //TODO! // person.altNames is filled by some magic
// label: {
// fr: value
// }
// };
// },
// get() { return this.person.altNames; }
// },
gender: { gender: {
set(value) { this.person.gender = value; }, set(value) { this.person.gender = value; },
get() { return this.person.gender; } get() { return this.person.gender; }
@ -167,10 +149,6 @@ export default {
set(value) { this.person.email = value; }, set(value) { this.person.email = value; },
get() { return this.person.email; } get() { return this.person.email; }
}, },
enterAltName(value, a) {
console.log('altname value entered', value)
console.log(a)
},
genderClass() { genderClass() {
switch (this.person.gender) { switch (this.person.gender) {
case 'woman': case 'woman':
@ -212,7 +190,16 @@ export default {
console.log('get person', this.person); console.log('get person', this.person);
resolve(); resolve();
})); }));
} },
onAltNameInput(event) {
const key = event.target.id;
const label = event.target.value;
let updateAltNames = this.person.altNames.filter((a) => a.key !== key);
updateAltNames.push(
{'key': key, 'label': label}
)
this.person.altNames = updateAltNames;
},
} }
} }
</script> </script>