mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
Feature: [address reference] adapt vue app AccompanyingCourse to allow to open address details modal
This commit is contained in:
parent
adc80d5080
commit
204c28d373
GPG Key ID:
BDE2190974723FCB
@ -15,33 +15,36 @@
|
|||||||
:person="participation.person"
|
:person="participation.person"
|
||||||
:returnPath="getAccompanyingCourseReturnPath">
|
:returnPath="getAccompanyingCourseReturnPath">
|
||||||
|
|
||||||
<template v-slot:record-actions>
|
<template v-slot:end-bloc>
|
||||||
<ul class="record_actions">
|
<div class="item-row separator">
|
||||||
|
<ul class="record_actions">
|
||||||
<button-location
|
<button-location
|
||||||
v-if="hasCurrentHouseholdAddress"
|
v-if="hasCurrentHouseholdAddress"
|
||||||
v-bind:person="participation.person">
|
v-bind:person="participation.person">
|
||||||
</button-location>
|
</button-location>
|
||||||
<li v-if="participation.person.current_household_id">
|
<li v-if="participation.person.current_household_id">
|
||||||
<a class="btn btn-sm btn-chill-beige"
|
<a class="btn btn-sm btn-chill-beige"
|
||||||
:href="getCurrentHouseholdUrl"
|
:href="getCurrentHouseholdUrl"
|
||||||
:title="$t('persons_associated.show_household_number', { id: participation.person.current_household_id })">
|
:title="$t('persons_associated.show_household_number', { id: participation.person.current_household_id })">
|
||||||
<i class="fa fa-fw fa-home"></i>
|
<i class="fa fa-fw fa-home"></i>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li><on-the-fly :type="participation.person.type" :id="participation.person.id" action="show"></on-the-fly></li>
|
<li><on-the-fly :type="participation.person.type" :id="participation.person.id" action="show"></on-the-fly></li>
|
||||||
<li><on-the-fly :type="participation.person.type" :id="participation.person.id" action="edit" @saveFormOnTheFly="saveFormOnTheFly" ref="onTheFly"></on-the-fly></li>
|
<li><on-the-fly :type="participation.person.type" :id="participation.person.id" action="edit" @saveFormOnTheFly="saveFormOnTheFly" ref="onTheFly"></on-the-fly></li>
|
||||||
<li>
|
<li>
|
||||||
<button v-if="!participation.endDate"
|
<button v-if="!participation.endDate"
|
||||||
class="btn btn-sm btn-remove"
|
class="btn btn-sm btn-remove"
|
||||||
v-bind:title="$t('persons_associated.leave_course')"
|
v-bind:title="$t('persons_associated.leave_course')"
|
||||||
@click="modal.showModal = true">
|
@click="modal.showModal = true">
|
||||||
</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>
|
||||||
|
|||||||
@ -12,40 +12,42 @@
|
|||||||
hLevel : 3,
|
hLevel : 3,
|
||||||
isConfidential : true
|
isConfidential : true
|
||||||
}">
|
}">
|
||||||
<template v-slot:record-actions>
|
<template v-slot:end-bloc>
|
||||||
<ul class="record_actions">
|
<div class="item-row separator">
|
||||||
|
<ul class="record_actions">
|
||||||
<li>
|
<li>
|
||||||
<write-comment
|
<write-comment
|
||||||
:resource="resource"
|
:resource="resource"
|
||||||
@updateComment="updateComment"
|
@updateComment="updateComment"
|
||||||
></write-comment>
|
></write-comment>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<on-the-fly
|
<on-the-fly
|
||||||
:parent="parent"
|
:parent="parent"
|
||||||
:type="resource.resource.type"
|
:type="resource.resource.type"
|
||||||
:id="resource.resource.id"
|
:id="resource.resource.id"
|
||||||
action="show">
|
action="show">
|
||||||
</on-the-fly>
|
</on-the-fly>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<on-the-fly
|
<on-the-fly
|
||||||
:parent="parent"
|
:parent="parent"
|
||||||
:type="resource.resource.type"
|
:type="resource.resource.type"
|
||||||
:id="resource.resource.id"
|
:id="resource.resource.id"
|
||||||
action="edit"
|
action="edit"
|
||||||
@saveFormOnTheFly="saveFormOnTheFly"
|
@saveFormOnTheFly="saveFormOnTheFly"
|
||||||
ref="onTheFly">
|
ref="onTheFly">
|
||||||
</on-the-fly>
|
</on-the-fly>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<button
|
<button
|
||||||
class="btn btn-sm btn-remove"
|
class="btn btn-sm btn-remove"
|
||||||
:title="$t('action.remove')"
|
:title="$t('action.remove')"
|
||||||
@click.prevent="$emit('remove', resource)">
|
@click.prevent="$emit('remove', resource)">
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</person-render-box>
|
</person-render-box>
|
||||||
|
|
||||||
@ -59,40 +61,42 @@
|
|||||||
addInfo: false,
|
addInfo: false,
|
||||||
hLevel: 3
|
hLevel: 3
|
||||||
}">
|
}">
|
||||||
<template v-slot:record-actions>
|
<template v-slot:end-bloc>
|
||||||
<ul class="record_actions">
|
<div class="item-row separator">
|
||||||
|
<ul class="record_actions">
|
||||||
<li>
|
<li>
|
||||||
<write-comment
|
<write-comment
|
||||||
:resource="resource"
|
:resource="resource"
|
||||||
@updateComment="updateComment"
|
@updateComment="updateComment"
|
||||||
></write-comment>
|
></write-comment>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<on-the-fly
|
<on-the-fly
|
||||||
:parent="parent"
|
:parent="parent"
|
||||||
:type="resource.resource.type"
|
:type="resource.resource.type"
|
||||||
:id="resource.resource.id"
|
:id="resource.resource.id"
|
||||||
action="show">
|
action="show">
|
||||||
</on-the-fly>
|
</on-the-fly>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<on-the-fly
|
<on-the-fly
|
||||||
:parent="parent"
|
:parent="parent"
|
||||||
:type="resource.resource.type"
|
:type="resource.resource.type"
|
||||||
:id="resource.resource.id"
|
:id="resource.resource.id"
|
||||||
action="edit"
|
action="edit"
|
||||||
@saveFormOnTheFly="saveFormOnTheFly"
|
@saveFormOnTheFly="saveFormOnTheFly"
|
||||||
ref="onTheFly">
|
ref="onTheFly">
|
||||||
</on-the-fly>
|
</on-the-fly>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<button
|
<button
|
||||||
class="btn btn-sm btn-remove"
|
class="btn btn-sm btn-remove"
|
||||||
:title="$t('action.remove')"
|
:title="$t('action.remove')"
|
||||||
@click.prevent="$emit('remove', resource)">
|
@click.prevent="$emit('remove', resource)">
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</third-party-render-box>
|
</third-party-render-box>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -1,184 +1,191 @@
|
|||||||
<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">
|
||||||
|
|
||||||
<div class="item-col">
|
<div class="item-col">
|
||||||
<div class="entity-label">
|
<div class="entity-label">
|
||||||
|
|
||||||
<div :class="'denomination h' + options.hLevel">
|
<div :class="'denomination h' + options.hLevel">
|
||||||
|
|
||||||
<a v-if="options.addLink === true" :href="getUrl">
|
<a v-if="options.addLink === true" :href="getUrl">
|
||||||
<!-- use person-text here to avoid code duplication ? TODO -->
|
<!-- use person-text here to avoid code duplication ? TODO -->
|
||||||
<span class="firstname">{{ person.firstName }}</span>
|
<span class="firstname">{{ person.firstName }}</span>
|
||||||
<span class="lastname">{{ person.lastName }}</span>
|
<span class="lastname">{{ person.lastName }}</span>
|
||||||
<span v-if="person.suffixText" class="suffixtext"> {{ person.suffixText }}</span>
|
<span v-if="person.suffixText" class="suffixtext"> {{ person.suffixText }}</span>
|
||||||
<span v-if="person.altNames && options.addAltNames == true" class="altnames">
|
<span v-if="person.altNames && options.addAltNames == true" class="altnames">
|
||||||
<span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
|
<span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- use person-text here to avoid code duplication ? TODO -->
|
<!-- use person-text here to avoid code duplication ? TODO -->
|
||||||
<span class="firstname">{{ person.firstName }}</span>
|
<span class="firstname">{{ person.firstName }}</span>
|
||||||
<span class="lastname">{{ person.lastName }}</span>
|
<span class="lastname">{{ person.lastName }}</span>
|
||||||
<span v-if="person.suffixText" class="suffixtext"> {{ person.suffixText }}</span>
|
<span v-if="person.suffixText" class="suffixtext"> {{ person.suffixText }}</span>
|
||||||
<span v-if="person.deathdate" class="deathdate"> (‡)</span>
|
<span v-if="person.deathdate" class="deathdate"> (‡)</span>
|
||||||
<span v-if="person.altNames && options.addAltNames == true" class="altnames">
|
<span v-if="person.altNames && options.addAltNames == true" class="altnames">
|
||||||
<span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
|
<span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<span v-if="options.addId == true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span>
|
<span v-if="options.addId == true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span>
|
||||||
|
|
||||||
<badge-entity v-if="options.addEntity === true"
|
<badge-entity v-if="options.addEntity === true"
|
||||||
:entity="person"
|
:entity="person"
|
||||||
:options="{ displayLong: options.entityDisplayLong }">
|
:options="{ displayLong: options.entityDisplayLong }">
|
||||||
</badge-entity>
|
</badge-entity>
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p v-if="options.addInfo === true" class="moreinfo">
|
|
||||||
<i :class="'fa fa-fw ' + getGenderIcon" :title="$t(getGender)"></i>
|
|
||||||
|
|
||||||
<time v-if="person.birthdate && !person.deathdate" :datetime="person.birthdate" :title="birthdate">
|
|
||||||
{{ $t(getGenderTranslation) + ' ' + $d(birthdate, 'text') }}
|
|
||||||
</time>
|
|
||||||
|
|
||||||
<time v-else-if="person.birthdate && person.deathdate" :datetime="person.deathdate" :title="person.deathdate">
|
|
||||||
{{ $d(birthdate) }} - {{ $d(deathdate) }}
|
|
||||||
</time>
|
|
||||||
|
|
||||||
<time v-else-if="person.deathdate" :datetime="person.deathdate" :title="person.deathdate">
|
|
||||||
{{ $t('renderbox.deathdate') + ' ' + deathdate }}
|
|
||||||
</time>
|
|
||||||
|
|
||||||
<span v-if="options.addAge && person.birthdate" class="age">{{ $tc('renderbox.years_old', person.age) }}</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<p v-if="options.addInfo === true" class="moreinfo">
|
||||||
|
<i :class="'fa fa-fw ' + getGenderIcon" :title="$t(getGender)"></i>
|
||||||
|
|
||||||
|
<time v-if="person.birthdate && !person.deathdate" :datetime="person.birthdate" :title="birthdate">
|
||||||
|
{{ $t(getGenderTranslation) + ' ' + $d(birthdate, 'text') }}
|
||||||
|
</time>
|
||||||
|
|
||||||
|
<time v-else-if="person.birthdate && person.deathdate" :datetime="person.deathdate"
|
||||||
|
:title="person.deathdate">
|
||||||
|
{{ $d(birthdate) }} - {{ $d(deathdate) }}
|
||||||
|
</time>
|
||||||
|
|
||||||
|
<time v-else-if="person.deathdate" :datetime="person.deathdate" :title="person.deathdate">
|
||||||
|
{{ $t('renderbox.deathdate') + ' ' + deathdate }}
|
||||||
|
</time>
|
||||||
|
|
||||||
|
<span v-if="options.addAge && person.birthdate" class="age">{{
|
||||||
|
$tc('renderbox.years_old', person.age)
|
||||||
|
}}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="item-col">
|
<div class="item-col">
|
||||||
<div class="float-button bottom">
|
<div class="float-button bottom">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="action">
|
<div class="action">
|
||||||
<slot name="record-actions"></slot>
|
<slot name="record-actions"></slot>
|
||||||
</div>
|
</div>
|
||||||
<ul class="list-content fa-ul">
|
<ul class="list-content fa-ul">
|
||||||
<li v-if="person.current_household_id">
|
<li v-if="person.current_household_id">
|
||||||
<i class="fa fa-li fa-map-marker"></i>
|
<i class="fa fa-li fa-map-marker"></i>
|
||||||
<address-render-box v-if="person.current_household_address"
|
<address-render-box v-if="person.current_household_address"
|
||||||
:address="person.current_household_address"
|
:address="person.current_household_address"
|
||||||
:isMultiline="isMultiline">
|
:isMultiline="isMultiline">
|
||||||
</address-render-box>
|
</address-render-box>
|
||||||
<p v-else class="chill-no-data-statement">
|
<p v-else class="chill-no-data-statement">
|
||||||
{{ $t('renderbox.household_without_address') }}
|
{{ $t('renderbox.household_without_address') }}
|
||||||
</p>
|
</p>
|
||||||
<a v-if="options.addHouseholdLink === true"
|
<a v-if="options.addHouseholdLink === true"
|
||||||
:href="getCurrentHouseholdUrl"
|
:href="getCurrentHouseholdUrl"
|
||||||
:title="$t('persons_associated.show_household_number', {id: person.current_household_id})">
|
:title="$t('persons_associated.show_household_number', {id: person.current_household_id})">
|
||||||
<span class="badge rounded-pill bg-chill-beige">
|
<span class="badge rounded-pill bg-chill-beige">
|
||||||
<i class="fa fa-fw fa-home"></i><!--{{ $t('persons_associated.show_household') }}-->
|
<i class="fa fa-fw fa-home"></i><!--{{ $t('persons_associated.show_household') }}-->
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li v-else-if="options.addNoData">
|
<li v-else-if="options.addNoData">
|
||||||
<i class="fa fa-li fa-map-marker"></i>
|
<i class="fa fa-li fa-map-marker"></i>
|
||||||
<p class="chill-no-data-statement">
|
<p class="chill-no-data-statement">
|
||||||
{{ $t('renderbox.no_data') }}
|
{{ $t('renderbox.no_data') }}
|
||||||
</p>
|
</p>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li v-if="person.email">
|
<li v-if="person.email">
|
||||||
<i class="fa fa-li fa-envelope-o"></i>
|
<i class="fa fa-li fa-envelope-o"></i>
|
||||||
<a :href="'mailto: ' + person.email">{{ person.email }}</a>
|
<a :href="'mailto: ' + person.email">{{ person.email }}</a>
|
||||||
</li>
|
</li>
|
||||||
<li v-else-if="options.addNoData">
|
<li v-else-if="options.addNoData">
|
||||||
<i class="fa fa-li fa-envelope-o"></i>
|
<i class="fa fa-li fa-envelope-o"></i>
|
||||||
<p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
|
<p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li v-if="person.mobilenumber">
|
<li v-if="person.mobilenumber">
|
||||||
<i class="fa fa-li fa-mobile"></i>
|
<i class="fa fa-li fa-mobile"></i>
|
||||||
<a :href="'tel: ' + person.mobilenumber">{{ person.mobilenumber }}</a>
|
<a :href="'tel: ' + person.mobilenumber">{{ person.mobilenumber }}</a>
|
||||||
</li>
|
</li>
|
||||||
<li v-else-if="options.addNoData">
|
<li v-else-if="options.addNoData">
|
||||||
<i class="fa fa-li fa-mobile"></i>
|
<i class="fa fa-li fa-mobile"></i>
|
||||||
<p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
|
<p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
|
||||||
</li>
|
</li>
|
||||||
<li v-if="person.phonenumber">
|
<li v-if="person.phonenumber">
|
||||||
<i class="fa fa-li fa-phone"></i>
|
<i class="fa fa-li fa-phone"></i>
|
||||||
<a :href="'tel: ' + person.phonenumber">{{ person.phonenumber }}</a>
|
<a :href="'tel: ' + person.phonenumber">{{ person.phonenumber }}</a>
|
||||||
</li>
|
</li>
|
||||||
<li v-else-if="options.addNoData">
|
<li v-else-if="options.addNoData">
|
||||||
<i class="fa fa-li fa-phone"></i>
|
<i class="fa fa-li fa-phone"></i>
|
||||||
<p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
|
<p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li v-if="person.centers !== undefined && person.centers.length > 0 && options.addCenter">
|
<li v-if="person.centers !== undefined && person.centers.length > 0 && options.addCenter">
|
||||||
<i class="fa fa-li fa-long-arrow-right"></i>
|
<i class="fa fa-li fa-long-arrow-right"></i>
|
||||||
<template v-for="c in person.centers">{{ c.name }}</template>
|
<template v-for="c in person.centers">{{ c.name }}</template>
|
||||||
</li>
|
</li>
|
||||||
<li v-else-if="options.addNoData">
|
<li v-else-if="options.addNoData">
|
||||||
<i class="fa fa-li fa-long-arrow-right"></i>
|
<i class="fa fa-li fa-long-arrow-right"></i>
|
||||||
<p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
|
<p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
|
||||||
</li>
|
</li>
|
||||||
<slot name="custom-zone"></slot>
|
<slot name="custom-zone"></slot>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
|
||||||
</div>
|
</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"
|
||||||
<div class="float-button bottom">
|
v-if="this.showResidentialAddresses && (person.current_residential_addresses || []).length > 0">
|
||||||
<div class="box" >
|
<div class="float-button bottom">
|
||||||
<ul class="list-content fa-ul">
|
<div class="box">
|
||||||
<li v-for="(addr, i) in person.current_residential_addresses" :key="i">
|
<ul class="list-content fa-ul">
|
||||||
<i class="fa fa-li fa-map-marker"></i>
|
<li v-for="(addr, i) in person.current_residential_addresses" :key="i">
|
||||||
<div v-if="addr.address">
|
<i class="fa fa-li fa-map-marker"></i>
|
||||||
<address-render-box
|
<div v-if="addr.address">
|
||||||
:address="addr.address"
|
<address-render-box
|
||||||
:isMultiline="isMultiline">
|
:address="addr.address"
|
||||||
</address-render-box>
|
:isMultiline="isMultiline">
|
||||||
<p>({{ $t('renderbox.residential_address') }})</p>
|
</address-render-box>
|
||||||
</div>
|
<p>({{ $t('renderbox.residential_address') }})</p>
|
||||||
<div v-else-if="addr.hostPerson" class="mt-3">
|
</div>
|
||||||
<p>{{ $t('renderbox.located_at') }}:</p>
|
<div v-else-if="addr.hostPerson" class="mt-3">
|
||||||
<span class="chill-entity entity-person badge-person">
|
<p>{{ $t('renderbox.located_at') }}:</p>
|
||||||
|
<span class="chill-entity entity-person badge-person">
|
||||||
<person-text
|
<person-text
|
||||||
v-if="addr.hostPerson"
|
v-if="addr.hostPerson"
|
||||||
:person="addr.hostPerson"
|
:person="addr.hostPerson"
|
||||||
></person-text>
|
></person-text>
|
||||||
</span>
|
</span>
|
||||||
<address-render-box v-if="addr.hostPerson.address"
|
<address-render-box v-if="addr.hostPerson.address"
|
||||||
:address="addr.hostPerson.address"
|
:address="addr.hostPerson.address"
|
||||||
:isMultiline="isMultiline">
|
:isMultiline="isMultiline">
|
||||||
</address-render-box>
|
</address-render-box>
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="addr.hostThirdParty" class="mt-3">
|
<div v-else-if="addr.hostThirdParty" class="mt-3">
|
||||||
<p>{{ $t('renderbox.located_at') }}:</p>
|
<p>{{ $t('renderbox.located_at') }}:</p>
|
||||||
<span class="chill-entity entity-person badge-thirdparty">
|
<span class="chill-entity entity-person badge-thirdparty">
|
||||||
<third-party-text
|
<third-party-text
|
||||||
v-if="addr.hostThirdParty"
|
v-if="addr.hostThirdParty"
|
||||||
:thirdparty="addr.hostThirdParty"
|
:thirdparty="addr.hostThirdParty"
|
||||||
></third-party-text>
|
></third-party-text>
|
||||||
</span>
|
</span>
|
||||||
<address-render-box v-if="addr.hostThirdParty.address"
|
<address-render-box v-if="addr.hostThirdParty.address"
|
||||||
:address="addr.hostThirdParty.address"
|
:address="addr.hostThirdParty.address"
|
||||||
:isMultiline="isMultiline">
|
:isMultiline="isMultiline">
|
||||||
</address-render-box>
|
</address-render-box>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<slot name="end-bloc"></slot>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<span v-if="render === 'badge'" class="chill-entity entity-person badge-person">
|
<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>
|
||||||
@ -209,109 +216,116 @@ import ThirdPartyText from 'ChillThirdPartyAssets/vuejs/_components/Entity/Third
|
|||||||
import AddressDetailsButton from "ChillMainAssets/vuejs/_components/AddressDetails/AddressDetailsButton.vue";
|
import AddressDetailsButton from "ChillMainAssets/vuejs/_components/AddressDetails/AddressDetailsButton.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "PersonRenderBox",
|
name: "PersonRenderBox",
|
||||||
components: {
|
components: {
|
||||||
AddressRenderBox,
|
AddressRenderBox,
|
||||||
Confidential,
|
Confidential,
|
||||||
BadgeEntity,
|
BadgeEntity,
|
||||||
PersonText,
|
PersonText,
|
||||||
ThirdPartyText
|
ThirdPartyText
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
person: {
|
||||||
|
required: true,
|
||||||
},
|
},
|
||||||
props: {
|
options: {
|
||||||
person: {
|
type: Object,
|
||||||
required: true,
|
required: false,
|
||||||
},
|
},
|
||||||
options: {
|
render: {
|
||||||
type: Object,
|
type: String,
|
||||||
required: false,
|
},
|
||||||
},
|
returnPath: {
|
||||||
render: {
|
type: String,
|
||||||
type: String,
|
},
|
||||||
},
|
showResidentialAddresses: {
|
||||||
returnPath: {
|
type: Boolean,
|
||||||
type: String,
|
default: false,
|
||||||
},
|
}
|
||||||
showResidentialAddresses: {
|
},
|
||||||
type: Boolean,
|
computed: {
|
||||||
default: false,
|
isMultiline: function () {
|
||||||
|
if (this.options.isMultiline) {
|
||||||
|
return this.options.isMultiline
|
||||||
|
} else {
|
||||||
|
return false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
getGenderIcon: function () {
|
||||||
isMultiline: function() {
|
return this.person.gender === 'woman' ? 'fa-venus' : this.person.gender === 'man' ? 'fa-mars' : this.person.gender === 'neuter' ? 'fa-neuter' : 'fa-genderless';
|
||||||
if(this.options.isMultiline){
|
},
|
||||||
return this.options.isMultiline
|
getGenderTranslation: function () {
|
||||||
} else {
|
return this.person.gender === 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man';
|
||||||
return false
|
},
|
||||||
}
|
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';
|
||||||
getGenderIcon: function() {
|
},
|
||||||
return this.person.gender === 'woman' ? 'fa-venus' : this.person.gender === 'man' ? 'fa-mars' : this.person.gender === 'neuter' ? 'fa-neuter' : 'fa-genderless';
|
birthdate: function () {
|
||||||
},
|
if (this.person.birthdate !== null || this.person.birthdate === "undefined") {
|
||||||
getGenderTranslation: function() {
|
return new Date(this.person.birthdate.datetime);
|
||||||
return this.person.gender === 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man';
|
} else {
|
||||||
},
|
return "";
|
||||||
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';
|
},
|
||||||
},
|
deathdate: function () {
|
||||||
birthdate: function(){
|
if (this.person.deathdate !== null || this.person.birthdate === "undefined") {
|
||||||
if(this.person.birthdate !== null || this.person.birthdate === "undefined"){
|
return new Date(this.person.deathdate.datetime);
|
||||||
return new Date(this.person.birthdate.datetime);
|
} else {
|
||||||
} else {
|
return "";
|
||||||
return "";
|
}
|
||||||
}
|
},
|
||||||
},
|
altNameLabel: function () {
|
||||||
deathdate: function(){
|
for (let i = 0; i < this.person.altNames.length; i++) {
|
||||||
if(this.person.deathdate !== null || this.person.birthdate === "undefined"){
|
return this.person.altNames[i].label
|
||||||
return new Date(this.person.deathdate.datetime);
|
}
|
||||||
} else {
|
},
|
||||||
return "";
|
altNameKey: function () {
|
||||||
}
|
for (let i = 0; i < this.person.altNames.length; i++) {
|
||||||
},
|
return this.person.altNames[i].key
|
||||||
altNameLabel: function() {
|
}
|
||||||
for(let i = 0; i < this.person.altNames.length; i++){
|
},
|
||||||
return this.person.altNames[i].label
|
getUrl: function () {
|
||||||
}
|
return `/fr/person/${this.person.id}/general`;
|
||||||
},
|
},
|
||||||
altNameKey: function() {
|
getCurrentHouseholdUrl: function () {
|
||||||
for(let i = 0; i < this.person.altNames.length; i++){
|
let returnPath = this.returnPath ? `?returnPath=${this.returnPath}` : ``;
|
||||||
return this.person.altNames[i].key
|
return `/fr/person/household/${this.person.current_household_id}/summary${returnPath}`
|
||||||
}
|
|
||||||
},
|
|
||||||
getUrl: function() {
|
|
||||||
return `/fr/person/${this.person.id}/general`;
|
|
||||||
},
|
|
||||||
getCurrentHouseholdUrl: function() {
|
|
||||||
let returnPath = this.returnPath ? `?returnPath=${this.returnPath}` : ``;
|
|
||||||
return `/fr/person/household/${this.person.current_household_id}/summary${returnPath}`
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang='scss'>
|
<style lang='scss'>
|
||||||
|
|
||||||
.lastname:before{
|
.lastname:before {
|
||||||
content: " "
|
content: " "
|
||||||
}
|
}
|
||||||
|
|
||||||
div.flex-table {
|
div.flex-table {
|
||||||
div.item-bloc {
|
div.item-bloc {
|
||||||
div.item-row {
|
div.item-row {
|
||||||
div.item-col:first-child {
|
div.item-col:first-child {
|
||||||
width: 33%;
|
width: 33%;
|
||||||
}
|
|
||||||
div.item-col:last-child {
|
|
||||||
justify-content: flex-start;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
div.item-col:last-child {
|
||||||
|
justify-content: flex-start;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.age{
|
.age {
|
||||||
margin-left: 0.5em;
|
margin-left: 0.5em;
|
||||||
&:before { content: '('; }
|
|
||||||
&:after { content: ')'; }
|
&:before {
|
||||||
|
content: '(';
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: ')';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@ -1,100 +1,100 @@
|
|||||||
<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">
|
||||||
|
|
||||||
<div class="item-col">
|
<div class="item-col">
|
||||||
<div class="entity-label">
|
<div class="entity-label">
|
||||||
<div :class="'denomination h' + options.hLevel">
|
<div :class="'denomination h' + options.hLevel">
|
||||||
|
|
||||||
<a v-if="this.options.addLink === true" href="#">
|
<a v-if="this.options.addLink === true" href="#">
|
||||||
<span class="name">{{ thirdparty.text }}</span>
|
<span class="name">{{ thirdparty.text }}</span>
|
||||||
</a>
|
</a>
|
||||||
<span class="name" v-else>{{ thirdparty.text }}</span>
|
<span class="name" v-else>{{ thirdparty.text }}</span>
|
||||||
|
|
||||||
<span v-if="options.addId === true" class="id-number" :title="'n° ' + thirdparty.id">
|
<span v-if="options.addId === true" class="id-number" :title="'n° ' + thirdparty.id">
|
||||||
{{ thirdparty.id }}
|
{{ thirdparty.id }}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<badge-entity v-if="options.addEntity === true"
|
<badge-entity v-if="options.addEntity === true"
|
||||||
:entity="thirdparty"
|
:entity="thirdparty"
|
||||||
:options="{ displayLong: options.entityDisplayLong }">
|
:options="{ displayLong: options.entityDisplayLong }">
|
||||||
</badge-entity>
|
</badge-entity>
|
||||||
</div>
|
|
||||||
|
|
||||||
<p v-if="this.options.addInfo === true" class="moreinfo">
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<p v-if="this.options.addInfo === true" class="moreinfo">
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="item-col">
|
<div class="item-col">
|
||||||
<div class="float-button bottom">
|
<div class="float-button bottom">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="action">
|
<div class="action">
|
||||||
<slot name="record-actions"></slot>
|
<slot name="record-actions"></slot>
|
||||||
</div>
|
</div>
|
||||||
<ul class="list-content fa-ul">
|
<ul class="list-content fa-ul">
|
||||||
<li v-if="getProfession.length > 0">
|
<li v-if="getProfession.length > 0">
|
||||||
<i class="fa fa-li fa-id-card"></i>
|
<i class="fa fa-li fa-id-card"></i>
|
||||||
<p><span>{{ getProfession[0] }}</span></p>
|
<p><span>{{ getProfession[0] }}</span></p>
|
||||||
</li>
|
</li>
|
||||||
<li v-if="hasParent">
|
<li v-if="hasParent">
|
||||||
<i class="fa fa-li fa-hand-o-right"></i>
|
<i class="fa fa-li fa-hand-o-right"></i>
|
||||||
<b class="me-2">{{ $t('child_of') }}</b>
|
<b class="me-2">{{ $t('child_of') }}</b>
|
||||||
<on-the-fly
|
<on-the-fly
|
||||||
:type="thirdparty.parent.type"
|
:type="thirdparty.parent.type"
|
||||||
:id="thirdparty.parent.id"
|
:id="thirdparty.parent.id"
|
||||||
:buttonText="thirdparty.parent.text"
|
:buttonText="thirdparty.parent.text"
|
||||||
:displayBadge="'true' === 'true'"
|
:displayBadge="'true' === 'true'"
|
||||||
action="show">
|
action="show">
|
||||||
</on-the-fly>
|
</on-the-fly>
|
||||||
</li>
|
</li>
|
||||||
<!-- TODO hasChildren
|
<!-- TODO hasChildren
|
||||||
NB: we cannot call on-the-fly from RenderBox. See error message in previous version of this file.
|
NB: we cannot call on-the-fly from RenderBox. See error message in previous version of this file.
|
||||||
-->
|
-->
|
||||||
</ul>
|
</ul>
|
||||||
<div v-if="thirdparty.contactDataAnonymous">
|
<div v-if="thirdparty.contactDataAnonymous">
|
||||||
<confidential :positionBtnFar="false">
|
<confidential :positionBtnFar="false">
|
||||||
<template v-slot:confidential-content>
|
<template v-slot:confidential-content>
|
||||||
<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>
|
|
||||||
<address-render-box :address="thirdparty.address" :isMultiline="isMultiline"></address-render-box>
|
|
||||||
</li>
|
|
||||||
<li v-if="thirdparty.telephone">
|
|
||||||
<i class="fa fa-li fa-mobile"></i>
|
|
||||||
<a :href="'tel: ' + thirdparty.telephone">{{ thirdparty.telephone }}</a>
|
|
||||||
</li>
|
|
||||||
<li v-if="thirdparty.email">
|
|
||||||
<i class="fa fa-li fa-envelope-o"></i>
|
|
||||||
<a :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</template>
|
|
||||||
</confidential>
|
|
||||||
</div>
|
|
||||||
<ul v-else class="list-content fa-ul">
|
|
||||||
<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"
|
||||||
</li>
|
:isMultiline="isMultiline"></address-render-box>
|
||||||
<li v-if="thirdparty.telephone">
|
</li>
|
||||||
|
<li v-if="thirdparty.telephone">
|
||||||
<i class="fa fa-li fa-mobile"></i>
|
<i class="fa fa-li fa-mobile"></i>
|
||||||
<a :href="'tel: ' + thirdparty.telephone">{{ thirdparty.telephone }}</a>
|
<a :href="'tel: ' + thirdparty.telephone">{{ thirdparty.telephone }}</a>
|
||||||
</li>
|
</li>
|
||||||
<li v-if="thirdparty.email">
|
<li v-if="thirdparty.email">
|
||||||
<i class="fa fa-li fa-envelope-o"></i>
|
<i class="fa fa-li fa-envelope-o"></i>
|
||||||
<a :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
|
<a :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</template>
|
||||||
|
</confidential>
|
||||||
|
</div>
|
||||||
|
<ul v-else class="list-content fa-ul">
|
||||||
|
<li v-if="thirdparty.address">
|
||||||
|
<i class="fa fa-li fa-map-marker"></i>
|
||||||
|
<address-render-box :address="thirdparty.address" :isMultiline="isMultiline"></address-render-box>
|
||||||
|
</li>
|
||||||
|
<li v-if="thirdparty.telephone">
|
||||||
|
<i class="fa fa-li fa-mobile"></i>
|
||||||
|
<a :href="'tel: ' + thirdparty.telephone">{{ thirdparty.telephone }}</a>
|
||||||
|
</li>
|
||||||
|
<li v-if="thirdparty.email">
|
||||||
|
<i class="fa fa-li fa-envelope-o"></i>
|
||||||
|
<a :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<slot name="end-bloc"></slot>
|
||||||
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -104,75 +104,78 @@ import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';
|
|||||||
import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
|
import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "ThirdPartyRenderBox",
|
name: "ThirdPartyRenderBox",
|
||||||
components: {
|
components: {
|
||||||
AddressRenderBox,
|
AddressRenderBox,
|
||||||
Confidential,
|
Confidential,
|
||||||
BadgeEntity,
|
BadgeEntity,
|
||||||
},
|
},
|
||||||
// To avoid components recursively invoking eachother resolve OnTheFly component here
|
// To avoid components recursively invoking eachother resolve OnTheFly component here
|
||||||
beforeCreate() {
|
beforeCreate() {
|
||||||
this.$options.components.OnTheFly = require('ChillMainAssets/vuejs/OnTheFly/components/OnTheFly').default;
|
this.$options.components.OnTheFly = require('ChillMainAssets/vuejs/OnTheFly/components/OnTheFly').default;
|
||||||
},
|
},
|
||||||
i18n: {
|
i18n: {
|
||||||
messages: {
|
messages: {
|
||||||
fr: {
|
fr: {
|
||||||
children: "Personnes de contact: ",
|
children: "Personnes de contact: ",
|
||||||
child_of: "Contact de: ",
|
child_of: "Contact de: ",
|
||||||
}}
|
}
|
||||||
},
|
|
||||||
props: ['thirdparty', 'options'],
|
|
||||||
computed: {
|
|
||||||
isMultiline: function() {
|
|
||||||
if (this.options.isMultiline){
|
|
||||||
return this.options.isMultiline
|
|
||||||
} else {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
hasParent() {
|
|
||||||
return !(this.thirdparty.parent === null || this.thirdparty.parent === undefined);
|
|
||||||
},
|
|
||||||
getProfession() {
|
|
||||||
let profession = []
|
|
||||||
if (this.hasParent && this.thirdparty.profession) {
|
|
||||||
profession.push(this.thirdparty.profession)
|
|
||||||
return profession;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!this.hasParent && this.thirdparty.category) {
|
|
||||||
profession = this.thirdparty.category.map((category) => category.text);
|
|
||||||
}
|
|
||||||
|
|
||||||
return profession;
|
|
||||||
}
|
|
||||||
/* TODO need backend normalizer to serve children without circular reference
|
|
||||||
hasChildren() {
|
|
||||||
//console.log(this.thirdparty.activeChildren.length > 0)
|
|
||||||
return false
|
|
||||||
} */
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
props: ['thirdparty', 'options'],
|
||||||
|
computed: {
|
||||||
|
isMultiline: function () {
|
||||||
|
if (this.options.isMultiline) {
|
||||||
|
return this.options.isMultiline
|
||||||
|
} else {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
hasParent() {
|
||||||
|
return !(this.thirdparty.parent === null || this.thirdparty.parent === undefined);
|
||||||
|
},
|
||||||
|
getProfession() {
|
||||||
|
let profession = []
|
||||||
|
if (this.hasParent && this.thirdparty.profession) {
|
||||||
|
profession.push(this.thirdparty.profession)
|
||||||
|
return profession;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.hasParent && this.thirdparty.category) {
|
||||||
|
profession = this.thirdparty.category.map((category) => category.text);
|
||||||
|
}
|
||||||
|
|
||||||
|
return profession;
|
||||||
|
}
|
||||||
|
/* TODO need backend normalizer to serve children without circular reference
|
||||||
|
hasChildren() {
|
||||||
|
//console.log(this.thirdparty.activeChildren.length > 0)
|
||||||
|
return false
|
||||||
|
} */
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.name{
|
.name {
|
||||||
&:before{
|
&:before {
|
||||||
content: " "
|
content: " "
|
||||||
}
|
}
|
||||||
&.tparty-parent {
|
|
||||||
font-weight: bold;
|
&.tparty-parent {
|
||||||
font-variant: all-small-caps;
|
font-weight: bold;
|
||||||
}
|
font-variant: all-small-caps;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-professions {
|
.list-professions {
|
||||||
&::after {
|
&::after {
|
||||||
content: " | ";
|
content: " | ";
|
||||||
}
|
}
|
||||||
&:last-child::after {
|
|
||||||
content: ""
|
&:last-child::after {
|
||||||
}
|
content: ""
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user