improve addAddress

This commit is contained in:
Mathieu Jaumotte 2021-09-18 17:47:49 +02:00
parent 2788170f03
commit a842229d5e
18 changed files with 136 additions and 70 deletions

View File

@ -27,7 +27,7 @@ export default {
},
key() {
return (this.context.edit) ? 'address_' + this.context.addressId
: this.context.entity.name + '_' + this.context.entity.id ;
: this.context.target.name + '_' + this.context.target.id ;
}
},
mounted() {
@ -45,9 +45,7 @@ export default {
if (this.context.edit) {
// address is already linked, just finish !
if (this.options.forceRedirect === true) {
window.location.assign(this.context.backUrl);
}
this.$refs.addAddress.lastPaneAction();
// New created address
} else {
@ -85,15 +83,18 @@ export default {
* Post new created address to targetEntity
*/
postAddressTo(payload) {
console.log('postAddressTo', payload.entity);
switch (payload.entity) {
console.log('postAddressTo', payload.target);
switch (payload.target) {
case 'household':
postAddressToHousehold(payload.entityId, payload.addressId)
postAddressToHousehold(payload.targetId, payload.addressId)
.then(household => new Promise((resolve, reject) => {
console.log('..toHousehold', household);
this.$refs.addAddress.flag.loading = false;
this.$refs.addAddress.flag.success = true;
window.location.assign(this.context.backUrl);
// finish
this.$refs.addAddress.lastPaneAction();
resolve();
}))
.catch((error) => {
@ -103,12 +104,15 @@ export default {
;
break;
case 'person':
postAddressToPerson(payload.entityId, payload.addressId)
postAddressToPerson(payload.targetId, payload.addressId)
.then(person => new Promise((resolve, reject) => {
console.log('..toPerson', person);
this.$refs.addAddress.flag.loading = false;
this.$refs.addAddress.flag.success = true;
window.location.assign(this.context.backUrl);
// finish
this.$refs.addAddress.lastPaneAction();
resolve();
}))
.catch((error) => {

View File

@ -109,7 +109,7 @@ const patchAddress = (id, body) => {
* method POST, post Postal Code Object
* @returns {Promise}
*/
const postPostalCode = (postalCode) => {
const postPostalCode = (postalCode) => { //<--
const url = `/api/1.0/main/postal-code.json?`;
const body = postalCode;

View File

@ -243,7 +243,7 @@ export default {
validTo: false
},
forceRedirect: false,
onlyButton: false
hideAddress: false
},
entity: {
address: {}, // <== loaded and returned
@ -300,7 +300,6 @@ export default {
return true;
},
displaySuggestions() {
console.log('displaySuggestions');
return !this.context.edit && this.hasSuggestions;
},
getTextTitle() {
@ -314,7 +313,6 @@ export default {
},
bypassFirstStep() {
// exception: passing step0 if new address and pane are not in modal
console.log('bypassFirstStep');
return !this.context.edit && !this.inModal;
}
},
@ -325,9 +323,13 @@ export default {
//console.log('options bindModal.step2', this.options.bindModal.step2);
//console.log('options useDate.validFrom', this.options.useDate.validFrom);
//console.log('options useDate.validTo', this.options.useDate.validTo);
console.log('useDatePane', this.useDatePane);
//console.log('useDatePane', this.useDatePane);
console.log('Mounted now !');
if (this.context.edit) {
console.log('getInitialAddress');
this.getInitialAddress(this.context.addressId);
}
this.openShowPane();
},
@ -337,11 +339,8 @@ export default {
* Opening and closing Panes when interacting with buttons
*/
openShowPane() {
if (this.context.edit) {
console.log('getInitialAddress');
this.getInitialAddress(this.context.addressId);
}
if (this.flag.editPane === false && this.bypassFirstStep) {
console.log('bypassFirstStep');
this.closeShowPane();
this.openEditPane();
} else {
@ -366,6 +365,7 @@ export default {
},
openEditPane() {
if (this.flag.suggestPane === false && this.displaySuggestions) {
console.log('displaySuggestions');
this.openSuggestPane();
} else {
if (this.flag.suggestPane === true) {
@ -396,11 +396,21 @@ export default {
console.log('step3: close the Date Panel');
},
resetPane() {
console.log('resetPane');
this.flag.suggestPane = false;
this.flag.editPane = false;
this.flag.datePane = false;
this.openShowPane();
},
lastPaneAction() {
if (this.options.forceRedirect === true) {
console.log("redirect to backUrl");
window.location.assign(this.context.backUrl);
} else {
console.log("don't redirect");
this.resetPane();
}
},
/*
* Async Fetch datas
@ -492,6 +502,7 @@ export default {
this.entity.selected.writeNew.address = this.context.edit;
this.entity.selected.writeNew.postcode = this.context.edit;
console.log('!! just set writeNew.postcode to', this.entity.selected.writeNew.postcode);
},
/*
@ -501,6 +512,8 @@ export default {
*/
applyChanges()
{
console.log('apply changes');
let newAddress = {
'isNoAddress': this.entity.selected.isNoAddress,
'street': this.entity.selected.isNoAddress ? '' : this.entity.selected.address.street,
@ -525,22 +538,22 @@ export default {
newPostcode = Object.assign(newPostcode, {
'country': {'id': this.entity.selected.country.id },
});
console.log('writeNew postcode is true! newPostcode: ', newPostcode);
newAddress = Object.assign(newAddress, {
'newPostcode': newPostcode
});
}
console.log('apply changes');
if (this.context.edit) {
if (!this.context.edit) {
this.addNewAddress(newAddress)
.then(payload => this.closePaneAndCallbackSubmit(payload));
} else {
this.updateAddress({
addressId: this.context.addressId,
newAddress: newAddress
})
.then(payload => this.closePaneAndCallbackSubmit(payload));
} else {
this.addNewAddress(newAddress)
.then(payload => this.closePaneAndCallbackSubmit(payload));
}
},
@ -556,7 +569,7 @@ export default {
if ('newPostcode' in payload) {
let postcodeBody = payload.newPostcode;
if (this.context.entity.name === 'person') {
if (this.context.target.name === 'person') { // !!! maintain here ?
postcodeBody = Object.assign(postcodeBody, {'origin': 3});
}
return postPostalCode(postcodeBody)
@ -578,8 +591,8 @@ export default {
this.flag.loading = false;
this.flag.success = true;
resolve({
entity: this.context.entity.name,
entityId: this.context.entity.id,
target: this.context.target.name,
targetId: this.context.target.id,
addressId: this.entity.address.address_id
}
);
@ -599,14 +612,16 @@ export default {
this.flag.loading = true;
// TODO change the condition because it writes new postal code in edit mode now: !writeNewPostalCode
// BUG réécrit un postcode à chaque édition !
if ('newPostcode' in payload.newAddress) {
let postcodeBody = payload.newAddress.newPostcode;
postcodeBody = Object.assign(postcodeBody, {'origin': 3});
console.log('juste before post new postcode', postcodeBody);
return postPostalCode(postcodeBody)
.then(postalCode => {
console.log('create new postcode', postalCode.id);
console.log('new postcode created', postalCode.id);
payload.newAddress.postcode = {'id': postalCode.id };
return this.patchExistingAddress(payload);
});
@ -624,8 +639,8 @@ export default {
this.flag.loading = false;
this.flag.success = true;
return resolve({
entity: this.context.entity.name,
entityId: this.context.entity.id,
target: this.context.target.name,
targetId: this.context.target.id,
addressId: this.entity.address.address_id
});
})
@ -642,10 +657,11 @@ export default {
*/
closePaneAndCallbackSubmit(payload)
{
console.log('close pane and call parent callback method', payload);
//this.initForm();
this.flag.showPane = false;
this.initForm();
this.resetPane();
console.log('will call parent callback method', payload);
// callback props method from parent
this.addressChangedCallback(payload);
@ -662,4 +678,7 @@ div.entity-address {
right: 0; top: -55px;
}
}
h4.h3 {
font-weight: bold;
}
</style>

View File

@ -1,6 +1,6 @@
<template>
<div class="my-1">
<label class="col-form-label" for="citySelector">{{ $t('city') }}</label>
<label class="col-form-label">{{ $t('city') }}</label>
<VueMultiselect
id="citySelector"
v-model="value"
@ -25,7 +25,7 @@
<div class="form-floating">
<input class="form-control"
type="text"
name="code"
id="code"
:placeholder="$t('postalCode_code')"
v-model="code"/>
<label for="code">{{ $t('postalCode_code') }}</label>
@ -35,7 +35,7 @@
<div class="form-floating">
<input class="form-control"
type="text"
name="name"
id="name"
:placeholder="$t('postalCode_name')"
v-model="name"/>
<label for="name">{{ $t('postalCode_name') }}</label>
@ -87,6 +87,9 @@ export default {
}
},
},
mounted() {
console.log('writeNew.postcode', this.entity.selected.writeNew.postcode, 'in mounted');
},
methods: {
transName(value) {
return (value.code && value.name) ? `${value.code}-${value.name}` : '';
@ -96,6 +99,7 @@ export default {
this.entity.selected.postcode.name = value.name;
this.entity.selected.postcode.code = value.code;
this.entity.selected.writeNew.postcode = false;
console.log('writeNew.postcode false, in selectCity');
this.$emit('getReferenceAddresses', value);
this.focusOnAddress();
},
@ -110,6 +114,7 @@ export default {
this.entity.selected.postcode.name = city.name;
this.entity.selected.postcode.code = city.code;
this.entity.selected.writeNew.postcode = true;
console.log('writeNew.postcode true, in listenInputSearch');
}
},
splitCity(city) {
@ -142,6 +147,7 @@ export default {
addPostcode() {
console.log('addPostcode: pass here ?? never, it seems');
this.entity.selected.writeNew.postcode = true;
console.log('writeNew.postcode true, in addPostcode');
}
}
};

View File

@ -96,7 +96,7 @@ export default {
}
},
getValidFromDateText() {
return (this.context.entity.name === 'household') ? 'move_date' : 'validFrom';
return (this.context.target.name === 'household') ? 'move_date' : 'validFrom';
},
getValidToDateText() {
return 'validTo';

View File

@ -145,11 +145,7 @@ export default {
</script>
<style lang="scss">
div.address-form {
h4.h3 {
font-weight: bold;
}
div#address_map {
height: 400px;
width: 100%;

View File

@ -11,7 +11,13 @@
{{ $t(getSuccessText) }}
</div>
<address-render-box v-if="!onlyButton" :address="address"></address-render-box>
<div v-if="noAddressWithStickyActions" class="mt-5">
<p class="chill-no-data-statement">
{{ $t('not_yet_address') }}
</p>
</div>
<address-render-box v-if="!hideAddress" :address="address"></address-render-box>
<action-buttons
:options="this.options"
@ -72,7 +78,7 @@ export default {
return (this.context.edit) ? this.defaultz.button.text.edit : this.defaultz.button.text.create;
},
getSuccessText() {
switch (this.context.entity.name) {
switch (this.context.target.name) {
/*
case 'household':
return (this.context.edit) ? 'household_address_edit_success' : 'household_address_move_success';
@ -83,9 +89,12 @@ export default {
return (this.context.edit) ? 'address_edit_success' : 'address_new_success';
}
},
onlyButton() {
return (typeof this.options.onlyButton !== 'undefined') ?
this.options.onlyButton : this.defaultz.onlyButton;
hideAddress() {
return (typeof this.options.hideAddress !== 'undefined') ?
this.options.hideAddress : this.defaultz.hideAddress;
},
noAddressWithStickyActions() {
return !this.context.edit && !this.address.id && this.options.stickyActions;
}
}
};

View File

@ -9,7 +9,33 @@
<div v-if="flag.success" class="alert alert-success">{{ $t(getSuccessText) }}</div>
<h3>{{ $t('address_suggestions') }}</h3>
<h4 class="h3">{{ $t('address_suggestions') }}</h4>
<div class="flex-table AddressSuggestionList">
<div class="item-bloc">
<div class="float-button bottom">
<div class="box">
<div class="action">
<ul class="record_actions">
<li>
<button class="btn btn-sm btn-choose">
{{ $t('use_this_address') }}
</button>
</li>
</ul>
</div>
<ul class="list-content fa-ul">
<li>
<i class="fa fa-li fa-map-marker"></i>
<!--
<address-render-box></address-render-box>
-->
</li>
</ul>
</div>
</div>
</div>
</div>
<action-buttons v-if="insideModal === false"
:options="this.options"

View File

@ -36,6 +36,8 @@ const addressMessages = {
address_suggestions: "Suggestion d'adresses",
address_new_success: 'La nouvelle adresse est enregistrée',
address_edit_success: 'L\'adresse a été mise à jour',
not_yet_address: "Il n'y a pas encore d'adresse. Cliquez sur '+ Créer une adresse'",
use_this_address: "Utiliser cette adresse",
// person specific
add_an_address_to_person: 'Ajouter l\'adresse à la personne',

View File

@ -14,9 +14,9 @@ containers.forEach((container) => {
return {
addAddress: {
context: {
entity: {
name: container.dataset.targetEntityName,
id: container.dataset.targetEntityId
target: {
name: container.dataset.targetName,
id: container.dataset.targetId
},
edit: container.dataset.mode === 'edit', //boolean
addressId: container.dataset.addressId || null,
@ -50,7 +50,7 @@ containers.forEach((container) => {
/// Force redirection after last step (cfr. backUrl)
forceRedirect: container.dataset.forceRedirect === 'true', //boolean, default: false
/// Don't display show renderbox Address
onlyButton: container.dataset.onlyButton === 'true' //boolean, default: false
//hideAddress: false //boolean, default: false
}
}
}

View File

@ -22,8 +22,8 @@
#}
<div class="address-container"
data-target-entity-name="{{ targetEntity.name|e('html_attr') }}"
data-target-entity-id="{{ targetEntity.id|e('html_attr') }}"
data-target-name="{{ targetEntity.name|e('html_attr') }}"
data-target-id="{{ targetEntity.id|e('html_attr') }}"
{% if 'edit' in app.request.get('_route') %}
data-mode="edit"

View File

@ -54,8 +54,8 @@ export default {
assignAddress() {
//console.log('assignAddress id', this.person.current_household_address);
let payload = {
entity: this.context.entity.name,
entityId: this.context.entity.id,
target: this.context.target.name,
targetId: this.context.target.id,
locationStatusTo: 'person',
personId: this.person.id
};

View File

@ -94,7 +94,7 @@ export default {
useDate: {
validFrom: true
},
onlyButton: true
hideAddress: true
}
}
}
@ -120,7 +120,7 @@ export default {
methods: {
initAddressContext() {
let context = {
entity: {
target: {
name: this.accompanyingCourse.type,
id: this.accompanyingCourse.id
},
@ -136,8 +136,8 @@ export default {
removeAddress() {
//console.log('remove address');
let payload = {
entity: this.context.entity.name,
entityId: this.context.entity.id,
target: this.context.target.name,
targetId: this.context.target.id,
locationStatusTo: 'none'
};
this.$store.dispatch('updateLocation', payload);

View File

@ -261,7 +261,7 @@ let initPromise = getAccompanyingCourse(id)
},
updateLocation({ commit }, payload) {
//console.log('## action: updateLocation', payload.locationStatusTo);
let body = { 'type': payload.entity, 'id': payload.entityId };
let body = { 'type': payload.target, 'id': payload.targetId };
let location = {};
if (payload.locationStatusTo === 'person') { // patch for person address (don't remove addressLocation)
location = { 'personLocation': { 'type': 'person', 'id': payload.personId }};
@ -273,7 +273,7 @@ let initPromise = getAccompanyingCourse(id)
location = { 'personLocation': null };
}
Object.assign(body, location);
patchAccompanyingCourse(payload.entityId, body)
patchAccompanyingCourse(payload.targetId, body)
.then(accompanyingCourse => new Promise((resolve, reject) => {
commit('updateLocation', {
location: accompanyingCourse.location,

View File

@ -186,8 +186,8 @@ export default {
return {
addAddress: {
context: {
entity: {
type: 'household_create',
target: {
name: 'household_create',
id: 0
},
edit: false,

View File

@ -9,10 +9,10 @@
{# include vue_address component #}
{% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
targetEntity: { name: 'household', id: household.id },
backUrl: path('chill_person_household_addresses', { 'household_id': household.id }),
stickyActions: true
} %}
{#
stickyActions: true
backUrl: path('chill_person_household_addresses', { 'household_id': household.id }),
openPanesInModal: false,
#}
</div>

View File

@ -10,9 +10,11 @@
{% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
targetEntity: { name: 'household', id: household.id },
backUrl: path('chill_person_household_addresses', { 'household_id': household.id }),
openPanesInModal: false,
stickyActions: true
stickyActions: true,
} %}
{#
openPanesInModal: false,
#}
</div>
{% endblock %}

View File

@ -18,13 +18,15 @@
{% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
targetEntity: { name: 'household', id: household.id },
backUrl: path('chill_person_household_addresses', { 'household_id': household.id }),
forceRedirect: true,
mode: 'new',
useValidFrom: true,
buttonSize: 'btn-lg',
buttonText: 'Move household',
modalTitle: 'Move household',
forceRedirect: true,
} %}
{#
#}
</li>
</ul>