thirdparty: improve render for children/parent dependencies in renderbox vue/twig

This commit is contained in:
Mathieu Jaumotte 2021-12-09 14:35:22 +01:00
parent 5b321dfb81
commit 5fdbba9ef5
3 changed files with 87 additions and 49 deletions

View File

@ -10,9 +10,9 @@
{{ $t('renderbox.type.thirdparty')}} {{ $t('renderbox.type.thirdparty')}}
</template> </template>
<i class="fa fa-user fa-fw" v-if="entity.kind === 'child'"></i> <i class="fa fa-fw fa-user" v-if="entity.kind === 'child'"></i>
<i class="fa fa-hospital-o fa-fw" v-else-if="entity.kind === 'company'"></i> <i class="fa fa-fw fa-hospital-o" v-else-if="entity.kind === 'company'"></i>
<i class="fa fa-user-md fa-fw" v-else></i> <i class="fa fa-fw fa-user-md" v-else></i>
<template v-if="options.displayLong === true"> <template v-if="options.displayLong === true">
<span v-if="entity.kind === 'child'">{{ $t('tparty.child')}}</span> <span v-if="entity.kind === 'child'">{{ $t('tparty.child')}}</span>

View File

@ -22,12 +22,6 @@
</badge-entity> </badge-entity>
</div> </div>
<div v-if="hasParent">
<span class="name tparty-parent">
> {{ thirdparty.parent.text }}
</span>
</div>
<p v-if="this.options.addInfo === true" class="moreinfo"> <p v-if="this.options.addInfo === true" class="moreinfo">
</p> </p>
</div> </div>
@ -56,21 +50,47 @@
</li> </li>
</ul> </ul>
</template> </template>
</confidential> </confidential>
<ul v-else class="list-content fa-ul"> <ul v-else class="list-content fa-ul">
<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>
<address-render-box :address="thirdparty.address" :isMultiline="isMultiline"></address-render-box> <address-render-box :address="thirdparty.address" :isMultiline="isMultiline"></address-render-box>
</li> </li>
<li v-if="thirdparty.phonenumber"> <li v-if="thirdparty.phonenumber">
<i class="fa fa-li fa-mobile"></i> <i class="fa fa-li fa-mobile"></i>
<a :href="'tel: ' + thirdparty.phonenumber">{{ thirdparty.phonenumber }}</a> <a :href="'tel: ' + thirdparty.phonenumber">{{ thirdparty.phonenumber }}</a>
</li> </li>
<li v-if="thirdparty.email"> <li v-if="thirdparty.email">
<i class="fa fa-li fa-envelope-o"></i> <i class="fa fa-li fa-envelope-o"></i>
<a :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a> <a :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
</li> </li>
</ul> </ul>
<ul class="list-content fa-ul">
<li v-if="hasParent">
<i class="fa fa-li fa-hand-o-right"></i>
<b class="me-2">{{ $t('child_of') }}</b>
<span class="chill-entity badge-thirdparty">{{ thirdparty.parent.text }}</span>
<!-- console: [Vue warn]: Failed to resolve component: on-the-fly ...
<on-the-fly type="thirdparty" action="show" :id="thirdparty.parent.id"
:buttonText="thirdparty.parent.text" :displayBadge="'true' === 'true'"
></on-the-fly>
-->
</li>
<!-- TODO hasChildren
<li v-if="hasChildren">
<i class="fa fa-li fa-hand-o-right"></i>
<b class="me-2">{{ $t('children') }}</b>
<span v-for="child in thirdparty.activeChildren">
<on-the-fly type="thirdparty"
action="show"
:id="child.id"
:buttonText="child.text"
displayBadge="'true' === 'true'">
</on-the-fly>
</span>
</li>
-->
</ul>
</div> </div>
</div> </div>
</div> </div>
@ -86,13 +106,22 @@ import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRe
import {dateToISO} from 'ChillMainAssets/chill/js/date.js'; import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue'; import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';
import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue'; import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
//import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
export default { export default {
name: "ThirdPartyRenderBox", name: "ThirdPartyRenderBox",
components: { components: {
AddressRenderBox, AddressRenderBox,
Confidential, Confidential,
BadgeEntity BadgeEntity,
//OnTheFly
},
i18n: {
messages: {
fr: {
children: "Personnes de contact: ",
child_of: "Contact de: ",
}}
}, },
props: ['thirdparty', 'options'], props: ['thirdparty', 'options'],
computed: { computed: {
@ -104,8 +133,13 @@ export default {
} }
}, },
hasParent() { hasParent() {
return !(this.$props.thirdparty.parent === null || this.$props.thirdparty.parent === undefined); return !(this.thirdparty.parent === null || this.thirdparty.parent === undefined);
} },
/* TODO need backend normalizer to serve children without circular reference
hasChildren() {
//console.log(this.thirdparty.activeChildren.length > 0)
return false
} */
} }
} }
</script> </script>

