Resolve merge with master

src/Bundle/ChillMainBundle/Resources/public/module/collection/index.ts

@@ -28,7 +28,13 @@
  * });
  * ```
  */
-import "./collection.scss";
+import './collection.scss';
+
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'show-hide-show': CustomEvent<{id: number, froms: HTMLElement[], container: HTMLElement}>,
+    }
+}
 
 export class CollectionEventPayload {
     collection: HTMLUListElement;
@@ -41,31 +47,27 @@ export class CollectionEventPayload {
 }
 
 export const handleAdd = (button: any): void => {
-    const form_name = button.dataset.collectionAddTarget,
+    let
+        form_name = button.dataset.collectionAddTarget,
         prototype = button.dataset.formPrototype,
-        collection: HTMLUListElement | null = document.querySelector(
-            'ul[data-collection-name="' + form_name + '"]',
-        );
+        collection: HTMLUListElement | null = document.querySelector('ul[data-collection-name="' + form_name + '"]');
 
     if (collection === null) {
         return;
     }
 
-    const empty_explain: HTMLLIElement | null = collection.querySelector(
-            "li[data-collection-empty-explain]",
-        ),
-        entry = document.createElement("li"),
-        counter = collection.querySelectorAll("li.entry").length, // Updated counter logic
+    let
+        empty_explain: HTMLLIElement | null = collection.querySelector('li[data-collection-empty-explain]'),
+        entry = document.createElement('li'),
+        counter = collection.querySelectorAll('li.entry').length, // Updated counter logic
         content = prototype.replace(/__name__/g, counter.toString()),
-        event = new CustomEvent("collection-add-entry", {
-            detail: new CollectionEventPayload(collection, entry),
-        });
+        event = new CustomEvent('collection-add-entry', {detail: new CollectionEventPayload(collection, entry)});
 
-    console.log(counter);
-    console.log(content);
+    console.log(counter)
+    console.log(content)
 
     entry.innerHTML = content;
-    entry.classList.add("entry");
+    entry.classList.add('entry');
 
     if ("collectionRegular" in collection.dataset) {
         initializeRemove(collection, entry);
@@ -79,10 +81,7 @@ export const handleAdd = (button: any): void => {
     window.dispatchEvent(event);
 };
 
-const initializeRemove = (
-    collection: HTMLUListElement,
-    entry: HTMLLIElement,
-): void => {
+const initializeRemove = (collection: HTMLUListElement, entry: HTMLLIElement): void => {
     const button = buildRemoveButton(collection, entry);
     if (null === button) {
         return;
@@ -90,24 +89,21 @@ const initializeRemove = (
     entry.appendChild(button);
 };
 
-export const buildRemoveButton = (
-    collection: HTMLUListElement,
-    entry: HTMLLIElement,
-): HTMLButtonElement | null => {
-    const button = document.createElement("button"),
-        isPersisted = entry.dataset.collectionIsPersisted || "",
-        content = collection.dataset.collectionButtonRemoveLabel || "",
-        allowDelete = collection.dataset.collectionAllowDelete || "",
-        event = new CustomEvent("collection-remove-entry", {
-            detail: new CollectionEventPayload(collection, entry),
-        });
+export const buildRemoveButton = (collection: HTMLUListElement, entry: HTMLLIElement): HTMLButtonElement|null => {
 
-    if (allowDelete === "0" && isPersisted === "1") {
+    let
+        button = document.createElement('button'),
+        isPersisted = entry.dataset.collectionIsPersisted || '',
+        content = collection.dataset.collectionButtonRemoveLabel || '',
+        allowDelete = collection.dataset.collectionAllowDelete || '',
+        event = new CustomEvent('collection-remove-entry', {detail: new CollectionEventPayload(collection, entry)});
+
+    if (allowDelete === '0' && isPersisted === '1') {
         return null;
     }
-    button.classList.add("btn", "btn-delete", "remove-entry");
+    button.classList.add('btn', 'btn-delete', 'remove-entry');
     button.textContent = content;
-    button.addEventListener("click", (e: Event) => {
+    button.addEventListener('click', (e: Event) => {
         e.preventDefault();
         entry.remove();
         collection.dispatchEvent(event);
@@ -115,26 +111,36 @@ export const buildRemoveButton = (
     });
 
     return button;
-};
+}
 
-window.addEventListener("load", () => {
-    const addButtons: NodeListOf<HTMLButtonElement> = document.querySelectorAll(
-            "button[data-collection-add-target]",
-        ),
-        collections: NodeListOf<HTMLUListElement> = document.querySelectorAll(
-            "ul[data-collection-regular]",
-        );
+const collectionsInit = new Set<string>;
+const buttonsInit = new Set<string>();
+
+const initialize = function (target: Document|Element): void {
+    let
+        addButtons: NodeListOf<HTMLButtonElement> = document.querySelectorAll("button[data-collection-add-target]"),
+        collections: NodeListOf<HTMLUListElement> = document.querySelectorAll("ul[data-collection-regular]");
 
     for (let i = 0; i < addButtons.length; i++) {
         const addButton = addButtons[i];
-        addButton.addEventListener("click", (e: Event) => {
+        const uniqid = addButton.dataset.uniqid as string;
+        if (buttonsInit.has(uniqid)) {
+            continue;
+        }
+        buttonsInit.add(uniqid);
+        addButton.addEventListener('click', (e: Event) => {
             e.preventDefault();
             handleAdd(e.target);
         });
     }
     for (let i = 0; i < collections.length; i++) {
-        const entries: NodeListOf<HTMLLIElement> =
-            collections[i].querySelectorAll(":scope > li");
+        const collection = collections[i];
+        const uniqid = collection.dataset.uniqid as string;
+        if (collectionsInit.has(uniqid)) {
+            continue;
+        }
+        collectionsInit.add(uniqid);
+        let entries: NodeListOf<HTMLLIElement> = collection.querySelectorAll(':scope > li');
         for (let j = 0; j < entries.length; j++) {
             if (entries[j].dataset.collectionEmptyExplain === "1") {
                 continue;
@@ -142,4 +148,13 @@ window.addEventListener("load", () => {
             initializeRemove(collections[i], entries[j]);
         }
     }
+};
+
+window.addEventListener('DOMContentLoaded', () => {
+    initialize(document);
 });
+
+window.addEventListener('show-hide-show', (event: CustomEvent<{id: number; container: HTMLElement; froms: HTMLElement[]}>) => {
+    const container = event.detail.container as HTMLElement;
+    initialize(container);
+})

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

@@ -1,7 +1,7 @@
-import { createApp } from "vue";
-import PickEntity from "ChillMainAssets/vuejs/PickEntity/PickEntity.vue";
-import { _createI18n } from "ChillMainAssets/vuejs/_js/i18n";
-import { appMessages } from "ChillMainAssets/vuejs/PickEntity/i18n";
+import { createApp } from 'vue';
+import PickEntity from 'ChillMainAssets/vuejs/PickEntity/PickEntity.vue';
+import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
+import { appMessages } from 'ChillMainAssets/vuejs/PickEntity/i18n';
 
 const i18n = _createI18n(appMessages);
 
@@ -9,169 +9,158 @@ let appsOnPage = new Map();
 let appsPerInput = new Map();
 
 function loadDynamicPicker(element) {
-  let apps = element.querySelectorAll('[data-module="pick-dynamic"]');
 
-  apps.forEach(function (el) {
-    const 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)),
-      (as_id = parseInt(el.dataset.asId) === 1),
-      (submit_on_adding_new_entity =
-        parseInt(el.dataset.submitOnAddingNewEntity) === 1);
-    label = el.dataset.label;
+    let apps = element.querySelectorAll('[data-module="pick-dynamic"]');
 
-    if (!isMultiple) {
-      if (input.value === "[]") {
-        input.value = null;
-      }
-    }
+    apps.forEach(function(el) {
 
-    const app = createApp({
-      template:
-        "<pick-entity " +
-        ':multiple="multiple" ' +
-        ':types="types" ' +
-        ':picked="picked" ' +
-        ':uniqid="uniqid" ' +
-        ':suggested="notPickedSuggested" ' +
-        ':label="label" ' +
-        '@addNewEntity="addNewEntity" ' +
-        '@removeEntity="removeEntity"></pick-entity>',
-      components: {
-        PickEntity,
-      },
-      data() {
-        return {
-          multiple: isMultiple,
-          types: JSON.parse(el.dataset.types),
-          picked: picked === null ? [] : picked,
-          uniqid: el.dataset.uniqid,
-          suggested,
-          as_id,
-          submit_on_adding_new_entity,
-          label,
-        };
-      },
-      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 }) {
-          if (this.multiple) {
-            if (
-              !this.picked.some((el) => {
-                return el.type === entity.type && el.id === entity.id;
-              })
-            ) {
-              this.picked.push(entity);
-              if (!as_id) {
-                input.value = JSON.stringify(this.picked);
-              } else {
-                const ids = this.picked.map((el) => el.id);
-                input.value = ids.join(",");
-              }
-              console.log(entity);
+        const
+            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),
+            as_id = parseInt(el.dataset.asId) === 1,
+            submit_on_adding_new_entity = parseInt(el.dataset.submitOnAddingNewEntity) === 1
+            label = el.dataset.label;
+
+        if (!isMultiple) {
+            if (input.value === '[]'){
+                input.value = null;
             }
-          } else {
-            if (
-              !this.picked.some((el) => {
-                return el.type === entity.type && el.id === entity.id;
-              })
-            ) {
-              this.picked.splice(0, this.picked.length);
-              this.picked.push(entity);
-              if (!as_id) {
-                input.value = JSON.stringify(this.picked[0]);
-              } else {
-                input.value = this.picked.map((el) => el.id);
+        }
+
+        const app = createApp({
+            template: '<pick-entity ' +
+                ':multiple="multiple" ' +
+                ':types="types" ' +
+                ':picked="picked" ' +
+                ':uniqid="uniqid" ' +
+                ':suggested="notPickedSuggested" ' +
+                ':label="label" ' +
+                '@addNewEntity="addNewEntity" ' +
+                '@removeEntity="removeEntity" ' +
+                '@addNewEntityProcessEnded="addNewEntityProcessEnded"' +
+              '></pick-entity>',
+            components: {
+                PickEntity,
+            },
+            data() {
+                return {
+                    multiple: isMultiple,
+                    types: JSON.parse(el.dataset.types),
+                    picked: picked === null ? [] : picked,
+                    uniqid: el.dataset.uniqid,
+                    suggested,
+                    as_id,
+                    submit_on_adding_new_entity,
+                    label,
+                }
+            },
+            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}) {
+                    if (this.multiple) {
+                        if (!this.picked.some(el => {
+                            return el.type === entity.type && el.id === entity.id;
+                        })) {
+                            this.picked.push(entity);
+                            if (!as_id) {
+                              input.value = JSON.stringify(this.picked);
+                            } else {
+                              const ids = this.picked.map(el => el.id);
+                              input.value = ids.join(',');
+                            }
+                            console.log(entity)
+                        }
+                    } else {
+                        if (!this.picked.some(el => {
+                            return el.type === entity.type && el.id === entity.id;
+                        })) {
+                            this.picked.splice(0, this.picked.length);
+                            this.picked.push(entity);
+                            if (!as_id) {
+                              input.value = JSON.stringify(this.picked[0]);
+                            } else {
+                              input.value = this.picked.map(el => el.id);
+                            }
+                        }
+                    }
+                },
+                addNewEntityProcessEnded() {
+                  if (this.submit_on_adding_new_entity) {
+                    input.form.submit();
+                  }
+                },
+                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));
+                    if (this.multiple) {
+                      input.value = JSON.stringify(this.picked);
+                    } else {
+                      input.value = "";
+                    }
+                },
             }
-          }
+        })
+        .use(i18n)
+        .mount(el);
 
-          if (this.submit_on_adding_new_entity) {
-            input.form.submit();
-          }
-        },
-        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),
-          );
-          if (this.multiple) {
-            input.value = JSON.stringify(this.picked);
-          } else {
-            input.value = "";
-          }
-        },
-      },
-    })
-      .use(i18n)
-      .mount(el);
-
-    appsOnPage.set(uniqId, app);
-    appsPerInput.set(input.name, app);
-  });
+        appsOnPage.set(uniqId, app);
+        appsPerInput.set(input.name, app);
+    });
 }
 
-document.addEventListener("show-hide-show", function (e) {
-  loadDynamicPicker(e.detail.container);
+
+document.addEventListener('show-hide-show', function(e) {
+    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;
-      if (appsOnPage.has(uniqId)) {
-        appsOnPage.get(uniqId).unmount();
-        appsOnPage.delete(uniqId);
+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;
+        if (appsOnPage.has(uniqId)) {
+            appsOnPage.get(uniqId).unmount();
+            appsOnPage.delete(uniqId);
+        }
+    })
+});
+
+document.addEventListener('pick-entity-type-action', function (e) {
+      console.log('pick entity event', e);
+      if (!appsPerInput.has(e.detail.name)) {
+          console.error('no app with this name');
+          return;
+      }
+      const app = appsPerInput.get(e.detail.name);
+      if (e.detail.action === 'add') {
+          app.addNewEntity(e.detail.entity);
+      } else if (e.detail.action === 'remove') {
+        app.removeEntity(e.detail.entity);
+      } else {
+          console.error('action not supported: '+e.detail.action);
       }
-    });
 });
 
-document.addEventListener("pick-entity-type-action", function (e) {
-  console.log("pick entity event", e);
-  if (!appsPerInput.has(e.detail.name)) {
-    console.error("no app with this name");
-    return;
-  }
-  const app = appsPerInput.get(e.detail.name);
-  if (e.detail.action === "add") {
-    app.addNewEntity(e.detail.entity);
-  } else if (e.detail.action === "remove") {
-    app.removeEntity(e.detail.entity);
-  } else {
-    console.error("action not supported: " + e.detail.action);
-  }
-});
-
-document.addEventListener("DOMContentLoaded", function (e) {
-  loadDynamicPicker(document);
-});
+document.addEventListener('DOMContentLoaded', function(e) {
+    loadDynamicPicker(document)
+})
 
 window.loadDynamicPicker = loadDynamicPicker;
+