Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-14 06:14:23 +00:00
Code Issues Actions Projects Releases Wiki Activity

fix name suggestion badges underneath input fields

Browse Source
This commit is contained in:
Julie Lenaerts 2022-03-16 12:32:54 +01:00
parent 0546a43d63
commit 6151d0ce54
2 changed files with 77 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue
View File

@ -66,14 +66,14 @@
<div v-if="thirdparty.kind === 'child' || thirdparty.kind === 'contact'"> <div v-if="thirdparty.kind === 'child' || thirdparty.kind === 'contact'">
<div class="child-info"> <div class="child-info">
<div class="input-group mb-3"> <div class="input-group mb-3 input-section">
<select class="form-select form-select-lg" id="profession" <select class="form-select form-select-lg" id="profession"
v-model="thirdparty.civility"> v-model="thirdparty.civility">
<option selected disabled :value="null" >{{ $t('thirdparty.civility') }}</option> <option selected disabled :value="null" >{{ $t('thirdparty.civility') }}</option>
<option v-for="civility in civilities" :key="civility.id" :value="{type: 'chill_main_civility', id: civility.id }">{{ civility.name.fr }}</option> <option v-for="civility in civilities" :key="civility.id" :value="{type: 'chill_main_civility', id: civility.id }">{{ civility.name.fr }}</option>
</select> </select>
</div> </div>
<div class="input-group mb-3"> <div class="input-group mb-3 input-section">
<select class="form-select form-select-lg" id="civility" <select class="form-select form-select-lg" id="civility"
v-model="thirdparty.profession"> v-model="thirdparty.profession">
<option selected disabled :value="null">{{ $t('thirdparty.profession') }}</option> <option selected disabled :value="null">{{ $t('thirdparty.profession') }}</option>
@ -82,18 +82,37 @@
</div> </div>
</div> </div>
<div class="child-info"> <div class="child-info">
<div class="input-section">
<div class="form-floating mb-3"> <div class="form-floating mb-3">
<input class="form-control form-control-lg" id="firstname" v-model="thirdparty.firstname" v-bind:placeholder="$t('thirdparty.firstname')" /> <input class="form-control form-control-lg" id="firstname" v-model="thirdparty.firstname" v-bind:placeholder="$t('thirdparty.firstname')" />
<label for="firstname">{{ $t('thirdparty.firstname') }}</label> <label for="firstname">{{ $t('thirdparty.firstname') }}</label>
</div> </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"> <div class="form-floating mb-3">
<input class="form-control form-control-lg" id="name" v-model="thirdparty.name" v-bind:placeholder="$t('thirdparty.lastname')" /> <input class="form-control form-control-lg" id="name" v-model="thirdparty.name" v-bind:placeholder="$t('thirdparty.lastname')" />
<label for="name">{{ $t('thirdparty.lastname') }}</label> <label for="name">{{ $t('thirdparty.lastname') }}</label>
</div> </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> </div>
<div class="form-floating mb-3" v-if="thirdparty.kind === 'company'"> <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" v-bind:placeholder="$t('thirdparty.name')" /> <input class="form-control form-control-lg" id="name" v-model="thirdparty.name" v-bind:placeholder="$t('thirdparty.name')" />
<label for="name">{{ $t('thirdparty.name') }}</label> <label for="name">{{ $t('thirdparty.name') }}</label>
</div> </div>
@ -104,6 +123,7 @@
</li> </li>
</ul> </ul>
</div> </div>
</div>
<template <template
v-if="thirdparty.kind !== 'child'"> v-if="thirdparty.kind !== 'child'">
@ -168,6 +188,7 @@ export default {
type: 'thirdparty', type: 'thirdparty',
address: null, address: null,
kind: 'company', kind: 'company',
firstname: '',
name: '', name: '',
telephone: '', telephone: '',
civility: null, civility: null,
@ -223,6 +244,9 @@ export default {
//this.context = context; <-- //this.context = context; <--
return context; return context;
}, },
queryItems() {
return this.query ? this.query.split(' ') : null;
},
}, },
methods: { methods: {
loadData(){ loadData(){
@ -272,6 +296,16 @@ export default {
console.log('switch address to edit mode', this.context); console.log('switch address to edit mode', this.context);
} }
}, },
addQueryItem(field, queryItem) {
switch (field) {
case 'name':
this.thirdparty.name = queryItem;
break;
case 'firstName':
this.thirdparty.firstname = queryItem;
break;
}
},
addQuery(query) { addQuery(query) {
this.thirdparty.name = query; this.thirdparty.name = query;
}, },
@ -320,7 +354,7 @@ dl {
.child-info { .child-info {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
div { .input-section {
width: 49%; width: 49%;
} }
} }