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

date formatting using dateToISO function, still fix with translations. + record-actions inserted via <slot>

Browse Source
This commit is contained in:
Julie Lenaerts 2021-08-17 14:05:48 +02:00
parent 77fe497994
commit 1a6c0529cc
2 changed files with 71 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<template> <template>
<div class="flex-table mb-3">
<person-render-box <person-render-box
:options="{ :options="{
addInfo : true, addInfo : true,
@ -10,8 +10,47 @@
addAge : false, addAge : false,
hLevel : 1 hLevel : 1
}" }"
:participation="participation" :person="participation.person"
></person-render-box> >
<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-remove"
v-bind:title="$t('action.remove')"
@click.prevent="$emit('close', participation)">
</button>
<button v-else class="btn btn-remove disabled"></button>
</li>
</ul>
</template>
</person-render-box>
</div>
</template>
<!-- <tr> <!-- <tr>
<td> <td>
{{ participation.person.firstName }} {{ participation.person.firstName }}
@ -28,39 +67,9 @@
{{ $d(participation.endDate.datetime, 'short') }}</span> {{ $d(participation.endDate.datetime, 'short') }}</span>
</td> </td>
<td> <td>
<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>
</td> </td>
</tr> --> </tr> -->
</template>
<script> <script>
import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue'; import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
@ -77,7 +86,7 @@ export default {
data() { data() {
return { return {
PersonRenderBox: { PersonRenderBox: {
participation : 'participation', person : 'participation.person',
options : { options : {
addInfo : false, addInfo : false,
addId : true, addId : true,

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

@ -1,5 +1,5 @@
<template> <template>
<div class="flex-table mb-3">
<div class="item-bloc"> <div class="item-bloc">
<section class="chill-entity entity-person"> <section class="chill-entity entity-person">
<!-- ENTIRE RENDER_BOX --> <!-- ENTIRE RENDER_BOX -->
@ -14,8 +14,8 @@
<!-- NAME IF ADD LINK AND PERMISSION GRANTED --> <!-- NAME IF ADD LINK AND PERMISSION GRANTED -->
<a v-if="this.options.addLink == true" href="#"> <a v-if="this.options.addLink == true" href="#">
<span class="firstname">{{ participation.person.firstName }}</span> <span class="firstname">{{ person.firstName }}</span>
<span class="lastname">{{ participation.person.lastName }}</span> <span class="lastname">{{ person.lastName }}</span>
<!-- IF ALT NAMES --> <!-- IF ALT NAMES -->
<span v-if="this.options.addAltNames == true" class="altnames"> <span v-if="this.options.addAltNames == true" class="altnames">
<!-- LOOP THROUGH ALT NAMES --> <!-- LOOP THROUGH ALT NAMES -->
@ -25,8 +25,8 @@
</a> </a>
<!-- WITHOUT LINK JUST NAME --> <!-- WITHOUT LINK JUST NAME -->
<span class="firstname">{{ participation.person.firstName }}</span> <span class="firstname">{{ person.firstName }}</span>
<span class="lastname">{{ participation.person.lastName }}</span> <span class="lastname">{{ person.lastName }}</span>
<!-- IF ALT NAMES --> <!-- IF ALT NAMES -->
<span v-if="this.options.addAltNames == true" class="altnames"> <span v-if="this.options.addAltNames == true" class="altnames">
<!-- LOOP THROUGH ALT NAMES --> <!-- LOOP THROUGH ALT NAMES -->
@ -36,7 +36,7 @@
<!-- IF ADD ENTITY OPTION --> <!-- IF ADD ENTITY OPTION -->
<span v-if="this.options.addEntity == true" class="badge rounded-pill bg-secondary">Person</span> <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.addId == true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span>
</div> </div>
<!-- END NAME TAG --> <!-- END NAME TAG -->
@ -44,10 +44,10 @@
<!-- BIRTHDATE / DEATHDATE AND AGE --> <!-- BIRTHDATE / DEATHDATE AND AGE -->
<p v-if="this.options.addInfo == true" class="moreinfo"> <p v-if="this.options.addInfo == true" class="moreinfo">
<i :class="'fa fa-fw ' + getGender" title="{{ getGender }}"></i> <i :class="'fa fa-fw ' + getGender" title="{{ getGender }}"></i>
<time datetime="{{ participation.person.birthdate }}" title="**birthdate**"> <time datetime="{{ person.birthdate }}" title="**birthdate**">
Né le {{ birthdate }} Né le {{ birthdate }}
</time> </time>
<span class="age">{{ participation.person.age }}</span> <span class="age">{{ person.age }}</span>
</p> </p>
<!-- END BIRTH/DEATH AND AGE --> <!-- END BIRTH/DEATH AND AGE -->
</div> </div>
@ -63,96 +63,61 @@
<!-- PHONENUMBER --> <!-- PHONENUMBER -->
<li> <li>
<div v-if="this.participation.person.mobilenumber"> <div v-if="this.person.mobilenumber">
<i class="fa fa-li fa-mobile"></i> <i class="fa fa-li fa-mobile"></i>
<a href="#">{{ participation.person.mobilenumber }}</a> <a href="#">{{ person.mobilenumber }}</a>
</div> </div>
<div v-else-if="this.participation.person.phonenumber"> <div v-else-if="this.person.phonenumber">
<i class="fa fa-li fa-phone"></i> <i class="fa fa-li fa-phone"></i>
<a href="#">{{ participation.person.phonenumber }}</a> <a href="#">{{ person.phonenumber }}</a>
</div> </div>
<span v-else class="chill-no-data-statement">Pas d'information</span> <span v-else class="chill-no-data-statement">Pas d'information</span>
</li> </li>
</ul> </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 --> <!-- END ADDRESS AND PHONE NUMBER -->
<!-- ACTION BUTTONS --> <!-- ACTION BUTTONS -->
<!-- <ul class="record_actions"> <slot name="record-actions"></slot>
<li>
<a class="btn btn-show" target="_blank" title="Show person"
href="#"></a>
</li>
</ul> -->
<!-- END ACTIONS --> <!-- END ACTIONS -->
</div> </div>
<!-- END EXTRA INFO AND ACTIONS --> <!-- END EXTRA INFO AND ACTIONS -->
</div> </div>
</section> </section>
</div> </div>
</div>
</template> </template>
<script> <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';
export default { export default {
name: "PersonRenderBox", name: "PersonRenderBox",
components: { components: {
OnTheFly OnTheFly
}, },
props: ['participation', 'options'], props: ['person', 'options'],
computed: { computed: {
getGender: function() { getGender: function() {
// gender // gender
return this.participation.person.gender == 'woman' ? 'fa-venus' : this.participation.person.gender == 'man' ? 'fa-mars' : 'fa-neuter'; return this.person.gender == 'woman' ? 'fa-venus' : this.person.gender == 'man' ? 'fa-mars' : 'fa-neuter';
}, },
birthdate: function(){ birthdate: function(){
var date = new Date(this.participation.person.birthdate.datetime); var date = new Date(this.person.birthdate.datetime);
var day = date.getDate() // var day = date.getDate()
var months = ["Jan.", "Fevr.", "Mars", "Avril", "Mai", "Juin", "Juill.", "Août", "Sept.", "Oct.", "Nov.", "Dec."] // var months = ["Jan.", "Fevr.", "Mars", "Avril", "Mai", "Juin", "Juill.", "Août", "Sept.", "Oct.", "Nov.", "Dec."]
var month = date.getMonth() // var month = date.getMonth()
var year = date.getFullYear() // var year = date.getFullYear()
return `${day} ${months[month]} ${year}`; return dateToISO(date);
}, },
altNameLabel: function(){ altNameLabel: function(){
for(let i = 0; i < this.participation.person.altNames.length; i++){ for(let i = 0; i < this.person.altNames.length; i++){
return this.participation.person.altNames[i].label return this.person.altNames[i].label
} }
}, },
altNameKey: function(){ altNameKey: function(){
for(let i = 0; i < this.participation.person.altNames.length; i++){ for(let i = 0; i < this.person.altNames.length; i++){
return this.participation.person.altNames[i].key return this.person.altNames[i].key
} }
}, },
} }