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

<template>
   <button class="sc-button bt-create centered mt-4" @click="openModal">
      {{ $t(buttonTitle) }}
   </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(modalTitle) }}</h3>
         </template>

         <template v-slot:body-head>
            <div class="modal-body">
               <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>
                  <i class="fa fa-times" v-if="queryLength >= 3" @click="resetSuggestion"></i>

               </div>
            </div>
            <div class="modal-body" v-if="checkUniq === 'checkbox'">
               <div class="count">
                  <span>
                     <a v-if="suggestedCounter > 2" @click="selectAll">
                        {{ $t('action.check_all')}}
                     </a>
                     <a v-if="selectedCounter > 0" @click="resetSelection">
                        <i v-if="suggestedCounter > 2"> • </i>
                        {{ $t('action.reset')}}
                     </a>
                  </span>
                  <span v-if="selectedCounter > 0">
                     {{ $tc('add_persons.selected_counter', selectedCounter) }}
                  </span>
               </div>
            </div>
         </template>

         <template v-slot:body>
            <!--span class="discret">Selection: {{ selected }}</span-->
            <div class="results">

               <person-suggestion
                  v-for="item in this.selectedAndSuggested.slice().reverse()"
                  v-bind:key="itemKey(item)"
                  v-bind:item="item"
                  v-bind:search="search"
                  v-bind:type="checkUniq"
                  @updateSelected="updateSelected">
               </person-suggestion>

               <button v-if="query.length >= 3" class="sc-button bt-create ml-5 mt-2" name="createPerson">
                  {{ $t('action.create') }} "{{ query }}"
               </button>
            </div>
         </template>

         <template v-slot:footer>
            <button class="sc-button green" 
               @click.prevent="$emit('addNewPersons', { selected, modal })">
               <i class="fa fa-plus fa-fw"></i>{{ $t('action.add')}}
            </button>
         </template>

      </modal>
   </teleport>
</template>

<script>
import Modal from 'ChillMainAssets/vuejs/_components/Modal';
import PersonSuggestion from './AddPersons/PersonSuggestion';
import { searchPersons, searchPersons_2 } from 'ChillPersonAssets/vuejs/_api/AddPersons';

export default {
   name: 'AddPersons',
   components: {
      Modal,
      PersonSuggestion,
   },
   props: [
      'buttonTitle',
      'modalTitle',
      'options'
   ],
   emits: ['addNewPersons'],
   data() {
      return {
         modal: {
            showModal: false,
            modalDialogClass: "modal-dialog-scrollable modal-xl"
         },
         search: {
            query: "",
            suggested: [],
            selected: []
         }
      }
   },
   computed: {
      query: {
         set(query) {
            return this.setQuery(query);
         },
         get() {
            return this.search.query;
         }
      },
      queryLength() {
         return this.search.query.length;
      },
      suggested() {
         return this.search.suggested;
      },
      suggestedCounter() {
         return this.search.suggested.length;
      },
      selected() {
         return this.search.selected;
      },
      selectedCounter() {
         return this.search.selected.length;
      },
      selectedAndSuggested() {
         const uniqBy = (a, key) => [
               ...new Map(
                  a.map(x => [key(x), x])
               ).values()
         ];
         let union = [...new Set([
            ...this.suggested.slice().reverse(),
            ...this.selected.slice().reverse(), 
         ])];
         return uniqBy(union, k => k.key);
      },
      options() {
         return this.options;
      },
      checkUniq() {
         if (this.options.uniq === true) {
            return 'radio';
         }
         return 'checkbox';
      }
   },
   methods: {
      openModal() {
         this.modal.showModal = true;
         this.$nextTick(function() {
            this.$refs.search.focus();
         })
      },
      setQuery(query) {
         this.search.query = query;
         if (query.length >= 3) {
            searchPersons_2({ query, options: this.options })
               .then(suggested => new Promise((resolve, reject) => {
                  console.log('suggested', suggested);
                  this.loadSuggestions(suggested.results);
                  resolve();
            }));
         } else {
            this.loadSuggestions([]);
         }
      },
      loadSuggestions(suggested) { 
         console.log('suggested', suggested);
         this.search.suggested = suggested;
         this.search.suggested.forEach(function(item) {
            item.key = this.itemKey(item);
         }, this);
      },
      updateSelected(value) {
         console.log('value', value);
         this.search.selected = value;
      },
      resetSearch() {
         this.resetSelection();
         this.resetSuggestion();
      },
      resetSuggestion() {
         this.search.query = "";
         this.search.suggested = [];
      },
      resetSelection() {
         this.search.selected = [];
      },
      selectAll() {
         this.search.suggested.forEach(function(item) {
            this.search.selected.push(item);
         }, this);
      },
      itemKey(item) {
         return item.result.type + item.result.id;
      }
   },
}
</script>