addresses: edit address for person

src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss

@@ -244,6 +244,9 @@ div.address_form {
          display: flex;
          flex-direction: column;
          flex-grow: 1;
+         div.custom-address, div.custom-postcode {
+             padding: 12px;
+         }
       }
 
       div.address_form__select__map {
@@ -251,11 +254,19 @@ div.address_form {
          div#address_map {
             height:400px;
             width:400px;
+            input {
+               border: 1px solid #999;
+            }
          }
       }
    }
    div.address_form__more {
-
+      & > div {
+         display: flex;
+         & > label {
+            width: 30%;
+         }
+      }
    }
 }
 

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

@@ -8,16 +8,12 @@
             @addNewAddress="addNewAddress">
          </add-address>
       </div>
+
       <div>
-         <div v-if="address.text">
+         <show-address
-            {{ address.text }}
+            v-if="address"
-         </div>
+            v-bind:address="address">
-         <div v-if="address.postcode">
+         </show-address>
-            {{ address.postcode.name }}
-         </div>
-         <div v-if="address.country">
-            {{ address.country.name }}
-         </div>
       </div>
    </div>
    <div v-if="!edit" class='person__address__valid'>
@@ -49,11 +45,13 @@
 
 <script>
 import AddAddress from '../_components/AddAddress.vue';
