mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
onTheFly modal to add contact to thirdparty - form fields for profession,civility, and comment added - no saving possible yet
This commit is contained in:
parent
c4a859f2d2
commit
95547e961e
@ -51,13 +51,12 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:body v-else-if="action === 'addContact'">
|
||||
<template v-slot:body v-else-if="parent">
|
||||
<on-the-fly-thirdparty
|
||||
:parent="parent"
|
||||
:action="action"
|
||||
type="thirdparty"
|
||||
action="create"
|
||||
kind="child"
|
||||
ref="castThirdparty">
|
||||
ref="castNew">
|
||||
</on-the-fly-thirdparty>
|
||||
</template>
|
||||
|
||||
@ -139,6 +138,8 @@ export default {
|
||||
return 'action.edit';
|
||||
case 'create':
|
||||
return 'action.create';
|
||||
case 'addContact':
|
||||
return 'action.addContact';
|
||||
}
|
||||
},
|
||||
titleModal() {
|
||||
@ -149,6 +150,8 @@ export default {
|
||||
return 'onthefly.edit.' + this.type;
|
||||
case 'create':
|
||||
return 'onthefly.create.title';
|
||||
case 'addContact':
|
||||
return 'onthefly.addContact.title';
|
||||
}
|
||||
},
|
||||
titleMessage() {
|
||||
@ -231,4 +234,8 @@ export default {
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* .btn-add-contact {
|
||||
background-color: pink;
|
||||
} */
|
||||
</style>
|
||||
|
||||
@ -24,8 +24,8 @@
|
||||
:options="{ displayLong: true }">
|
||||
</badge-entity>
|
||||
<on-the-fly
|
||||
v-bind:parent="item.result"
|
||||
action="addContact"
|
||||
:parent="item.result"
|
||||
></on-the-fly>
|
||||
<on-the-fly
|
||||
type="thirdparty"
|
||||
|
||||
@ -19,9 +19,15 @@
|
||||
></third-party-render-box>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="action === 'edit' || action === 'create'">
|
||||
|
||||
<div class="form-floating mb-3" v-if="thirdparty.kind !== 'child'">
|
||||
<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"></i>
|
||||
<b class="me-2">{{ $t('child_of') }}</b>
|
||||
<span class="chill-entity badge-thirdparty">{{ parent.text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-floating mb-3" v-else-if="thirdparty.kind !== 'child'">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input mt-0" type="radio" v-model="kind" value="company" id="tpartyKindInstitution">
|
||||
<label for="tpartyKindInstitution" class="required">
|
||||
@ -42,23 +48,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p>Contact de :</p>
|
||||
<third-party-render-box v-if="thirdparty.parent"
|
||||
:thirdparty="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 v-else
|
||||
:thirdparty="parent"
|
||||
<!-- <p>Contact de :</p> -->
|
||||
<third-party-render-box
|
||||
:thirdparty="thirdparty"
|
||||
:options="{
|
||||
addInfo: true,
|
||||
addEntity: false,
|
||||
@ -72,13 +64,31 @@
|
||||
isMultiline: false
|
||||
}"></third-party-render-box>
|
||||
</div>
|
||||
|
||||
<div v-if="parent" id="child-info">
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="comment"><i class="fa fa-fw fa-user-circle-o"></i></span>
|
||||
<select class="form-select form-select-lg" id="civility">
|
||||
<option selected disabled >{{ $t('thirdparty.profession') }}</option>
|
||||
<option v-for="profession in professions" :key="profession.id" :value="profession.id">{{ profession.name.fr }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="comment"><i class="fa fa-fw fa-briefcase"></i></span>
|
||||
<select class="form-select form-select-lg" id="profession">
|
||||
<option selected disabled >{{ $t('thirdparty.civility') }}</option>
|
||||
<option v-for="civility in civilities" :key="civility.id" :value="civility.id">{{ civility.name.fr }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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')" />
|
||||
<label for="name">{{ $t('thirdparty.name') }}</label>
|
||||
</div>
|
||||
|
||||
<template
|
||||
v-if="thirdparty.kind !== 'child'">
|
||||
v-if="thirdparty.kind !== 'child' || parent">
|
||||
<add-address
|
||||
key="thirdparty"
|
||||
:context="context"
|
||||
@ -106,6 +116,14 @@
|
||||
aria-describedby="phonenumber" />
|
||||
</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"></i></span>
|
||||
<textarea class="form-control form-control-lg"
|
||||
v-bind:placeholder="$t('thirdparty.comment')"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -114,10 +132,11 @@ import ThirdPartyRenderBox from '../Entity/ThirdPartyRenderBox.vue';
|
||||
import AddAddress from 'ChillMainAssets/vuejs/Address/components/AddAddress';
|
||||
import { getThirdparty } from '../../_api/OnTheFly';
|
||||
import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
|
||||
import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
|
||||
|
||||
export default {
|
||||
name: "OnTheFlyThirdParty",
|
||||
props: ['id', 'type', 'action'],
|
||||
props: ['id', 'type', 'action', 'parent'],
|
||||
components: {
|
||||
ThirdPartyRenderBox,
|
||||
AddAddress,
|
||||
@ -129,6 +148,8 @@ export default {
|
||||
thirdparty: {
|
||||
type: 'thirdparty',
|
||||
},
|
||||
professions: [],
|
||||
civilities: [],
|
||||
addAddress: {
|
||||
options: {
|
||||
openPanesInModal: true,
|
||||
@ -137,27 +158,27 @@ export default {
|
||||
size: 'btn-sm'
|
||||
},
|
||||
title: {
|
||||
create: 'add_an_address_title',
|
||||
edit: 'edit_address'
|
||||
create: 'add_an_address_title',
|
||||
edit: 'edit_address'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
kind: {
|
||||
get() {
|
||||
// note: there are also default to 'institution' set in the "mounted" method
|
||||
if (this.$data.thirdparty.kind !== undefined) {
|
||||
return this.$data.thirdparty.kind;
|
||||
} else {
|
||||
return 'company';
|
||||
}
|
||||
},
|
||||
set(v) {
|
||||
this.$data.thirdparty.kind = v;
|
||||
}
|
||||
},
|
||||
kind: {
|
||||
get() {
|
||||
// note: there are also default to 'institution' set in the "mounted" method
|
||||
if (this.$data.thirdparty.kind !== undefined) {
|
||||
return this.$data.thirdparty.kind;
|
||||
} else {
|
||||
return 'company';
|
||||
}
|
||||
},
|
||||
set(v) {
|
||||
this.$data.thirdparty.kind = v;
|
||||
}
|
||||
},
|
||||
context() {
|
||||
let context = {
|
||||
target: {
|
||||
@ -168,10 +189,10 @@ export default {
|
||||
addressId: null
|
||||
};
|
||||
if ( !(this.thirdparty.address === undefined || this.thirdparty.address === null)
|
||||
&& this.thirdparty.address.address_id !== null
|
||||
&& this.thirdparty.address.address_id !== null
|
||||
) { // to complete
|
||||
context.addressId = this.thirdparty.address.address_id;
|
||||
context.edit = true;
|
||||
context.addressId = this.thirdparty.address.address_id;
|
||||
context.edit = true;
|
||||
}
|
||||
console.log('context', context);
|
||||
//this.context = context; <--
|
||||
@ -185,30 +206,58 @@ export default {
|
||||
this.thirdparty.kind = thirdparty.kind;
|
||||
//console.log('get thirdparty', thirdparty);
|
||||
if (this.action !== 'show') {
|
||||
if (thirdparty.address !== null) {
|
||||
// bof! we force getInitialAddress because addressId not available when mounted
|
||||
this.$refs.addAddress.getInitialAddress(thirdparty.address.address_id);
|
||||
}
|
||||
if (thirdparty.address !== null) {
|
||||
// bof! we force getInitialAddress because addressId not available when mounted
|
||||
this.$refs.addAddress.getInitialAddress(thirdparty.address.address_id);
|
||||
}
|
||||
}
|
||||
resolve();
|
||||
}));
|
||||
},
|
||||
loadCivilities() {
|
||||
const url = `/api/1.0/main/civility.json`;
|
||||
makeFetch('GET', url)
|
||||
.then(response => {
|
||||
console.log(response)
|
||||
this.$data.civilities = response.results;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
// this.$toast.open({message: error.body})
|
||||
})
|
||||
},
|
||||
loadProfessions() {
|
||||
const url = `/api/1.0/thirdparty/professions.json`;
|
||||
makeFetch('GET', url)
|
||||
.then(response => {
|
||||
console.log(response)
|
||||
this.$data.professions = response.results;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
// this.$toast.open({message: error.body})
|
||||
})
|
||||
},
|
||||
submitAddress(payload) {
|
||||
console.log('submitAddress', payload);
|
||||
if (typeof payload.addressId !== 'undefined') { // <--
|
||||
this.context.edit = true;
|
||||
this.context.addressId = payload.addressId; // bof! use legacy and not legacy in payload
|
||||
this.thirdparty.address = payload.address; // <--
|
||||
console.log('switch address to edit mode', this.context);
|
||||
}
|
||||
this.context.edit = true;
|
||||
this.context.addressId = payload.addressId; // bof! use legacy and not legacy in payload
|
||||
this.thirdparty.address = payload.address; // <--
|
||||
console.log('switch address to edit mode', this.context);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
//console.log('mounted', this.action);
|
||||
console.log('mounted', this.action);
|
||||
if (this.action !== 'create') {
|
||||
this.loadData();
|
||||
if (this.action === 'addContact') {
|
||||
this.loadProfessions();
|
||||
this.loadCivilities();
|
||||
}
|
||||
} else {
|
||||
this.thirdparty.kind = 'company';
|
||||
this.thirdparty.kind = 'company';
|
||||
}
|
||||
},
|
||||
}
|
||||
@ -229,5 +278,12 @@ dl {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
.parent-info {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#child-info {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user