Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-09-09 16:24:59 +00:00
Code Issues Actions Projects Releases Wiki Activity

Merge branch 'ameliorations_composants_vue' into improve_ux

Browse Source
This commit is contained in:
Mathieu Jaumotte
2021-08-19 14:31:20 +02:00
parent 0f87d77896 77fe497994
commit 6253927e2e
3 changed files with 223 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue Normal file
View File

@@ -0,0 +1,170 @@
<template>
<div class="flex-table mb-3">
<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 -->
<div class="denomination h3">
<!-- NAME IF ADD LINK AND PERMISSION GRANTED -->
<a v-if="this.options.addLink == true" href="#">
<span class="firstname">{{ participation.person.firstName }}</span>
<span class="lastname">{{ participation.person.lastName }}</span>
<!-- IF ALT NAMES -->
<span v-if="this.options.addAltNames == true" class="altnames">
<!-- LOOP THROUGH ALT NAMES -->
<span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
<!-- END LOOP -->
</span>
</a>
<!-- WITHOUT LINK JUST NAME -->
<span class="firstname">{{ participation.person.firstName }}</span>
<span class="lastname">{{ participation.person.lastName }}</span>
<!-- IF ALT NAMES -->
<span v-if="this.options.addAltNames == true" class="altnames">
<!-- LOOP THROUGH ALT NAMES -->
<span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
<!-- END LOOP -->
</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>
</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 }}
</time>
<span class="age">{{ participation.person.age }}</span>
</p>
<!-- END BIRTH/DEATH AND AGE -->
</div>
</div>
<!-- END LABEL -->
<!-- EXTRA INFO AND ACTIONS-->
<div class="item-col">
<ul class="list-content fa-ul">
<li>
<!-- 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>
</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>
</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> -->
<!-- END ACTIONS -->
</div>
<!-- END EXTRA INFO AND ACTIONS -->
</div>
</section>
</div>
</div>
</template>
<script>
import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
export default {
name: "PersonRenderBox",
components: {
OnTheFly
},
props: ['participation', 'options'],
computed: {
getGender: function() {
// gender
return this.participation.person.gender == 'woman' ? 'fa-venus' : this.participation.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}`;
},
altNameLabel: function(){
for(let i = 0; i < this.participation.person.altNames.length; i++){
return this.participation.person.altNames[i].label
}
},
altNameKey: function(){
for(let i = 0; i < this.participation.person.altNames.length; i++){
return this.participation.person.altNames[i].key
}
},
}
}
</script>
<style>
.lastname:before{
content: " "
}
</style>