mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-12-16 23:33:15 +00:00
address refactoring: resolve lack of flexibility for many implementations (modal/not, overriding, options, etc. )
address creation/edition is unchanged many variables are renamed to improve logic and readability
This commit is contained in:
@@ -1,282 +1,473 @@
|
||||
<template>
|
||||
<button v-if="!edit"
|
||||
class="btn btn-create mt-4"
|
||||
type="button"
|
||||
name="button"
|
||||
@click="openModal">
|
||||
{{ $t(modalAddTitle) }}
|
||||
</button>
|
||||
<button v-else
|
||||
class="btn btn-create mt-4"
|
||||
type="button"
|
||||
name="button"
|
||||
@click="openModal">
|
||||
{{ $t(modalEditTitle) }}
|
||||
|
||||
<button v-if="step1WithModal"
|
||||
@click="openShowPane"
|
||||
class="btn btn-create mt-4" type="button" name="button">
|
||||
{{ $t(getTextButton) }}
|
||||
</button>
|
||||
|
||||
<teleport to="body">
|
||||
<modal v-if="modal.showModal"
|
||||
v-bind:modalDialogClass="modal.modalDialogClass"
|
||||
@close="modal.showModal = false">
|
||||
<teleport to="body" v-if="step1WithModal">
|
||||
<modal v-if="flag.showPane"
|
||||
modalDialogClass="modal-dialog-scrollable modal-xl"
|
||||
@close="flag.showPane = false">
|
||||
|
||||
<template v-slot:header>
|
||||
<h3 v-if="!edit" class="modal-title">{{ $t(modalAddTitle) }}</h3>
|
||||
<h3 v-if="edit" class="modal-title">{{ $t(modalEditTitle) }}</h3>
|
||||
<h2 class="modal-title">{{ $t(getTextTitle) }}
|
||||
<span v-if="flag.loading" class="loading">
|
||||
<i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
|
||||
<span class="sr-only">Loading...</span>
|
||||
</span>
|
||||
</h2>
|
||||
</template>
|
||||
|
||||
<template v-slot:body>
|
||||
<div class="address-form">
|
||||
|
||||
<h4 class="h3">{{ $t('select_an_address_title') }}
|
||||
<span v-if="loading">
|
||||
<i class="fa fa-circle-o-notch fa-spin fa-lg"></i>
|
||||
</span>
|
||||
</h4>
|
||||
|
||||
<div class="row my-3">
|
||||
<div class="col-lg-6">
|
||||
|
||||
<div class="form-check">
|
||||
<input type="checkbox"
|
||||
class="form-check-input"
|
||||
id="isNoAddress"
|
||||
v-model="isNoAddress"
|
||||
v-bind:value="value" />
|
||||
<label class="form-check-label" for="isNoAddress">
|
||||
{{ $t('isNoAddress') }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<country-selection
|
||||
v-bind:address="address"
|
||||
v-bind:getCities="getCities">
|
||||
</country-selection>
|
||||
|
||||
<city-selection
|
||||
v-bind:address="address"
|
||||
v-bind:focusOnAddress="focusOnAddress"
|
||||
v-bind:getReferenceAddresses="getReferenceAddresses">
|
||||
</city-selection>
|
||||
|
||||
<address-selection
|
||||
v-if="!isNoAddress"
|
||||
v-bind:address="address"
|
||||
v-bind:updateMapCenter="updateMapCenter">
|
||||
</address-selection>
|
||||
|
||||
</div>
|
||||
<div class="col-lg-6 mt-3 mt-lg-0">
|
||||
|
||||
<address-map
|
||||
v-bind:address="address"
|
||||
ref="addressMap">
|
||||
</address-map>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<address-more
|
||||
v-if="!isNoAddress"
|
||||
v-bind:address="address">
|
||||
</address-more>
|
||||
|
||||
</div>
|
||||
<show-address
|
||||
v-bind:context="this.context"
|
||||
v-bind:options="this.options"
|
||||
v-bind:default="this.default"
|
||||
v-bind:entity="this.entity"
|
||||
v-bind:flag="this.flag">
|
||||
</show-address>
|
||||
</template>
|
||||
|
||||
<template v-slot:footer>
|
||||
<button class="btn btn-create"
|
||||
@click.prevent="$emit('addNewAddress', { address, modal })">
|
||||
{{ $t('action.add')}}
|
||||
<button @click="openEditPane"
|
||||
class="btn btn-update">
|
||||
{{ $t('action.edit')}}
|
||||
</button>
|
||||
<button class="btn btn-save"
|
||||
@click.prevent="$emit('submitAddress', { getSubmited , flag })">
|
||||
{{ $t('action.save')}}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
</modal>
|
||||
</teleport>
|
||||
<div class="mt-4" v-else>
|
||||
|
||||
<show-address v-if="flag.showPane"
|
||||
v-bind:context="this.context"
|
||||
v-bind:options="this.options"
|
||||
v-bind:default="this.default"
|
||||
v-bind:entity="this.entity"
|
||||
v-bind:flag="this.flag"
|
||||
v-bind:insideModal="false" @openEditPane="openEditPane"
|
||||
@submitAddress="$emit('submitAddress', { getSubmited , flag })">
|
||||
</show-address>
|
||||
</div>
|
||||
|
||||
<teleport to="body" v-if="step2WithModal">
|
||||
<modal v-if="flag.editPane"
|
||||
modalDialogClass="modal-dialog-scrollable modal-xl"
|
||||
@close="flag.editPane = false">
|
||||
|
||||
<template v-slot:header>
|
||||
<h2 class="modal-title">{{ $t(getTextTitle) }}
|
||||
<span v-if="flag.loading" class="loading">
|
||||
<i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
|
||||
<span class="sr-only">Loading...</span>
|
||||
</span>
|
||||
</h2>
|
||||
</template>
|
||||
|
||||
<template v-slot:body>
|
||||
<edit-address
|
||||
v-bind:context="this.context"
|
||||
v-bind:options="this.options"
|
||||
v-bind:default="this.default"
|
||||
v-bind:entity="this.entity"
|
||||
v-bind:flag="this.flag"
|
||||
@getCities="getCities"
|
||||
@getReferenceAddresses="getReferenceAddresses">
|
||||
</edit-address>
|
||||
</template>
|
||||
|
||||
<template v-slot:footer>
|
||||
<button class="btn btn-cancel change-icon" @click="flag.showPane = true; flag.editPane = false;">
|
||||
{{ $t('action.cancel') }}
|
||||
</button>
|
||||
<button class="btn btn-update"
|
||||
@click="closeEditPane">
|
||||
{{ $t('action.valid')}}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
</modal>
|
||||
</teleport>
|
||||
<div class="mt-4" v-else>
|
||||
|
||||
<edit-address v-if="flag.editPane"
|
||||
v-bind:context="this.context"
|
||||
v-bind:options="this.options"
|
||||
v-bind:default="this.default"
|
||||
v-bind:entity="this.entity"
|
||||
v-bind:flag="this.flag"
|
||||
v-bind:insideModal="false" @closeEditPane="closeEditPane"
|
||||
@getCities="getCities"
|
||||
@getReferenceAddresses="getReferenceAddresses">
|
||||
</edit-address>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Modal from 'ChillMainAssets/vuejs/_components/Modal';
|
||||
import { fetchCountries, fetchCities, fetchReferenceAddresses } from '../api'
|
||||
|
||||
import CountrySelection from './AddAddress/CountrySelection';
|
||||
import CitySelection from './AddAddress/CitySelection';
|
||||
import AddressSelection from './AddAddress/AddressSelection';
|
||||
import AddressMap from './AddAddress/AddressMap';
|
||||
import AddressMore from './AddAddress/AddressMore'
|
||||
import ShowAddress from './ShowAddress.vue';
|
||||
import EditAddress from './EditAddress.vue';
|
||||
import {
|
||||
getAddress,
|
||||
fetchCountries, fetchCities, fetchReferenceAddresses,
|
||||
patchAddress, postAddress, postPostalCode, postAddressToPerson
|
||||
} from '../api'
|
||||
|
||||
export default {
|
||||
name: 'AddAddresses',
|
||||
name: "AddAddress",
|
||||
props: ['context', 'options'],
|
||||
emits: ['submitAddress'],
|
||||
components: {
|
||||
Modal,
|
||||
CountrySelection,
|
||||
CitySelection,
|
||||
AddressSelection,
|
||||
AddressMap,
|
||||
AddressMore
|
||||
ShowAddress,
|
||||
EditAddress,
|
||||
},
|
||||
props: [
|
||||
'modalAddTitle',
|
||||
'modalEditTitle'
|
||||
],
|
||||
emits: ['addNewAddress'],
|
||||
data() {
|
||||
return {
|
||||
edit: window.mode === 'edit',
|
||||
modal: {
|
||||
showModal: false,
|
||||
modalDialogClass: "modal-dialog-scrollable modal-xl"
|
||||
flag: {
|
||||
showPane: false,
|
||||
editPane: false,
|
||||
loading: false,
|
||||
success: false
|
||||
},
|
||||
loading: false,
|
||||
address: {
|
||||
writeNewAddress: false,
|
||||
writeNewPostalCode: false,
|
||||
default: {
|
||||
textButton: { create: 'add_an_address_title', edit: 'edit_address' },
|
||||
title: { create: 'add_an_address_title', edit: 'edit_address' },
|
||||
bindModal: {
|
||||
step1: true,
|
||||
step2: true,
|
||||
},
|
||||
},
|
||||
entity: {
|
||||
address: {}, // <== loaded and returned
|
||||
loaded: {
|
||||
countries: [],
|
||||
cities: [],
|
||||
addresses: [],
|
||||
},
|
||||
selected: {
|
||||
selected: { // <== make temporary changes
|
||||
isNoAddress: false,
|
||||
country: {},
|
||||
city: {},
|
||||
postcode: {
|
||||
code: null,
|
||||
name: null
|
||||
},
|
||||
address: {},
|
||||
},
|
||||
newPostalCode: {
|
||||
code: null,
|
||||
name: null
|
||||
writeNew: {
|
||||
address: false,
|
||||
postcode: false
|
||||
}
|
||||
},
|
||||
addressMap: {
|
||||
center : [48.8589, 2.3469], // Note: LeafletJs demands [lat, lon] cfr https://macwright.com/lonlat/
|
||||
// Note: LeafletJs demands [lat, lon]
|
||||
// cfr https://macwright.com/lonlat/
|
||||
center : [48.8589, 2.3469],
|
||||
zoom: 12
|
||||
},
|
||||
isNoAddress: false,
|
||||
street: null,
|
||||
streetNumber: null,
|
||||
corridor: null,
|
||||
steps: null,
|
||||
floor: null,
|
||||
flat: null,
|
||||
buildingName: null,
|
||||
extra: null,
|
||||
distribution: null,
|
||||
},
|
||||
errorMsg: {},
|
||||
errorMsg: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isNoAddress: {
|
||||
set(value) {
|
||||
console.log('value', value);
|
||||
this.address.isNoAddress = value;
|
||||
},
|
||||
get() {
|
||||
return this.address.isNoAddress;
|
||||
|
||||
// TODO improve: props options must override data default
|
||||
step1WithModal() {
|
||||
return (this.options.bindModal) ? this.options.bindModal.step1 : this.default.bindModal.step1;
|
||||
},
|
||||
step2WithModal() {
|
||||
return (this.options.bindModal) ? this.options.bindModal.step2 : this.default.bindModal.step2;
|
||||
},
|
||||
|
||||
getTextButton() {
|
||||
if (this.options.textButton) {
|
||||
return (this.context.edit) ? this.options.textButton.edit : this.options.textButton.create;
|
||||
}
|
||||
return (this.context.edit) ? this.default.textButton.edit : this.default.textButton.create;
|
||||
},
|
||||
getTextTitle() {
|
||||
if (this.options.title) {
|
||||
return (this.context.edit) ? this.options.title.edit : this.options.title.create;
|
||||
}
|
||||
return (this.context.edit) ? this.default.title.edit : this.default.title.create;
|
||||
},
|
||||
|
||||
getSubmited() {
|
||||
return this.entity.address;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getCountries();
|
||||
if (!this.step1WithModal) {
|
||||
console.log('Mounted now !');
|
||||
this.openShowPane();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openModal() {
|
||||
this.modal.showModal = true;
|
||||
this.resetAll();
|
||||
//this.$nextTick(function() {
|
||||
// this.$refs.search.focus(); // positionner le curseur à l'ouverture de la modale
|
||||
//})
|
||||
|
||||
/*
|
||||
* Opening and closing Panes when interacting with buttons
|
||||
*/
|
||||
openShowPane() {
|
||||
console.log('open the Show Panel');
|
||||
if (this.context.addressId) {
|
||||
this.getInitialAddress(this.context.addressId);
|
||||
}
|
||||
this.flag.showPane = true;
|
||||
},
|
||||
focusOnCity() {
|
||||
const citySelector = document.getElementById('citySelector');
|
||||
citySelector.focus();
|
||||
openEditPane() {
|
||||
console.log('open the Edit panel');
|
||||
this.initForm();
|
||||
this.getCountries();
|
||||
},
|
||||
focusOnAddress() {
|
||||
const addressSelector = document.getElementById('addressSelector');
|
||||
addressSelector.focus();
|
||||
closeEditPane() {
|
||||
console.log('close the Edit Panel (with validation)');
|
||||
this.applyChanges();
|
||||
this.flag.showPane = true;
|
||||
this.flag.editPane = false;
|
||||
},
|
||||
getCountries() {
|
||||
console.log('getCountries');
|
||||
this.loading = true;
|
||||
fetchCountries().then(countries => new Promise((resolve, reject) => {
|
||||
this.address.loaded.countries = countries.results;
|
||||
resolve()
|
||||
this.loading = false;
|
||||
}))
|
||||
.catch((error) => {
|
||||
this.errorMsg.push(error.message);
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
getCities(country) {
|
||||
console.log('getCities for', country.name);
|
||||
this.loading = true;
|
||||
fetchCities(country).then(cities => new Promise((resolve, reject) => {
|
||||
this.address.loaded.cities = cities.results.filter(c => c.origin !== 3); // filter out user-defined cities
|
||||
resolve();
|
||||
this.loading = false;
|
||||
|
||||
/*
|
||||
* Async Fetch datas
|
||||
*/
|
||||
getInitialAddress(id) {
|
||||
this.flag.loading = true;
|
||||
getAddress(id).then(
|
||||
address => new Promise((resolve, reject) => {
|
||||
this.entity.address = address;
|
||||
this.flag.loading = false;
|
||||
resolve();
|
||||
}))
|
||||
.catch((error) => {
|
||||
this.errorMsg.push(error.message);
|
||||
this.loading = false;
|
||||
this.flag.loading = false;
|
||||
});
|
||||
},
|
||||
getReferenceAddresses(city) {
|
||||
this.loading = true;
|
||||
console.log('getReferenceAddresses for', city.name);
|
||||
fetchReferenceAddresses(city).then(addresses => new Promise((resolve, reject) => {
|
||||
console.log('addresses', addresses);
|
||||
this.address.loaded.addresses = addresses.results;
|
||||
|
||||
getCountries() {
|
||||
this.flag.loading = true;
|
||||
fetchCountries().then(
|
||||
countries => new Promise((resolve, reject) => {
|
||||
this.entity.loaded.countries = countries.results;
|
||||
this.flag.showPane = false;
|
||||
this.flag.editPane = true;
|
||||
this.flag.loading = false;
|
||||
resolve()
|
||||
}))
|
||||
.catch((error) => {
|
||||
this.errorMsg.push(error.message);
|
||||
this.flag.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
getCities(country) {
|
||||
this.flag.loading = true;
|
||||
fetchCities(country).then(
|
||||
cities => new Promise((resolve, reject) => {
|
||||
this.entity.loaded.cities = cities.results.filter(c => c.origin !== 3); // filter out user-defined cities
|
||||
this.flag.loading = false;
|
||||
resolve();
|
||||
this.loading = false;
|
||||
}))
|
||||
.catch((error) => {
|
||||
this.errorMsg.push(error.message);
|
||||
this.loading = false;
|
||||
}))
|
||||
.catch((error) => {
|
||||
this.errorMsg.push(error.message);
|
||||
this.flag.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
getReferenceAddresses(city) {
|
||||
this.flag.loading = true;
|
||||
fetchReferenceAddresses(city).then(
|
||||
addresses => new Promise((resolve, reject) => {
|
||||
this.entity.loaded.addresses = addresses.results;
|
||||
this.flag.loading = false;
|
||||
resolve();
|
||||
}))
|
||||
.catch((error) => {
|
||||
this.errorMsg.push(error.message);
|
||||
this.flag.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
/*
|
||||
* Make form ready for new changes
|
||||
*/
|
||||
initForm() {
|
||||
console.log('init form');
|
||||
|
||||
this.entity.loaded.addresses = [];
|
||||
this.entity.loaded.cities = [];
|
||||
this.entity.loaded.countries = [];
|
||||
|
||||
this.entity.selected.isNoAddress = (this.context.edit && this.entity.address.text === '') ? true : false;
|
||||
|
||||
this.entity.selected.country = this.context.edit ? this.entity.address.country : {};
|
||||
this.entity.selected.postcode = this.context.edit ? this.entity.address.postcode : {};
|
||||
this.entity.selected.city = {};
|
||||
|
||||
this.entity.selected.address = {};
|
||||
this.entity.selected.address.street = this.context.edit ? this.entity.address.street: null;
|
||||
this.entity.selected.address.streetNumber = this.context.edit ? this.entity.address.streetNumber: null;
|
||||
this.entity.selected.address.floor = this.context.edit ? this.entity.address.floor: null;
|
||||
this.entity.selected.address.corridor = this.context.edit ? this.entity.address.corridor: null;
|
||||
this.entity.selected.address.steps = this.context.edit ? this.entity.address.steps: null;
|
||||
this.entity.selected.address.flat = this.context.edit ? this.entity.address.flat: null;
|
||||
this.entity.selected.address.buildingName = this.context.edit ? this.entity.address.buildingName: null;
|
||||
this.entity.selected.address.distribution = this.context.edit ? this.entity.address.distribution: null;
|
||||
this.entity.selected.address.extra = this.context.edit ? this.entity.address.extra: null;
|
||||
|
||||
this.entity.selected.writeNew.address = this.context.edit;
|
||||
this.entity.selected.writeNew.postcode = this.context.edit;
|
||||
},
|
||||
|
||||
/*
|
||||
* When changes are validated,
|
||||
* apply some transformations before asyncing with backend
|
||||
* from entity.selected to entity.address
|
||||
*/
|
||||
applyChanges() {
|
||||
|
||||
let newAddress = {
|
||||
'isNoAddress': this.entity.selected.isNoAddress,
|
||||
'street': this.entity.selected.isNoAddress ? '' : this.entity.selected.address.street,
|
||||
'streetNumber': this.entity.selected.isNoAddress ? '' : this.entity.selected.address.streetNumber,
|
||||
'postcode': {'id': this.entity.selected.city.id },
|
||||
'floor': this.entity.selected.address.floor,
|
||||
'corridor': this.entity.selected.address.corridor,
|
||||
'steps': this.entity.selected.address.steps,
|
||||
'flat': this.entity.selected.address.flat,
|
||||
'buildingName': this.entity.selected.address.buildingName,
|
||||
'distribution': this.entity.selected.address.distribution,
|
||||
'extra': this.entity.selected.address.extra
|
||||
};
|
||||
|
||||
if (this.entity.selected.address.point !== undefined) {
|
||||
newAddress = Object.assign(newAddress, {
|
||||
'point': this.entity.selected.address.point.coordinates
|
||||
});
|
||||
}
|
||||
if (this.entity.selected.writeNew.postcode) {
|
||||
let newPostcode = this.entity.selected.postcode;
|
||||
newPostcode = Object.assign(newPostcode, {
|
||||
'country': {'id': this.entity.selected.country.id },
|
||||
});
|
||||
newAddress = Object.assign(newAddress, {
|
||||
'newPostcode': newPostcode
|
||||
});
|
||||
}
|
||||
|
||||
if (this.context.edit) {
|
||||
this.updateAddress({ addressId: this.context.addressId, newAddress: newAddress });
|
||||
} else {
|
||||
this.addAddress(newAddress);
|
||||
}
|
||||
},
|
||||
updateMapCenter(point) {
|
||||
console.log('point', point);
|
||||
this.address.addressMap.center[0] = point.coordinates[1]; // TODO use reverse()
|
||||
this.address.addressMap.center[1] = point.coordinates[0];
|
||||
this.$refs.addressMap.update(); // cast child methods
|
||||
|
||||
/*
|
||||
* Async PATCH transactions,
|
||||
* then update existing address with backend datas when promise is resolved
|
||||
*/
|
||||
updateAddress(payload) {
|
||||
console.log('updateAddress payload', payload);
|
||||
|
||||
// TODO change the condition because it writes new postal code in edit mode now: !writeNewPostalCode
|
||||
this.flag.loading = true;
|
||||
if ('newPostcode' in payload.newAddress) {
|
||||
let postcodeBody = payload.newAddress.newPostcode;
|
||||
postcodeBody = Object.assign(postcodeBody, {'origin': 3});
|
||||
|
||||
postPostalCode(postcodeBody)
|
||||
.then(postalCode => {
|
||||
let body = payload.newAddress;
|
||||
body.postcode = {'id': postalCode.id },
|
||||
patchAddress(payload.addressId, body)
|
||||
.then(address => new Promise((resolve, reject) => {
|
||||
console.log('update address');
|
||||
this.entity.address = address;
|
||||
this.flag.loading = false;
|
||||
resolve();
|
||||
}))
|
||||
.catch((error) => {
|
||||
this.errorMsg.push(error);
|
||||
this.flag.loading = false;
|
||||
});
|
||||
})
|
||||
|
||||
} else {
|
||||
patchAddress(payload.addressId, payload.newAddress)
|
||||
.then(address => new Promise((resolve, reject) => {
|
||||
console.log('update address');
|
||||
this.entity.address = address;
|
||||
this.flag.loading = false;
|
||||
resolve();
|
||||
}))
|
||||
.catch((error) => {
|
||||
this.errorMsg.push(error);
|
||||
this.flag.loading = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
resetAll() {
|
||||
console.log('reset all selected');
|
||||
this.address.loaded.addresses = [];
|
||||
this.address.selected.address = {};
|
||||
this.address.loaded.cities = [];
|
||||
this.address.selected.city = {};
|
||||
this.address.selected.country = {};
|
||||
this.address.isNoAddress = this.edit ? this.$store.state.editAddress.isNoAddress: false;;
|
||||
this.address.street = this.edit ? this.$store.state.editAddress.street: null;
|
||||
this.address.streetNumber = this.edit ? this.$store.state.editAddress.streetNumber: null;
|
||||
this.address.floor = this.edit ? this.$store.state.editAddress.floor: null;
|
||||
this.address.corridor = this.edit ? this.$store.state.editAddress.corridor: null;
|
||||
this.address.steps = this.edit ? this.$store.state.editAddress.steps: null;
|
||||
this.address.flat = this.edit ? this.$store.state.editAddress.flat: null;
|
||||
this.address.buildingName = this.edit ? this.$store.state.editAddress.buildingName: null;
|
||||
this.address.distribution = this.edit ? this.$store.state.editAddress.distribution: null;
|
||||
this.address.extra = this.edit ? this.$store.state.editAddress.extra: null;
|
||||
this.address.writeNewAddress = this.edit;
|
||||
this.address.writeNewPostalCode = this.edit;
|
||||
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);
|
||||
|
||||
/*
|
||||
* Async POST transactions,
|
||||
* creating new address, and receive backend datas when promise is resolved
|
||||
*/
|
||||
addAddress(payload) {
|
||||
console.log('addAddress payload', payload);
|
||||
|
||||
this.flag.loading = true;
|
||||
if('newPostcode' in payload){
|
||||
let postcodeBody = payload.newPostcode;
|
||||
postcodeBody = Object.assign(postcodeBody, {'origin': 3});
|
||||
|
||||
postPostalCode(postcodeBody)
|
||||
.then(postalCode => {
|
||||
let body = payload;
|
||||
body.postcode = {'id': postalCode.id},
|
||||
postAddress(body)
|
||||
.then(address => new Promise((resolve, reject) => {
|
||||
console.log('add address');
|
||||
this.entity.address = address;
|
||||
resolve();
|
||||
this.flag.loading = false;
|
||||
}))
|
||||
.catch((error) => {
|
||||
this.errorMsg.push(error);
|
||||
this.flag.loading = false;
|
||||
});
|
||||
})
|
||||
|
||||
} else {
|
||||
postAddress(payload)
|
||||
.then(address => new Promise((resolve, reject) => {
|
||||
console.log('add address');
|
||||
this.entity.address = address;
|
||||
resolve();
|
||||
this.flag.loading = false;
|
||||
}))
|
||||
.catch((error) => {
|
||||
this.errorMsg.push(error);
|
||||
this.flag.loading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
div.address-form {
|
||||
h4.h3 {
|
||||
font-weight: bold;
|
||||
}
|
||||
div#address_map {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
div.entity-address {
|
||||
position: relative;
|
||||
div.loading {
|
||||
position: absolute;
|
||||
right: 0; top: -55px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user