addresses: edit address (WIP)

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

@@ -2,7 +2,8 @@
 
    <div class='person__address__create'>
       <div>
-         <h2>{{ $t('create_a_new_address') }}</h2>
+         <h2 v-if="!edit">{{ $t('create_a_new_address') }}</h2>
+         <h2 v-else>{{ $t('edit_a_new_address') }}</h2>
          <add-address
             @addNewAddress="addNewAddress">
          </add-address>
@@ -14,9 +15,12 @@
          <div v-if="address.postcode">
             {{ address.postcode.name }}
          </div>
+         <div v-if="address.country">
+            {{ address.country.name }}
+         </div>
       </div>
    </div>
-   <div class='person__address__valid'>
+   <div v-if="!edit" class='person__address__valid'>
       <h2>{{ $t('date') }}</h2>
       <input
          type="date"
@@ -33,7 +37,7 @@
          <li class="cancel">
             <a :href=backUrl class="sc-button bt-cancel">{{ $t('back_to_the_list') }}</a>
          </li>
-         <li>
+         <li v-if="!edit">
             <button type="submit" class="sc-button bt-update centered" @click="addToPerson">
                {{ $t('add_an_address_to_person') }}
             </button>
@@ -53,7 +57,9 @@ export default {
    },
    data() {
       return {
+         edit: window.mode === 'edit',
          personId: window.personId,
+         addressId: window.addressId,
          backUrl: `/fr/person/${window.personId}/address/list`, //TODO better way to pass this
          validFrom: new Date().toISOString().split('T')[0]
       }
@@ -90,7 +96,7 @@ export default {
             });
          }
 
-         if(address.writeNewPostalCode){
+         if (address.writeNewPostalCode){
             let newPostalCode = address.newPostalCode;
             newPostalCode = Object.assign(newPostalCode, {
                 'country': {'id': address.selected.country.id },
@@ -100,16 +106,32 @@ export default {
             });
          }
 
-         this.$store.dispatch('addAddress', newAddress);
+         if (this.edit){
+            this.$store.dispatch('updateAddress', {
+               addressId: this.addressId,
+               newAddress: newAddress
+            });
+         } else {
+            this.$store.dispatch('addAddress', newAddress);
+         }
+
          modal.showModal = false;
       },
       addToPerson() {
-        this.$store.dispatch('addDateToAddressAndAddressToPerson', {
-           personId: this.personId,
-           addressId: this.$store.state.address.address_id,
-           body: { validFrom: {datetime: `${this.validFrom}T00:00:00+0100`}}
-        })
+         this.$store.dispatch('addDateToAddressAndAddressToPerson', {
+            personId: this.personId,
+            addressId: this.$store.state.address.address_id,
+            body: { validFrom: {datetime: `${this.validFrom}T00:00:00+0100`}}
+         })
+      },
+      getEditAddress() {
+         this.$store.dispatch('getEditAddress', this.addressId);
       }
-   }
+   },
+   mounted() {
+      if (this.edit) {
+         this.getEditAddress();
+      }
+   },
 };
 </script>

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

@@ -1,7 +1,7 @@
 import 'es6-promise/auto';
 import { createStore } from 'vuex';
 
-import { patchAddress, postAddress, postPostalCode, postAddressToPerson } from '../../_api/AddAddress'
+import { patchAddress, postAddress, postPostalCode, postAddressToPerson, getAddress } from '../../_api/AddAddress'
 
 const debug = process.env.NODE_ENV !== 'production';
 
