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);
+    });
+});

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

@@ -0,0 +1,97 @@
+<template>
+    <ul class="list-suggest remove-items">
+        <li v-for="p in picked" @click="removeEntity(p)" :key="p.type+p.id">
+            <span class="chill_denomination">{{ p.text }}</span>
+        </li>
+    </ul>
+    <ul class="record_actions">
+        <li>
+            <AddPersons
+                :options="addPersonsOptions"
+                :key="uniqid"
+                buttonTitle="pick_person.add"
+                modalTitle="translatedListOfTypes"
+                ref="addPersons"
+                @addNewPersons="addNewEntity"
+            >
+            </AddPersons>
+        </li>
+    </ul>
+</template>
+
+<script>
+import AddPersons from "ChillPersonAssets/vuejs/_components/AddPersons.vue";
+import messages from "./i18n";
+
+console.log('messages', messages);
+
+export default {
+    name: "PickEntity",
+    messages,
+    props: {
+        multiple: {
+            type: Boolean,
+            required: true,
+        },
+        types: {
+            type: Array,
+            required: true,
+        },
+        picked: {
+            required: true,
+        },
+        uniqid: {
+            type: String,
+            required: true,
+        }
+    },
+    emits: ['addNewEntity', 'removeEntity'],
+    components: {
+        AddPersons,
+    },
+    data() {
+        return {
+            key: ''
+        };
+    },
+    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 => {
+                trans.push(this.$t('pick_entity.'.t));
+            })
+
+            return trans.join(', ');
+        }
+    },
+    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) {
+            console.log('remove entity', entity);
+            this.$emit('removeEntity', entity);
+        }
+    },
+}
+</script>
+
+<style scoped>
+
+</style>

src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/i18n.js

@@ -0,0 +1,17 @@
+import { personMessages } from 'ChillPersonAssets/vuejs/_js/i18n'
+
+const messages = {
+    fr: {
+        pick_entity: {
+            add: 'Ajouter',
+            modal_title: 'Ajouter des',
+            user: 'Utilisateurs',
+            person: 'Usagers',
+            thirdparty: 'Tiers',
+        }
+    }
+}
+
+const full = Object.assign(messages, personMessages);
+
+export default full;

src/Bundle/ChillMainBundle/Resources/views/Form/fields.html.twig

@@ -215,3 +215,8 @@
         {{ form_widget(form.center) }}
     {% endif %}
 {% endblock %}
+
+{% block pick_user_dynamic_widget %}
+    <input type="hidden" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %} data-input-uniqid="{{ form.vars['uniqid'] }}"/>
+    <div data-module="pick-dynamic" data-types="{{ form.vars['types']|json_encode }}" data-multiple="{{ form.vars['multiple'] }}" data-uniqid="{{ form.vars['uniqid'] }}"></div>
+{% endblock %}

src/Bundle/ChillMainBundle/Resources/views/Notification/create.html.twig

@@ -1,5 +1,15 @@
 {% extends "@ChillMain/layout.html.twig"  %}
 
+{% block js %}
+    {{ parent() }}
+    {{ encore_entry_script_tags('mod_pickentity_type') }}
+{% endblock %}
+
+{% block css %}
+    {{ parent() }}
+    {{ encore_entry_link_tags('mod_pickentity_type') }}
+{% endblock %}
+
 {% block content %}
 <div class="row">
     <div class="col-md-10">

src/Bundle/ChillMainBundle/Resources/views/Notification/edit.html.twig

@@ -1,5 +1,15 @@
 {% extends "@ChillMain/layout.html.twig"  %}
 
+{% block js %}
+    {{ parent() }}
+    {{ encore_entry_script_tags('mod_pickentity_type') }}
+{% endblock %}
+
+{% block css %}
+    {{ parent() }}
+    {{ encore_entry_link_tags('mod_pickentity_type') }}
+{% endblock %}
+
 {% block content %}
 <div class="row">
     <div class="col-md-10">