View File

@ -84,18 +84,15 @@
{{ _self.label(thirdparty, options) }} {{ _self.label(thirdparty, options) }}
{% if thirdparty.kind == 'child' %} {% if thirdparty.kind == 'child' %}
<span class="badge rounded-pill bg-thirdparty"> <span class="badge rounded-pill bg-thirdparty">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-fw fa-user"></i>{{ 'thirdparty.child'|trans }}
{{ 'thirdparty.child'|trans }}
</span> </span>
{% elseif thirdparty.kind == 'company' %} {% elseif thirdparty.kind == 'company' %}
<span class="badge rounded-pill bg-thirdparty"> <span class="badge rounded-pill bg-thirdparty">
<i class="fa fa-hospital-o fa-fw"></i> <i class="fa fa-fw fa-hospital-o"></i>{{ 'thirdparty.company'|trans }}
{{ 'thirdparty.company'|trans }}
</span> </span>
{% else %} {% else %}
<span class="badge rounded-pill bg-thirdparty"> <span class="badge rounded-pill bg-thirdparty">
<i class="fa fa-user-md fa-fw"></i> <i class="fa fa-fw fa-user-md"></i>{{ 'thirdparty.contact'|trans }}
{{ 'thirdparty.contact'|trans }}
</span> </span>
{% endif %} {% endif %}
</div> </div>
@ -175,26 +172,33 @@
</div> </div>
{% if options['showContacts'] and thirdparty.activeChildren|length > 0 %} {% if options['showContacts'] and thirdparty.activeChildren|length > 0 %}
<div class="item-row"> <div class="item-row">
{{ 'thirdparty.Children'|trans }}&nbsp;: <div class="item-col"></div>
{% for c in thirdparty.activeChildren %} <div class="item-col">
{% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with { <h5 class="me-2">{{ 'thirdparty.Children'|trans ~ ': ' }}</h5>
targetEntity: { name: 'thirdparty', id: c.id }, {% for c in thirdparty.activeChildren %}
action: 'show', {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
displayBadge: true, targetEntity: { name: 'thirdparty', id: c.id },
buttonText: c|chill_entity_render_string action: 'show',
} %} displayBadge: true,
{% endfor %} buttonText: c|chill_entity_render_string
} %}
{% endfor %}
</div>
</div> </div>
{% endif %} {% endif %}
{% if options['showParent'] and thirdparty.isChild %} {% if options['showParent'] and thirdparty.isChild %}
<div class="item-row"> <div class="item-row">
{{ 'thirdparty.Contact of'|trans }}&nbsp;: <div class="item-col"></div>
{% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with { <div class="item-col">
targetEntity: { name: 'thirdparty', id: thirdparty.parent.id }, <h5 class="me-2">{{ 'thirdparty.Contact of'|trans ~ ': ' }}</h5>
action: 'show', {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
displayBadge: true, targetEntity: { name: 'thirdparty', id: thirdparty.parent.id },
buttonText: thirdparty.parent|chill_entity_render_string action: 'show',
} %} displayBadge: true,
buttonText: thirdparty.parent|chill_entity_render_string
} %}
</div>
</div> </div>
{% endif %} {% endif %}