addresses: edit address (WIP)

2025-11-04 03:08:25 +00:00 · 2021-06-15 21:03:50 +02:00
parent 000ae6c2cb
commit 35d35c9f40
7 changed files with 137 additions and 39 deletions
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
+++ b/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>
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/store/index.js
+++ b/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);
+         });
+      },
   }
 });

--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_api/AddAddress.js
+++ b/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
 };
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress.vue
+++ b/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;
--- a/src/Bundle/ChillMainBundle/Serializer/Normalizer/AddressNormalizer.php
+++ b/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;
    }

-    
+
 }
--- a/src/Bundle/ChillPersonBundle/Resources/views/Address/edit.html.twig
+++ b/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) }}
-    {{ form_row(form.street) }}
-    {{ form_row(form.streetNumber) }}
-    {{ form_row(form.postCode) }}
-    {{ form_row(form.validFrom) }}
-
-    <ul class="record_actions sticky-form-buttons">
-        <li class="cancel">
-            <a href="{{ path('chill_person_address_list', { 'person_id' : person.id } ) }}" class="sc-button bt-cancel">
-                    {{ '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) }}
+    {% block js %}
+        <script type="text/javascript">
+            window.personId = {{ person.id|e('js') }};
+            window.addressId = {{ address.id|e('js') }};
+            window.mode = 'edit';
+            window.vueRootComponent = 'app';
+        </script>
+        {{ encore_entry_script_tags('address') }}
+    {% endblock %}

 {% endblock personcontent %}
--- a/src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig
+++ b/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') }}