Address selection: add store + addressSuggestion

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

@@ -0,0 +1,14 @@
+/*
+* Endpoint chill_main_address_reference_api_show
+* method GET, get AddressReference Object
+* @returns {Promise} a promise containing all AddressReference object
+*
+*/
+export const getReferenceAddress = () => {
+    const url = `/api/1.0/main/address-reference.json`;
+    return fetch(url)
+       .then(response => {
+          if (response.ok) { return response.json(); }
+          throw Error('Error with request resource response');
+       });
+};

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

@@ -1,32 +1,22 @@
 import { createApp } from 'vue'
 import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
-import { appMessages } from './js/i18n'
+import { addressMessages } from './js/i18n'
 import { getDataPromise } from './store'
 
 import App from './App.vue';
 
-// getDataPromise.then(store => {
+getDataPromise.then(store => {
 
-//    console.log('store address', store.state.address);
+   console.log('store address', store.state.referenceAddresses);
 
-//    const i18n = _createI18n(appMessages);
+   const i18n = _createI18n(addressMessages);
-//    console.log(i18n)
 
-//    const app = createApp({
+   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)
+   .use(store)
-.component('app', App)
+   .use(i18n)
-.mount('#address');
+   .component('app', App)
+   .mount('#address');
+
+});

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

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

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

@@ -0,0 +1,115 @@
+import 'es6-promise/auto';
+import { createStore } from 'vuex';
+import { getReferenceAddress } from '../api';
+//import { searchPersons } from 'ChillPersonAssets/vuejs/_api/AddPersons'
+
+const debug = process.env.NODE_ENV !== 'production';
+
+// const id = window.accompanyingCourseId; //tmp TODO
+
+const getDataPromise = getReferenceAddress()
+   .then(referenceAddresses => new Promise((resolve, reject) => {
+
+      const store = createStore({
+         strict: debug,
+         state: {
+            referenceAddresses: referenceAddresses.results,
+            countries: ['france', 'belgium'] //TODO fetch countries from CHILL API
+            // add_persons: {
+            //    query: "",
+            //    suggested: [],
+            //    selected: []
+            // },
+            // errorMsg: []
+         },
+         getters: {
+            getCountries: state => state.countries,
+            getReferenceAddresses: state => state.referenceAddresses,
+            // getReferenceAddressesCities: state => {}, //TODO get unique cities from addressReference
+         },
+         mutations: {
+            // removeParticipation(state, item) {
+            //    //console.log('mutation: remove item', item.id);
+            //    state.accompanying_course.participations = state.accompanying_course.participations.filter(participation => participation !== item);
+            // },
+            // closeParticipation(state, { participation, payload }) {
+            //    console.log('### mutation: close item', { participation, payload });
+            //    // temporaire, le temps que le backend ajoute la enddate
+            //    participation.endDate = { datetime: "2021-05-06T10:49:00+0200" };
+            //    // trouve dans le state le payload et le supprime du state
+            //    state.accompanying_course.participations = state.accompanying_course.participations.filter(participation => participation !== payload);
+            //    // pousse la participation
+            //    state.accompanying_course.participations.push(participation);
+            // },
+            // addParticipation(state, { participation, payload }) {
+            //    //console.log('### mutation: add participation', participation);
+            //    state.accompanying_course.participations.push(participation);
+            //    //console.log('count participations from state', state.accompanying_course.participations.length);
+            //    //console.log('avant', state.add_persons.selected);
+            //    state.add_persons.selected = state.add_persons.selected.filter(value => value !== payload);
+            //    //console.log('après', state.add_persons.selected);
+            //    state.add_persons.query = "";
+            //    state.add_persons.suggested = [];
+            // },
+            // setQuery(state, query) {
+            //    //console.log('q=', query);
+            //    state.add_persons = Object.assign({}, state.add_persons, query);
+            // },
+            // loadSuggestions(state, suggested) {
+            //    state.add_persons.suggested = suggested;
+            // },
+            // updateSelected(state, value) {
+            //    state.add_persons.selected = value;
+            // }
+         },
+         actions: {
+            // removeParticipation({ commit }, payload) {
+            //    commit('removeParticipation', payload);
+            // },
+            // closeParticipation({ commit }, payload) {
+            //    console.log('## action: fetch delete participation: payload', payload.person.id);
+            //    postParticipation(id, payload.person.id, 'DELETE')
+            //       .then(participation => new Promise((resolve, reject) => {
+            //          //console.log('payload', payload);
+            //          commit('closeParticipation', { participation, payload });
+            //          resolve();
+            //       }))
+            //       .catch((error) => {
+            //          console.log('error', error);
+            //          state.errorMsg.push(error.message);
+            //       });
+            // },
+            // addParticipation({ commit }, payload) {
+            //    console.log('## action: fetch post participation: payload', payload.id);
+            //    postParticipation(id, payload.id, 'POST')
+            //       .then(participation => new Promise((resolve, reject) => {
+            //          commit('addParticipation', { participation, payload });
+            //          resolve();
+            //       }))
+            //       .catch((error) => {
+            //          state.errorMsg.push(error.message);
+            //       });
+            // },
+            // setQuery({ commit }, payload) {
+            //    commit('setQuery', payload);
+            //    //console.log('## action: setquery: payload', payload);
+            //    if (payload.query.length >= 3) {
+            //       searchPersons(payload.query)
+            //          .then(suggested => new Promise((resolve, reject) => {
+            //             commit('loadSuggestions', suggested.results);
+            //             resolve();
+            //       }));
+            //    } else {
+            //       commit('loadSuggestions', []);
+            //    }
+            // },
+            // updateSelected({ commit }, payload) {
+            //    //console.log('## action: update selected values: payload', payload);
+            //    commit('updateSelected', payload);
+            // }
+         }
+      });
+      resolve(store);
+   }));
+
+export { getDataPromise };

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

