AccompanyingCourse: fix errors with renderbox into Resources

This commit is contained in:
Mathieu Jaumotte 2021-08-19 18:56:38 +02:00
parent fdd08905a8
commit bb471fd4af
5 changed files with 68 additions and 133 deletions

View File

@ -98,6 +98,14 @@ export default {
} }
} }
div.flex-table {
div.item-row {
div.item-col:first-child {
flex-basis: 33%;
}
}
}
&.errors { &.errors {
//display: flex; //display: flex;
//position: sticky; //position: sticky;

View File

@ -2,7 +2,7 @@
<person-render-box <person-render-box
:options="{ :options="{
addInfo : true, addInfo : true,
addId : true, addId : false,
addEntity: false, addEntity: false,
addLink: false, addLink: false,
addAltNames: true, addAltNames: true,

View File

@ -1,63 +1,54 @@
<template> <template>
<third-party-render-box <person-render-box
:options="{ v-if="resource.resource.type === 'person'"
addLink : false, :person="resource.resource"
addId : false, :options="{ addInfo : true, addId : false, addEntity: true, addLink: false, addAltNames: true, addAge : false, hLevel : 1 }"
addEntity: true,
addInfo: true
}"
:thirdparty="resource.resource"
> >
<template v-slot:record-actions> <template v-slot:record-actions>
<ul class="record_actions"> <ul class="record_actions">
<button-location <button-location v-if="hasCurrentHouseholdAddress" :person="resource.resource"></button-location>
v-if="hasCurrentHouseholdAddress" <li><on-the-fly :type="resource.resource.type" :id="resource.resource.id" action="show"></on-the-fly></li>
v-bind:person="participation.person"> <li><on-the-fly :type="resource.resource.type" :id="resource.resource.id" action="edit"></on-the-fly></li>
</button-location> <li><button class="btn btn-sm btn-remove" :title="$t('action.remove')" @click.prevent="$emit('remove', resource)"></button></li>
<li> </ul>
<on-the-fly </template>
v-bind:type="resource.resource.type"
v-bind:id="resource.resource.id" </person-render-box>
action="show"> <third-party-render-box
</on-the-fly> v-if="resource.resource.type === 'thirdparty'"
</li> :thirdparty="resource.resource"
<li> :options="{ addLink : false, addId : false, addEntity: true, addInfo: true }"
<on-the-fly >
v-bind:type="resource.resource.type" <template v-slot:record-actions>
v-bind:id="resource.resource.id" <ul class="record_actions">
action="edit"> <li><on-the-fly :type="resource.resource.type" :id="resource.resource.id" action="show"></on-the-fly></li>
</on-the-fly> <li><on-the-fly :type="resource.resource.type" :id="resource.resource.id" action="edit"></on-the-fly></li>
</li> <li><button class="btn btn-sm btn-remove" :title="$t('action.remove')" @click.prevent="$emit('remove', resource)"></button></li>
<li> </ul>
<button </template>
class="btn btn-sm btn-remove"
v-bind:title="$t('action.remove')" </third-party-render-box>
@click.prevent="$emit('remove', resource)">
</button>
</li>
</ul>
</template>
</third-party-render-box>
</template> </template>
<script> <script>
import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue'; import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
import ButtonLocation from '../ButtonLocation.vue'; import ButtonLocation from '../ButtonLocation.vue';
import ThirdPartyRenderBox from 'ChillThirdPartyAssets/vuejs/_components/Entity/ThirdPartyRenderBox.vue' import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
import ThirdPartyRenderBox from 'ChillThirdPartyAssets/vuejs/_components/Entity/ThirdPartyRenderBox.vue';
export default { export default {
name: 'ResourceItem', name: 'ResourceItem',
components: { components: {
OnTheFly, OnTheFly,
ButtonLocation, ButtonLocation,
PersonRenderBox,
ThirdPartyRenderBox ThirdPartyRenderBox
}, },
props: ['resource'], props: ['resource'],
emits: ['remove'], emits: ['remove'],
computed: { computed: {
hasCurrentHouseholdAddress() { hasCurrentHouseholdAddress() {
if ( this.resource.resource.type === 'person' if ( this.resource.resource.current_household_address !== null ) {
&& this.resource.resource.current_household_address !== null ) {
return true; return true;
} }
return false; return false;

View File

@ -1,50 +1,33 @@
<template> <template>
<div class="item-bloc"> <div class="item-bloc">
<section class="chill-entity entity-person"> <section class="chill-entity entity-person">
<!-- ENTIRE RENDER_BOX -->
<div class="item-row entity-bloc"> <div class="item-row entity-bloc">
<!-- LABEL -->
<div class="item-col"> <div class="item-col">
<div class="entity-label"> <div class="entity-label">
<!-- NAME TAG -->
<!-- todo: make h class dynamic -->
<div class="denomination h3"> <div class="denomination h3">
<!-- NAME IF ADD LINK AND PERMISSION GRANTED --> <a v-if="this.options.addLink == true" href="#">
<!-- todo: change href -->
<a v-if="this.options.addLink == true" href="#">
<span class="firstname">{{ person.firstName }}</span> <span class="firstname">{{ person.firstName }}</span>
<span class="lastname">{{ person.lastName }}</span> <span class="lastname">{{ person.lastName }}</span>
<!-- 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 -->
<span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span> <span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
<!-- END LOOP -->
</span> </span>
</a> </a>
<!-- WITHOUT LINK JUST NAME --> <span class="firstname">{{ person.firstName }}</span>
<span class="firstname">{{ person.firstName }}</span> <span class="lastname">{{ person.lastName }}</span>
<span class="lastname">{{ person.lastName }}</span> <span v-if="this.options.addAltNames == true" class="altnames">
<!-- IF ALT NAMES --> <span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
<span v-if="this.options.addAltNames == true" class="altnames"> </span>
<!-- LOOP THROUGH ALT NAMES -->
<span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
<!-- END LOOP -->
</span>
<!-- IF ADD ENTITY OPTION --> <span v-if="this.options.addId == true" class="id-number" :title="'n° ' + person.id">{{ 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.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> </div>
<!-- END NAME TAG -->
<!-- BIRTHDATE / DEATHDATE AND AGE -->
<p v-if="this.options.addInfo == true" class="moreinfo"> <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> <i :class="'fa fa-fw ' + getGenderIcon" title="{{ getGender }}"></i>
<time v-if="person.birthdate" datetime="{{ person.birthdate }}" title="{{ birthdate }}"> <time v-if="person.birthdate" datetime="{{ person.birthdate }}" title="{{ birthdate }}">
{{ $t(getGender) + ' ' + $d(birthdate, 'text') }} {{ $t(getGender) + ' ' + $d(birthdate, 'text') }}
@ -54,21 +37,15 @@
</time> </time>
<span class="age">{{ person.age }}</span> <span class="age">{{ person.age }}</span>
</p> </p>
<!-- END BIRTH/DEATH AND AGE -->
</div> </div>
</div> </div>
<!-- END LABEL -->
<!-- CONTACT INFO AND ACTIONS--> <div class="item-col separator">
<div class="item-col">
<ul class="list-content fa-ul"> <ul class="list-content fa-ul">
<!-- ADDRESS -->
<li v-if="person.current_household_address"> <li v-if="person.current_household_address">
<i class="fa fa-li fa-map-marker"></i> <i class="fa fa-li fa-map-marker"></i>
<show-address :address="person.current_household_address" :isMultiline="false"></show-address> <show-address :address="person.current_household_address" :isMultiline="false"></show-address>
</li> </li>
<!-- PHONENUMBER -->
<!-- todo: change href for phonenumbers and format phone number? -->
<li v-if="person.mobilenumber"> <li v-if="person.mobilenumber">
<i class="fa fa-li fa-mobile"></i> <i class="fa fa-li fa-mobile"></i>
<a :href="'tel: ' + person.mobilenumber">{{ person.mobilenumber }}</a> <a :href="'tel: ' + person.mobilenumber">{{ person.mobilenumber }}</a>
@ -77,24 +54,17 @@
<i class="fa fa-li fa-phone"></i> <i class="fa fa-li fa-phone"></i>
<a :href="'tel: ' + person.phonenumber">{{ person.phonenumber }}</a> <a :href="'tel: ' + person.phonenumber">{{ person.phonenumber }}</a>
</li> </li>
<span v-else class="chill-no-data-statement">{{ $t('renderbox.no_information') }}</span>
</ul> </ul>
<!-- END ADDRESS AND PHONE NUMBER -->
<!-- ACTION BUTTONS -->
<slot name="record-actions"></slot> <slot name="record-actions"></slot>
<!-- END ACTIONS -->
</div> </div>
<!-- END CONTACT INFO AND ACTIONS -->
</div> </div>
</section> </section>
</div> </div>
</template> </template>
<script> <script>
// import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
import {dateToISO} from 'ChillMainAssets/chill/js/date.js'; import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue'; import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';
@ -129,16 +99,14 @@ export default {
return this.person.altNames[i].key return this.person.altNames[i].key
} }
}, },
} }
} }
</script> </script>
<style> <style>
.lastname:before{ .lastname:before{
content: " " content: " "
} }
</style> </style>

View File

@ -1,38 +1,24 @@
<template> <template>
<div class="item-bloc col">
<div class="item-bloc col">
<section class="chill-entity entity-thirdparty"> <section class="chill-entity entity-thirdparty">
<!-- ENTIRE RENDER_BOX -->
<div class="item-row entity-bloc"> <div class="item-row entity-bloc">
<!-- LABEL -->
<div class="item-col"> <div class="item-col">
<div class="entity-label"> <div class="entity-label">
<!-- NAME TAG -->
<!-- todo: make h class dynamic -->
<div class="denomination h3"> <div class="denomination h3">
<span v-if="options.addEntity == true && thirdparty.type == 'thirdparty'" class="badge rounded-pill bg-secondary">{{ $t('renderbox.type.thirdparty') }}</span>
<span v-if="options.addEntity == true && thirdparty.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="#"> <a v-if="this.options.addLink == true" href="#">
<span class="name">{{ thirdparty.text }}</span> <span class="name">{{ thirdparty.text }}</span>
</a> </a>
<!-- WITHOUT LINK JUST NAME -->
<span class="name">{{ thirdparty.text }}</span> <span class="name">{{ thirdparty.text }}</span>
<!-- IF ADD ENTITY OPTION -->
<span v-if="options.addId == true" class="id-number" :title="'n° ' + thirdparty.id">{{ thirdparty.id }}</span> <span v-if="options.addId == true" class="id-number" :title="'n° ' + thirdparty.id">{{ thirdparty.id }}</span>
<span v-if="options.addEntity == true && thirdparty.type == 'thirdparty'" class="badge rounded-pill bg-secondary">{{ $t('renderbox.type.thirdparty') }}</span>
</div> </div>
<!-- END NAME TAG -->
<!-- EXTRA INFO -->
<p v-if="this.options.addInfo == true" class="moreinfo"> <p v-if="this.options.addInfo == true" class="moreinfo">
<!-- todo: change icon if person is deceased? -->
<i v-if="thirdparty.birthdate" :class="'fa fa-fw ' + getGenderIcon" title="{{ getGender }}"></i> <i v-if="thirdparty.birthdate" :class="'fa fa-fw ' + getGenderIcon" title="{{ getGender }}"></i>
<time v-if="thirdparty.birthdate" datetime="{{ thirdparty.birthdate.datetime }}" title="{{ birthdate }}"> <time v-if="thirdparty.birthdate" datetime="{{ thirdparty.birthdate.datetime }}" title="{{ birthdate }}">
{{ $t(getGender) + ' ' + $d(birthdate, 'short') }} {{ $t(getGender) + ' ' + $d(birthdate, 'short') }}
@ -44,40 +30,29 @@
</p> </p>
</div> </div>
</div> </div>
<!-- END LABEL -->
<!-- CONTACT INFO AND ACTIONS--> <div class="item-col separator">
<div class="item-col">
<ul class="list-content fa-ul"> <ul class="list-content fa-ul">
<!-- ADDRESS -->
<li v-if="thirdparty.address"> <li v-if="thirdparty.address">
<i class="fa fa-li fa-map-marker"></i> <i class="fa fa-li fa-map-marker"></i>
<show-address :address="thirdparty.address" :multiline="false"></show-address> <show-address :address="thirdparty.address" :isMultiline="false"></show-address>
</li> </li>
<!-- PHONENUMBER --> <li v-if="thirdparty.telephone">
<!-- todo: change href for phonenumbers -->
<li>
<i class="fa fa-li fa-mobile"></i> <i class="fa fa-li fa-mobile"></i>
<a v-if="thirdparty.telephone" :href="'tel: ' + thirdparty.telephone">{{ thirdparty.telephone }}</a> <a :href="'tel: ' + thirdparty.telephone">{{ thirdparty.telephone }}</a>
<span v-else class="chill-no-data-statement">{{ $t('renderbox.no_information') }}</span>
</li> </li>
<li v-if="thirdparty.type == 'thirdparty'"> <li v-if="thirdparty.email">
<i class="fa fa-li fa-envelope-o"></i> <i class="fa fa-li fa-envelope-o"></i>
<a v-if="thirdparty.email" :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a> <a :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
<span v-else class="chill-no-data-statement">{{ $t('renderbox.no_information') }}</span>
</li> </li>
</ul>
<!-- END ADDRESS AND PHONE NUMBER -->
<!-- ACTION BUTTONS --> </ul>
<slot name="record-actions"></slot> <slot name="record-actions"></slot>
<!-- END ACTIONS -->
</div> </div>
<!-- END CONTACT INFO AND ACTIONS -->
</div> </div>
</section> </section>
</div> </div>
</template> </template>
@ -111,18 +86,11 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.lastname{
&:before{
content: " "
}
}
.name{ .name{
&:before{ &:before{
content: " " content: " "
} }
} }
</style> </style>