From 5319991a6f8e3fb194078bfac9ed945770dfe45a Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Fri, 24 Feb 2023 17:25:28 +0100
Subject: [PATCH] [vue][suggested users] add suggested users in vue component
 and write create/remove logic

---
 .../public/module/pick-entity/index.js        |   5 +
 .../public/vuejs/PickEntity/PickEntity.vue    | 105 ++++++++++--------
 2 files changed, 64 insertions(+), 46 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/module/pick-entity/index.js b/src/Bundle/ChillMainBundle/Resources/public/module/pick-entity/index.js
index 890929c35..bb9cc744c 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/module/pick-entity/index.js
+++ b/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: {
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue
index e121ca950..02b53a6d3 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue
+++ b/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'],
@@ -61,55 +68,61 @@ export default {
         };
     },
     computed: {
-        addPersonsOptions() {
-            return {
-                uniq: !this.multiple,
-                type: this.types,
-                priority: null,
-                button: {
-                    size: 'btn-sm',
-                    class: 'btn-submit',
-                },
-            };
-        },
-        translatedListOfTypes() {
-            let trans = [];
-            this.types.forEach(t => {
-                if (this.$props.multiple) {
-                    trans.push(appMessages.fr.pick_entity[t].toLowerCase());
-                } else {
-                    trans.push(appMessages.fr.pick_entity[t + '_one'].toLowerCase());
-                }
-            })
+      addPersonsOptions() {
+          return {
+              uniq: !this.multiple,
+              type: this.types,
+              priority: null,
+              button: {
+                  size: 'btn-sm',
+                  class: 'btn-submit',
+              },
+          };
+      },
+      translatedListOfTypes() {
+          let trans = [];
+          this.types.forEach(t => {
+              if (this.$props.multiple) {
+                  trans.push(appMessages.fr.pick_entity[t].toLowerCase());
+              } else {
+                  trans.push(appMessages.fr.pick_entity[t + '_one'].toLowerCase());
+              }
+          })
 
-            if (this.$props.multiple) {
-                return appMessages.fr.pick_entity.modal_title + trans.join(', ');
-            } else {
-                return appMessages.fr.pick_entity.modal_title_one + trans.join(', ');
-            }
-        },
-        listClasses() {
-            return {
-                'list-suggest': true,
-                'remove-items': this.$props.removableIfSet,
-            };
-        },
+          if (this.$props.multiple) {
+              return appMessages.fr.pick_entity.modal_title + trans.join(', ');
+          } else {
+              return appMessages.fr.pick_entity.modal_title_one + trans.join(', ');
+          }
+      },
+      listClasses() {
+          return {
+              'list-suggest': true,
+              'remove-items': this.$props.removableIfSet,
+          };
+      },
     },
     methods: {
-        addNewEntity({ selected, modal }) {
-            selected.forEach((item) => {
-                    this.$emit('addNewEntity', item.result);
-                }, this
-            );
-            this.$refs.addPersons.resetSearch(); // to cast child method
-            modal.showModal = false;
-        },
-        removeEntity(entity) {
-            if (!this.$props.removableIfSet) {
-                return;
-            }
-            this.$emit('removeEntity', entity);
-        }
+      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);
+              }, this
+          );
+          this.$refs.addPersons.resetSearch(); // to cast child method
+          modal.showModal = false;
+      },
+      removeEntity(entity) {
+          if (!this.$props.removableIfSet) {
+              return;
+          }
+          this.$emit('removeEntity', entity);
+          this.suggested.push(entity);
+      }
     },
 }
 </script>