@@ -1,7 +1,6 @@
 <template>
    <button class="sc-button bt-create centered mt-4" @click="openModal">
-      <!-- {{ $t('add_addresses.search_add_others_addresses') }} -->
+      {{ $t('add_an_address') }}
-      ajoute address
    </button>
 
    <teleport to="body">
@@ -10,13 +9,28 @@
          @close="modal.showModal = false">
 
          <template v-slot:header>
-            <h3 class="modal-title">mon titre</h3>
+            <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="results">
-               <!-- <div class="count">
+               <div class="count">
                   <span>
                      <a  v-if="suggestedCounter > 0" href="#">
                         {{ $t('action.check_all')}}</a>
@@ -28,13 +42,13 @@
                   </span>
                </div>
 
-               <person-suggestion
+               <address-suggestion
-                  v-for="item in this.selectedAndSuggested.slice().reverse()"
+                  v-for="item in this.referenceAddresses.slice().reverse()"
                   v-bind:item="item"
                   v-bind:key="item.id">
-               </person-suggestion>
+               </address-suggestion>
 
-               <button v-if="query.length >= 3" class="sc-button bt-create ml-5 mt-2" name="createPerson">
+               <!-- <button v-if="query.length >= 3" class="sc-button bt-create ml-5 mt-2" name="createPerson">
                   {{ $t('action.create') }} "{{ query }}"
                </button> -->
             </div>
@@ -53,13 +67,13 @@
 <script>
 import { mapState } from 'vuex';
 import Modal from './Modal';
-// import PersonSuggestion from 'ChillPersonAssets/vuejs/_components/PersonSuggestion'; //TODO import AddressSuggestions
+import AddressSuggestion from './AddressSuggestion';
 
 export default {
    name: 'AddAddresses',
    components: {
       Modal,
-    //   PersonSuggestion,
+      AddressSuggestion,
    },
    data() {
       return {
@@ -71,6 +85,7 @@ export default {
    },
    computed: {
       ...mapState(['add_addresses']),
+      referenceAddresses() {return this.$store.getters.getReferenceAddresses;}
       // query: {
       //    set(query) {
       //       this.$store.dispatch('setQuery', { query });

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

@@ -0,0 +1,50 @@
+<template>
+   <div class="list-item" :class="{ checked: isChecked }">
+      <div class="container">
+
+         <!--a class="discret" target="_blank" :href="url.show">{{ item.id }}</a-->
+         <input class=""
+            type="checkbox"
+            v-model="selected"
+            :value="item" />
+
+         {{ item.street }}
+         {{ item.streetNumber }}
+
+      </div>
+      <!-- <div class="right_actions">
+
+         <span class="badge badge-pill badge-secondary" :title="item.id">
+            {{ $t('item.type_person') }}
+         </span>
+         <a class="sc-button bt-show" target="_blank" :title="item.id" :href="url.show"></a>
+
+      </div> -->
+   </div>
+</template>
+
+<script>
+
+export default {
+   name: 'AddressSuggestion',
+   props: ['item'],
+   data() {
+   },
+   computed: {
+      selected: {
+         set(value) {
+            this.$store.dispatch('updateSelected', value);
+         },
+         // get() {
+         //    return this.$store.state.add_persons.selected; //TODO
+         // }
+      },
+      //selectedAndSuggested() {
+      //   return this.$store.getters.selectedAndSuggested;
+      //},
+      // isChecked() {
+      //    return (this.selected.indexOf(this.item) === -1) ? false : true;
+      // }
+   }
+};
+</script>