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

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue

@@ -0,0 +1,19 @@
+<template>
+   <add-address></add-address>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+import AddAddress from '../_components/AddAddress.vue';
+
+export default {
+   name: 'App',
+   components: {
+      AddAddress
+   },
+   computed: mapState([
+      'address'
+   ])
+};
+</script>

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js

@@ -0,0 +1,32 @@
+import { createApp } from 'vue'
+import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
+import { appMessages } from './js/i18n'
+import { getDataPromise } from './store'
+
+import App from './App.vue';
+
+// getDataPromise.then(store => {
+
+//    console.log('store address', store.state.address);
+
+//    const i18n = _createI18n(appMessages);
+//    console.log(i18n)
+
+//    const app = createApp({
+//       template: `<app></app>`,
+//    })
+//    .use(store)
+//    .use(i18n)
+//    .component('app', App)
+//    .mount('#address');
+
+// });
+
+const i18n = _createI18n(appMessages);
+
+const app = createApp({
+   template: `<app></app>`,
+})
+.use(i18n)
+.component('app', App)
+.mount('#address');

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/js/i18n.js

@@ -0,0 +1,15 @@
+// import { mainMessages } from 'ChillMainAssets/vuejs/_js/i18n'
+
+const appMessages = {
+   fr: {
+      address: {
+         id: "id",
+      },
+   }
+};
+
+// Object.assign(appMessages.fr, mainMessages.fr);
+
+export {
+   appMessages
+};

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>

src/Bundle/ChillMainBundle/chill.webpack.config.js

@@ -62,5 +62,7 @@ module.exports = function(encore, entries)
     buildCKEditor(encore);
     encore.addEntry('ckeditor5', __dirname + '/Resources/public/modules/ckeditor5/index.js');
 
+    // Address
+    encore.addEntry('address', __dirname + '/Resources/public/vuejs/Address/index.js');
 
 };

src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig

@@ -49,4 +49,16 @@
 
     {{ form_end(form) }}
 
+
+    NEW FORM
+
+    {% block content %}
+        <h1>{{ block('title') }}</h1>
+        <div id="address"></div>
+    {% endblock %}
+
+    {% block js %}
+        {{ encore_entry_script_tags('address') }}
+    {% endblock %}
+
 {% endblock personcontent %}