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

dynamic properties displayed

Browse Source
This commit is contained in:
Julie Lenaerts 2021-08-13 18:31:15 +02:00
parent 438134690f
commit b89a66b20c
1 changed files with 55 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,7 +19,7 @@
<!-- 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 -->
<span class="altname altname-**key**">**label**</span> <span class="altname altname-**key**">hello</span>
<!-- END LOOP --> <!-- END LOOP -->
</span> </span>
</a> </a>
@ -30,7 +30,7 @@
<!-- 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 -->
<span class="altname altname-**key**">**label**</span> <span v-for="alt in participation.person.altnames" :key="alt.label" class="altname altname-**key**">{{ alt.label }}</span>
<!-- END LOOP --> <!-- END LOOP -->
</span> </span>
@ -43,13 +43,12 @@
<!-- 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' + this.gender" title="{{this.gender}}"></i> <i :class="'fa fa-fw ' + getGender" title="{{ getGender }}"></i>
<time datetime="13/05/1867" title="**birthdate**"> <time datetime="{{ participation.person.birthdate }}" title="**birthdate**">
{{ participation.person.birthdate }} Né le {{ birthdate }}
</time> </time>
<span class="age">{{ participation.person.age }}</span> <span class="age">{{ participation.person.age }}</span>
</p> </p>
<p>{{this.gender}}</p>
<!-- END BIRTH/DEATH AND AGE --> <!-- END BIRTH/DEATH AND AGE -->
</div> </div>
@ -73,18 +72,48 @@
<i class="fa fa-li fa-phone"></i> <i class="fa fa-li fa-phone"></i>
<a href="#">{{ participation.person.phonenumber }}</a> <a href="#">{{ participation.person.phonenumber }}</a>
</div> </div>
<span v-else class="chill-no-data-statement">No phonenumber listed</span> <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> </li>
</ul> </ul>
<!-- END ADDRESS AND PHONE NUMBER --> <!-- END ADDRESS AND PHONE NUMBER -->
<!-- ACTION BUTTONS --> <!-- ACTION BUTTONS -->
<ul class="record_actions"> <!-- <ul class="record_actions">
<li> <li>
<a class="btn btn-show" target="_blank" title="Show person" <a class="btn btn-show" target="_blank" title="Show person"
href="#"></a> href="#"></a>
</li> </li>
</ul> </ul> -->
<!-- END ACTIONS --> <!-- END ACTIONS -->
</div> </div>
<!-- END EXTRA INFO AND ACTIONS --> <!-- END EXTRA INFO AND ACTIONS -->
@ -96,11 +125,27 @@
</template> </template>
<script> <script>
import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
export default { export default {
name: "PersonRenderBox", name: "PersonRenderBox",
components: {
OnTheFly
},
props: ['participation', 'options'], props: ['participation', 'options'],
computed: { 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}`;
},
} }
} }
</script> </script>