dynamic properties displayed

This commit is contained in:
Julie Lenaerts 2021-08-13 18:31:15 +02:00
parent 438134690f
commit b89a66b20c

View File

@ -19,7 +19,7 @@
<!-- IF ALT NAMES -->
<span v-if="this.options.addAltNames == true" class="altnames">
<!-- LOOP THROUGH ALT NAMES -->
<span class="altname altname-**key**">**label**</span>
<span class="altname altname-**key**">hello</span>
<!-- END LOOP -->
</span>
</a>
@ -30,7 +30,7 @@
<!-- IF ALT NAMES -->
<span v-if="this.options.addAltNames == true" class="altnames">
<!-- 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 -->
</span>
@ -43,13 +43,12 @@
<!-- BIRTHDATE / DEATHDATE AND AGE -->
<p v-if="this.options.addInfo == true" class="moreinfo">
<i :class="'fa fa-fw' + this.gender" title="{{this.gender}}"></i>
<time datetime="13/05/1867" title="**birthdate**">
{{ participation.person.birthdate }}
<i :class="'fa fa-fw ' + getGender" title="{{ getGender }}"></i>
<time datetime="{{ participation.person.birthdate }}" title="**birthdate**">
le {{ birthdate }}
</time>
<span class="age">{{ participation.person.age }}</span>
</p>
<p>{{this.gender}}</p>
<!-- END BIRTH/DEATH AND AGE -->
</div>
@ -73,18 +72,48 @@
<i class="fa fa-li fa-phone"></i>
<a href="#">{{ participation.person.phonenumber }}</a>
</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>
</ul>
<!-- END ADDRESS AND PHONE NUMBER -->
<!-- ACTION BUTTONS -->
<ul class="record_actions">
<!-- <ul class="record_actions">
<li>
<a class="btn btn-show" target="_blank" title="Show person"
href="#"></a>
</li>
</ul>
</ul> -->
<!-- END ACTIONS -->
</div>
<!-- END EXTRA INFO AND ACTIONS -->
@ -96,11 +125,27 @@
</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}`;
},
}
}
</script>