Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

OnTheFly modal, Person Sub-component: create/edit form, show

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-06-02 22:20:19 +02:00
parent 4562ed46db
commit 4d0cfbb396
10 changed files with 319 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly.vue
View File

@ -20,7 +20,8 @@
<on-the-fly-person
v-bind:id="id"
v-bind:type="type"
v-bind:action="action">
v-bind:action="action"
ref="castPerson">
</on-the-fly-person>
</template>
@ -28,13 +29,15 @@
<on-the-fly-thirdparty
v-bind:id="id"
v-bind:type="type"
v-bind:action="action">
v-bind:action="action"
ref="castThirdparty">
</on-the-fly-thirdparty>
</template>
<template v-slot:body v-else>
<on-the-fly-create
v-bind:action="action">
v-bind:action="action"
ref="castNew">
</on-the-fly-create>
</template>
@ -44,7 +47,10 @@
class="sc-button bt-update"> <!-- @click.prevent="$emit('..', ..)" -->
</button>
<button v-else
class="sc-button bt-save"> <!-- @click.prevent="$emit('..', ..)" -->
class="sc-button bt-save"
@click="saveAction"
> <!--
-->
{{ $t('action.save')}}
</button>
</template>
@ -55,8 +61,8 @@
</template>
<script>
import Modal from 'ChillMainAssets/vuejs/_components/Modal';
import OnTheFlyPerson from './OnTheFly/Person.vue';
import Modal from 'ChillMainAssets/vuejs/_components/Modal.vue';
import OnTheFlyPerson from 'ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue';
import OnTheFlyThirdparty from './OnTheFly/ThirdParty.vue';
import OnTheFlyCreate from './OnTheFly/Create.vue';
@ -123,6 +129,16 @@ export default {
changeActionTo(action) {
// [BUG] clic first on show item button; in modal clic edit button; close modal; clic again on show item button
this.$data.action = action;
},
saveAction() {
console.log('saveAction');
if (this.type === 'person') {
this.$refs.castPerson.postData();
} else if (this.type === 'thirdparty') {
this.$refs.castThirdparty.postData();
} else {
this.$refs.castNew.castByType();
}
}
}
}

23
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly/Create.vue
View File

@ -21,19 +21,21 @@
<div class="my-4">
<on-the-fly-person
v-if="type === 'person'"
v-bind:action="action">
v-bind:action="action"
ref="castPerson">
</on-the-fly-person>
<on-the-fly-thirdparty
v-if="type === 'thirdparty'"
v-bind:action="action">
v-bind:action="action"
ref="castThirdparty">
</on-the-fly-thirdparty>
</div>
</template>
<script>
import OnTheFlyPerson from './Person.vue';
import OnTheFlyThirdparty from './ThirdParty.vue';
import OnTheFlyPerson from 'ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue';
import OnTheFlyThirdparty from './ThirdParty.vue'; // TODO move in ChillThirdpartyAssets
export default {
name: "OnTheFlyCreate",
@ -44,7 +46,7 @@ export default {
},
data() {
return {
type: 'person'
type: 'person' //by default
}
},
computed: {
@ -60,8 +62,17 @@ export default {
methods: {
isActive(tab) {
return (this.type === tab) ? true : false;
},
castByType() {
console.log('saveActionByType');
if (this.type === 'person') {
this.$refs.castPerson.postData();
} else if (this.type === 'thirdparty') {
this.$refs.castThirdparty.postData();
} else {
throw Error('Invalid type of entity');
}
}
}
}
</script>

22
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue
View File

@ -1,22 +0,0 @@
<template>
<div v-if="action === 'show'">
show
person
{{ id }}
</div>
<div v-else-if="action === 'edit' || action === 'create'">
{{ action }}
person
{{ id }}
</div>
</template>
<script>
export default {
name: "OnTheFlyPerson",
props: ['id', 'type', 'action']
}
</script>
<style lang="css" scoped>
</style>

1
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue
View File

@ -16,6 +16,7 @@ export default {
name: "OnTheFlyThirdParty",
props: ['id', 'type', 'action']
}
// TODO move in ChillThirdpartyAssets
</script>
<style lang="css" scoped>

48
src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/OnTheFly.js Normal file
View File

@ -0,0 +1,48 @@
/*
* GET a person by id
*/
const getPerson = (id) => {
const url = `/api/1.0/person/person/${id}.json`;
return fetch(url)
.then(response => {
if (response.ok) { return response.json(); }
throw Error('Error with request resource response');
});
};
/*
* GET a thirdparty by id
* TODO move in ChillThirdpartyAssets !!
*/
const getThirdparty = (id) => {
const url = `/api/1.0/thirdparty/thirdparty/${id}.json`;
return fetch(url)
.then(response => {
if (response.ok) { return response.json(); }
throw Error('Error with request resource response');
});
};
/*
* POST a person
*/
const postPerson = (body) => {
const url = `/api/1.0/person/person.json`;
return fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
body: JSON.stringify(body)
})
.then(response => {
if (response.ok) { return response.json(); }
throw Error('Error with request resource response');
});
};
export {
getPerson,
getThirdparty,
postPerson
};

8
src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
View File

@ -69,7 +69,7 @@
<on-the-fly
v-if="query.length >= 3"
v-bind:buttonText="$t('onthefly.create.button', {q: query})"
action="create">
action="create"><!-- TODO first close this modal -->
</on-the-fly>
</div>
@ -177,7 +177,7 @@ export default {
if (query.length >= 3) {
searchPersons_2({ query, options: this.options })
.then(suggested => new Promise((resolve, reject) => {
console.log('suggested', suggested);
//console.log('suggested', suggested);
this.loadSuggestions(suggested.results);
resolve();
}));
@ -186,14 +186,14 @@ export default {
}
},
loadSuggestions(suggested) {
console.log('suggested', suggested);
//console.log('suggested', suggested);
this.search.suggested = suggested;
this.search.suggested.forEach(function(item) {
item.key = this.itemKey(item);
}, this);
},
updateSelected(value) {
console.log('value', value);
//console.log('value', value);
this.search.selected = value;
},
resetSearch() {

2
src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue
View File

@ -42,7 +42,7 @@ export default {
computed: {
selected: {
set(value) {
console.log('value', value);
//console.log('value', value);
this.$emit('updateSelected', value);
},
get() {

210
src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue Normal file
View File

@ -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>

16
src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.js
View File

@ -15,7 +15,21 @@ const personMessages = {
person: {
firstname: "Prénom",
lastname: "Nom",
born: "né le ",
born: "né{e} le ",
center_id: "Identifiant du centre",
center_type: "Type de centre",
center_name: "Territoire", // vendée
phonenumber: "Téléphone",
mobilenumber: "Mobile",
altnames: "Autres noms",
gender: {
title: "Genre",
placeholder: "Choisissez le genre de l'usager",
woman: "Femme",
man: "Homme",
neuter: "Neutre",
}
},
error_only_one_person: "Une seule personne peut être sélectionnée !"
}

2
src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
View File

@ -31,7 +31,7 @@
{% set gender = (p.person.gender == 'woman') ? 'fa-venus' :
(p.person.gender == 'man') ? 'fa-mars' : 'fa-neuter' %}
{% set genderTitle = (p.person.gender == 'woman') ? 'femme' :
(p.person.gender == 'homme') ? 'fa-mars' : 'neutre' %}
(p.person.gender == 'man') ? 'homme' : 'neutre' %}
<i class="fa fa-fw {{ gender }}" title="{{ genderTitle }}"></i>{{ born ~ ' le ' ~ p.person.birthdate|format_date('short') }}
</p>
</div>