add uniq key property, allow multiple entity in suggestions

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

@@ -32,7 +32,6 @@
             </div>
             <div class="modal-body">
                <div class="count">
-               
                   <span>
                      <a v-if="suggestedCounter > 2" @click="selectAll">
                         {{ $t('action.check_all')}}
@@ -42,11 +41,9 @@
                         {{ $t('action.reset')}}
                      </a>
                   </span>
-                  
                   <span v-if="selectedCounter > 0">
                      {{ $tc('add_persons.selected_counter', selectedCounter) }}
                   </span>
-                  
                </div>
             </div>
          </template>
@@ -57,7 +54,7 @@
 
                <person-suggestion
                   v-for="item in this.selectedAndSuggested.slice().reverse()"
-                  v-bind:key="item.id"
+                  v-bind:key="itemKey(item)"
                   v-bind:item="item"
                   v-bind:search="search"
                   @updateSelected="updateSelected">
@@ -83,7 +80,7 @@
 <script>
 import Modal from 'ChillMainAssets/vuejs/_components/Modal';
 import PersonSuggestion from 'ChillPersonAssets/vuejs/_components/PersonSuggestion';
-import { searchPersons } from 'ChillPersonAssets/vuejs/_api/AddPersons';
+import { searchPersons, searchPersons_2 } from 'ChillPersonAssets/vuejs/_api/AddPersons';
 
 export default {
    name: 'AddPersons',
@@ -143,7 +140,7 @@ export default {
             ...this.suggested.slice().reverse(),
             ...this.selected.slice().reverse(), 
          ])];
-         return uniqBy(union, k => k.id);
+         return uniqBy(union, k => k.key);
       },
       options() {
          return this.options;
@@ -157,10 +154,9 @@ export default {
          })
       },
       setQuery(query) {
-         //console.log('options 1', this.options);
          this.search.query = query;
          if (query.length >= 3) {
-            searchPersons({ query, options: this.options })
+            searchPersons_2({ query, options: this.options })
                .then(suggested => new Promise((resolve, reject) => {
                   this.loadSuggestions(suggested.results);
                   resolve();
@@ -171,6 +167,9 @@ export default {
       },
       loadSuggestions(suggested) { 
          this.search.suggested = suggested;
+         this.search.suggested.forEach(function(item) {
+            item.key = this.itemKey(item);
+         }, this);
       },
       updateSelected(value) {
          this.search.selected = value;
@@ -190,6 +189,10 @@ export default {
          this.search.suggested.forEach(function(item) {
             this.search.selected.push(item);
          }, this);
+      },
+      itemKey(item) {
+         let type = item.result.type;
+         return type + item.result[type + '_id'];
       }
    },
 }

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

@@ -1,6 +1,5 @@
 <template>
    <div class="list-item" :class="{ checked: isChecked }">
-      <div class="container">
          
          <!--a class="discret" target="_blank" :href="url.show">{{ item.id }}</a-->
          <input class="" 
@@ -8,38 +7,37 @@
             v-model="selected"
             :value="item" />
             
-         {{ item.text }}
+         <suggestion-person 
+            v-if="item.result.type === 'person'"
+            v-bind:item="item"
+            >
+         </suggestion-person>
          
-      </div>
+         <suggestion-third-party 
-      <div class="right_actions">
+            v-if="item.result.type === 'thirdparty'"
+            v-bind:item="item"
+            >
+         </suggestion-third-party>
          
-         <span class="badge badge-pill badge-secondary" :title="item.id">
-            {{ $t('item.type_person') }}
-         </span>
-         <a class="sc-button bt-show" target="_blank" :title="item.id" :href="url.show"></a>
 
    </div>
-   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import SuggestionPerson from './PersonSuggestion/Person';
+import SuggestionThirdParty from './PersonSuggestion/ThirdParty';
 
 export default {
    name: 'PersonSuggestion',
+   components: {
+      SuggestionPerson,
+      SuggestionThirdParty,
+   },
    props: [
       'item', 
       'search'
    ],
    emits: ['updateSelected'],
-   data() {
-      return {
-         url: {
-            show: '/fr/person/' + this.item.id + '/general',
-            edit: '/fr/person/' + this.item.id + '/general/edit'
-         },
-      }
-   },
    computed: {
       selected: {
          set(value) {

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

@@ -0,0 +1,30 @@
+<template>
+   <div class="container">
+   
+      {{ item.result.text }}
+      
+   </div>
+   <div class="right_actions">
+      
+      <span class="badge badge-pill badge-secondary" :title="item.result.person_id">
+         {{ $t('item.type_person') }}
+      </span>
+      <a class="sc-button bt-show" target="_blank" :title="item.result.person_id" :href="url.show"></a>
+      
+   </div>
+</template>
+
+<script>
+export default {
+   name: 'SuggestionPerson',
+   props: ['item'],
+   data() {
+      return {
+         url: {
+            show: '/fr/person/' + this.item.result.person_id + '/general',
+            edit: '/fr/person/' + this.item.result.person_id + '/general/edit'
+         },
+      }
+   },
+}
+</script>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/PersonSuggestion/ThirdParty.vue

@@ -0,0 +1,30 @@
+<template>
+   <div class="container">
+   
+      {{ item.result.text }}
+      
+   </div>
+   <div class="right_actions">
+      
+      <span class="badge badge-pill badge-secondary" :title="item.result.thirdparty_id">
+         {{ $t('item.type_thirdparty') }}
+      </span>
+      <a class="sc-button bt-show" target="_blank" :title="item.result.thirdparty_id" :href="url.show"></a>
+      
+   </div>
+</template>
+
+<script>
+export default {
+   name: 'SuggestionThirdParty',
+   props: ['item'],
+   data() {
+      return {
+         url: {
+            show: '/fr/person/' + this.item.result.thirdparty_id + '/general',
+            edit: '/fr/person/' + this.item.result.thirdparty_id + '/general/edit'
+         },
+      }
+   },
+}
+</script>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.js

@@ -9,7 +9,7 @@ const personMessages = {
       item: {
          type_person: "Usager",
          type_user: "TMS",
-         type_3rdparty: "Tiers",
+         type_thirdparty: "Tiers",
          type_household: "Ménage"
       }
    }