[vue][suggested users] add suggested users in vue component and write create/remove logic

src/Bundle/ChillMainBundle/Resources/public/module/pick-entity/index.js

@@ -23,8 +23,11 @@ function loadDynamicPicker(element) {
                     (input.value === '[]' || input.value === '') ?
                         null : [ JSON.parse(input.value) ]
                 )
+            suggested = null !== JSON.parse(el.dataset.suggested) ? JSON.parse(el.dataset.suggested) : null
         ;
 
+        console.log('suggested', suggested)
+
         if (!isMultiple) {
             if (input.value === '[]'){
                 input.value = null;
@@ -37,6 +40,7 @@ function loadDynamicPicker(element) {
                 ':types="types" ' +
                 ':picked="picked" ' +
                 ':uniqid="uniqid" ' +
+                ':suggested="suggested" ' +
                 '@addNewEntity="addNewEntity" ' +
                 '@removeEntity="removeEntity"></pick-entity>',
             components: {
@@ -48,6 +52,7 @@ function loadDynamicPicker(element) {
                     types: JSON.parse(el.dataset.types),
                     picked: picked === null ? [] : picked,
                     uniqid: el.dataset.uniqid,
+                    suggested: suggested
                 }
             },
             methods: {

src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue

@@ -17,6 +17,9 @@
             </add-persons>
         </li>
     </ul>
+    <ul v-if="suggested !== null" class="list-suggest add-items inline">
+      <li v-for="s in suggested" :key="s.id" @click="addNewSuggested(s)"><span>{{ s.text }}</span></li>
+    </ul>
 </template>
 
 <script>
@@ -49,6 +52,10 @@ export default {
           // display picked entities.
           type: Boolean,
           default: true,
+        },
+        suggested: {
+          type: Array,
+          default: null
         }
     },
     emits: ['addNewEntity', 'removeEntity'],
@@ -96,6 +103,11 @@ export default {
       },
     },
     methods: {
+      addNewSuggested(entity) {
+        this.$emit('addNewEntity', entity);
+        const indexToRemove = this.suggested.findIndex(e => e.id === entity.id)
+        this.suggested.splice(indexToRemove, 1);
+      },
       addNewEntity({ selected, modal }) {
           selected.forEach((item) => {
                   this.$emit('addNewEntity', item.result);
@@ -109,6 +121,7 @@ export default {
               return;
           }
           this.$emit('removeEntity', entity);
+          this.suggested.push(entity);
       }
     },
 }