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

Feature: [address reference] adapt vue app AccompanyingCourse to allow to open address details modal

Browse Source
This commit is contained in:
Julien Fastré 2023-03-22 10:37:38 +01:00
parent adc80d5080
commit 204c28d373
Signed by: julienfastre
GPG Key ID: BDE2190974723FCB
4 changed files with 424 additions and 400 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue
View File

@ -15,7 +15,8 @@
:person="participation.person" :person="participation.person"
:returnPath="getAccompanyingCourseReturnPath"> :returnPath="getAccompanyingCourseReturnPath">
<template v-slot:record-actions> <template v-slot:end-bloc>
<div class="item-row separator">
<ul class="record_actions"> <ul class="record_actions">
<button-location <button-location
v-if="hasCurrentHouseholdAddress" v-if="hasCurrentHouseholdAddress"
@ -38,10 +39,12 @@
</button> </button>
</li> </li>
</ul> </ul>
</div>
</template> </template>
</person-render-box> </person-render-box>
<teleport to="body"> <teleport to="body">
<modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false"> <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
<template v-slot:header> <template v-slot:header>

8
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue
View File

@ -12,7 +12,8 @@
hLevel : 3, hLevel : 3,
isConfidential : true isConfidential : true
}"> }">
<template v-slot:record-actions> <template v-slot:end-bloc>
<div class="item-row separator">
<ul class="record_actions"> <ul class="record_actions">
<li> <li>
<write-comment <write-comment
@ -46,6 +47,7 @@
</button> </button>
</li> </li>
</ul> </ul>
</div>
</template> </template>
</person-render-box> </person-render-box>
@ -59,7 +61,8 @@
addInfo: false, addInfo: false,
hLevel: 3 hLevel: 3
}"> }">
<template v-slot:record-actions> <template v-slot:end-bloc>
<div class="item-row separator">
<ul class="record_actions"> <ul class="record_actions">
<li> <li>
<write-comment <write-comment
@ -93,6 +96,7 @@
</button> </button>
</li> </li>
</ul> </ul>
</div>
</template> </template>
</third-party-render-box> </third-party-render-box>
</template> </template>

