mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-08-21 23:23:51 +00:00
OnTheFly modal, Person Sub-component: create/edit form, show
This commit is contained in:
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div v-if="action === 'show'">
|
||||
|
||||
<div class="flex-table">
|
||||
<div class="item-bloc">
|
||||
<div class="item-row">
|
||||
<div class="item-col">
|
||||
<h3 :title="person.id">{{ person.text }}</h3>
|
||||
<p>
|
||||
<i class="fa fa-fw"
|
||||
:class="genderClass">
|
||||
<!--
|
||||
:title="$t(genderTranslation)"
|
||||
-->
|
||||
</i>
|
||||
<span v-if="person.birthdate">
|
||||
{{ $t('person.born', { e: feminized }) }}
|
||||
{{ $d(person.birthdate.datetime, 'short') }}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="item-col">
|
||||
<dl class="list-content">
|
||||
<dt>{{ $t('person.firstname') }}</dt>
|
||||
<dd>{{ person.firstName }}</dd>
|
||||
|
||||
<dt>{{ $t('person.lastname') }}</dt>
|
||||
<dd>{{ person.lastName }}</dd>
|
||||
|
||||
<dt>{{ $t('person.altnames') }}</dt>
|
||||
<dd>{{ person.altNames }}</dd>
|
||||
|
||||
<span v-if="person.center">
|
||||
<dt>{{ $t('person.center_name') }}</dt>
|
||||
<dd :title="person.center.id">{{ person.center.name }}</dd>
|
||||
</span>
|
||||
|
||||
<dt>{{ $t('person.phonenumber') }}</dt>
|
||||
<dd>{{ person.phonenumber }}</dd>
|
||||
|
||||
<dt>{{ $t('person.mobilenumber') }}</dt>
|
||||
<dd>{{ person.mobilenumber }}</dd>
|
||||
|
||||
<dt>{{ $t('person.gender.title') }}</dt>
|
||||
<!--
|
||||
<dd>{{ $t(genderTranslation) }}</dd>
|
||||
-->
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div v-else-if="action === 'edit' || action === 'create'">
|
||||
{{ action }}
|
||||
|
||||
<input v-model="firstName" :placeholder="$t('person.firstname')" />
|
||||
<input v-model="lastName" :placeholder="$t('person.lastname')" />
|
||||
|
||||
<!-- TODO fix placeholder if undefined
|
||||
TODO dynamically get gender options
|
||||
-->
|
||||
<select v-model="gender">
|
||||
<option disabled value="">{{ $t('person.gender.placeholder') }}</option>
|
||||
<option value="woman">{{ $t('person.gender.woman') }}</option>
|
||||
<option value="man">{{ $t('person.gender.man') }}</option>
|
||||
<option value="neuter">{{ $t('person.gender.neuter') }}</option>
|
||||
</select>
|
||||
|
||||
<!--
|
||||
<input
|
||||
type="text"
|
||||
id="chill_personbundle_person_birthdate"
|
||||
name="chill_personbundle_person[birthdate]"
|
||||
required="required"
|
||||
class="input datepicker"
|
||||
v-model="birthDate"
|
||||
aria-label="Use the arrow keys to pick a date"
|
||||
/>
|
||||
<datepicker v-model="birthDate" />
|
||||
-->
|
||||
|
||||
<i class="fa fa-phone">
|
||||
</i><input v-model="phonenumber" :placeholder="$t('person.phonenumber')" />
|
||||
<i class="fa fa-mobile">
|
||||
</i><input v-model="mobilenumber" :placeholder="$t('person.mobilenumber')" />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPerson, postPerson } from '../../_api/OnTheFly';
|
||||
//import Datepicker from 'vue3-datepicker';
|
||||
//import { ref } from 'vue';
|
||||
//const picked = ref(new Date())
|
||||
|
||||
export default {
|
||||
name: "OnTheFlyPerson",
|
||||
props: ['id', 'type', 'action'],
|
||||
data() {
|
||||
return {
|
||||
person: {
|
||||
type: 'person'
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
firstName: {
|
||||
set(value) { this.person.firstName = value; },
|
||||
get() { return this.person.firstName; }
|
||||
},
|
||||
lastName: {
|
||||
set(value) { this.person.lastName = value; },
|
||||
get() { return this.person.lastName; }
|
||||
},
|
||||
gender: {
|
||||
set(value) { this.person.gender = value; },
|
||||
get() { return this.person.gender; }
|
||||
},
|
||||
// birthDate: {
|
||||
// set(value) { this.person.birthdate.datetime = value; },
|
||||
// get() {
|
||||
// if (this.person.birthdate) {
|
||||
// let datetime = this.person.birthdate.datetime;
|
||||
// return datetime.getDate() + '-' + (datetime.getMonth() + 1) + '-' + datetime.getFullYear();
|
||||
// } else {
|
||||
// return ref(new Date());
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
phonenumber: {
|
||||
set(value) { this.person.phonenumber = value; },
|
||||
get() { return this.person.phonenumber; }
|
||||
},
|
||||
mobilenumber: {
|
||||
set(value) { this.person.mobilenumber = value; },
|
||||
get() { return this.person.mobilenumber; }
|
||||
},
|
||||
genderClass() {
|
||||
switch (this.person.gender) {
|
||||
case 'woman':
|
||||
return 'fa-venus';
|
||||
case 'man':
|
||||
return 'fa-mars';
|
||||
case 'neuter':
|
||||
return 'fa-neuter';
|
||||
}
|
||||
},
|
||||
genderTranslation() {
|
||||
switch (this.person.gender) {
|
||||
case 'woman':
|
||||
return 'person.gender.woman';
|
||||
case 'man':
|
||||
return 'person.gender.man';
|
||||
case 'neuter':
|
||||
return 'person.gender.neuter';
|
||||
}
|
||||
},
|
||||
feminized() {
|
||||
return (this.person.gender === 'woman')? 'e' : '';
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.action !== 'create') {
|
||||
this.loadData();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadData() {
|
||||
//console.log('loading data', this.id);
|
||||
getPerson(this.id)
|
||||
.then(person => new Promise((resolve, reject) => {
|
||||
this.person = person;
|
||||
//console.log('person', this.person);
|
||||
resolve();
|
||||
}));
|
||||
},
|
||||
postData() {
|
||||
postPerson(this.person)
|
||||
.then(person => new Promise((resolve, reject) => {
|
||||
this.person = person;
|
||||
console.log('person', person);
|
||||
resolve();
|
||||
}));
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
ul {
|
||||
li::marker {
|
||||
}
|
||||
}
|
||||
div.flex-table {
|
||||
div.item-bloc {
|
||||
div.item-row {
|
||||
div.item-col:last-child {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
dl {
|
||||
dd {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user