Merge remote-tracking branch 'origin/master' into track-address-reference-update

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

@@ -18,12 +18,13 @@ function loadDynamicPicker(element) {
             isMultiple = parseInt(el.dataset.multiple) === 1,
             uniqId = el.dataset.uniqid,
             input = element.querySelector('[data-input-uniqid="'+ el.dataset.uniqid +'"]'),
+            // the "picked" will always be an array, even if multiple is false
             picked = isMultiple ?
                 JSON.parse(input.value) : (
                     (input.value === '[]' || input.value === '') ?
                         null : [ JSON.parse(input.value) ]
                 )
-        ;
+            suggested = JSON.parse(el.dataset.suggested)
 
         if (!isMultiple) {
             if (input.value === '[]'){
@@ -37,6 +38,7 @@ function loadDynamicPicker(element) {
                 ':types="types" ' +
                 ':picked="picked" ' +
                 ':uniqid="uniqid" ' +
+                ':suggested="notPickedSuggested" ' +
                 '@addNewEntity="addNewEntity" ' +
                 '@removeEntity="removeEntity"></pick-entity>',
             components: {
@@ -48,16 +50,27 @@ function loadDynamicPicker(element) {
                     types: JSON.parse(el.dataset.types),
                     picked: picked === null ? [] : picked,
                     uniqid: el.dataset.uniqid,
+                    suggested: suggested
                 }
             },
+            computed: {
+              notPickedSuggested() {
+                const pickedIds = new Set();
+                for (const p of this.picked) {
+                  pickedIds.add(`${p.type}${p.id}`);
+                }
+                return this.suggested.filter(e => !pickedIds.has(`${e.type}${e.id}`))
+              }
+            },
             methods: {
-                addNewEntity(entity) {
+                addNewEntity({entity}) {
                     if (this.multiple) {
                         if (!this.picked.some(el => {
                             return el.type === entity.type && el.id === entity.id;
                         })) {
                             this.picked.push(entity);
                             input.value = JSON.stringify(this.picked);
+                            console.log(entity)
                         }
                     } else {
                         if (!this.picked.some(el => {
@@ -69,9 +82,16 @@ function loadDynamicPicker(element) {
                         }
                     }
                 },
-                removeEntity(entity) {
+                removeEntity({entity}) {
+                    if (-1 === this.suggested.findIndex(e => e.type === entity.type && e.id === entity.id)) {
+                      this.suggested.push(entity);
+                    }
                     this.picked = this.picked.filter(e => !(e.type === entity.type && e.id === entity.id));
-                    input.value = JSON.stringify(this.picked);
+                    if (this.multiple) {
+                      input.value = JSON.stringify(this.picked);
+                    } else {
+                      input.value = "";
+                    }
                 },
             }
         })

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

@@ -17,6 +17,9 @@
             </add-persons>
         </li>
     </ul>
+    <ul 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: []
         }
     },
     emits: ['addNewEntity', 'removeEntity'],
@@ -61,55 +68,58 @@ 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: entity});
+      },
+      addNewEntity({ selected, modal }) {
+          selected.forEach((item) => {
+              this.$emit('addNewEntity', { entity: 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: entity });
+      }
     },
 }
 </script>