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', {
+         this.$store.dispatch('addDateToAddressAndAddressToPerson', {
-           personId: this.personId,
+            personId: this.personId,
-           addressId: this.$store.state.address.address_id,
+            addressId: this.$store.state.address.address_id,
-           body: { validFrom: {datetime: `${this.validFrom}T00:00:00+0100`}}
+            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;

src/Bundle/ChillMainBundle/Serializer/Normalizer/AddressNormalizer.php

@@ -14,8 +14,15 @@ class AddressNormalizer implements NormalizerAwareInterface, NormalizerInterface
     public function normalize($address, string $format = null, array $context = [])
     {
         $data['address_id'] = $address->getId();
-        $data['text'] = $address->getStreet().', '.$address->getBuildingName();
+        $data['text'] = $address->getStreet().', '.$address->getStreetNumber();
         $data['postcode']['name'] = $address->getPostCode()->getName();
+        $data['country']['name'] = $address->getPostCode()->getCountry()->getName();
+        $data['floor'] = $address->getFloor();
+        $data['steps'] = $address->getSteps();
+        $data['flat'] = $address->getBuildingName();
+        $data['buildingName'] = $address->getFlat();
+        $data['distribution'] = $address->getDistribution();
+        $data['extra'] = $address->getExtra();
 
         return $data;
     }
@@ -25,5 +32,5 @@ class AddressNormalizer implements NormalizerAwareInterface, NormalizerInterface
         return $data instanceof Address;
     }
 
-    
+
 }

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

@@ -22,27 +22,23 @@
 
 {% block personcontent %}
 
-    <h1>{{ 'Update address for %name%'|trans({ '%name%': person.firstName ~ ' ' ~ person.lastName } ) }}</h1>
+    {% block content %}
+        <h1>{{ block('title') }}</h1>
+        <div id="address"></div>
+    {% endblock %}
 
-    {{ form_start(form) }}
+    {% block stylesheets %}
+        <link href="{{ asset('build/address.css') }}" type="text/css" rel="stylesheet" />
+    {% endblock %}
 
-    {{ form_row(form.isNoAddress) }}
+    {% block js %}
-    {{ form_row(form.street) }}
+        <script type="text/javascript">
-    {{ form_row(form.streetNumber) }}
+            window.personId = {{ person.id|e('js') }};
-    {{ form_row(form.postCode) }}
+            window.addressId = {{ address.id|e('js') }};
-    {{ form_row(form.validFrom) }}
+            window.mode = 'edit';
-
+            window.vueRootComponent = 'app';
-    <ul class="record_actions sticky-form-buttons">
+        </script>
-        <li class="cancel">
+        {{ encore_entry_script_tags('address') }}
-            <a href="{{ path('chill_person_address_list', { 'person_id' : person.id } ) }}" class="sc-button bt-cancel">
+    {% endblock %}
-                    {{ 'Back to the list'|trans }}
-                </a>
-        </li>
-        <li>
-            {{ form_row(form.submit, { 'attr' : { 'class': 'sc-button bt-save' }, 'label': 'Save' } ) }}
-        </li>
-    </ul>
-
-    {{ form_end(form) }}
 
 {% endblock personcontent %}

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

@@ -34,6 +34,7 @@
     {% block js %}
         <script type="text/javascript">
             window.personId = {{ person.id|e('js') }};
+            window.mode = 'new';
             window.vueRootComponent = 'app';
         </script>
         {{ encore_entry_script_tags('address') }}