@@ -9,6 +9,8 @@ const store = createStore({
    strict: debug,
    state: {
       address: {},
+      editAddress: {}, //TODO or should be address?
+      person: {},
       errorMsg: []
    },
    getters: {
@@ -21,6 +23,10 @@ const store = createStore({
          console.log('@M addAddress address', address);
          state.address = address;
       },
+      updateAddress(state, address) {
+         console.log('@M updateAddress address', address);
+         state.address = address;
+      },
       addAddressToPerson(state, person) {
          console.log('@M addAddressToPerson person', person);
          state.person = person;
@@ -28,7 +34,11 @@ const store = createStore({
       addDateToAddress(state, validFrom) {
          console.log('@M addDateToAddress address.validFrom', validFrom);
          state.validFrom = validFrom;
-      }
+      },
+      getEditAddress(state, address) {
+         console.log('@M getEditAddress address', address);
+         state.editAddress = address;
+      },
    },
    actions: {
       addAddress({ commit }, payload) {
@@ -81,6 +91,46 @@ const store = createStore({
                commit('catchError', error);
             });
       },
+      updateAddress({ commit }, payload) {
+         console.log('@A updateAddress payload', payload);
+
+         if('newPostalCode' in payload.newAddress){
+            postPostalCode(payload.newAddress.newPostalCode)
+               .then(postalCode => {
+                  let body = payload;
+                  body.postcode = {'id': postalCode.id },
+                  patchAddress(body)
+                     .then(address => new Promise((resolve, reject) => {
+                        commit('updateAddress', address);
+                        resolve();
+                     }))
+                     .catch((error) => {
+                        commit('catchError', error);
+                     });
+               })
+
+         } else {
+            patchAddress(payload.addressId, payload.newAddress)
+               .then(address => new Promise((resolve, reject) => {
+                  commit('updateAddress', address);
+                  resolve();
+               }))
+               .catch((error) => {
+                  commit('catchError', error);
+               });
+         }
+      },
+      getEditAddress({ commit }, payload) {
+         console.log('@A getEditAddress payload', payload);
+
+         getAddress(payload).then(address => new Promise((resolve, reject) => {
+            commit('getEditAddress', address);
+            resolve();
+         }))
+         .catch((error) => {
+            commit('catchError', error);
+         });
+      },
    }
 });
 

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

@@ -150,6 +150,21 @@ const postAddressToPerson = (personId, addressId) => {
       });
 };
 
+/*
+* Endpoint chill_api_single_address__index
+* method GET, get Address Object
+* @params {id} the address id
+* @returns {Promise} a promise containing a Address object
+*/
+const getAddress = (id) => {
+   console.log('<<< get address');
+   const url = `/api/1.0/main/address/${id}.json`;
+   return fetch(url)
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response');
+      });
+};
 
 export {
    fetchCountries,
@@ -159,5 +174,6 @@ export {
    postAddress,
    patchAddress,
    postPostalCode,
-   postAddressToPerson
+   postAddressToPerson,
+   getAddress
 };

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

@@ -1,7 +1,10 @@
 <template>
-   <button class="sc-button bt-create mt-4" @click="openModal">
+   <button v-if="!edit" class="sc-button bt-create mt-4" @click="openModal">
       {{ $t('add_an_address_title') }}
    </button>
+   <button v-else class="sc-button bt-create mt-4" @click="openModal">
+      {{ $t('edit_an_address_title') }}
+   </button>
 
    <teleport to="body">
       <modal v-if="modal.showModal"
@@ -9,7 +12,8 @@
          @close="modal.showModal = false">
 
          <template v-slot:header>
-            <h3 class="modal-title">{{ $t('add_an_address_title') }}</h3>
+            <h3 v-if="!edit" class="modal-title">{{ $t('add_an_address_title') }}</h3>
+            <h3 v-if="edit" class="modal-title">{{ $t('edit_an_address_title') }}</h3>
          </template>
 
          <template v-slot:body>
@@ -101,6 +105,7 @@ export default {
    emits: ['addNewAddress'],
    data() {
       return {
+         edit: window.mode === 'edit',
          modal: {
             showModal: false,
             modalDialogClass: "modal-dialog-scrollable modal-xl"
@@ -202,6 +207,7 @@ export default {
       },
       resetAll() {
          console.log('reset all selected');
+         console.log(this.$store.state.editAddress);
          this.address.loaded.addresses = [];
          this.address.selected.address = {};
          this.address.loaded.cities = [];
@@ -210,7 +216,7 @@ export default {
          this.address.isNoAddress = false;
          this.address.street = null;
          this.address.streetNumber = null;
-         this.address.floor = null;
+         this.address.floor = this.$store.state.editAddress.floor; //TODO other field and test if no edit
          this.address.corridor = null;
          this.address.steps = null;
          this.address.flat = null;