adding addPersons component with modal, search field and basic suggestions

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue

@@ -0,0 +1,72 @@
+<template>
+   <button class="sc-button bt-create centered mt-4" 
+      @click="modal.showModal = true">
+      {{ $t('add_persons.search_add_others_persons') }}
+   </button>
+   
+   <teleport to="body">
+      <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">      
+         <template v-slot:header>
+            <h3 class="modal-title">{{ $t('add_persons.title') }}</h3>
+         </template>
+         <template v-slot:body>
+            
+            <label style="float: right;">{{ $tc('add_persons.counter', counter) }}</label>
+            
+            <input class="my-4" v-model="query" name="query"
+               :placeholder="$t('add_persons.search_some_persons')" />
+         
+            <ul class="results suggestions">
+               <person-suggestion v-for="item in suggested.results"
+                  v-bind:item="item" 
+                  v-bind:key="item.id">
+               </person-suggestion>
+            </ul>
+               
+         </template>
+         <template v-slot:footer>
+            <button class="sc-button green" @click="modal.showModal = false">{{ $t('action.save')}}</button>
+         </template>
+      </modal>
+   </teleport>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import Modal from 'ChillPersonAssets/vuejs/_components/Modal';
+import PersonSuggestion from 'ChillPersonAssets/vuejs/_components/PersonSuggestion';
+
+export default {
+   name: 'AddPersons',
+   components: {
+      Modal,
+      PersonSuggestion,
+   },
+   data() {
+      return {
+         modal: {
+            showModal: false,
+            modalDialogClass: "modal-dialog-scrollable modal-xl"
+         }
+      }
+   },
+   computed: {
+      ...mapState(['add_persons']),
+      query: {
+         set(query) {
+            this.$store.dispatch('setQuery', { query });
+         },
+         get() {
+            return this.add_persons.query;
+         }
+      },
+      suggested() {
+         return this.add_persons.suggested;
+      },
+      counter() {
+         if (! this.add_persons.suggested.results) { return 0; }
+         return this.add_persons.suggested.results.length;
+      }
+   }
+}
+</script>