mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
addresses: edit address (WIP)
This commit is contained in:
parent
000ae6c2cb
commit
35d35c9f40
@ -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 class='person__address__valid'>
|
||||
</div>
|
||||
<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]
|
||||
}
|
||||
@ -100,7 +106,15 @@ export default {
|
||||
});
|
||||
}
|
||||
|
||||
if (this.edit){
|
||||
this.$store.dispatch('updateAddress', {
|
||||
addressId: this.addressId,
|
||||
newAddress: newAddress
|
||||
});
|
||||
} else {
|
||||
this.$store.dispatch('addAddress', newAddress);
|
||||
}
|
||||
|
||||
modal.showModal = false;
|
||||
},
|
||||
addToPerson() {
|
||||
@ -109,7 +123,15 @@ export default {
|
||||
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>
|
||||
|
@ -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);
|
||||
});
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -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
|
||||
};
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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 %}
|
||||
|
@ -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') }}
|
||||
|
Loading…
x
Reference in New Issue
Block a user