AddPersons: add suggestion of name when creating new person or thirdparty

CHANGELOG.md

@@ -12,6 +12,8 @@ and this project adheres to
 * AddPersons: remove ul-li html tags from AddPersons (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/419)
 * [person]: AddPersons: allow creation of person or thirdparty only (no users) (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/422)
 * [person]: AddPersons: allow creation of person or thirdparty depending on allowed types (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/422)
+* [person]: AddPersons: add suggestion of name when creating new person or thirdparty (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/422)
+
 
 <!-- write down unreleased development here -->
 * fix normalisation of accompanying course requestor api (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/378)

src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue

@@ -21,14 +21,16 @@
    <div class="my-4">
       <on-the-fly-person
          v-if="type === 'person'"
-         v-bind:action="action"
+         :action="action"
+         :query="query"
          ref="castPerson"
       >
       </on-the-fly-person>
 
       <on-the-fly-thirdparty
          v-if="type === 'thirdparty'"
-         v-bind:action="action"
+         :action="action"
+         :query="query"
          ref="castThirdparty"
       >
       </on-the-fly-thirdparty>
@@ -41,7 +43,7 @@ import OnTheFlyThirdparty from 'ChillThirdPartyAssets/vuejs/_components/OnTheFly
 
 export default {
    name: "OnTheFlyCreate",
-   props: ['action', 'allowedTypes'],
+   props: ['action', 'allowedTypes', 'query'],
    components: {
       OnTheFlyPerson,
       OnTheFlyThirdparty

src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/OnTheFly.vue

@@ -55,6 +55,7 @@
             <on-the-fly-create
                :action="action"
                :allowedTypes="allowedTypes"
+               :query="query"
                ref="castNew">
             </on-the-fly-create>
          </template>
@@ -91,7 +92,7 @@ export default {
       OnTheFlyThirdparty,
       OnTheFlyCreate
    },
-   props: ['type', 'id', 'action', 'buttonText', 'displayBadge', 'isDead', 'parent', 'allowedTypes'],
+   props: ['type', 'id', 'action', 'buttonText', 'displayBadge', 'isDead', 'parent', 'allowedTypes', 'query'],
    emits: ['saveFormOnTheFly'],
    data() {
       return {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue

@@ -65,6 +65,7 @@
                      v-if="queryLength >= 3 && (options.type.includes('person') || options.type.includes('thirdparty'))"
                      :buttonText="$t('onthefly.create.button', {q: query})"
                      :allowedTypes="options.type"
+                     :query="query"
                      action="create"
                      @saveFormOnTheFly="saveFormOnTheFly"
                      ref="onTheFly">

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

@@ -32,6 +32,14 @@
       <label for="lastname">{{ $t('person.lastname') }}</label>
    </div>
 
+   <div v-if="queryItems.length > 0">
+      <ul class="list-suggest add-items inline">
+         <li v-for="(qi, i) in queryItems" :key="i" @click="addQueryItem('lastName', qi)">
+            <span class="person-text">{{ qi }}</span>
+         </li>
+      </ul>
+   </div>
+
    <div class="form-floating mb-3">
       <input
           class="form-control form-control-lg"
@@ -43,6 +51,14 @@
       <label for="firstname">{{ $t('person.firstname') }}</label>
    </div>
 
+   <div v-if="queryItems.length > 0">
+      <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 v-for="(a, i) in config.altNames" :key="a.key" class="form-floating mb-3">
       <input
           class="form-control form-control-lg"
@@ -122,7 +138,7 @@ import PersonRenderBox from '../Entity/PersonRenderBox.vue';
 
 export default {
    name: "OnTheFlyPerson",
-   props: ['id', 'type', 'action'],
+   props: ['id', 'type', 'action', 'query'],
    //emits: ['createAction'],
    components: {
       PersonRenderBox
@@ -203,6 +219,9 @@ export default {
       },
       personAltNamesLabels() {
          return this.person.altNames.map(a => a ? a.label : '');
+      },
+      queryItems() {
+         return this.query.split(' ');
       }
    },
    mounted() {
@@ -244,6 +263,16 @@ export default {
          )
          this.person.altNames = updateAltNames;
       },
+      addQueryItem(field, queryItem) {
+         switch (field) {
+            case 'lastName':
+               this.person.lastName = queryItem;
+               break;
+            case 'firstName':
+               this.person.firstName = queryItem;
+               break;
+         }
+      }
    }
 }
 </script>

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

@@ -61,6 +61,13 @@
          <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>
+      <div v-if="query.length > 0">
+         <ul class="list-suggest add-items inline">
+            <li @click="addQuery(query)">
+               <span class="person-text">{{ query }}</span>
+            </li>
+         </ul>
+      </div>
 
        <template
            v-if="thirdparty.kind !== 'child'">
@@ -102,7 +109,7 @@ import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
 
 export default {
    name: "OnTheFlyThirdParty",
-   props: ['id', 'type', 'action'],
+   props: ['id', 'type', 'action', 'query'],
    components: {
       ThirdPartyRenderBox,
       AddAddress,
@@ -186,6 +193,9 @@ export default {
               this.thirdparty.address = payload.address;  // <--
               console.log('switch address to edit mode', this.context);
           }
+      },
+      addQuery(query) {
+         this.thirdparty.text = query;
       }
    },
    mounted() {