mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-08-27 01:53:49 +00:00
eslint fixes
This commit is contained in:
@@ -1,158 +1,131 @@
|
||||
<template>
|
||||
<div class="item-bloc col">
|
||||
<section class="chill-entity entity-thirdparty">
|
||||
<div class="item-row entity-bloc">
|
||||
<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>
|
||||
<div class="item-bloc col">
|
||||
<section class="chill-entity entity-thirdparty">
|
||||
<div class="item-row entity-bloc">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<badge-entity
|
||||
v-if="options.addEntity === true"
|
||||
:entity="thirdparty"
|
||||
:options="{
|
||||
displayLong: options.entityDisplayLong,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<badge-entity
|
||||
v-if="options.addEntity === true"
|
||||
:entity="thirdparty"
|
||||
:options="{
|
||||
displayLong: options.entityDisplayLong,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p
|
||||
v-if="this.options.addInfo === true"
|
||||
class="moreinfo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="this.options.addInfo === true" class="moreinfo" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-col">
|
||||
<div class="float-button bottom">
|
||||
<div class="box">
|
||||
<div class="action">
|
||||
<slot name="record-actions" />
|
||||
</div>
|
||||
<ul class="list-content fa-ul">
|
||||
<li v-if="getProfession.length > 0">
|
||||
<i class="fa fa-li fa-id-card" />
|
||||
<p>
|
||||
<span>{{ getProfession[0] }}</span>
|
||||
</p>
|
||||
</li>
|
||||
<li v-if="hasParent">
|
||||
<i class="fa fa-li fa-hand-o-right" />
|
||||
<b class="me-2">{{ $t("child_of") }}</b>
|
||||
<on-the-fly
|
||||
:type="thirdparty.parent.type"
|
||||
:id="thirdparty.parent.id"
|
||||
:button-text="thirdparty.parent.text"
|
||||
:display-badge="'true' === 'true'"
|
||||
action="show"
|
||||
/>
|
||||
</li>
|
||||
<!-- TODO hasChildren
|
||||
<div class="item-col">
|
||||
<div class="float-button bottom">
|
||||
<div class="box">
|
||||
<div class="action">
|
||||
<slot name="record-actions" />
|
||||
</div>
|
||||
<ul class="list-content fa-ul">
|
||||
<li v-if="getProfession.length > 0">
|
||||
<i class="fa fa-li fa-id-card" />
|
||||
<p>
|
||||
<span>{{ getProfession[0] }}</span>
|
||||
</p>
|
||||
</li>
|
||||
<li v-if="hasParent">
|
||||
<i class="fa fa-li fa-hand-o-right" />
|
||||
<b class="me-2">{{ $t("child_of") }}</b>
|
||||
<on-the-fly
|
||||
:type="thirdparty.parent.type"
|
||||
:id="thirdparty.parent.id"
|
||||
:button-text="thirdparty.parent.text"
|
||||
:display-badge="'true' === 'true'"
|
||||
action="show"
|
||||
/>
|
||||
</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 :position-btn-far="false">
|
||||
<template #confidential-content>
|
||||
<ul class="list-content fa-ul">
|
||||
<li v-if="thirdparty.address">
|
||||
<i
|
||||
class="fa fa-li fa-map-marker"
|
||||
/>
|
||||
<address-render-box
|
||||
:address="
|
||||
thirdparty.address
|
||||
"
|
||||
:is-multiline="isMultiline"
|
||||
/>
|
||||
</li>
|
||||
<li v-if="thirdparty.telephone">
|
||||
<i class="fa fa-li fa-mobile" />
|
||||
<a
|
||||
:href="
|
||||
'tel: ' +
|
||||
thirdparty.telephone
|
||||
"
|
||||
>{{
|
||||
thirdparty.telephone
|
||||
}}</a
|
||||
>
|
||||
</li>
|
||||
<li v-if="thirdparty.telephone2">
|
||||
<i class="fa fa-li fa-mobile" />
|
||||
<a
|
||||
:href="
|
||||
'tel: ' +
|
||||
thirdparty.telephone2
|
||||
"
|
||||
>{{
|
||||
thirdparty.telephone2
|
||||
}}</a
|
||||
>
|
||||
</li>
|
||||
<li v-if="thirdparty.email">
|
||||
<i
|
||||
class="fa fa-li fa-envelope-o"
|
||||
/>
|
||||
<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">
|
||||
<i class="fa fa-li fa-map-marker" />
|
||||
<address-render-box
|
||||
:address="thirdparty.address"
|
||||
:is-multiline="isMultiline"
|
||||
/>
|
||||
</li>
|
||||
<li v-if="thirdparty.telephone">
|
||||
<i class="fa fa-li fa-mobile" />
|
||||
<a :href="'tel: ' + thirdparty.telephone">{{
|
||||
thirdparty.telephone
|
||||
}}</a>
|
||||
</li>
|
||||
<li v-if="thirdparty.telephone2">
|
||||
<i class="fa fa-li fa-mobile" />
|
||||
<a :href="'tel: ' + thirdparty.telephone2"
|
||||
>{{ thirdparty.telephone2 }}
|
||||
</a>
|
||||
</li>
|
||||
<li v-if="thirdparty.email">
|
||||
<i class="fa fa-li fa-envelope-o" />
|
||||
<a :href="'mailto: ' + thirdparty.email">{{
|
||||
thirdparty.email
|
||||
}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
<div v-if="thirdparty.contactDataAnonymous">
|
||||
<confidential :position-btn-far="false">
|
||||
<template #confidential-content>
|
||||
<ul class="list-content fa-ul">
|
||||
<li v-if="thirdparty.address">
|
||||
<i class="fa fa-li fa-map-marker" />
|
||||
<address-render-box
|
||||
:address="thirdparty.address"
|
||||
:is-multiline="isMultiline"
|
||||
/>
|
||||
</li>
|
||||
<li v-if="thirdparty.telephone">
|
||||
<i class="fa fa-li fa-mobile" />
|
||||
<a :href="'tel: ' + thirdparty.telephone">{{
|
||||
thirdparty.telephone
|
||||
}}</a>
|
||||
</li>
|
||||
<li v-if="thirdparty.telephone2">
|
||||
<i class="fa fa-li fa-mobile" />
|
||||
<a :href="'tel: ' + thirdparty.telephone2">{{
|
||||
thirdparty.telephone2
|
||||
}}</a>
|
||||
</li>
|
||||
<li v-if="thirdparty.email">
|
||||
<i class="fa fa-li fa-envelope-o" />
|
||||
<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">
|
||||
<i class="fa fa-li fa-map-marker" />
|
||||
<address-render-box
|
||||
:address="thirdparty.address"
|
||||
:is-multiline="isMultiline"
|
||||
/>
|
||||
</li>
|
||||
<li v-if="thirdparty.telephone">
|
||||
<i class="fa fa-li fa-mobile" />
|
||||
<a :href="'tel: ' + thirdparty.telephone">{{
|
||||
thirdparty.telephone
|
||||
}}</a>
|
||||
</li>
|
||||
<li v-if="thirdparty.telephone2">
|
||||
<i class="fa fa-li fa-mobile" />
|
||||
<a :href="'tel: ' + thirdparty.telephone2"
|
||||
>{{ thirdparty.telephone2 }}
|
||||
</a>
|
||||
</li>
|
||||
<li v-if="thirdparty.email">
|
||||
<i class="fa fa-li fa-envelope-o" />
|
||||
<a :href="'mailto: ' + thirdparty.email">{{
|
||||
thirdparty.email
|
||||
}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<slot name="end-bloc" />
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<slot name="end-bloc" />
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -161,83 +134,80 @@ import Confidential from "ChillMainAssets/vuejs/_components/Confidential.vue";
|
||||
import BadgeEntity from "ChillMainAssets/vuejs/_components/BadgeEntity.vue";
|
||||
|
||||
export default {
|
||||
name: "ThirdPartyRenderBox",
|
||||
components: {
|
||||
AddressRenderBox,
|
||||
Confidential,
|
||||
BadgeEntity,
|
||||
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: ",
|
||||
},
|
||||
},
|
||||
// To avoid components recursively invoking eachother resolve OnTheFly component here
|
||||
beforeCreate() {
|
||||
this.$options.components.OnTheFly =
|
||||
require("ChillMainAssets/vuejs/OnTheFly/components/OnTheFly").default;
|
||||
},
|
||||
props: ["thirdparty", "options"],
|
||||
computed: {
|
||||
isMultiline: function () {
|
||||
if (this.options.isMultiline) {
|
||||
return this.options.isMultiline;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
i18n: {
|
||||
messages: {
|
||||
fr: {
|
||||
children: "Personnes de contact: ",
|
||||
child_of: "Contact de: ",
|
||||
},
|
||||
},
|
||||
hasParent() {
|
||||
return !(
|
||||
this.thirdparty.parent === null || this.thirdparty.parent === undefined
|
||||
);
|
||||
},
|
||||
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;
|
||||
}
|
||||
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,
|
||||
);
|
||||
}
|
||||
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
|
||||
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: " ";
|
||||
}
|
||||
&:before {
|
||||
content: " ";
|
||||
}
|
||||
|
||||
&.tparty-parent {
|
||||
font-weight: bold;
|
||||
font-variant: all-small-caps;
|
||||
}
|
||||
&.tparty-parent {
|
||||
font-weight: bold;
|
||||
font-variant: all-small-caps;
|
||||
}
|
||||
}
|
||||
|
||||
.list-professions {
|
||||
&::after {
|
||||
content: " | ";
|
||||
}
|
||||
&::after {
|
||||
content: " | ";
|
||||
}
|
||||
|
||||
&:last-child::after {
|
||||
content: "";
|
||||
}
|
||||
&:last-child::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,28 +1,28 @@
|
||||
<template>
|
||||
<span v-if="isCut">{{ cutText }}</span>
|
||||
<span v-else class="thirdparty-text">
|
||||
<span class="firstname">{{ thirdparty.text }}</span>
|
||||
</span>
|
||||
<span v-if="isCut">{{ cutText }}</span>
|
||||
<span v-else class="thirdparty-text">
|
||||
<span class="firstname">{{ thirdparty.text }}</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ThirdPartyText",
|
||||
props: {
|
||||
thirdparty: {
|
||||
required: true,
|
||||
},
|
||||
isCut: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
name: "ThirdPartyText",
|
||||
props: {
|
||||
thirdparty: {
|
||||
required: true,
|
||||
},
|
||||
computed: {
|
||||
cutText: function () {
|
||||
let more = this.thirdparty.text.length > 15 ? "…" : "";
|
||||
return this.thirdparty.text.slice(0, 15) + more;
|
||||
},
|
||||
isCut: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
cutText: function () {
|
||||
let more = this.thirdparty.text.length > 15 ? "…" : "";
|
||||
return this.thirdparty.text.slice(0, 15) + more;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,266 +1,252 @@
|
||||
<template>
|
||||
<div v-if="action === 'show'">
|
||||
<div class="flex-table">
|
||||
<third-party-render-box
|
||||
:thirdparty="thirdparty"
|
||||
:options="{
|
||||
addInfo: true,
|
||||
addEntity: true,
|
||||
entityDisplayLong: true,
|
||||
addAltNames: true,
|
||||
addId: true,
|
||||
addLink: false,
|
||||
addAge: false,
|
||||
hLevel: 3,
|
||||
addCenter: true,
|
||||
addNoData: true,
|
||||
isMultiline: true,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="action === 'show'">
|
||||
<div class="flex-table">
|
||||
<third-party-render-box
|
||||
:thirdparty="thirdparty"
|
||||
:options="{
|
||||
addInfo: true,
|
||||
addEntity: true,
|
||||
entityDisplayLong: true,
|
||||
addAltNames: true,
|
||||
addId: true,
|
||||
addLink: false,
|
||||
addAge: false,
|
||||
hLevel: 3,
|
||||
addCenter: true,
|
||||
addNoData: true,
|
||||
isMultiline: true,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="
|
||||
action === 'edit' || action === 'create' || action === 'addContact'
|
||||
"
|
||||
>
|
||||
<div v-if="parent">
|
||||
<div class="parent-info">
|
||||
<i class="fa fa-li fa-hand-o-right" />
|
||||
<b class="me-2">{{ trans(THIRDPARTY_MESSAGES_CHILD_OF) }}</b>
|
||||
<span class="chill-entity badge-thirdparty">{{
|
||||
parent.text
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-floating mb-3" v-else-if="kind.value !== 'child'">
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input mt-0"
|
||||
type="radio"
|
||||
v-model="kind.value"
|
||||
value="company"
|
||||
id="tpartyKindInstitution"
|
||||
/>
|
||||
<label for="tpartyKindInstitution" class="required">
|
||||
<badge-entity
|
||||
:entity="{ type: 'thirdparty', kind: 'company' }"
|
||||
:options="{ displayLong: true }"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input mt-0"
|
||||
type="radio"
|
||||
v-model="kind.value"
|
||||
value="contact"
|
||||
id="tpartyKindContact"
|
||||
/>
|
||||
<label for="tpartyKindContact" class="required">
|
||||
<badge-entity
|
||||
:entity="{ type: 'thirdparty', kind: 'contact' }"
|
||||
:options="{ displayLong: true }"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p>Contact de :</p>
|
||||
<third-party-render-box
|
||||
:thirdparty="thirdparty.parent"
|
||||
:options="{
|
||||
addInfo: true,
|
||||
addEntity: false,
|
||||
addAltNames: true,
|
||||
addId: false,
|
||||
addLink: false,
|
||||
addAge: false,
|
||||
hLevel: 4,
|
||||
addCenter: false,
|
||||
addNoData: true,
|
||||
isMultiline: false,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="thirdparty.kind === 'child' || thirdparty.kind === 'contact'"
|
||||
>
|
||||
<div class="child-info">
|
||||
<div class="input-group mb-3 input-section">
|
||||
<select
|
||||
class="form-select form-select-lg"
|
||||
id="civility"
|
||||
v-model="thirdparty.civility"
|
||||
>
|
||||
<option selected disabled :value="null">
|
||||
{{ trans(THIRDPARTY_MESSAGES_THIRDPARTY_CIVILITY) }}
|
||||
</option>
|
||||
<option
|
||||
v-for="civility in civilities"
|
||||
:key="civility.id"
|
||||
:value="civility"
|
||||
>
|
||||
{{ localizeString(civility.name) }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="input-group mb-3 input-section">
|
||||
<input
|
||||
class="form-control form-control-lg"
|
||||
v-model="thirdparty.profession"
|
||||
:placeholder="
|
||||
trans(THIRDPARTY_MESSAGES_THIRDPARTY_PROFESSION)
|
||||
"
|
||||
:aria-label="
|
||||
trans(THIRDPARTY_MESSAGES_THIRDPARTY_PROFESSION)
|
||||
"
|
||||
aria-describedby="profession"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="child-info">
|
||||
<div class="input-section">
|
||||
<div class="form-floating mb-3">
|
||||
<input
|
||||
class="form-control form-control-lg"
|
||||
id="firstname"
|
||||
v-model="thirdparty.firstname"
|
||||
:placeholder="
|
||||
trans(THIRDPARTY_MESSAGES_THIRDPARTY_FIRSTNAME)
|
||||
"
|
||||
/>
|
||||
<label for="firstname">{{
|
||||
trans(THIRDPARTY_MESSAGES_THIRDPARTY_FIRSTNAME)
|
||||
}}</label>
|
||||
</div>
|
||||
<div v-if="queryItems">
|
||||
<ul class="list-suggest add-items inline">
|
||||
<li
|
||||
v-for="(qi, i) in queryItems"
|
||||
:key="i"
|
||||
@click="addQueryItem('firstName', qi)"
|
||||
>
|
||||
<span class="person-text">{{ qi }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-section">
|
||||
<div class="form-floating mb-3">
|
||||
<input
|
||||
class="form-control form-control-lg"
|
||||
id="name"
|
||||
v-model="thirdparty.name"
|
||||
:placeholder="
|
||||
trans(THIRDPARTY_MESSAGES_THIRDPARTY_LASTNAME)
|
||||
"
|
||||
/>
|
||||
<label for="name">{{
|
||||
trans(THIRDPARTY_MESSAGES_THIRDPARTY_LASTNAME)
|
||||
}}</label>
|
||||
</div>
|
||||
<div v-if="queryItems">
|
||||
<ul class="list-suggest add-items inline">
|
||||
<li
|
||||
v-for="(qi, i) in queryItems"
|
||||
:key="i"
|
||||
@click="addQueryItem('name', qi)"
|
||||
>
|
||||
<span class="person-text">{{ qi }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="thirdparty.kind === 'company'">
|
||||
<div class="form-floating mb-3">
|
||||
<input
|
||||
class="form-control form-control-lg"
|
||||
id="name"
|
||||
v-model="thirdparty.name"
|
||||
:placeholder="trans(THIRDPARTY_MESSAGES_THIRDPARTY_NAME)"
|
||||
/>
|
||||
<label for="name">{{
|
||||
trans(THIRDPARTY_MESSAGES_THIRDPARTY_NAME)
|
||||
}}</label>
|
||||
</div>
|
||||
<div v-if="query">
|
||||
<ul class="list-suggest add-items inline">
|
||||
<li @click="addQuery(query)">
|
||||
<span class="person-text">{{ query }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="thirdparty.kind !== 'child'">
|
||||
<AddAddress
|
||||
key="thirdparty"
|
||||
:context="context"
|
||||
:options="addAddress.options"
|
||||
:address-changed-callback="submitAddress"
|
||||
ref="addAddress"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="email"
|
||||
><i class="fa fa-fw fa-envelope"
|
||||
/></span>
|
||||
<input
|
||||
class="form-control form-control-lg"
|
||||
v-model="thirdparty.email"
|
||||
:placeholder="trans(THIRDPARTY_MESSAGES_THIRDPARTY_EMAIL)"
|
||||
:aria-label="trans(THIRDPARTY_MESSAGES_THIRDPARTY_EMAIL)"
|
||||
aria-describedby="email"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="phonenumber"
|
||||
><i class="fa fa-fw fa-phone"
|
||||
/></span>
|
||||
<input
|
||||
class="form-control form-control-lg"
|
||||
v-model="thirdparty.telephone"
|
||||
:placeholder="trans(THIRDPARTY_MESSAGES_THIRDPARTY_PHONENUMBER)"
|
||||
:aria-label="trans(THIRDPARTY_MESSAGES_THIRDPARTY_PHONENUMBER)"
|
||||
aria-describedby="phonenumber"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="phonenumber2"
|
||||
><i class="fa fa-fw fa-phone"
|
||||
/></span>
|
||||
<input
|
||||
class="form-control form-control-lg"
|
||||
v-model="thirdparty.telephone2"
|
||||
:placeholder="
|
||||
trans(THIRDPARTY_MESSAGES_THIRDPARTY_PHONENUMBER2)
|
||||
"
|
||||
:aria-label="trans(THIRDPARTY_MESSAGES_THIRDPARTY_PHONENUMBER2)"
|
||||
aria-describedby="phonenumber2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="parent">
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="comment"
|
||||
><i class="fa fa-fw fa-pencil"
|
||||
/></span>
|
||||
<textarea
|
||||
class="form-control form-control-lg"
|
||||
:placeholder="trans(THIRDPARTY_MESSAGES_THIRDPARTY_COMMENT)"
|
||||
v-model="thirdparty.comment"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="
|
||||
action === 'edit' || action === 'create' || action === 'addContact'
|
||||
"
|
||||
>
|
||||
<div v-if="parent">
|
||||
<div class="parent-info">
|
||||
<i class="fa fa-li fa-hand-o-right" />
|
||||
<b class="me-2">{{ trans(THIRDPARTY_MESSAGES_CHILD_OF) }}</b>
|
||||
<span class="chill-entity badge-thirdparty">{{ parent.text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-floating mb-3" v-else-if="kind.value !== 'child'">
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input mt-0"
|
||||
type="radio"
|
||||
v-model="kind.value"
|
||||
value="company"
|
||||
id="tpartyKindInstitution"
|
||||
/>
|
||||
<label for="tpartyKindInstitution" class="required">
|
||||
<badge-entity
|
||||
:entity="{ type: 'thirdparty', kind: 'company' }"
|
||||
:options="{ displayLong: true }"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input mt-0"
|
||||
type="radio"
|
||||
v-model="kind.value"
|
||||
value="contact"
|
||||
id="tpartyKindContact"
|
||||
/>
|
||||
<label for="tpartyKindContact" class="required">
|
||||
<badge-entity
|
||||
:entity="{ type: 'thirdparty', kind: 'contact' }"
|
||||
:options="{ displayLong: true }"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p>Contact de :</p>
|
||||
<third-party-render-box
|
||||
:thirdparty="thirdparty.parent"
|
||||
:options="{
|
||||
addInfo: true,
|
||||
addEntity: false,
|
||||
addAltNames: true,
|
||||
addId: false,
|
||||
addLink: false,
|
||||
addAge: false,
|
||||
hLevel: 4,
|
||||
addCenter: false,
|
||||
addNoData: true,
|
||||
isMultiline: false,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="thirdparty.kind === 'child' || thirdparty.kind === 'contact'">
|
||||
<div class="child-info">
|
||||
<div class="input-group mb-3 input-section">
|
||||
<select
|
||||
class="form-select form-select-lg"
|
||||
id="civility"
|
||||
v-model="thirdparty.civility"
|
||||
>
|
||||
<option selected disabled :value="null">
|
||||
{{ trans(THIRDPARTY_MESSAGES_THIRDPARTY_CIVILITY) }}
|
||||
</option>
|
||||
<option
|
||||
v-for="civility in civilities"
|
||||
:key="civility.id"
|
||||
:value="civility"
|
||||
>
|
||||
{{ localizeString(civility.name) }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="input-group mb-3 input-section">
|
||||
<input
|
||||
class="form-control form-control-lg"
|
||||
v-model="thirdparty.profession"
|
||||
:placeholder="trans(THIRDPARTY_MESSAGES_THIRDPARTY_PROFESSION)"
|
||||
:aria-label="trans(THIRDPARTY_MESSAGES_THIRDPARTY_PROFESSION)"
|
||||
aria-describedby="profession"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="child-info">
|
||||
<div class="input-section">
|
||||
<div class="form-floating mb-3">
|
||||
<input
|
||||
class="form-control form-control-lg"
|
||||
id="firstname"
|
||||
v-model="thirdparty.firstname"
|
||||
:placeholder="trans(THIRDPARTY_MESSAGES_THIRDPARTY_FIRSTNAME)"
|
||||
/>
|
||||
<label for="firstname">{{
|
||||
trans(THIRDPARTY_MESSAGES_THIRDPARTY_FIRSTNAME)
|
||||
}}</label>
|
||||
</div>
|
||||
<div v-if="queryItems">
|
||||
<ul class="list-suggest add-items inline">
|
||||
<li
|
||||
v-for="(qi, i) in queryItems"
|
||||
:key="i"
|
||||
@click="addQueryItem('firstName', qi)"
|
||||
>
|
||||
<span class="person-text">{{ qi }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-section">
|
||||
<div class="form-floating mb-3">
|
||||
<input
|
||||
class="form-control form-control-lg"
|
||||
id="name"
|
||||
v-model="thirdparty.name"
|
||||
:placeholder="trans(THIRDPARTY_MESSAGES_THIRDPARTY_LASTNAME)"
|
||||
/>
|
||||
<label for="name">{{
|
||||
trans(THIRDPARTY_MESSAGES_THIRDPARTY_LASTNAME)
|
||||
}}</label>
|
||||
</div>
|
||||
<div v-if="queryItems">
|
||||
<ul class="list-suggest add-items inline">
|
||||
<li
|
||||
v-for="(qi, i) in queryItems"
|
||||
:key="i"
|
||||
@click="addQueryItem('name', qi)"
|
||||
>
|
||||
<span class="person-text">{{ qi }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="thirdparty.kind === 'company'">
|
||||
<div class="form-floating mb-3">
|
||||
<input
|
||||
class="form-control form-control-lg"
|
||||
id="name"
|
||||
v-model="thirdparty.name"
|
||||
:placeholder="trans(THIRDPARTY_MESSAGES_THIRDPARTY_NAME)"
|
||||
/>
|
||||
<label for="name">{{
|
||||
trans(THIRDPARTY_MESSAGES_THIRDPARTY_NAME)
|
||||
}}</label>
|
||||
</div>
|
||||
<div v-if="query">
|
||||
<ul class="list-suggest add-items inline">
|
||||
<li @click="addQuery(query)">
|
||||
<span class="person-text">{{ query }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="thirdparty.kind !== 'child'">
|
||||
<AddAddress
|
||||
key="thirdparty"
|
||||
:context="context"
|
||||
:options="addAddress.options"
|
||||
:address-changed-callback="submitAddress"
|
||||
ref="addAddress"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="email"
|
||||
><i class="fa fa-fw fa-envelope"
|
||||
/></span>
|
||||
<input
|
||||
class="form-control form-control-lg"
|
||||
v-model="thirdparty.email"
|
||||
:placeholder="trans(THIRDPARTY_MESSAGES_THIRDPARTY_EMAIL)"
|
||||
:aria-label="trans(THIRDPARTY_MESSAGES_THIRDPARTY_EMAIL)"
|
||||
aria-describedby="email"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="phonenumber"
|
||||
><i class="fa fa-fw fa-phone"
|
||||
/></span>
|
||||
<input
|
||||
class="form-control form-control-lg"
|
||||
v-model="thirdparty.telephone"
|
||||
:placeholder="trans(THIRDPARTY_MESSAGES_THIRDPARTY_PHONENUMBER)"
|
||||
:aria-label="trans(THIRDPARTY_MESSAGES_THIRDPARTY_PHONENUMBER)"
|
||||
aria-describedby="phonenumber"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="phonenumber2"
|
||||
><i class="fa fa-fw fa-phone"
|
||||
/></span>
|
||||
<input
|
||||
class="form-control form-control-lg"
|
||||
v-model="thirdparty.telephone2"
|
||||
:placeholder="trans(THIRDPARTY_MESSAGES_THIRDPARTY_PHONENUMBER2)"
|
||||
:aria-label="trans(THIRDPARTY_MESSAGES_THIRDPARTY_PHONENUMBER2)"
|
||||
aria-describedby="phonenumber2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="parent">
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="comment"
|
||||
><i class="fa fa-fw fa-pencil"
|
||||
/></span>
|
||||
<textarea
|
||||
class="form-control form-control-lg"
|
||||
:placeholder="trans(THIRDPARTY_MESSAGES_THIRDPARTY_COMMENT)"
|
||||
v-model="thirdparty.comment"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -272,17 +258,17 @@ import BadgeEntity from "ChillMainAssets/vuejs/_components/BadgeEntity.vue";
|
||||
import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
|
||||
import { localizeString as _localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
|
||||
import {
|
||||
trans,
|
||||
THIRDPARTY_MESSAGES_THIRDPARTY_FIRSTNAME,
|
||||
THIRDPARTY_MESSAGES_THIRDPARTY_LASTNAME,
|
||||
THIRDPARTY_MESSAGES_THIRDPARTY_NAME,
|
||||
THIRDPARTY_MESSAGES_THIRDPARTY_EMAIL,
|
||||
THIRDPARTY_MESSAGES_THIRDPARTY_PHONENUMBER,
|
||||
THIRDPARTY_MESSAGES_THIRDPARTY_PHONENUMBER2,
|
||||
THIRDPARTY_MESSAGES_THIRDPARTY_COMMENT,
|
||||
THIRDPARTY_MESSAGES_THIRDPARTY_PROFESSION,
|
||||
THIRDPARTY_MESSAGES_THIRDPARTY_CIVILITY,
|
||||
THIRDPARTY_MESSAGES_CHILD_OF,
|
||||
trans,
|
||||
THIRDPARTY_MESSAGES_THIRDPARTY_FIRSTNAME,
|
||||
THIRDPARTY_MESSAGES_THIRDPARTY_LASTNAME,
|
||||
THIRDPARTY_MESSAGES_THIRDPARTY_NAME,
|
||||
THIRDPARTY_MESSAGES_THIRDPARTY_EMAIL,
|
||||
THIRDPARTY_MESSAGES_THIRDPARTY_PHONENUMBER,
|
||||
THIRDPARTY_MESSAGES_THIRDPARTY_PHONENUMBER2,
|
||||
THIRDPARTY_MESSAGES_THIRDPARTY_COMMENT,
|
||||
THIRDPARTY_MESSAGES_THIRDPARTY_PROFESSION,
|
||||
THIRDPARTY_MESSAGES_THIRDPARTY_CIVILITY,
|
||||
THIRDPARTY_MESSAGES_CHILD_OF,
|
||||
} from "translator";
|
||||
// Props
|
||||
const props = defineProps(["id", "type", "action", "query", "parent"]);
|
||||
@@ -292,175 +278,173 @@ const { proxy } = getCurrentInstance();
|
||||
|
||||
// State
|
||||
const thirdparty = reactive({
|
||||
type: "thirdparty",
|
||||
address: null,
|
||||
kind: "company",
|
||||
firstname: "",
|
||||
name: "",
|
||||
telephone: "",
|
||||
telephone2: "",
|
||||
civility: null,
|
||||
profession: "",
|
||||
comment: "",
|
||||
parent: props.parent ? props.parent : undefined,
|
||||
type: "thirdparty",
|
||||
address: null,
|
||||
kind: "company",
|
||||
firstname: "",
|
||||
name: "",
|
||||
telephone: "",
|
||||
telephone2: "",
|
||||
civility: null,
|
||||
profession: "",
|
||||
comment: "",
|
||||
parent: props.parent ? props.parent : undefined,
|
||||
});
|
||||
const civilities = ref([]);
|
||||
const addAddress = reactive({
|
||||
options: {
|
||||
openPanesInModal: true,
|
||||
onlyButton: false,
|
||||
button: {
|
||||
size: "btn-sm",
|
||||
},
|
||||
title: {
|
||||
create: "add_an_address_title",
|
||||
edit: "edit_address",
|
||||
},
|
||||
options: {
|
||||
openPanesInModal: true,
|
||||
onlyButton: false,
|
||||
button: {
|
||||
size: "btn-sm",
|
||||
},
|
||||
title: {
|
||||
create: "add_an_address_title",
|
||||
edit: "edit_address",
|
||||
},
|
||||
},
|
||||
});
|
||||
const addAddressRef = ref(null);
|
||||
|
||||
// Kind as computed ref
|
||||
const kind = computed({
|
||||
get() {
|
||||
return thirdparty.kind !== undefined ? thirdparty.kind : "company";
|
||||
},
|
||||
set(v) {
|
||||
thirdparty.kind = v;
|
||||
},
|
||||
get() {
|
||||
return thirdparty.kind !== undefined ? thirdparty.kind : "company";
|
||||
},
|
||||
set(v) {
|
||||
thirdparty.kind = v;
|
||||
},
|
||||
});
|
||||
|
||||
// Context as computed
|
||||
const context = computed(() => {
|
||||
let ctx = {
|
||||
target: {
|
||||
name: props.type,
|
||||
id: props.id,
|
||||
},
|
||||
edit: false,
|
||||
addressId: null,
|
||||
defaults: window.addaddress,
|
||||
};
|
||||
if (
|
||||
!(thirdparty.address === undefined || thirdparty.address === null) &&
|
||||
thirdparty.address.address_id !== null
|
||||
) {
|
||||
ctx.addressId = thirdparty.address.address_id;
|
||||
ctx.edit = true;
|
||||
}
|
||||
return ctx;
|
||||
let ctx = {
|
||||
target: {
|
||||
name: props.type,
|
||||
id: props.id,
|
||||
},
|
||||
edit: false,
|
||||
addressId: null,
|
||||
defaults: window.addaddress,
|
||||
};
|
||||
if (
|
||||
!(thirdparty.address === undefined || thirdparty.address === null) &&
|
||||
thirdparty.address.address_id !== null
|
||||
) {
|
||||
ctx.addressId = thirdparty.address.address_id;
|
||||
ctx.edit = true;
|
||||
}
|
||||
return ctx;
|
||||
});
|
||||
|
||||
// Query items
|
||||
const queryItems = computed(() =>
|
||||
props.query ? props.query.split(" ") : null,
|
||||
props.query ? props.query.split(" ") : null,
|
||||
);
|
||||
|
||||
// Methods
|
||||
function localizeString(str) {
|
||||
return _localizeString(str);
|
||||
return _localizeString(str);
|
||||
}
|
||||
|
||||
function loadData() {
|
||||
return getThirdparty(props.id).then(
|
||||
(tp) =>
|
||||
new Promise((resolve) => {
|
||||
Object.assign(thirdparty, tp);
|
||||
thirdparty.kind = tp.kind;
|
||||
if (props.action !== "show") {
|
||||
if (tp.address !== null && addAddressRef.value) {
|
||||
addAddressRef.value.getInitialAddress(
|
||||
tp.address.address_id,
|
||||
);
|
||||
}
|
||||
}
|
||||
resolve();
|
||||
}),
|
||||
);
|
||||
return getThirdparty(props.id).then(
|
||||
(tp) =>
|
||||
new Promise((resolve) => {
|
||||
Object.assign(thirdparty, tp);
|
||||
thirdparty.kind = tp.kind;
|
||||
if (props.action !== "show") {
|
||||
if (tp.address !== null && addAddressRef.value) {
|
||||
addAddressRef.value.getInitialAddress(tp.address.address_id);
|
||||
}
|
||||
}
|
||||
resolve();
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
function loadCivilities() {
|
||||
const url = `/api/1.0/main/civility.json`;
|
||||
return makeFetch("GET", url)
|
||||
.then((response) => {
|
||||
civilities.value = response.results;
|
||||
return Promise.resolve();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
proxy.$toast.open({ message: error.body });
|
||||
});
|
||||
const url = `/api/1.0/main/civility.json`;
|
||||
return makeFetch("GET", url)
|
||||
.then((response) => {
|
||||
civilities.value = response.results;
|
||||
return Promise.resolve();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
proxy.$toast.open({ message: error.body });
|
||||
});
|
||||
}
|
||||
|
||||
function submitAddress(payload) {
|
||||
if (typeof payload.addressId !== "undefined") {
|
||||
context.value.edit = true;
|
||||
context.value.addressId = payload.addressId;
|
||||
thirdparty.address = payload.address;
|
||||
}
|
||||
if (typeof payload.addressId !== "undefined") {
|
||||
context.value.edit = true;
|
||||
context.value.addressId = payload.addressId;
|
||||
thirdparty.address = payload.address;
|
||||
}
|
||||
}
|
||||
|
||||
function addQueryItem(field, queryItem) {
|
||||
switch (field) {
|
||||
case "name":
|
||||
if (thirdparty.name) {
|
||||
thirdparty.name += ` ${queryItem}`;
|
||||
} else {
|
||||
thirdparty.name = queryItem;
|
||||
}
|
||||
break;
|
||||
case "firstName":
|
||||
thirdparty.firstname = queryItem;
|
||||
break;
|
||||
}
|
||||
switch (field) {
|
||||
case "name":
|
||||
if (thirdparty.name) {
|
||||
thirdparty.name += ` ${queryItem}`;
|
||||
} else {
|
||||
thirdparty.name = queryItem;
|
||||
}
|
||||
break;
|
||||
case "firstName":
|
||||
thirdparty.firstname = queryItem;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function addQuery(query) {
|
||||
thirdparty.name = query;
|
||||
thirdparty.name = query;
|
||||
}
|
||||
|
||||
// Lifecycle
|
||||
onMounted(() => {
|
||||
let dependencies = [];
|
||||
dependencies.push(loadCivilities());
|
||||
if (props.action !== "create") {
|
||||
if (props.id) {
|
||||
dependencies.push(loadData());
|
||||
}
|
||||
if (props.action === "addContact") {
|
||||
thirdparty.kind = "child";
|
||||
thirdparty.address = null;
|
||||
}
|
||||
} else {
|
||||
thirdparty.kind = "company";
|
||||
let dependencies = [];
|
||||
dependencies.push(loadCivilities());
|
||||
if (props.action !== "create") {
|
||||
if (props.id) {
|
||||
dependencies.push(loadData());
|
||||
}
|
||||
if (props.action === "addContact") {
|
||||
thirdparty.kind = "child";
|
||||
thirdparty.address = null;
|
||||
}
|
||||
} else {
|
||||
thirdparty.kind = "company";
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
div.flex-table {
|
||||
div.item-bloc {
|
||||
div.item-row {
|
||||
div.item-col:last-child {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
div.item-bloc {
|
||||
div.item-row {
|
||||
div.item-col:last-child {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
dl {
|
||||
dd {
|
||||
margin-left: 1em;
|
||||
}
|
||||
dd {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
.parent-info {
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.child-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.input-section {
|
||||
width: 49%;
|
||||
}
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.input-section {
|
||||
width: 49%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user