add POC of a vuejs component (opens a modal) for address selection

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress.vue

@@ -0,0 +1,116 @@
+<template>
+   <button class="sc-button bt-create centered mt-4" @click="openModal">
+      <!-- {{ $t('add_addresses.search_add_others_addresses') }} -->
+      ajoute 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">mon titre</h3>
+         </template>
+
+         <template v-slot:body>
+            <!--span class="discret">Selection: {{ selected }}</span-->
+            <div class="results">
+               <!-- <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>
+
+               <person-suggestion
+                  v-for="item in this.selectedAndSuggested.slice().reverse()"
+                  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">
+                  {{ $t('action.create') }} "{{ query }}"
+               </button> -->
+            </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 PersonSuggestion from 'ChillPersonAssets/vuejs/_components/PersonSuggestion'; //TODO import AddressSuggestions
+
+export default {
+   name: 'AddAddresses',
+   components: {
+      Modal,
+    //   PersonSuggestion,
+   },
+   data() {
+      return {
+         modal: {
+            showModal: false,
+            modalDialogClass: "modal-dialog-scrollable modal-xl"
+         }
+      }
+   },
+   computed: {
+      ...mapState(['add_addresses']),
+      // 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>