chill-bundles/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue

<template>
   <button class="sc-button bt-create centered mt-4" @click="openModal">
      {{ $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-fixed>
            <div class="search">
               <label style="float: right;">
                  {{ $tc('add_persons.suggested_counter', suggestedCounter) }}
               </label>
               
               <input id="search-persons"
                  name="query" 
                  v-model="query" 
                  :placeholder="$t('add_persons.search_some_persons')" 
                  ref="search" />
               <i class="fa fa-search fa-lg"></i>
            </div>
         </template>
               
         <template v-slot:body>
            <!--span class="discret">Selection: {{ selected }}</span-->
            <div class="results">
               <div class="count">
                  <span v-if="suggestedCounter > 0" style="">
                        <a href="#">{{ $t('action.check_all')}}</a>
                  </span>
                  <span v-if="selectedCounter > 0" style="float:right;">
                     {{ $tc('add_persons.selected_counter', selectedCounter) }}
                  </span>
               </div>
               <person-suggestion 
                  v-for="item in this.selectedAndSuggested"
                  v-bind:item="item" 
                  v-bind:key="item.id">
               </person-suggestion>
               <button v-if="query.length >= 3" class="sc-button bt-create ml-5 mt-2" name="createPerson">
                  Ajouter "{{ query }}"
               </button>
            </div>
         </template>
               
         <template v-slot:footer>
            <button class="sc-button green" @click="addPersons">
               <i class="fa fa-plus fa-fw"></i>{{ $t('action.add')}}
            </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"
         }
      }
   },
   methods: {
      openModal() {
         this.modal.showModal = true;
         this.$nextTick(function() {
            this.$refs.search.focus();
         })
      }
   },
   computed: {
      ...mapState(['add_persons']),
      query: {
         set(query) {
            this.$store.dispatch('setQuery', { query });
         },
         get() {
            return this.add_persons.query;
         }
      },
      suggested() {
         return this.add_persons.suggested;
      },
      suggestedCounter() {
         return this.add_persons.suggested.length;
      }, 
      selected() {
         return this.add_persons.selected;
      }, 
      selectedCounter() {
         if (! this.add_persons.selected) { return 0; }
         return this.add_persons.selected.length;
      },
      selectedAndSuggested() {
         return [...new Set([...this.selected, ...this.suggested])];
      },
      addPersons() {
         console.log('add persons');
         // code here
         this.modal.showModal = false;
      }
   }
}
</script>