fix name suggestion badges underneath input fields

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue

@@ -24,11 +24,11 @@
 
    <div class="form-floating mb-3">
       <input
-          class="form-control form-control-lg"
-          id="lastname"
-          v-model="lastName"
-          :placeholder="$t('person.lastname')"
-          @change="checkErrors"
+         class="form-control form-control-lg"
+         id="lastname"
+         v-model="lastName"
+         :placeholder="$t('person.lastname')"
+         @change="checkErrors"
       />
       <label for="lastname">{{ $t('person.lastname') }}</label>
    </div>
@@ -43,11 +43,11 @@
 
    <div class="form-floating mb-3">
       <input
-          class="form-control form-control-lg"
-          id="firstname"
-          v-model="firstName"
-          :placeholder="$t('person.firstname')"
-          @change="checkErrors"
+         class="form-control form-control-lg"
+         id="firstname"
+         v-model="firstName"
+         :placeholder="$t('person.firstname')"
+         @change="checkErrors"
       />
       <label for="firstname">{{ $t('person.firstname') }}</label>
    </div>
@@ -62,10 +62,10 @@
 
    <div v-for="(a, i) in config.altNames" :key="a.key" class="form-floating mb-3">
       <input
-          class="form-control form-control-lg"
-          :id="a.key"
-          :value="personAltNamesLabels[i]"
-          @input="onAltNameInput"
+         class="form-control form-control-lg"
+         :id="a.key"
+         :value="personAltNamesLabels[i]"
+         @input="onAltNameInput"
       />
       <label :for="a.key">{{ a.labels.fr }}</label>
    </div>
@@ -125,9 +125,9 @@
    </div>
 
    <div class="alert alert-warning" v-if="errors.length">
-     <ul>
-       <li v-for="(e, i) in errors" :key="i">{{ e }}</li>
-     </ul>
+      <ul>
+         <li v-for="(e, i) in errors" :key="i">{{ e }}</li>
+      </ul>
    </div>
 
 </div>
@@ -238,13 +238,13 @@ export default {
       checkErrors(e) {
          this.errors = [];
          if (!this.person.lastName) {
-             this.errors.push("Le nom ne doit pas être vide.");
+            this.errors.push("Le nom ne doit pas être vide.");
          }
          if (!this.person.firstName) {
-             this.errors.push("Le prénom ne doit pas être vide.");
+            this.errors.push("Le prénom ne doit pas être vide.");
          }
          if (!this.person.gender) {
-             this.errors.push("Le genre doit être renseigné");
+            this.errors.push("Le genre doit être renseigné");
          }
       },
       loadData() {

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

@@ -66,14 +66,14 @@
 
       <div v-if="thirdparty.kind === 'child' || thirdparty.kind === 'contact'">
          <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"
                   v-model="thirdparty.civility">
                   <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>
                </select>
             </div>
-            <div class="input-group mb-3">
+            <div class="input-group mb-3 input-section">
                <select class="form-select form-select-lg" id="civility"
                   v-model="thirdparty.profession">
                   <option selected disabled :value="null">{{ $t('thirdparty.profession') }}</option>
@@ -82,27 +82,47 @@
             </div>
          </div>
          <div class="child-info">
-            <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')" />
-               <label for="firstname">{{ $t('thirdparty.firstname') }}</label>
+            <div class="input-section">
+               <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')" />
+                  <label for="firstname">{{ $t('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="form-floating mb-3">
-               <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>
+            <div class="input-section">
+               <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')" />
+                  <label for="name">{{ $t('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 class="form-floating mb-3" v-if="thirdparty.kind === 'company'">
-         <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>
-      </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 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')" />
+            <label for="name">{{ $t('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
@@ -168,6 +188,7 @@ export default {
             type: 'thirdparty',
             address: null,
             kind: 'company',
+            firstname: '',
             name: '',
             telephone: '',
             civility: null,
@@ -223,6 +244,9 @@ export default {
          //this.context = context; <--
          return context;
       },
+      queryItems() {
+         return this.query ? this.query.split(' ') : null;
+      },
    },
    methods: {
       loadData(){
@@ -272,14 +296,24 @@ export default {
             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) {
          this.thirdparty.name = query;
       },
    },
-    mounted() {
-       let dependencies = [];
-       dependencies.push(this.loadProfessions());
-       dependencies.push(this.loadCivilities());
+   mounted() {
+      let dependencies = [];
+      dependencies.push(this.loadProfessions());
+      dependencies.push(this.loadCivilities());
       if (this.action !== 'create') {
          if (this.id) {
             dependencies.push(this.loadData());
@@ -320,7 +354,7 @@ dl {
 .child-info {
    display: flex;
    justify-content: space-between;
-   div {
+   .input-section {
       width: 49%;
    }
 }