+import ShowAddress from '../_components/ShowAddress.vue';
 
 export default {
    name: 'App',
    components: {
-      AddAddress
+      AddAddress,
+      ShowAddress
    },
    data() {
       return {

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

@@ -1,7 +1,9 @@
 const addressMessages = {
    fr: {
       add_an_address_title: 'Créer une adresse',
+      edit_an_address_title: 'Modifier une adresse',
       create_a_new_address: 'Créer une nouvelle adresse',
+      edit_a_new_address: 'Modifier l\'adresse',
       select_an_address_title: 'Sélectionner une adresse',
       fill_an_address: 'Compléter l\'adresse',
       select_country: 'Choisir le pays',

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

@@ -94,12 +94,12 @@ const store = createStore({
       updateAddress({ commit }, payload) {
          console.log('@A updateAddress payload', payload);
 
-         if('newPostalCode' in payload.newAddress){
+         if('newPostalCode' in payload.newAddress){ // TODO change the condition because it writes new postal code in edit mode now: !writeNewPostalCode
             postPostalCode(payload.newAddress.newPostalCode)
                .then(postalCode => {
-                  let body = payload;
+                  let body = payload.newAddress;
                   body.postcode = {'id': postalCode.id },
-                  patchAddress(body)
+                  patchAddress(payload.addressId, body)
                      .then(address => new Promise((resolve, reject) => {
                         commit('updateAddress', address);
                         resolve();

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

@@ -207,25 +207,28 @@ 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 = [];
          this.address.selected.city = {};
          this.address.selected.country = {};
-         this.address.isNoAddress = false;
+         this.address.isNoAddress = this.edit ? this.$store.state.editAddress.isNoAddress: false;;
-         this.address.street = null;
+         this.address.street = this.edit ? this.$store.state.editAddress.street: null;
-         this.address.streetNumber = null;
+         this.address.streetNumber = this.edit ? this.$store.state.editAddress.streetNumber: null;
-         this.address.floor = this.$store.state.editAddress.floor; //TODO other field and test if no edit
+         this.address.floor = this.edit ? this.$store.state.editAddress.floor: null;
-         this.address.corridor = null;
+         this.address.corridor = this.edit ? this.$store.state.editAddress.corridor: null;
-         this.address.steps = null;
+         this.address.steps = this.edit ? this.$store.state.editAddress.steps: null;
-         this.address.flat = null;
+         this.address.flat = this.edit ? this.$store.state.editAddress.flat: null;
-         this.address.buildingName = null;
+         this.address.buildingName = this.edit ? this.$store.state.editAddress.buildingName: null;
-         this.address.distribution = null;
+         this.address.distribution = this.edit ? this.$store.state.editAddress.distribution: null;
-         this.address.extra = null;
+         this.address.extra = this.edit ? this.$store.state.editAddress.extra: null;
-         this.address.writeNewAddress = false;
+         this.address.writeNewAddress = this.edit;
-         this.address.writeNewPostalCode = false;
+         this.address.writeNewPostalCode = this.edit;
-         this.address.newPostalCode = {};
+         this.address.newPostalCode = this.edit ?
+             {
+                 code: this.$store.state.editAddress.postcode !== undefined ? this.$store.state.editAddress.postcode.code : null,
+                 name: this.$store.state.editAddress.postcode !== undefined ? this.$store.state.editAddress.postcode.name : null
+             } : {};
          console.log('cities and addresses', this.address.loaded.cities, this.address.loaded.addresses);
       }
    }

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

@@ -1,36 +1,55 @@
 <template>
-   <div>
    <h4>{{ $t('fill_an_address') }}</h4>
+   <div>
+      <label for="floor">{{ $t('floor') }}</label>
       <input
          type="text"
          name="floor"
          :placeholder="$t('floor')"
          v-model="floor"/>
+      </div>
+   <div>
+      <label for="corridor">{{ $t('corridor') }}</label>
       <input
          type="text"
          name="corridor"
          :placeholder="$t('corridor')"
          v-model="corridor"/>
+   </div>
+   <div>
+      <label for="steps">{{ $t('steps') }}</label>
       <input
          type="text"
          name="steps"
          :placeholder="$t('steps')"
          v-model="steps"/>
+   </div>
+   <div>
+      <label for="flat">{{ $t('flat') }}</label>
       <input
          type="text"
          name="flat"
          :placeholder="$t('flat')"
          v-model="flat"/>
+   </div>
+   <div>
+      <label for="buildingName">{{ $t('buildingName') }}</label>
       <input
          type="text"
          name="buildingName"
          :placeholder="$t('buildingName')"
          v-model="buildingName"/>
+   </div>
+   <div>
+      <label for="extra">{{ $t('extra') }}</label>
       <input
          type="text"
          name="extra"
          :placeholder="$t('extra')"
          v-model="extra"/>
+   </div>
+   <div>
+      <label for="distribution">{{ $t('distribution') }}</label>
       <input
          type="text"
          name="distribution"

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

@@ -15,7 +15,7 @@
          :options="addresses">
       </VueMultiselect>
    </div>
-   <div v-if="writeNewAddress || writeNewPostalCode">
+   <div class="custom-address" v-if="writeNewAddress || writeNewPostalCode">
       <input
          type="text"
          name="street"

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

@@ -15,7 +15,7 @@
          :options="cities">
       </VueMultiselect>
    </div>
-   <div v-if="writeNewPostalCode">
+   <div class="custom-postcode" v-if="writeNewPostalCode">
       <input
          type="text"
          name="name"
@@ -71,6 +71,8 @@ export default {
       },
       selectCity(value) {
          this.address.selected.city = value;
+         this.address.newPostalCode.name = value.name;
+         this.address.newPostalCode.code = value.code;
          this.getReferenceAddresses(value);
       },
       addPostalCode() {

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

@@ -22,11 +22,16 @@ export default {
    props: ['address', 'getCities'],
    data() {
       return {
-         value: this.address.loaded.countries.filter(c => c.countryCode === 'FR')[0]
+         edit: window.mode === 'edit',
+         defaultCountry: this.edit ? this.$store.state.editAddress.country.code : 'FR',
+         value: this.address.loaded.countries.filter(c => c.countryCode === this.defaultCountry)[0]
       }
    },
    methods: {
       init() {
+         this.value = this.edit ?
+            this.address.loaded.countries.filter(c => c.countryCode === this.$store.state.editAddress.country.code)[0]:
+            this.address.loaded.countries.filter(c => c.countryCode === 'FR')[0]
          if (this.value !== undefined) {
             this.selectCountry(this.value);
          }

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

@@ -0,0 +1,44 @@
+<template>
+   <div v-if="address.text">
+      {{ address.text }}
+   </div>
+   <div v-if="address.postcode">
+      {{ address.postcode.name }}
+   </div>
+   <div v-if="address.country">
+      {{ address.country.name.fr }}
+   </div>
+   <div v-if="address.floor">
+      <span>{{ $t('floor') }}</span>: {{ address.floor }}
+   </div>
+   <div v-if="address.corridor">
+      <span>{{ $t('corridor') }}</span>: {{ address.corridor }}
+   </div>
+   <div v-if="address.steps">
+      <span>{{ $t('steps') }}</span>: {{ address.steps }}
+   </div>
+   <div v-if="address.flat">
+      <span>{{ $t('flat') }}</span>: {{ address.flat }}
+   </div>
+   <div v-if="address.buildingName">
+      <span>{{ $t('buildingName') }}</span>: {{ address.buildingName }}
+   </div>
+   <div v-if="address.extra">
+      <span>{{ $t('extra') }}</span>: {{ address.extra }}
+   </div>
+   <div v-if="address.distribution">
+      <span>{{ $t('distribution') }}</span>: {{ address.distribution }}
+   </div>
+</template>
+
+<script>
+
+export default {
+   name: 'ShowAddress',
+   props: ['address'],
+   data() {
+      return {
+      }
+   },
+};
+</script>

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

@@ -15,9 +15,14 @@ class AddressNormalizer implements NormalizerAwareInterface, NormalizerInterface
     {
         $data['address_id'] = $address->getId();
         $data['text'] = $address->getStreet().', '.$address->getStreetNumber();
+        $data['street'] = $address->getStreet();
+        $data['streetNumber'] = $address->getStreetNumber();
         $data['postcode']['name'] = $address->getPostCode()->getName();
+        $data['postcode']['code'] = $address->getPostCode()->getCode();
         $data['country']['name'] = $address->getPostCode()->getCountry()->getName();
+        $data['country']['code'] = $address->getPostCode()->getCountry()->getCountryCode();
         $data['floor'] = $address->getFloor();
+        $data['corridor'] = $address->getCorridor();
         $data['steps'] = $address->getSteps();
         $data['flat'] = $address->getBuildingName();
         $data['buildingName'] = $address->getFlat();

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

@@ -18,7 +18,7 @@
 
 {% set activeRouteKey = '' %}
 
-{% block title 'Update address for %name%'|trans({ '%name%': person.firstName ~ ' ' ~ person.lastName } ) %}
+{% block title 'Modify address for %name%'|trans({ '%name%': person.firstName ~ ' ' ~ person.lastName } ) %}
 
 {% block personcontent %}
 

src/Bundle/ChillPersonBundle/translations/messages.fr.yml

@@ -185,6 +185,7 @@ Pick a person: Choisir une personne
 No address given: Pas d'adresse renseignée
 The address has been successfully updated: L'adresse a été mise à jour avec succès
 Update address for %name%: Mettre à jour une adresse pour %name%
+Modify address for %name%: Modifier une adresse pour %name%
 Addresses'history for %name%: Historique des adresses de %name%
 Addresses'history: Historique des adresses
 New address for %name% : Nouvelle adresse pour %name%