household address: choose among available address

src/Bundle/ChillMainBundle/Resources/public/vuejs/_api/AddAddress.js

@@ -36,7 +36,6 @@ const fetchCities = (country) => {
 */
 const fetchReferenceAddresses = (postalCode) => {
     console.log('<<< fetching references addresses for', postalCode);
-   //TODO deal with huge number of addresses... we should do suggestion...
     const url = `/api/1.0/main/address-reference.json?item_per_page=1000&postal_code=${postalCode.id}`;
     return fetch(url)
        .then(response => {
@@ -45,6 +44,22 @@ const fetchReferenceAddresses = (postalCode) => {
        });
 };
 
+/*
+* Endpoint chill_api_single_address_reference__index
+* method GET, get AddressReference Object
+* @returns {Promise} a promise containing all AddressReference objects filtered with postal code
+*/
+const fetchAddresses = () => {
+   console.log('<<< fetching addresses');
+  //TODO deal with huge number of addresses... we should do suggestion...
+   const url = `/api/1.0/main/address.json?item_per_page=1000`;
+   return fetch(url)
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response');
+      });
+};
+
 /*
 * Endpoint chill_api_single_address__entity__create
 * method POST, post Address Object
@@ -71,5 +86,6 @@ export {
    fetchCountries,
    fetchCities,
    fetchReferenceAddresses,
+   fetchAddresses,
    postAddress
 };

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdAddress/App.vue

@@ -1,42 +1,84 @@
 <template>
-   <div v-if="address.text">
-      {{ address.text }}
-   </div>
-   <div v-if="address.postcode">
-      {{ address.postcode.name }}
+   <div class='household-address__select'>
+      <h2>{{ $t('select_a_existing_address') }}</h2>
+      <select-household-address
+          v-bind:address="address">
+      </select-household-address>
    </div>
+   <div class='household-address__create'>
+      <h2>{{ $t('create_a_new_address') }}</h2>
       <add-address
          @addNewAddress="addNewAddress">
       </add-address>
+      <div>
+         <div v-if="newAddress.text">
+            {{ newAddress.text }}
+         </div>
+         <div v-if="newAddress.postcode">
+            {{ newAddress.postcode.name }}
+         </div>
+      </div>
+       <div>
+         <div v-if="address.selected.address">
+            {{ address.selected.address.text }}
+         </div>
+         <div v-if="address.selected.address.postcode">
+            {{ address.selected.address.postcode.name }}
+         </div>
+      </div>
+   </div>
+   <div>
       <button class="sc-button bt-create centered mt-4" @click="addToHousehold">
          {{ $t('add_an_address_to_household') }}
       </button>
+   </div>
 </template>
 
 <script>
 
 import AddAddress from 'ChillMainAssets/vuejs/_components/AddAddress.vue';
+import SelectHouseholdAddress from './components/SelectHouseholdAddress.vue';
+import { fetchAddresses } from 'ChillMainAssets/vuejs/_api/AddAddress.js';
 
 export default {
    name: 'App',
    components: {
       AddAddress,
+      SelectHouseholdAddress
    },
    data() {
       return {
-         householdId: window.householdId
+         householdId: window.householdId,
+         address: {
+            loaded: {
+               addresses: [],
+            },
+            selected: {
+               address : {}
+            }
+         }
       }
    },
    computed: {
-      address() {
-         return this.$store.state.address;
+      newAddress() {
+         return this.$store.state.newAddress;
       }
    },
    methods: {
+      getAddresses() {
+         console.log('getAddresses'); //TODO should do suggestion here
+         fetchAddresses().then(addresses => new Promise((resolve, reject) => {
+               this.address.loaded.addresses = addresses.results;
+               resolve();
+            }))
+            .catch((error) => {
+               this.errorMsg.push(error.message);
+            });
+      },
       addNewAddress({ address, modal }) {
          console.log('@@@ CLICK button addNewAdress', address);
 
-         let newAddress = {
+         let createdAddress = {
             'isNoAddress': address.isNoAddress,
             'street': address.selected.address.street,
             'streetNumber': address.selected.address.streetNumber,
@@ -51,21 +93,26 @@ export default {
          };
 
          if (address.selected.address.point !== undefined){
-            newAddress = Object.assign(newAddress, {'point': address.selected.address.point.coordinates});
+            createdAddress = Object.assign(createdAddress, {'point': address.selected.address.point.coordinates});
          }
 
-         this.$store.dispatch('addAddress', newAddress);
+         this.address.selected.address = {}; //unset the selected address, if any
+         this.$store.dispatch('addAddress', createdAddress);
+
          modal.showModal = false;
       },
       addToHousehold() {
          const householdId = this.householdId;
-         const addressId = this.$store.state.address.address_id;
+         const addressId = this.address.selected.address.address_id === undefined ? this.$store.state.newAddress.address_id : this.address.selected.address.address_id
          console.log(householdId);
          console.log(addressId);
 
          this.$store.dispatch('addAddressToHousehold', {householdId, addressId});
       }
-   }
+   },
+   mounted() {
+       this.getAddresses();
+   },
 };
 
 </script>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdAddress/components/SelectHouseholdAddress.vue

@@ -0,0 +1,47 @@
+<template>
+   <div class="container">
+      <VueMultiselect
+         v-model="value"
+         @select="selectAddress"
+         name="field"
+         track-by="id"
+         label="value"
+         :custom-label="transName"
+         :multiple="false"
+         :placeholder="$t('select_address')"
+         :options="addresses">
+      </VueMultiselect>
+   </div>
+</template>
+
+<script>
+import VueMultiselect from 'vue-multiselect';
+
+export default {
+   name: 'SelectHouseholdAddress',
+   components: { VueMultiselect },
+   props: ['address'],
+   data() {
+      return {
+         value: null
+      }
+   },
+   computed: {
+      addresses() {
+         return this.address.loaded.addresses;
+      }
+   },
+   methods: {
+      transName(value) {
+         return `${value.text} ${value.postcode.name}`
+      },
+      selectAddress(value) {
+         this.address.selected.address = value;
+      }
+   }
+};
+</script>
+
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
+
+

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdAddress/js/i18n.js

@@ -2,6 +2,9 @@ import { addressMessages } from 'ChillMainAssets/vuejs/Address/js/i18n'
 
 const appMessages = {
    fr: {
+      select_a_existing_address: 'Sélectionner une adresse existante',
+      create_a_new_address: 'Créer une nouvelle adresse',
+      add_an_address_to_household: 'Ajouter l\'adresse au ménage'
    }
 };
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdAddress/store/index.js

@@ -9,7 +9,7 @@ const debug = process.env.NODE_ENV !== 'production';
 const store = createStore({
    strict: debug,
    state: {
-      address: {},
+      newAddress: {},
       household: {},
       errorMsg: []
    },
@@ -21,7 +21,7 @@ const store = createStore({
       },
       addAddress(state, address) {
          console.log('@M addAddress address', address);
-         state.address = address;
+         state.newAddress = address;
       },
       addAddressToHousehold(state, household) {
          console.log('@M addAddress address', household);

src/Bundle/ChillPersonBundle/Resources/views/Household/address_move.html.twig

@@ -8,17 +8,6 @@
     <p>Household with id {{ household.id }}</p>
 
     <div>
-        <h2>Select an existing address</h2>
-        TODO: select of existing address ?
-    </div>
-
-    <div>
-        <h2>Create a new address</h2>
-        <div id="address"></div>
-    </div>
-
-    <div>
-        <h2>Add the address to the household</h2>
         <div id="household-address"></div>
     </div>