add component and type to add user dynamically

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>