From 963b0b1ed26bbf1d180703aa2b1f0c4f899c2c13 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Tue, 25 Jan 2022 16:06:27 +0100
Subject: [PATCH] bugfixes in display of dynamicPicker

---
 .../public/lib/show_hide/show_hide.js         |  2 +-
 .../public/module/pick-entity/index.js        | 47 ++++++++++++++++---
 .../public/vuejs/PickEntity/PickEntity.vue    |  6 ++-
 .../page/person_resource/showhide-input.js    |  6 +--
 4 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/lib/show_hide/show_hide.js b/src/Bundle/ChillMainBundle/Resources/public/lib/show_hide/show_hide.js
index edda5a03d..f2bcc9b45 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/lib/show_hide/show_hide.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/lib/show_hide/show_hide.js
@@ -39,7 +39,7 @@ var ShowHide = function(options) {
                 contents.push(el);
             }
             container_content.push(contents);
-            console.log('container content', container_content);
+            // console.log('container content', container_content);
         }
 
         // attach the listener on each input
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 329ac4e6c..c3786f137 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/module/pick-entity/index.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/pick-entity/index.js
@@ -5,18 +5,22 @@ import { appMessages } from 'ChillMainAssets/vuejs/PickEntity/i18n';
 
 const i18n = _createI18n(appMessages);
 
-window.addEventListener('DOMContentLoaded', function(e) {
+let appsOnPage = new Map();
 
-    let apps = document.querySelectorAll('[data-module="pick-dynamic"]');
+
+function loadDynamicPicker(element) {
+
+    let apps = element.querySelectorAll('[data-module="pick-dynamic"]');
 
     apps.forEach(function(el) {
 
         const
             isMultiple = parseInt(el.dataset.multiple) === 1,
-            input = document.querySelector('[data-input-uniqid="'+ el.dataset.uniqid +'"]'),
-            picked = isMultiple ? JSON.parse(input.value) : [JSON.parse(input.value)];
+            uniqId = el.dataset.uniqid,
+            input = element.querySelector('[data-input-uniqid="'+ el.dataset.uniqid +'"]'),
+            picked = (isMultiple) ? (JSON.parse(input.value)) : ((input.value === '[]') ? (null) : ([JSON.parse(input.value)]));
 
-        createApp({
+        const app = createApp({
             template: '<pick-entity ' +
                 ':multiple="multiple" ' +
                 ':types="types" ' +
@@ -65,5 +69,36 @@ window.addEventListener('DOMContentLoaded', function(e) {
         })
         .use(i18n)
         .mount(el);
+
+        appsOnPage.set(uniqId, app);
     });
-});
+}
+
+
+// document.addEventListener('show-hide-show', function(e) {
+//     console.log('creation event caught')
+//     loadDynamicPicker(e.detail.container)
+// })
+
+// document.addEventListener('show-hide-hide', function(e) {
+//     console.log('hiding event caught')
+//     e.detail.container.querySelectorAll('[data-module="pick-dynamic"]').forEach((el) => {
+//         let uniqId = el.dataset.uniqid;
+//         console.log(uniqId);
+//         if (appsOnPage.has(uniqId)) {
+//             appsOnPage.get(uniqId).unmount();
+//             console.log('App has been unmounted')
+//             appsOnPage.delete(uniqId);
+//         }
+//     })
+// })
+
+document.addEventListener('DOMContentLoaded', function(e) {
+    console.log('loaded event', e)
+    loadDynamicPicker(document)
+})
+
+
+
+
+
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue
index 43f3ebf94..137224691 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue
@@ -1,5 +1,5 @@
 <template>
-    <ul class="list-suggest remove-items">
+    <ul class="list-suggest remove-items" v-if="picked.length">
         <li v-for="p in picked" @click="removeEntity(p)" :key="p.type+p.id">
             <span class="chill_denomination">{{ p.text }}</span>
         </li>
@@ -79,11 +79,15 @@ export default {
             );
             this.$refs.addPersons.resetSearch(); // to cast child method
             modal.showModal = false;
+            console.log(this.picked)
         },
         removeEntity(entity) {
             console.log('remove entity', entity);
             this.$emit('removeEntity', entity);
         }
     },
+    mounted() {
+        console.log(this.picked);
+    }
 }
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/page/person_resource/showhide-input.js b/src/Bundle/ChillPersonBundle/Resources/public/page/person_resource/showhide-input.js
index d9da5eb79..4ee360c1c 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/page/person_resource/showhide-input.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/page/person_resource/showhide-input.js
@@ -12,7 +12,7 @@ window.addEventListener('DOMContentLoaded', function() {
     }
 
     new ShowHide({
-        debug: true,
+        debug: false,
         load_event: null,
         froms: [entitySelector],
         container: [personContainer],
@@ -26,7 +26,7 @@ window.addEventListener('DOMContentLoaded', function() {
     })
 
     new ShowHide({
-        debug: true,
+        debug: false,
         load_event: null,
         froms: [entitySelector],
         container: [thirdpartyContainer],
@@ -40,7 +40,7 @@ window.addEventListener('DOMContentLoaded', function() {
     })
 
     new ShowHide({
-        debug: true,
+        debug: false,
         load_event: null,
         froms: [entitySelector],
         container: [freetextContainer],