mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-08-20 22:53:49 +00:00
Feature: [address reference] adapt vue app AccompanyingCourse to allow to open address details modal
This commit is contained in:
@@ -1,100 +1,100 @@
|
||||
<template>
|
||||
<div class="item-bloc col">
|
||||
<div class="item-bloc col">
|
||||
<section class="chill-entity entity-thirdparty">
|
||||
<div class="item-row entity-bloc">
|
||||
<div class="item-row entity-bloc">
|
||||
|
||||
<div class="item-col">
|
||||
<div class="entity-label">
|
||||
<div :class="'denomination h' + options.hLevel">
|
||||
<div class="item-col">
|
||||
<div class="entity-label">
|
||||
<div :class="'denomination h' + options.hLevel">
|
||||
|
||||
<a v-if="this.options.addLink === true" href="#">
|
||||
<span class="name">{{ thirdparty.text }}</span>
|
||||
</a>
|
||||
<span class="name" v-else>{{ thirdparty.text }}</span>
|
||||
<a v-if="this.options.addLink === true" href="#">
|
||||
<span class="name">{{ thirdparty.text }}</span>
|
||||
</a>
|
||||
<span class="name" v-else>{{ thirdparty.text }}</span>
|
||||
|
||||
<span v-if="options.addId === true" class="id-number" :title="'n° ' + thirdparty.id">
|
||||
<span v-if="options.addId === true" class="id-number" :title="'n° ' + thirdparty.id">
|
||||
{{ thirdparty.id }}
|
||||
</span>
|
||||
|
||||
<badge-entity v-if="options.addEntity === true"
|
||||
:entity="thirdparty"
|
||||
:options="{ displayLong: options.entityDisplayLong }">
|
||||
</badge-entity>
|
||||
</div>
|
||||
|
||||
<p v-if="this.options.addInfo === true" class="moreinfo">
|
||||
</p>
|
||||
<badge-entity v-if="options.addEntity === true"
|
||||
:entity="thirdparty"
|
||||
:options="{ displayLong: options.entityDisplayLong }">
|
||||
</badge-entity>
|
||||
</div>
|
||||
|
||||
<p v-if="this.options.addInfo === true" class="moreinfo">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-col">
|
||||
<div class="float-button bottom">
|
||||
<div class="float-button bottom">
|
||||
<div class="box">
|
||||
<div class="action">
|
||||
<slot name="record-actions"></slot>
|
||||
</div>
|
||||
<ul class="list-content fa-ul">
|
||||
<li v-if="getProfession.length > 0">
|
||||
<i class="fa fa-li fa-id-card"></i>
|
||||
<p><span>{{ getProfession[0] }}</span></p>
|
||||
</li>
|
||||
<li v-if="hasParent">
|
||||
<i class="fa fa-li fa-hand-o-right"></i>
|
||||
<b class="me-2">{{ $t('child_of') }}</b>
|
||||
<on-the-fly
|
||||
:type="thirdparty.parent.type"
|
||||
:id="thirdparty.parent.id"
|
||||
:buttonText="thirdparty.parent.text"
|
||||
:displayBadge="'true' === 'true'"
|
||||
action="show">
|
||||
</on-the-fly>
|
||||
</li>
|
||||
<!-- TODO hasChildren
|
||||
NB: we cannot call on-the-fly from RenderBox. See error message in previous version of this file.
|
||||
-->
|
||||
</ul>
|
||||
<div v-if="thirdparty.contactDataAnonymous">
|
||||
<confidential :positionBtnFar="false">
|
||||
<template v-slot:confidential-content>
|
||||
<ul class="list-content fa-ul">
|
||||
<li v-if="thirdparty.address">
|
||||
<i class="fa fa-li fa-map-marker"></i>
|
||||
<address-render-box :address="thirdparty.address" :isMultiline="isMultiline"></address-render-box>
|
||||
</li>
|
||||
<li v-if="thirdparty.telephone">
|
||||
<i class="fa fa-li fa-mobile"></i>
|
||||
<a :href="'tel: ' + thirdparty.telephone">{{ thirdparty.telephone }}</a>
|
||||
</li>
|
||||
<li v-if="thirdparty.email">
|
||||
<i class="fa fa-li fa-envelope-o"></i>
|
||||
<a :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</confidential>
|
||||
</div>
|
||||
<ul v-else class="list-content fa-ul">
|
||||
<li v-if="thirdparty.address">
|
||||
<div class="action">
|
||||
<slot name="record-actions"></slot>
|
||||
</div>
|
||||
<ul class="list-content fa-ul">
|
||||
<li v-if="getProfession.length > 0">
|
||||
<i class="fa fa-li fa-id-card"></i>
|
||||
<p><span>{{ getProfession[0] }}</span></p>
|
||||
</li>
|
||||
<li v-if="hasParent">
|
||||
<i class="fa fa-li fa-hand-o-right"></i>
|
||||
<b class="me-2">{{ $t('child_of') }}</b>
|
||||
<on-the-fly
|
||||
:type="thirdparty.parent.type"
|
||||
:id="thirdparty.parent.id"
|
||||
:buttonText="thirdparty.parent.text"
|
||||
:displayBadge="'true' === 'true'"
|
||||
action="show">
|
||||
</on-the-fly>
|
||||
</li>
|
||||
<!-- TODO hasChildren
|
||||
NB: we cannot call on-the-fly from RenderBox. See error message in previous version of this file.
|
||||
-->
|
||||
</ul>
|
||||
<div v-if="thirdparty.contactDataAnonymous">
|
||||
<confidential :positionBtnFar="false">
|
||||
<template v-slot:confidential-content>
|
||||
<ul class="list-content fa-ul">
|
||||
<li v-if="thirdparty.address">
|
||||
<i class="fa fa-li fa-map-marker"></i>
|
||||
<address-render-box :address="thirdparty.address" :isMultiline="isMultiline"></address-render-box>
|
||||
</li>
|
||||
<li v-if="thirdparty.telephone">
|
||||
<address-render-box :address="thirdparty.address"
|
||||
:isMultiline="isMultiline"></address-render-box>
|
||||
</li>
|
||||
<li v-if="thirdparty.telephone">
|
||||
<i class="fa fa-li fa-mobile"></i>
|
||||
<a :href="'tel: ' + thirdparty.telephone">{{ thirdparty.telephone }}</a>
|
||||
</li>
|
||||
<li v-if="thirdparty.email">
|
||||
</li>
|
||||
<li v-if="thirdparty.email">
|
||||
<i class="fa fa-li fa-envelope-o"></i>
|
||||
<a :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</confidential>
|
||||
</div>
|
||||
<ul v-else class="list-content fa-ul">
|
||||
<li v-if="thirdparty.address">
|
||||
<i class="fa fa-li fa-map-marker"></i>
|
||||
<address-render-box :address="thirdparty.address" :isMultiline="isMultiline"></address-render-box>
|
||||
</li>
|
||||
<li v-if="thirdparty.telephone">
|
||||
<i class="fa fa-li fa-mobile"></i>
|
||||
<a :href="'tel: ' + thirdparty.telephone">{{ thirdparty.telephone }}</a>
|
||||
</li>
|
||||
<li v-if="thirdparty.email">
|
||||
<i class="fa fa-li fa-envelope-o"></i>
|
||||
<a :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<slot name="end-bloc"></slot>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
@@ -104,75 +104,78 @@ import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';
|
||||
import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
|
||||
|
||||
export default {
|
||||
name: "ThirdPartyRenderBox",
|
||||
components: {
|
||||
AddressRenderBox,
|
||||
Confidential,
|
||||
BadgeEntity,
|
||||
},
|
||||
// To avoid components recursively invoking eachother resolve OnTheFly component here
|
||||
beforeCreate() {
|
||||
this.$options.components.OnTheFly = require('ChillMainAssets/vuejs/OnTheFly/components/OnTheFly').default;
|
||||
},
|
||||
i18n: {
|
||||
messages: {
|
||||
fr: {
|
||||
children: "Personnes de contact: ",
|
||||
child_of: "Contact de: ",
|
||||
}}
|
||||
},
|
||||
props: ['thirdparty', 'options'],
|
||||
computed: {
|
||||
isMultiline: function() {
|
||||
if (this.options.isMultiline){
|
||||
return this.options.isMultiline
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
hasParent() {
|
||||
return !(this.thirdparty.parent === null || this.thirdparty.parent === undefined);
|
||||
},
|
||||
getProfession() {
|
||||
let profession = []
|
||||
if (this.hasParent && this.thirdparty.profession) {
|
||||
profession.push(this.thirdparty.profession)
|
||||
return profession;
|
||||
}
|
||||
|
||||
if (!this.hasParent && this.thirdparty.category) {
|
||||
profession = this.thirdparty.category.map((category) => category.text);
|
||||
}
|
||||
|
||||
return profession;
|
||||
}
|
||||
/* TODO need backend normalizer to serve children without circular reference
|
||||
hasChildren() {
|
||||
//console.log(this.thirdparty.activeChildren.length > 0)
|
||||
return false
|
||||
} */
|
||||
name: "ThirdPartyRenderBox",
|
||||
components: {
|
||||
AddressRenderBox,
|
||||
Confidential,
|
||||
BadgeEntity,
|
||||
},
|
||||
// To avoid components recursively invoking eachother resolve OnTheFly component here
|
||||
beforeCreate() {
|
||||
this.$options.components.OnTheFly = require('ChillMainAssets/vuejs/OnTheFly/components/OnTheFly').default;
|
||||
},
|
||||
i18n: {
|
||||
messages: {
|
||||
fr: {
|
||||
children: "Personnes de contact: ",
|
||||
child_of: "Contact de: ",
|
||||
}
|
||||
}
|
||||
},
|
||||
props: ['thirdparty', 'options'],
|
||||
computed: {
|
||||
isMultiline: function () {
|
||||
if (this.options.isMultiline) {
|
||||
return this.options.isMultiline
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
hasParent() {
|
||||
return !(this.thirdparty.parent === null || this.thirdparty.parent === undefined);
|
||||
},
|
||||
getProfession() {
|
||||
let profession = []
|
||||
if (this.hasParent && this.thirdparty.profession) {
|
||||
profession.push(this.thirdparty.profession)
|
||||
return profession;
|
||||
}
|
||||
|
||||
if (!this.hasParent && this.thirdparty.category) {
|
||||
profession = this.thirdparty.category.map((category) => category.text);
|
||||
}
|
||||
|
||||
return profession;
|
||||
}
|
||||
/* TODO need backend normalizer to serve children without circular reference
|
||||
hasChildren() {
|
||||
//console.log(this.thirdparty.activeChildren.length > 0)
|
||||
return false
|
||||
} */
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.name{
|
||||
&:before{
|
||||
content: " "
|
||||
}
|
||||
&.tparty-parent {
|
||||
font-weight: bold;
|
||||
font-variant: all-small-caps;
|
||||
}
|
||||
.name {
|
||||
&:before {
|
||||
content: " "
|
||||
}
|
||||
|
||||
&.tparty-parent {
|
||||
font-weight: bold;
|
||||
font-variant: all-small-caps;
|
||||
}
|
||||
}
|
||||
|
||||
.list-professions {
|
||||
&::after {
|
||||
content: " | ";
|
||||
}
|
||||
&:last-child::after {
|
||||
content: ""
|
||||
}
|
||||
&::after {
|
||||
content: " | ";
|
||||
}
|
||||
|
||||
&:last-child::after {
|
||||
content: ""
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user