add component and type to add user dynamically

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

@@ -0,0 +1,59 @@
+import {createApp} from 'vue';
+import PickEntity from 'ChillMainAssets/vuejs/PickEntity/PickEntity.vue';
+import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
+import {activityMessages} from "../../../../../ChillActivityBundle/Resources/public/vuejs/Activity/i18n";
+
+window.addEventListener('DOMContentLoaded', function(e) {
+    let
+        apps = document.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)],
+            i18n = _createI18n({});
+
+        createApp({
+            template: '<pick-entity :multiple="multiple" :types="types" :picked="picked" :uniqid="uniqid" @addNewEntity="addNewEntity" @removeEntity="removeEntity"></pick-entity>',
+            components: {
+                PickEntity,
+            },
+            data() {
+                return {
+                    multiple: isMultiple,
+                    types: JSON.parse(el.dataset.types),
+                    picked,
+                    uniqid: el.dataset.uniqid,
+                }
+            },
+            methods: {
+                addNewEntity(entity) {
+                    console.log('addNewEntity', entity);
+                    if (this.multiple) {
+                        console.log('adding 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);
+                        }
+                    } 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);
+                            input.value = JSON.stringify(this.picked[0]);
+                        }
+                    }
+                },
+                removeEntity(entity) {
+                    console.log('removeEntity', entity);
+                    this.picked = this.picked.filter(e => !(e.type === entity.type && e.id === entity.id));
+                    input.value = JSON.stringify(this.picked);
+                },
+            }
+        }).use(i18n).mount(el);
+    });
+});