mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
Merge branch 'ameliorations_composants_vue' into 'improve_ux'
Ameliorations composants vue See merge request Chill-Projet/chill-bundles!134
This commit is contained in:
commit
4f1a9c205f
@ -43,8 +43,9 @@
|
||||
|
||||
<template v-slot:footer>
|
||||
<button v-if="action === 'show'"
|
||||
@click="changeActionTo('edit')"
|
||||
class="btn btn-update">
|
||||
@click="goToLocation(id, type)"
|
||||
:title="$t(titleMessage)"
|
||||
class="btn btn-show">{{ $t(buttonMessage) }}
|
||||
</button>
|
||||
<button v-else
|
||||
class="btn btn-save"
|
||||
@ -115,6 +116,22 @@ export default {
|
||||
case 'create':
|
||||
return 'onthefly.create.title';
|
||||
}
|
||||
},
|
||||
titleMessage() {
|
||||
switch (this.type){
|
||||
case 'person':
|
||||
return 'action.redirect.' + this.type;
|
||||
case 'thirdparty':
|
||||
return 'action.redirect.' + this.type;
|
||||
}
|
||||
},
|
||||
buttonMessage(){
|
||||
switch (this.type){
|
||||
case 'person':
|
||||
return 'onthefly.show.file_' + this.type;
|
||||
case 'thirdparty':
|
||||
return 'onthefly.show.file_' + this.type;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -139,6 +156,13 @@ export default {
|
||||
this.$refs.castNew.castByType();
|
||||
}
|
||||
this.modal.showModal = false;
|
||||
},
|
||||
goToLocation(id, type){
|
||||
if(type == 'person'){
|
||||
window.location = `../../person/${id}/general`
|
||||
} else if(type == 'thirdparty') {
|
||||
window.location = `../../thirdparty/thirdparty/${id}/show`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -148,4 +172,5 @@ export default {
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -41,7 +41,11 @@ const messages = {
|
||||
close: "Fermer",
|
||||
back: "Retour",
|
||||
check_all: "cocher tout",
|
||||
reset: "réinitialiser"
|
||||
reset: "réinitialiser",
|
||||
redirect: {
|
||||
person: "Quitter la page et ouvrir le dossier",
|
||||
thirdparty: "Quitter la page et voir le tiers",
|
||||
}
|
||||
},
|
||||
nav: {
|
||||
next: "Suivant",
|
||||
@ -52,7 +56,9 @@ const messages = {
|
||||
onthefly: {
|
||||
show: {
|
||||
person: "Détails de l'usager",
|
||||
thirdparty: "Détails du tiers"
|
||||
thirdparty: "Détails du tiers",
|
||||
file_person: "Ouvrir le dossier",
|
||||
file_thirdparty: "Voir le Tiers",
|
||||
},
|
||||
edit: {
|
||||
person: "Modifier un usager",
|
||||
@ -71,7 +77,7 @@ const messages = {
|
||||
man: "Né le",
|
||||
woman: "Née le"
|
||||
} ,
|
||||
no_information: "Pas d'information",
|
||||
no_data: "Aucune information renseignée",
|
||||
type: {
|
||||
thirdparty: "Tiers",
|
||||
person: "Usager"
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
addLink: false,
|
||||
addAltNames: true,
|
||||
addAge : false,
|
||||
hLevel : 1
|
||||
hLevel : 3,
|
||||
}"
|
||||
:person="participation.person">
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="vue-component">
|
||||
|
||||
<!-- {{ accompanyingCourse.requestor }} -->
|
||||
<h2><a name="section-40"></a>{{ $t('requestor.title') }}</h2>
|
||||
|
||||
<div v-if="accompanyingCourse.requestor" class="flex-table">
|
||||
@ -10,16 +10,26 @@
|
||||
{{ $t('requestor.is_anonymous') }}
|
||||
</label>
|
||||
|
||||
<!-- <div class="flex-bloc row row-cols-1 g-0"> -->
|
||||
<third-party-render-box v-if="accompanyingCourse.requestor.type == 'thirdparty'"
|
||||
:thirdparty="accompanyingCourse.requestor"
|
||||
:options="{
|
||||
addLink: false,
|
||||
addId: false,
|
||||
addEntity: true,
|
||||
addInfo: true
|
||||
addInfo: true,
|
||||
hLevel: 3,
|
||||
isMultiline: true
|
||||
}"
|
||||
></third-party-render-box>
|
||||
>
|
||||
<template v-slot:record-actions>
|
||||
<ul class="record_actions">
|
||||
<button-location v-if="hasCurrentHouseholdAddress" :thirdparty="accompanyingCourse.requestor"></button-location>
|
||||
<li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="show"></on-the-fly></li>
|
||||
<li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="edit"></on-the-fly></li>
|
||||
</ul>
|
||||
</template>
|
||||
</third-party-render-box>
|
||||
|
||||
<person-render-box v-else-if="accompanyingCourse.requestor.type == 'person'"
|
||||
:person="accompanyingCourse.requestor"
|
||||
:options="{
|
||||
@ -27,11 +37,21 @@
|
||||
addId: false,
|
||||
addAltNames: false,
|
||||
addEntity: true,
|
||||
addInfo: true
|
||||
addInfo: true,
|
||||
hLevel: 3,
|
||||
isMultiline: true
|
||||
}"
|
||||
></person-render-box>
|
||||
>
|
||||
<template v-slot:record-actions>
|
||||
<ul class="record_actions">
|
||||
<button-location v-if="hasCurrentHouseholdAddress" :person="accompanyingCourse.requestor"></button-location>
|
||||
<li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="show"></on-the-fly></li>
|
||||
<li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="edit"></on-the-fly></li>
|
||||
</ul>
|
||||
</template>
|
||||
</person-render-box>
|
||||
|
||||
<!-- </div> -->
|
||||
|
||||
<!-- <h4>
|
||||
<span class="badge rounded-pill bg-secondary">{{ accompanyingCourse.requestor.type }}</span>
|
||||
{{ accompanyingCourse.requestor.text }}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<person-render-box
|
||||
v-if="resource.resource.type === 'person'"
|
||||
:person="resource.resource"
|
||||
:options="{ addInfo : true, addId : false, addEntity: true, addLink: false, addAltNames: true, addAge : false, hLevel : 1 }"
|
||||
:options="{ addInfo : true, addId : false, addEntity: true, addLink: false, addAltNames: true, addAge : false, hLevel : 3 }"
|
||||
>
|
||||
<template v-slot:record-actions>
|
||||
<ul class="record_actions">
|
||||
@ -17,7 +17,7 @@
|
||||
<third-party-render-box
|
||||
v-if="resource.resource.type === 'thirdparty'"
|
||||
:thirdparty="resource.resource"
|
||||
:options="{ addLink : false, addId : false, addEntity: true, addInfo: true }"
|
||||
:options="{ addLink : false, addId : false, addEntity: true, addInfo: true, hLevel: 3 }"
|
||||
>
|
||||
<template v-slot:record-actions>
|
||||
<ul class="record_actions">
|
||||
|
||||
@ -6,24 +6,24 @@
|
||||
<div class="item-col">
|
||||
<div class="entity-label">
|
||||
|
||||
<div class="denomination h3">
|
||||
<div :class="'denomination h' + options.hLevel">
|
||||
|
||||
<a v-if="this.options.addLink == true" href="#">
|
||||
<span class="firstname">{{ person.firstName }}</span>
|
||||
<span class="lastname">{{ person.lastName }}</span>
|
||||
<span v-if="this.options.addAltNames == true" class="altnames">
|
||||
<span v-if="person.altNames && options.addAltNames == true" class="altnames">
|
||||
<span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<span class="firstname">{{ person.firstName }}</span>
|
||||
<span class="lastname">{{ person.lastName }}</span>
|
||||
<span v-if="this.options.addAltNames == true" class="altnames">
|
||||
<span v-if="person.altNames && options.addAltNames == true" class="altnames">
|
||||
<span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
|
||||
</span>
|
||||
|
||||
<span v-if="this.options.addId == true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span>
|
||||
<span v-if="this.options.addEntity == true" class="badge rounded-pill bg-secondary">{{ $t('renderbox.person') }}</span>
|
||||
<span v-if="options.addId == true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span>
|
||||
<span v-if="options.addEntity == true" class="badge rounded-pill bg-secondary">{{ $t('renderbox.person') }}</span>
|
||||
|
||||
</div>
|
||||
|
||||
@ -35,25 +35,50 @@
|
||||
<time v-else-if="person.deathdate" datetime="{{ person.deathdate }}" title="{{ person.deathdate }}">
|
||||
{{ birthdate }} - {{ deathdate }}
|
||||
</time>
|
||||
<span class="age">{{ person.age }}</span>
|
||||
<!-- <span class="age">{{ person.age }}</span> -->
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-col">
|
||||
<ul class="list-content fa-ul">
|
||||
|
||||
<li v-if="person.current_household_address">
|
||||
<i class="fa fa-li fa-map-marker"></i>
|
||||
<show-address :address="person.current_household_address" :isMultiline="false"></show-address>
|
||||
<show-address :address="person.current_household_address" :isMultiline="isMultiline"></show-address>
|
||||
</li>
|
||||
<li v-else-if="options.addNoData">
|
||||
<i class="fa fa-li fa-map-marker"></i>
|
||||
<p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
|
||||
</li>
|
||||
|
||||
<li v-if="person.mobilenumber">
|
||||
<i class="fa fa-li fa-mobile"></i>
|
||||
<a :href="'tel: ' + person.mobilenumber">{{ person.mobilenumber }}</a>
|
||||
</li>
|
||||
<li v-else-if="person.phonenumber">
|
||||
<li v-else-if="options.addNoData">
|
||||
<i class="fa fa-li fa-mobile"></i>
|
||||
<p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
|
||||
</li>
|
||||
<li v-if="person.phonenumber">
|
||||
<i class="fa fa-li fa-phone"></i>
|
||||
<a :href="'tel: ' + person.phonenumber">{{ person.phonenumber }}</a>
|
||||
</li>
|
||||
<li v-else-if="options.addNoData">
|
||||
<i class="fa fa-li fa-phone"></i>
|
||||
<p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
|
||||
</li>
|
||||
|
||||
<li v-if="person.center && options.addCenter">
|
||||
<i class="fa fa-li fa-long-arrow-right"></i>
|
||||
{{ person.center.name }}
|
||||
</li>
|
||||
<li v-else-if="options.addNoData">
|
||||
<i class="fa fa-li fa-long-arrow-right"></i>
|
||||
<p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
|
||||
</li>
|
||||
<slot name="custom-zone"></slot>
|
||||
|
||||
</ul>
|
||||
|
||||
<slot name="record-actions"></slot>
|
||||
@ -78,6 +103,13 @@ export default {
|
||||
getGender: function() {
|
||||
return this.person.gender == 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man';
|
||||
},
|
||||
isMultiline: function() {
|
||||
if(this.options.isMultiline){
|
||||
return this.options.isMultiline
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
getGenderIcon: function() {
|
||||
return this.person.gender == 'woman' ? 'fa-venus' : this.person.gender == 'man' ? 'fa-mars' : 'fa-neuter';
|
||||
},
|
||||
@ -103,10 +135,24 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang='scss'>
|
||||
.lastname:before{
|
||||
content: " "
|
||||
}
|
||||
|
||||
div.item-col:first-child{
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
div.flex-table {
|
||||
div.item-bloc {
|
||||
div.item-row {
|
||||
div.item-col:last-child {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@ -1,57 +1,23 @@
|
||||
<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>
|
||||
<person-render-box
|
||||
:person="person"
|
||||
:options="{
|
||||
addInfo: true,
|
||||
addEntity: false,
|
||||
addAltNames: true,
|
||||
addId: true,
|
||||
addLink: false,
|
||||
hLevel: 3,
|
||||
addCenter: true,
|
||||
addNoData: true,
|
||||
isMultiline: true
|
||||
}"
|
||||
></person-render-box>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div v-else-if="action === 'edit' || action === 'create'">
|
||||
|
||||
<div class="form-floating mb-3">
|
||||
@ -109,10 +75,14 @@
|
||||
|
||||
<script>
|
||||
import { getPerson, postPerson } from '../../_api/OnTheFly';
|
||||
import PersonRenderBox from '../Entity/PersonRenderBox.vue';
|
||||
|
||||
export default {
|
||||
name: "OnTheFlyPerson",
|
||||
props: ['id', 'type', 'action'],
|
||||
components: {
|
||||
PersonRenderBox
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
person: {
|
||||
@ -204,10 +174,6 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
ul {
|
||||
li::marker {
|
||||
}
|
||||
}
|
||||
div.flex-table {
|
||||
div.item-bloc {
|
||||
div.item-row {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<div class="item-col">
|
||||
<div class="entity-label">
|
||||
|
||||
<div class="denomination h3">
|
||||
<div :class="'denomination h' + options.hLevel">
|
||||
|
||||
<a v-if="this.options.addLink == true" href="#">
|
||||
<span class="name">{{ thirdparty.text }}</span>
|
||||
@ -35,7 +35,7 @@
|
||||
<ul class="list-content fa-ul">
|
||||
<li v-if="thirdparty.address">
|
||||
<i class="fa fa-li fa-map-marker"></i>
|
||||
<show-address :address="thirdparty.address" :isMultiline="false"></show-address>
|
||||
<show-address :address="thirdparty.address" :isMultiline="isMultiline"></show-address>
|
||||
</li>
|
||||
<li v-if="thirdparty.telephone">
|
||||
<i class="fa fa-li fa-mobile"></i>
|
||||
@ -67,6 +67,13 @@ export default {
|
||||
},
|
||||
props: ['thirdparty', 'options'],
|
||||
computed: {
|
||||
isMultiline: function() {
|
||||
if(this.options.isMultiline){
|
||||
return this.options.isMultiline
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
getGender: function() {
|
||||
return this.thirdparty.gender == 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man';
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user