chill-bundles/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress.vue

<template>
   <button class="sc-button bt-create centered mt-4" @click="openModal">
      {{ $t('add_an_address') }}
   </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_an_address') }}</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="address_form__left">
               <!-- <div class="count">
                  <span>
                     <a  v-if="suggestedCounter > 0" href="#">
                        {{ $t('action.check_all')}}</a>
                     <a  v-if="selectedCounter > 0" href="#">
                        {{ $t('action.reset')}}</a>
                  </span>
                  <span v-if="selectedCounter > 0">
                     {{ $tc('add_persons.selected_counter', selectedCounter) }}
                  </span>
               </div> -->

               <country-selection>
               </country-selection>

               <city-selection>
               </city-selection>

               <address-selection>
               </address-selection>

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

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

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

<script>
import { mapState } from 'vuex';
import Modal from './Modal';
import CountrySelection from './CountrySelection';
import CitySelection from './CitySelection';
import AddressSelection from './AddressSelection';
import AddressMap from './AddressMap';


export default {
   name: 'AddAddresses',
   components: {
      Modal,
      CountrySelection,
      CitySelection,
      AddressSelection,
      AddressMap
   },
   data() {
      return {
         modal: {
            showModal: false,
            modalDialogClass: "modal-dialog-scrollable modal-xl"
         }
      }
   },
   computed: {
      ...mapState(['add_addresses']), //TODO: is it useful?
      // query: {
      //    set(query) {
      //       this.$store.dispatch('setQuery', { query });
      //    },
      //    get() {
      //       return this.add_persons.query;
      //    }
      // },
      // suggested() {  //TODO
      //    return this.add_persons.suggested;
      // },
      // suggestedCounter() {
      //    return this.add_persons.suggested.length;
      // },
      // selected() {
      //    return this.add_persons.selected;
      // },
      // selectedCounter() {
      //    return this.add_persons.selected.length;
      // },
      // selectedAndSuggested() {
      //    return this.$store.getters.selectedAndSuggested;
      // }
   },
   methods: {
      openModal() {
         this.modal.showModal = true;
         // this.$nextTick(function() {
         //    this.$refs.search.focus();
         // })
      },
      addAddresses() {
         console.log('@@@ CLICK button addAddresses')
         this.selected.forEach(function(item) {
               //console.log('# dispatch action for each item', item);
            //    this.$store.dispatch('addParticipation', item); //TODO
            }, this
         );
         this.modal.showModal = false;
      }
   }
}
</script>