mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
Merge branch 'ameliorations_composants_vue' of gitlab.com:Chill-Projet/chill-bundles into ameliorations_composants_vue
This commit is contained in:
commit
2394895ccb
@ -1,18 +1,39 @@
|
||||
<template>
|
||||
<div class="chill-entity entity-address my-3">
|
||||
<div class="address multiline">
|
||||
<p v-if="address.text"
|
||||
class="street">
|
||||
{{ address.text }}
|
||||
</p>
|
||||
<p v-if="address.postcode"
|
||||
class="postcode">
|
||||
{{ address.postcode.code }} {{ address.postcode.name }}
|
||||
</p>
|
||||
<p v-if="address.country"
|
||||
class="country">
|
||||
{{ address.country.name.fr }}
|
||||
</p>
|
||||
<div class="chill-entity entity-address my-3"></div>
|
||||
|
||||
<component :is="component" :class="'address'+ isMultiline">
|
||||
<p v-if="address.text"
|
||||
class="street">
|
||||
{{ address.text }},
|
||||
</p>
|
||||
<p v-if="address.postcode"
|
||||
class="postcode">
|
||||
{{ address.postcode.code }} {{ address.postcode.name }}
|
||||
</p>
|
||||
<p v-if="address.country"
|
||||
class="country">
|
||||
{{ address.country.name.fr }}
|
||||
</p>
|
||||
|
||||
<div v-if="address.floor">
|
||||
<span class="floor">
|
||||
<b>{{ $t('floor') }}</b>: {{ address.floor }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="address.corridor">
|
||||
<span class="corridor">
|
||||
<b>{{ $t('corridor') }}</b>: {{ address.corridor }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="address.steps">
|
||||
<span class="steps">
|
||||
<b>{{ $t('steps') }}</b>: {{ address.steps }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="address.flat">
|
||||
<span class="flat">
|
||||
<b>{{ $t('flat') }}</b>: {{ address.flat }}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div v-if="address.floor">
|
||||
@ -51,12 +72,38 @@
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</component>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ShowAddress",
|
||||
props: ['address']
|
||||
}
|
||||
name: 'ShowAddress',
|
||||
props: {
|
||||
address: {
|
||||
type: Object
|
||||
},
|
||||
multiline: {
|
||||
default: true,
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
component(){
|
||||
return this.multiline == true ? "div" : "span";
|
||||
},
|
||||
isMultiline(){
|
||||
return this.multiline == true ? " multiline" : "";
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
p{
|
||||
&:after{
|
||||
content: " ";
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -65,6 +65,18 @@ const messages = {
|
||||
thirdparty: "un nouveau tiers professionnel"
|
||||
},
|
||||
},
|
||||
renderbox: {
|
||||
person: "Person",
|
||||
birthday: {
|
||||
man: "Né le",
|
||||
woman: "Née le"
|
||||
} ,
|
||||
no_information: "Pas d'information",
|
||||
type: {
|
||||
thirdparty: "Tiers",
|
||||
person: "Usager"
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -93,8 +93,9 @@ export default {
|
||||
}
|
||||
& > div {
|
||||
margin: 1em 3em 0;
|
||||
}
|
||||
table {
|
||||
&.flex-table {
|
||||
margin: 1em 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.errors {
|
||||
|
||||
@ -9,33 +9,15 @@
|
||||
<label class="chill-no-data-statement">{{ $tc('persons_associated.counter', counter) }}</label>
|
||||
</div>
|
||||
|
||||
<participation-item
|
||||
v-for="participation in participations"
|
||||
v-bind:participation="participation"
|
||||
v-bind:key="participation.id"
|
||||
@remove="removeParticipation"
|
||||
@close="closeParticipation">
|
||||
</participation-item>
|
||||
|
||||
<!-- <table class="table table-bordered table-striped border-dark align-middle" v-if="participations.length > 0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="chill-orange">{{ $t('persons_associated.name') }}</th>
|
||||
<th class="chill-orange">{{ $t('persons_associated.startdate') }}</th>
|
||||
<th class="chill-orange">{{ $t('persons_associated.enddate') }}</th>
|
||||
<th class="chill-orange">{{ $t('action.actions') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<participation-item
|
||||
v-for="participation in participations"
|
||||
v-bind:participation="participation"
|
||||
v-bind:key="participation.id"
|
||||
@remove="removeParticipation"
|
||||
@close="closeParticipation">
|
||||
</participation-item>
|
||||
</tbody>
|
||||
</table> -->
|
||||
<div class="flex-table mb-3">
|
||||
<participation-item
|
||||
v-for="participation in participations"
|
||||
v-bind:participation="participation"
|
||||
v-bind:key="participation.id"
|
||||
@remove="removeParticipation"
|
||||
@close="closeParticipation">
|
||||
</participation-item>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<add-persons
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
|
||||
<person-render-box
|
||||
:options="{
|
||||
addInfo : true,
|
||||
@ -10,61 +9,53 @@
|
||||
addAge : false,
|
||||
hLevel : 1
|
||||
}"
|
||||
:participation="participation">
|
||||
:person="participation.person">
|
||||
|
||||
<template v-slot:record-actions>
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<on-the-fly
|
||||
v-bind:type="participation.person.type"
|
||||
v-bind:id="participation.person.id"
|
||||
action="show">
|
||||
</on-the-fly>
|
||||
</li>
|
||||
<li>
|
||||
<on-the-fly
|
||||
v-bind:type="participation.person.type"
|
||||
v-bind:id="participation.person.id"
|
||||
action="edit">
|
||||
</on-the-fly>
|
||||
</li>
|
||||
<!-- <li>
|
||||
<button class="btn btn-delete"
|
||||
:title="$t('action.delete')"
|
||||
@click.prevent="$emit('remove', participation)">
|
||||
</button>
|
||||
</li> -->
|
||||
<li>
|
||||
<button v-if="!participation.endDate"
|
||||
class="btn btn-sm btn-remove"
|
||||
v-bind:title="$t('action.remove')"
|
||||
@click.prevent="$emit('close', participation)">
|
||||
</button>
|
||||
<button v-else class="btn btn-sm btn-remove disabled"></button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</template>
|
||||
</person-render-box>
|
||||
|
||||
<!-- <tr>
|
||||
<td>
|
||||
{{ participation.person.firstName }}
|
||||
{{ participation.person.lastName }}
|
||||
<person-render-box
|
||||
v-bind:options="options"
|
||||
v-bind:participation="participation"
|
||||
></person-render-box>
|
||||
</td>
|
||||
<td><span v-if="participation.startDate">
|
||||
{{ $d(participation.startDate.datetime, 'short') }}</span>
|
||||
</td>
|
||||
<td><span v-if="participation.endDate">
|
||||
{{ $d(participation.endDate.datetime, 'short') }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<ul class="record_actions">
|
||||
<button-location
|
||||
v-if="hasCurrentHouseholdAddress"
|
||||
v-bind:person="participation.person">
|
||||
</button-location>
|
||||
<li>
|
||||
<on-the-fly
|
||||
v-bind:type="participation.person.type"
|
||||
v-bind:id="participation.person.id"
|
||||
action="show">
|
||||
</on-the-fly>
|
||||
</li>
|
||||
<li>
|
||||
<on-the-fly
|
||||
v-bind:type="participation.person.type"
|
||||
v-bind:id="participation.person.id"
|
||||
action="edit">
|
||||
</on-the-fly>
|
||||
</li>
|
||||
li>
|
||||
<button class="btn btn-delete"
|
||||
:title="$t('action.delete')"
|
||||
@click.prevent="$emit('remove', participation)">
|
||||
</button>
|
||||
</li
|
||||
<li>
|
||||
<button v-if="!participation.endDate"
|
||||
class="btn btn-sm btn-remove"
|
||||
v-bind:title="$t('action.remove')"
|
||||
@click.prevent="$emit('close', participation)">
|
||||
</button>
|
||||
<button v-else class="btn btn-sm btn-remove" disabled></button>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr> -->
|
||||
<!-- dates of participation
|
||||
<tr>
|
||||
<td><span v-if="participation.startDate">
|
||||
{{ $d(participation.startDate.datetime, 'short') }}</span>
|
||||
</td>
|
||||
<td><span v-if="participation.endDate">
|
||||
{{ $d(participation.endDate.datetime, 'short') }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
-->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -10,24 +10,14 @@
|
||||
<label class="chill-no-data-statement">{{ $tc('resources.counter', counter) }}</label>
|
||||
</div>
|
||||
|
||||
<table class="table table-bordered table-striped border-dark align-middle" v-if="resources.length > 0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="chill-orange">{{ $t('resources.text') }}</th>
|
||||
<th class="chill-orange">{{ $t('resources.description') }}</th>
|
||||
<th class="chill-orange">{{ $t('action.actions') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<resource-item
|
||||
v-for="resource in resources"
|
||||
v-bind:resource="resource"
|
||||
v-bind:key="resource.id"
|
||||
@remove="removeResource">
|
||||
</resource-item>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="flex-table mb-3">
|
||||
<resource-item
|
||||
v-for="resource in resources"
|
||||
v-bind:resource="resource"
|
||||
v-bind:key="resource.id"
|
||||
@remove="removeResource">
|
||||
</resource-item>
|
||||
</div>
|
||||
<div>
|
||||
<add-persons
|
||||
buttonTitle="resources.add_resources"
|
||||
|
||||
@ -1,64 +1,52 @@
|
||||
<template>
|
||||
<tr>
|
||||
<third-party-render-box
|
||||
:options="{
|
||||
addLink : false,
|
||||
addId : false,
|
||||
addEntity: true,
|
||||
addInfo: true
|
||||
}"
|
||||
:thirdparty="resource">
|
||||
|
||||
<td>
|
||||
<span class="badge rounded-pill bg-secondary"
|
||||
v-bind:title="resource.resource.id">
|
||||
<span v-if="resource.resource.type === 'person'" >{{ $t('item.type_person') }}</span>
|
||||
<span v-if="resource.resource.type === 'thirdparty'" >{{ $t('item.type_thirdparty') }}</span>
|
||||
</span>
|
||||
{{ resource.resource.text }}
|
||||
</td>
|
||||
|
||||
<td v-if="resource.resource.type === 'person'">
|
||||
{{ $tc('person.born') }}{{ $d(resource.resource.birthdate.datetime, 'short') }}
|
||||
</td>
|
||||
<td v-else-if="resource.resource.type === 'thirdparty'">
|
||||
{{ resource.resource.address.text }}<br>
|
||||
{{ resource.resource.address.postcode.name }}
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<ul class="record_actions">
|
||||
<button-location
|
||||
v-if="hasCurrentHouseholdAddress"
|
||||
v-bind:person="resource.resource">
|
||||
</button-location>
|
||||
<li>
|
||||
<on-the-fly
|
||||
v-bind:type="resource.resource.type"
|
||||
v-bind:id="resource.resource.id"
|
||||
action="show">
|
||||
</on-the-fly>
|
||||
</li>
|
||||
<li>
|
||||
<on-the-fly
|
||||
v-bind:type="resource.resource.type"
|
||||
v-bind:id="resource.resource.id"
|
||||
action="edit">
|
||||
</on-the-fly>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
class="btn btn-sm btn-remove"
|
||||
v-bind:title="$t('action.remove')"
|
||||
@click.prevent="$emit('remove', resource)">
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<template v-slot:record-actions>
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<on-the-fly
|
||||
v-bind:type="resource.resource.type"
|
||||
v-bind:id="resource.resource.id"
|
||||
action="show">
|
||||
</on-the-fly>
|
||||
</li>
|
||||
<li>
|
||||
<on-the-fly
|
||||
v-bind:type="resource.resource.type"
|
||||
v-bind:id="resource.resource.id"
|
||||
action="edit">
|
||||
</on-the-fly>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
class="btn btn-sm btn-remove"
|
||||
v-bind:title="$t('action.remove')"
|
||||
@click.prevent="$emit('remove', resource)">
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</third-party-render-box>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
|
||||
import ButtonLocation from '../ButtonLocation.vue';
|
||||
import ThirdPartyRenderBox from '../../../../../../../ChillThirdPartyBundle/Resources/public/vuejs/_components/ThirdPartyRenderbox.vue'
|
||||
|
||||
export default {
|
||||
name: 'ResourceItem',
|
||||
components: {
|
||||
OnTheFly,
|
||||
ButtonLocation
|
||||
ButtonLocation,
|
||||
ThirdPartyRenderBox
|
||||
},
|
||||
props: ['resource'],
|
||||
emits: ['remove'],
|
||||
|
||||
@ -0,0 +1,48 @@
|
||||
// CURRENTLY NOT IN USE
|
||||
|
||||
<template>
|
||||
|
||||
<li v-if="address" class="chill-entity entity-address">
|
||||
<i v-if="options.with_picto == true" class="fa fa-fw fa-map-marker"></i>
|
||||
<span v-if="options.render == 'list' || options.render == 'list'" :class="'address ' + {'multiline' : options.multiline === true}">
|
||||
|
||||
|
||||
<!-- if address.street is not empty -->
|
||||
<p v-if="address.street" class="street">{{ address.street }}
|
||||
<!-- if address.streetNumber is not empty -->
|
||||
<span v-if="address.streetNumber" class="streetnumber">{{ address.streetNumber }}</span>
|
||||
</p>
|
||||
|
||||
<!-- if options['extended_infos'] -->
|
||||
<div v-if="options.extended_infos == true">
|
||||
<span v-if="address.floor" class="floor">{{ address.floor }}</span>
|
||||
<span v-if="address.corridor" class="corridor">{{ address.corridor }}</span>
|
||||
<span v-if="address.steps" class="steps">{{ address.steps }}</span>
|
||||
<span v-if="address.buildingName" class="buildingName">{{ address.buildingName }}</span>
|
||||
<span v-if="address.flat" class="flat">{{ address.flat }}</span>
|
||||
<span v-if="address.distribution" class="distribution">{{ address.distribution }}</span>
|
||||
<span v-if="address.extra" class="extra">{{ address.extra }}</span>
|
||||
</div>
|
||||
|
||||
<!-- if address.postCode is not empty -->
|
||||
<div v-if="address.postCode">
|
||||
<p class="postcode">
|
||||
<span class="code">{{ address.postCode.code }}</span>
|
||||
<span class="name">{{ address.postCode.name }}</span>
|
||||
</p>
|
||||
<p class="country">{{ address.postCode.country.name }}</p>
|
||||
</div>
|
||||
|
||||
</span>
|
||||
</li>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default{
|
||||
name: "AddressRenderBox",
|
||||
props: ['address', 'options']
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex-table mb-3">
|
||||
|
||||
<div class="item-bloc">
|
||||
<section class="chill-entity entity-person">
|
||||
<!-- ENTIRE RENDER_BOX -->
|
||||
@ -10,12 +10,14 @@
|
||||
<div class="entity-label">
|
||||
|
||||
<!-- NAME TAG -->
|
||||
<!-- todo: make h class dynamic -->
|
||||
<div class="denomination h3">
|
||||
|
||||
<!-- NAME IF ADD LINK AND PERMISSION GRANTED -->
|
||||
<!-- todo: change href -->
|
||||
<a v-if="this.options.addLink == true" href="#">
|
||||
<span class="firstname">{{ participation.person.firstName }}</span>
|
||||
<span class="lastname">{{ participation.person.lastName }}</span>
|
||||
<span class="firstname">{{ person.firstName }}</span>
|
||||
<span class="lastname">{{ person.lastName }}</span>
|
||||
<!-- IF ALT NAMES -->
|
||||
<span v-if="this.options.addAltNames == true" class="altnames">
|
||||
<!-- LOOP THROUGH ALT NAMES -->
|
||||
@ -25,8 +27,8 @@
|
||||
</a>
|
||||
|
||||
<!-- WITHOUT LINK JUST NAME -->
|
||||
<span class="firstname">{{ participation.person.firstName }}</span>
|
||||
<span class="lastname">{{ participation.person.lastName }}</span>
|
||||
<span class="firstname">{{ person.firstName }}</span>
|
||||
<span class="lastname">{{ person.lastName }}</span>
|
||||
<!-- IF ALT NAMES -->
|
||||
<span v-if="this.options.addAltNames == true" class="altnames">
|
||||
<!-- LOOP THROUGH ALT NAMES -->
|
||||
@ -35,124 +37,97 @@
|
||||
</span>
|
||||
|
||||
<!-- IF ADD ENTITY OPTION -->
|
||||
<span v-if="this.options.addEntity == true" class="badge rounded-pill bg-secondary">Person</span>
|
||||
<span v-if="this.options.addId == true" class="id-number" title="n° participation.person.id">{{ participation.person.id }}</span>
|
||||
<span v-if="this.options.addEntity == true" class="badge rounded-pill bg-secondary">{{ $t('renderbox.person') }}</span>
|
||||
<span v-if="this.options.addId == true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span>
|
||||
|
||||
</div>
|
||||
<!-- END NAME TAG -->
|
||||
|
||||
<!-- BIRTHDATE / DEATHDATE AND AGE -->
|
||||
<p v-if="this.options.addInfo == true" class="moreinfo">
|
||||
<i :class="'fa fa-fw ' + getGender" title="{{ getGender }}"></i>
|
||||
<time datetime="{{ participation.person.birthdate }}" title="**birthdate**">
|
||||
Né le {{ birthdate }}
|
||||
<!-- todo: change icon if person is deceased? -->
|
||||
<i :class="'fa fa-fw ' + getGenderIcon" title="{{ getGender }}"></i>
|
||||
<time v-if="person.birthdate" datetime="{{ person.birthdate }}" title="{{ birthdate }}">
|
||||
{{ $t(getGender) + ' ' + $d(birthdate, 'text') }}
|
||||
</time>
|
||||
<span class="age">{{ participation.person.age }}</span>
|
||||
<time v-else-if="person.deathdate" datetime="{{ person.deathdate }}" title="{{ person.deathdate }}">
|
||||
{{ birthdate }} - {{ deathdate }}
|
||||
</time>
|
||||
<span class="age">{{ person.age }}</span>
|
||||
</p>
|
||||
<!-- END BIRTH/DEATH AND AGE -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- END LABEL -->
|
||||
|
||||
<!-- EXTRA INFO AND ACTIONS-->
|
||||
<!-- CONTACT INFO AND ACTIONS-->
|
||||
<div class="item-col">
|
||||
<ul class="list-content fa-ul">
|
||||
<li>
|
||||
<!-- ADDRESS -->
|
||||
<li v-if="person.current_household_address" class="chill-entity entity-address">
|
||||
<i class="fa fa-li fa-map-marker"></i>
|
||||
<show-address :address="person.current_household_address" :multiline="false"></show-address>
|
||||
</li>
|
||||
|
||||
<!-- PHONENUMBER -->
|
||||
<li>
|
||||
<div v-if="this.participation.person.mobilenumber">
|
||||
<i class="fa fa-li fa-mobile"></i>
|
||||
<a href="#">{{ participation.person.mobilenumber }}</a>
|
||||
</div>
|
||||
<div v-else-if="this.participation.person.phonenumber">
|
||||
<i class="fa fa-li fa-phone"></i>
|
||||
<a href="#">{{ participation.person.phonenumber }}</a>
|
||||
</div>
|
||||
<span v-else class="chill-no-data-statement">Pas d'information</span>
|
||||
<!-- todo: change href for phonenumbers and format phone number? -->
|
||||
<li v-if="this.person.mobilenumber">
|
||||
<i class="fa fa-li fa-mobile"></i>
|
||||
<a :href="'tel: ' + person.mobilenumber">{{ person.mobilenumber }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<on-the-fly
|
||||
v-bind:type="participation.person.type"
|
||||
v-bind:id="participation.person.id"
|
||||
action="show">
|
||||
</on-the-fly>
|
||||
</li>
|
||||
<li>
|
||||
<on-the-fly
|
||||
v-bind:type="participation.person.type"
|
||||
v-bind:id="participation.person.id"
|
||||
action="edit">
|
||||
</on-the-fly>
|
||||
</li>
|
||||
<li>
|
||||
<button class="btn btn-delete"
|
||||
:title="$t('action.delete')"
|
||||
@click.prevent="$emit('remove', participation)">
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button v-if="!participation.endDate"
|
||||
class="btn btn-remove"
|
||||
v-bind:title="$t('action.remove')"
|
||||
@click.prevent="$emit('close', participation)">
|
||||
</button>
|
||||
<button v-else class="btn btn-remove disabled"></button>
|
||||
<li v-else-if="this.person.phonenumber">
|
||||
<i class="fa fa-li fa-phone"></i>
|
||||
<a :href="'tel: ' + person.phonenumber">{{ person.phonenumber }}</a>
|
||||
</li>
|
||||
<span v-else class="chill-no-data-statement">{{ $t('renderbox.no_information') }}</span>
|
||||
|
||||
</ul>
|
||||
<!-- END ADDRESS AND PHONE NUMBER -->
|
||||
|
||||
<!-- ACTION BUTTONS -->
|
||||
<!-- <ul class="record_actions">
|
||||
<li>
|
||||
<a class="btn btn-show" target="_blank" title="Show person"
|
||||
href="#"></a>
|
||||
</li>
|
||||
</ul> -->
|
||||
<slot name="record-actions"></slot>
|
||||
<!-- END ACTIONS -->
|
||||
</div>
|
||||
<!-- END EXTRA INFO AND ACTIONS -->
|
||||
|
||||
<!-- END CONTACT INFO AND ACTIONS -->
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
|
||||
// import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
|
||||
import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
|
||||
import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';
|
||||
|
||||
export default {
|
||||
name: "PersonRenderBox",
|
||||
components: {
|
||||
OnTheFly
|
||||
ShowAddress
|
||||
},
|
||||
props: ['participation', 'options'],
|
||||
props: ['person', 'options'],
|
||||
computed: {
|
||||
getGender: function() {
|
||||
// gender
|
||||
return this.participation.person.gender == 'woman' ? 'fa-venus' : this.participation.person.gender == 'man' ? 'fa-mars' : 'fa-neuter';
|
||||
return this.person.gender == 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man';
|
||||
},
|
||||
getGenderIcon: function() {
|
||||
return this.person.gender == 'woman' ? 'fa-venus' : this.person.gender == 'man' ? 'fa-mars' : 'fa-neuter';
|
||||
},
|
||||
birthdate: function(){
|
||||
var date = new Date(this.participation.person.birthdate.datetime);
|
||||
var day = date.getDate()
|
||||
var months = ["Jan.", "Fevr.", "Mars", "Avril", "Mai", "Juin", "Juill.", "Août", "Sept.", "Oct.", "Nov.", "Dec."]
|
||||
var month = date.getMonth()
|
||||
var year = date.getFullYear()
|
||||
return `${day} ${months[month]} ${year}`;
|
||||
var date = new Date(this.person.birthdate.datetime);
|
||||
return dateToISO(date);
|
||||
},
|
||||
deathdate: function(){
|
||||
var date = new Date(this.person.deathdate.datetime);
|
||||
return dateToISO(date);
|
||||
},
|
||||
altNameLabel: function(){
|
||||
for(let i = 0; i < this.participation.person.altNames.length; i++){
|
||||
return this.participation.person.altNames[i].label
|
||||
for(let i = 0; i < this.person.altNames.length; i++){
|
||||
return this.person.altNames[i].label
|
||||
}
|
||||
},
|
||||
altNameKey: function(){
|
||||
for(let i = 0; i < this.participation.person.altNames.length; i++){
|
||||
return this.participation.person.altNames[i].key
|
||||
for(let i = 0; i < this.person.altNames.length; i++){
|
||||
return this.person.altNames[i].key
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div class="item-bloc">
|
||||
<section class="chill-entity entity-person">
|
||||
<!-- ENTIRE RENDER_BOX -->
|
||||
<div class="item-row entity-bloc">
|
||||
|
||||
<!-- LABEL -->
|
||||
<div class="item-col">
|
||||
<div class="entity-label">
|
||||
|
||||
<!-- NAME TAG -->
|
||||
<!-- todo: make h class dynamic -->
|
||||
<div class="denomination h3">
|
||||
|
||||
<span v-if="options.addEntity == true && thirdparty.resource.type == 'thirdparty'" class="badge rounded-pill bg-secondary">{{ $t('renderbox.type.thirdparty') }}</span>
|
||||
<span v-if="options.addEntity == true && thirdparty.resource.type == 'person'" class="badge rounded-pill bg-secondary">{{ $t('renderbox.type.person') }}</span>
|
||||
<!-- NAME IF ADD LINK AND PERMISSION GRANTED -->
|
||||
<!-- todo: change href -->
|
||||
<a v-if="this.options.addLink == true" href="#">
|
||||
<span class="name">{{ thirdparty.resource.text }}</span>
|
||||
</a>
|
||||
<!-- WITHOUT LINK JUST NAME -->
|
||||
<span class="name">{{ thirdparty.resource.text }}</span>
|
||||
|
||||
<!-- IF ADD ENTITY OPTION -->
|
||||
|
||||
<span v-if="options.addId == true" class="id-number" :title="'n° ' + thirdparty.id">{{ thirdparty.id }}</span>
|
||||
|
||||
</div>
|
||||
<!-- END NAME TAG -->
|
||||
|
||||
<!-- EXTRA INFO -->
|
||||
<p v-if="this.options.addInfo == true" class="moreinfo">
|
||||
<!-- todo: change icon if person is deceased? -->
|
||||
<i :class="'fa fa-fw ' + getGenderIcon" title="{{ getGender }}"></i>
|
||||
<time v-if="thirdparty.resource.birthdate" datetime="{{ thirdparty.birthdate.datetime }}" title="{{ birthdate }}">
|
||||
{{ $t(getGender) + ' ' + $d(birthdate, 'short') }}
|
||||
</time>
|
||||
<time v-else-if="thirdparty.resource.deathdate" datetime="{{ thirdparty.deathdate.datetime }}" title="{{ thirdparty.deathdate }}">
|
||||
{{ birthdate }} - {{ deathdate }}
|
||||
</time>
|
||||
<span class="age">{{ thirdparty.age }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END LABEL -->
|
||||
|
||||
<!-- CONTACT INFO AND ACTIONS-->
|
||||
<div class="item-col">
|
||||
<ul class="list-content fa-ul">
|
||||
<!-- ADDRESS -->
|
||||
<li v-if="thirdparty.resource.address" class="chill-entity entity-address">
|
||||
<i class="fa fa-li fa-map-marker"></i>
|
||||
<show-address :address="thirdparty.resource.address" :multiline="false"></show-address>
|
||||
</li>
|
||||
<!-- PHONENUMBER -->
|
||||
<!-- todo: change href for phonenumbers -->
|
||||
<li>
|
||||
<i class="fa fa-li fa-mobile"></i>
|
||||
<a v-if="thirdparty.resource.telephone" :href="'tel: ' + thirdparty.resource.telephone">{{ thirdparty.resource.telephone }}</a>
|
||||
<span v-else class="chill-no-data-statement">{{ $t('renderbox.no_information') }}</span>
|
||||
</li>
|
||||
<li v-if="thirdparty.resource.type == 'thirdparty'">
|
||||
<i class="fa fa-li fa-envelope-o"></i>
|
||||
<a v-if="thirdparty.resource.email" :href="'mailto: ' + thirdparty.resource.email">{{ thirdparty.resource.email }}</a>
|
||||
<span v-else class="chill-no-data-statement">{{ $t('renderbox.no_information') }}</span>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!-- END ADDRESS AND PHONE NUMBER -->
|
||||
|
||||
<!-- ACTION BUTTONS -->
|
||||
<slot name="record-actions"></slot>
|
||||
<!-- END ACTIONS -->
|
||||
</div>
|
||||
<!-- END CONTACT INFO AND ACTIONS -->
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';
|
||||
import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
|
||||
|
||||
export default {
|
||||
name: "ThirdPartyRenderBox",
|
||||
components: {
|
||||
ShowAddress
|
||||
},
|
||||
props: ['thirdparty', 'options'],
|
||||
computed: {
|
||||
getGender: function() {
|
||||
return this.thirdparty.resource.gender == 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man';
|
||||
},
|
||||
getGenderIcon: function() {
|
||||
return this.thirdparty.resource.gender == 'woman' ? 'fa-venus' : this.thirdparty.resource.gender == 'man' ? 'fa-mars' : 'fa-neuter';
|
||||
},
|
||||
birthdate: function(){
|
||||
var date = new Date(this.thirdparty.resource.birthdate.datetime);
|
||||
return dateToISO(date);
|
||||
},
|
||||
deathdate: function(){
|
||||
var date = new Date(this.thirdparty.resource.deathdate.datetime);
|
||||
return dateToISO(date);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.lastname{
|
||||
&:before{
|
||||
content: " "
|
||||
}
|
||||
}
|
||||
.name{
|
||||
&:before{
|
||||
content: " "
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user