66
src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div v-if="render === 'bloc'" class="item-bloc"> <div v-if="render === 'bloc'" class="item-bloc">
<section class="chill-entity entity-person"> <section class="chill-entity entity-person">
<div class="item-row entity-bloc"> <div class="item-row entity-bloc">
@ -43,7 +43,8 @@
{{ $t(getGenderTranslation) + ' ' + $d(birthdate, 'text') }} {{ $t(getGenderTranslation) + ' ' + $d(birthdate, 'text') }}
</time> </time>
<time v-else-if="person.birthdate && person.deathdate" :datetime="person.deathdate" :title="person.deathdate"> <time v-else-if="person.birthdate && person.deathdate" :datetime="person.deathdate"
:title="person.deathdate">
{{ $d(birthdate) }} - {{ $d(deathdate) }} {{ $d(birthdate) }} - {{ $d(deathdate) }}
</time> </time>
@ -51,7 +52,9 @@
{{ $t('renderbox.deathdate') + ' ' + deathdate }} {{ $t('renderbox.deathdate') + ' ' + deathdate }}
</time> </time>
<span v-if="options.addAge && person.birthdate" class="age">{{ $tc('renderbox.years_old', person.age) }}</span> <span v-if="options.addAge && person.birthdate" class="age">{{
$tc('renderbox.years_old', person.age)
}}</span>
</p> </p>
</div> </div>
</div> </div>
@ -128,9 +131,10 @@
</div> </div>
</div> </div>
<div class="item-col mx-3" v-if="this.showResidentialAddresses && (person.current_residential_addresses || []).length > 0"> <div class="item-col mx-3"
v-if="this.showResidentialAddresses && (person.current_residential_addresses || []).length > 0">
<div class="float-button bottom"> <div class="float-button bottom">
<div class="box" > <div class="box">
<ul class="list-content fa-ul"> <ul class="list-content fa-ul">
<li v-for="(addr, i) in person.current_residential_addresses" :key="i"> <li v-for="(addr, i) in person.current_residential_addresses" :key="i">
<i class="fa fa-li fa-map-marker"></i> <i class="fa fa-li fa-map-marker"></i>
@ -175,10 +179,13 @@
</div> </div>
</div> </div>
</section>
</div>
<span v-if="render === 'badge'" class="chill-entity entity-person badge-person"> <slot name="end-bloc"></slot>
</section>
</div>
<span v-if="render === 'badge'" class="chill-entity entity-person badge-person">
<a v-if="options.addLink === true" :href="getUrl"> <a v-if="options.addLink === true" :href="getUrl">
<span v-if="options.isHolder" class="fa-stack fa-holder" :title="$t('renderbox.holder')"> <span v-if="options.isHolder" class="fa-stack fa-holder" :title="$t('renderbox.holder')">
<i class="fa fa-circle fa-stack-1x text-success"></i> <i class="fa fa-circle fa-stack-1x text-success"></i>
@ -237,50 +244,50 @@ export default {
} }
}, },
computed: { computed: {
isMultiline: function() { isMultiline: function () {
if(this.options.isMultiline){ if (this.options.isMultiline) {
return this.options.isMultiline return this.options.isMultiline
} else { } else {
return false return false
} }
}, },
getGenderIcon: function() { getGenderIcon: function () {
return this.person.gender === 'woman' ? 'fa-venus' : this.person.gender === 'man' ? 'fa-mars' : this.person.gender === 'neuter' ? 'fa-neuter' : 'fa-genderless'; return this.person.gender === 'woman' ? 'fa-venus' : this.person.gender === 'man' ? 'fa-mars' : this.person.gender === 'neuter' ? 'fa-neuter' : 'fa-genderless';
}, },
getGenderTranslation: function() { getGenderTranslation: function () {
return this.person.gender === 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man'; return this.person.gender === 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man';
}, },
getGender() { getGender() {
return this.person.gender === 'woman' ? 'person.gender.woman' : this.person.gender === 'man' ? 'person.gender.man' : this.person.gender === 'neuter' ? 'person.gender.neuter' : 'person.gender.undefined'; return this.person.gender === 'woman' ? 'person.gender.woman' : this.person.gender === 'man' ? 'person.gender.man' : this.person.gender === 'neuter' ? 'person.gender.neuter' : 'person.gender.undefined';
}, },
birthdate: function(){ birthdate: function () {
if(this.person.birthdate !== null || this.person.birthdate === "undefined"){ if (this.person.birthdate !== null || this.person.birthdate === "undefined") {
return new Date(this.person.birthdate.datetime); return new Date(this.person.birthdate.datetime);
} else { } else {
return ""; return "";
} }
}, },
deathdate: function(){ deathdate: function () {
if(this.person.deathdate !== null || this.person.birthdate === "undefined"){ if (this.person.deathdate !== null || this.person.birthdate === "undefined") {
return new Date(this.person.deathdate.datetime); return new Date(this.person.deathdate.datetime);
} else { } else {
return ""; return "";
} }
}, },
altNameLabel: function() { altNameLabel: function () {
for(let i = 0; i < this.person.altNames.length; i++){ for (let i = 0; i < this.person.altNames.length; i++) {
return this.person.altNames[i].label return this.person.altNames[i].label
} }
}, },
altNameKey: function() { altNameKey: function () {
for(let i = 0; i < this.person.altNames.length; i++){ for (let i = 0; i < this.person.altNames.length; i++) {
return this.person.altNames[i].key return this.person.altNames[i].key
} }
}, },
getUrl: function() { getUrl: function () {
return `/fr/person/${this.person.id}/general`; return `/fr/person/${this.person.id}/general`;
}, },
getCurrentHouseholdUrl: function() { getCurrentHouseholdUrl: function () {
let returnPath = this.returnPath ? `?returnPath=${this.returnPath}` : ``; let returnPath = this.returnPath ? `?returnPath=${this.returnPath}` : ``;
return `/fr/person/household/${this.person.current_household_id}/summary${returnPath}` return `/fr/person/household/${this.person.current_household_id}/summary${returnPath}`
} }
@ -290,7 +297,7 @@ export default {
<style lang='scss'> <style lang='scss'>
.lastname:before{ .lastname:before {
content: " " content: " "
} }
@ -300,6 +307,7 @@ div.flex-table {
div.item-col:first-child { div.item-col:first-child {
width: 33%; width: 33%;
} }
div.item-col:last-child { div.item-col:last-child {
justify-content: flex-start; justify-content: flex-start;
@ -308,10 +316,16 @@ div.flex-table {
} }
} }
.age{ .age {
margin-left: 0.5em; margin-left: 0.5em;
&:before { content: '('; }
&:after { content: ')'; } &:before {
content: '(';
}
&:after {
content: ')';
}
} }
</style> </style>

23
src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="item-bloc col"> <div class="item-bloc col">
<section class="chill-entity entity-thirdparty"> <section class="chill-entity entity-thirdparty">
<div class="item-row entity-bloc"> <div class="item-row entity-bloc">
@ -59,7 +59,8 @@
<ul class="list-content fa-ul"> <ul class="list-content fa-ul">
<li v-if="thirdparty.address"> <li v-if="thirdparty.address">
<i class="fa fa-li fa-map-marker"></i> <i class="fa fa-li fa-map-marker"></i>
<address-render-box :address="thirdparty.address" :isMultiline="isMultiline"></address-render-box> <address-render-box :address="thirdparty.address"
:isMultiline="isMultiline"></address-render-box>
</li> </li>
<li v-if="thirdparty.telephone"> <li v-if="thirdparty.telephone">
<i class="fa fa-li fa-mobile"></i> <i class="fa fa-li fa-mobile"></i>
@ -90,11 +91,10 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<slot name="end-bloc"></slot>
</section> </section>
</div> </div>
</template> </template>
@ -119,12 +119,13 @@ export default {
fr: { fr: {
children: "Personnes de contact: ", children: "Personnes de contact: ",
child_of: "Contact de: ", child_of: "Contact de: ",
}} }
}
}, },
props: ['thirdparty', 'options'], props: ['thirdparty', 'options'],
computed: { computed: {
isMultiline: function() { isMultiline: function () {
if (this.options.isMultiline){ if (this.options.isMultiline) {
return this.options.isMultiline return this.options.isMultiline
} else { } else {
return false return false
@ -156,10 +157,11 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.name{ .name {
&:before{ &:before {
content: " " content: " "
} }
&.tparty-parent { &.tparty-parent {
font-weight: bold; font-weight: bold;
font-variant: all-small-caps; font-variant: all-small-caps;
@ -170,6 +172,7 @@ export default {
&::after { &::after {
content: " | "; content: " | ";
} }
&:last-child::after { &:last-child::after {
content: "" content: ""
} }