button added to add contact to personne morale (styling not correct yet) + opening of onTheFly thirdparty, but conditions and parameters not yet correct

This commit is contained in:
Julie Lenaerts 2022-01-12 17:38:24 +01:00
parent c1232037a9
commit ea66fb4c37
3 changed files with 126 additions and 94 deletions

View File

@ -1,11 +1,11 @@
<template> <template>
<a v-if="isDisplayBadge" @click="openModal"> <a v-if="isDisplayBadge" @click="openModal">
<span class="chill-entity" :class="badgeType"> <span class="chill-entity" :class="badgeType">
{{ buttonText }} {{ buttonText }}
</span> </span>
</a> </a>
<a v-else class="btn btn-sm" target="_blank" <a v-else class="btn btn-sm" target="_blank"
:class="classAction" :class="classAction"
:title="$t(titleAction)" :title="$t(titleAction)"
@click="openModal"> @click="openModal">
@ -39,6 +39,16 @@
</on-the-fly-thirdparty> </on-the-fly-thirdparty>
</template> </template>
<template v-slot:body v-else-if="action === 'addContact'">
<on-the-fly-thirdparty
:parent="parent"
type="thirdparty"
action="create"
kind="child"
ref="castThirdparty">
</on-the-fly-thirdparty>
</template>
<template v-slot:body v-else> <template v-slot:body v-else>
<on-the-fly-create <on-the-fly-create
v-bind:action="action" v-bind:action="action"
@ -78,7 +88,7 @@ export default {
OnTheFlyThirdparty, OnTheFlyThirdparty,
OnTheFlyCreate OnTheFlyCreate
}, },
props: ['type', 'id', 'action', 'buttonText', 'displayBadge'], props: ['type', 'id', 'action', 'buttonText', 'displayBadge', 'parent'],
emits: ['saveFormOnTheFly'], emits: ['saveFormOnTheFly'],
data() { data() {
return { return {
@ -98,6 +108,8 @@ export default {
return 'btn-update'; return 'btn-update';
case 'create': case 'create':
return 'btn-create'; return 'btn-create';
case 'addContact':
return 'btn-create';
} }
}, },
titleAction() { titleAction() {

View File

@ -2,12 +2,12 @@
<div class="container tpartycontainer"> <div class="container tpartycontainer">
<div class="tparty-identification"> <div class="tparty-identification">
<span class="name"> <span class="name">
{{ item.result.text }} {{ item.result.text }}
</span> </span>
<span class="location"> <span class="location">
<template v-if="hasAddress"> <template v-if="hasAddress">
{{ getAddress.text }} - {{ getAddress.text }} -
{{ getAddress.postcode.name }} {{ getAddress.postcode.name }}
</template> </template>
</span> </span>
</div> </div>
@ -19,15 +19,20 @@
</div> </div>
<div class="right_actions"> <div class="right_actions">
<badge-entity <badge-entity
:entity="item.result" :entity="item.result"
:options="{ displayLong: true }"> :options="{ displayLong: true }">
</badge-entity> </badge-entity>
<on-the-fly <on-the-fly
type="thirdparty" type="thirdparty"
v-bind:id="item.result.id" action="create"
action="show"> :parent="item.result"
</on-the-fly> ></on-the-fly>
<on-the-fly
type="thirdparty"
v-bind:id="item.result.id"
action="show">
</on-the-fly>
</div> </div>
</template> </template>
@ -48,36 +53,36 @@ const i18n = {
}; };
export default { export default {
name: 'SuggestionThirdParty', name: 'SuggestionThirdParty',
components: { components: {
OnTheFly, OnTheFly,
BadgeEntity BadgeEntity
}, },
props: ['item'], props: ['item'],
i18n, i18n,
computed: { computed: {
hasAddress() { hasAddress() {
if (this.$props.item.result.address !== null) { if (this.$props.item.result.address !== null) {
return true; return true;
} }
if (this.$props.item.result.parent !== null) { if (this.$props.item.result.parent !== null) {
this.$props.item.result.parent.address !== null; this.$props.item.result.parent.address !== null;
} }
}, },
hasParent() { hasParent() {
return this.$props.item.result.parent !== null; return this.$props.item.result.parent !== null;
}, },
getAddress() { getAddress() {
if (this.$props.item.result.address !== null) { if (this.$props.item.result.address !== null) {
return this.$props.item.result.address; return this.$props.item.result.address;
} }
if (this.$props.item.result.parent.address !== null) { if (this.$props.item.result.parent.address !== null) {
return this.$props.item.result.parent.address; return this.$props.item.result.parent.address;
} }
return null; return null;
} }
} }
} }
</script> </script>

View File

@ -21,58 +21,73 @@
</div> </div>
</div> </div>
<div v-else-if="action === 'edit' || action === 'create'"> <div v-else-if="action === 'edit' || action === 'create'">
{{ action }}
<div class="form-floating mb-3" v-if="thirdparty.kind !== 'child'"> <div class="form-floating mb-3" v-if="thirdparty.kind !== 'child'">
<div class="form-check"> <div class="form-check">
<input class="form-check-input mt-0" type="radio" v-model="kind" value="company" id="tpartyKindInstitution"> <input class="form-check-input mt-0" type="radio" v-model="kind" value="company" id="tpartyKindInstitution">
<label for="tpartyKindInstitution" class="required"> <label for="tpartyKindInstitution" class="required">
<badge-entity <badge-entity
:entity="{ type: 'thirdparty', kind: 'company' }" :entity="{ type: 'thirdparty', kind: 'company' }"
:options="{ displayLong: true }"> :options="{ displayLong: true }">
</badge-entity> </badge-entity>
</label> </label>
</div> </div>
<div class="form-check"> <div class="form-check">
<input class="form-check-input mt-0" type="radio" v-model="kind" value="contact" id="tpartyKindContact"> <input class="form-check-input mt-0" type="radio" v-model="kind" value="contact" id="tpartyKindContact">
<label for="tpartyKindContact" class="required"> <label for="tpartyKindContact" class="required">
<badge-entity <badge-entity
:entity="{ type: 'thirdparty', kind: 'contact' }" :entity="{ type: 'thirdparty', kind: 'contact' }"
:options="{ displayLong: true }"> :options="{ displayLong: true }">
</badge-entity> </badge-entity>
</label> </label>
</div> </div>
</div> </div>
<div v-else> <div v-else>
<p>Contact de&nbsp;:</p> <p>Contact de&nbsp;:</p>
<third-party-render-box :thirdparty="thirdparty.parent" <third-party-render-box v-if="thirdparty.parent"
:options="{ :thirdparty="thirdparty.parent"
addInfo: true, :options="{
addEntity: false, addInfo: true,
addAltNames: true, addEntity: false,
addId: false, addAltNames: true,
addLink: false, addId: false,
addAge: false, addLink: false,
hLevel: 4, addAge: false,
addCenter: false, hLevel: 4,
addNoData: true, addCenter: false,
isMultiline: false addNoData: true,
isMultiline: false
}"></third-party-render-box>
<third-party-render-box v-else
:thirdparty="parent"
:options="{
addInfo: true,
addEntity: false,
addAltNames: true,
addId: false,
addLink: false,
addAge: false,
hLevel: 4,
addCenter: false,
addNoData: true,
isMultiline: false
}"></third-party-render-box> }"></third-party-render-box>
</div> </div>
<div class="form-floating mb-3"> <div class="form-floating mb-3">
<input class="form-control form-control-lg" id="name" v-model="thirdparty.text" v-bind:placeholder="$t('thirdparty.name')" /> <input class="form-control form-control-lg" id="name" v-model="thirdparty.text" v-bind:placeholder="$t('thirdparty.name')" />
<label for="name">{{ $t('thirdparty.name') }}</label> <label for="name">{{ $t('thirdparty.name') }}</label>
</div> </div>
<template <template
v-if="thirdparty.kind !== 'child'"> v-if="thirdparty.kind !== 'child'">
<add-address <add-address
key="thirdparty" key="thirdparty"
:context="context" :context="context"
:options="addAddress.options" :options="addAddress.options"
:address-changed-callback="submitAddress" :address-changed-callback="submitAddress"
ref="addAddress"> ref="addAddress">
</add-address> </add-address>
</template> </template>
<div class="input-group mb-3"> <div class="input-group mb-3">
<span class="input-group-text" id="email"><i class="fa fa-fw fa-envelope"></i></span> <span class="input-group-text" id="email"><i class="fa fa-fw fa-envelope"></i></span>