addresses: edit address (WIP)

This commit is contained in:
nobohan 2021-06-15 21:03:50 +02:00
parent 000ae6c2cb
commit 35d35c9f40
7 changed files with 137 additions and 39 deletions

View File

@ -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>

View File

@ -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);
});
},
}
});

View File

@ -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
};

View File

@ -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;

View File

@ -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;
}

View File

@ -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 %}

View File

@ -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') }}