mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
619 lines
21 KiB
Vue
619 lines
21 KiB
Vue
<template>
|
|
|
|
<!-- start with a button -->
|
|
<button v-if="step1WithModal"
|
|
@click="openShowPane"
|
|
class="btn" :class="getClassButton"
|
|
type="button" name="button" :title="$t(getTextButton)">
|
|
<span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
|
|
</button>
|
|
|
|
<!-- step 1 -->
|
|
<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>
|
|
<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">{{ $t('loading') }}</span>
|
|
</span>
|
|
</h2>
|
|
</template>
|
|
|
|
<template v-slot:body>
|
|
<show-address-pane
|
|
v-bind:context="this.context"
|
|
v-bind:options="this.options"
|
|
v-bind:default="this.default"
|
|
v-bind:entity="this.entity"
|
|
v-bind:valid="this.valid"
|
|
v-bind:flag="this.flag"
|
|
ref="showAddress">
|
|
</show-address-pane>
|
|
</template>
|
|
|
|
<template v-slot:footer>
|
|
<button @click="openEditPane"
|
|
class="btn btn-update">
|
|
{{ $t('action.edit')}}
|
|
</button>
|
|
<button class="btn btn-save"
|
|
@click.prevent="$emit('submitAddress')">
|
|
{{ $t('action.save')}}
|
|
</button>
|
|
</template>
|
|
|
|
</modal>
|
|
</teleport>
|
|
<div class="mt-4" v-else>
|
|
|
|
<show-address-pane 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:valid="this.valid"
|
|
v-bind:flag="this.flag"
|
|
ref="showAddress"
|
|
v-bind:insideModal="false" @openEditPane="openEditPane"
|
|
@submitAddress="$emit('submitAddress')">
|
|
</show-address-pane>
|
|
</div>
|
|
|
|
<!-- step 2 -->
|
|
<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">{{ $t('loading') }}</span>
|
|
</span>
|
|
</h2>
|
|
</template>
|
|
|
|
<template v-slot:body>
|
|
<edit-address-pane
|
|
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-pane>
|
|
</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-pane 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-pane>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import Modal from 'ChillMainAssets/vuejs/_components/Modal';
|
|
import { getAddress, fetchCountries, fetchCities, fetchReferenceAddresses, patchAddress, postAddress, postPostalCode } from '../api';
|
|
import { postAddressToPerson, postAddressToHousehold } from "ChillPersonAssets/vuejs/_api/AddAddress.js";
|
|
import ShowAddressPane from './ShowAddressPane.vue';
|
|
import EditAddressPane from './EditAddressPane.vue';
|
|
|
|
export default {
|
|
name: "AddAddress",
|
|
props: ['context', 'options', 'result'],
|
|
emits: ['submitAddress'],
|
|
components: {
|
|
Modal,
|
|
ShowAddressPane,
|
|
EditAddressPane,
|
|
},
|
|
data() {
|
|
return {
|
|
flag: {
|
|
showPane: false,
|
|
editPane: false,
|
|
loading: false,
|
|
success: false
|
|
},
|
|
default: {
|
|
button: {
|
|
text: { create: 'add_an_address_title', edit: 'edit_address' },
|
|
type: { create: 'btn-create', edit: 'btn-update'},
|
|
displayText: true
|
|
},
|
|
title: { create: 'add_an_address_title', edit: 'edit_address' },
|
|
bindModal: {
|
|
step1: true,
|
|
step2: true,
|
|
},
|
|
},
|
|
entity: {
|
|
address: {}, // <== loaded and returned
|
|
loaded: {
|
|
countries: [],
|
|
cities: [],
|
|
addresses: [],
|
|
},
|
|
selected: { // <== make temporary changes
|
|
isNoAddress: false,
|
|
country: {},
|
|
city: {},
|
|
postcode: {
|
|
code: null,
|
|
name: null
|
|
},
|
|
address: {},
|
|
writeNew: {
|
|
address: false,
|
|
postcode: false
|
|
}
|
|
},
|
|
addressMap: {
|
|
// Note: LeafletJs demands [lat, lon]
|
|
// cfr https://macwright.com/lonlat/
|
|
center : [48.8589, 2.3469],
|
|
zoom: 12
|
|
},
|
|
},
|
|
valid: {
|
|
from: new Date(),
|
|
to: null
|
|
},
|
|
errorMsg: []
|
|
}
|
|
},
|
|
computed: {
|
|
step1WithModal() {
|
|
return (this.options.bindModal !== null && typeof this.options.bindModal.step1 !== 'undefined') ?
|
|
this.options.bindModal.step1 : this.default.bindModal.step1;
|
|
},
|
|
step2WithModal() {
|
|
let step2 = (this.options.bindModal !== null && typeof this.options.bindModal.step2 !== 'undefined') ?
|
|
this.options.bindModal.step2 : this.default.bindModal.step2;
|
|
|
|
if (step2 === false && this.step1WithModal === true) {
|
|
console.log("step2 must open in a Modal");
|
|
return true;
|
|
}
|
|
return step2;
|
|
},
|
|
getTextTitle() {
|
|
if ( typeof this.options.title !== 'undefined'
|
|
&& ( this.options.title.edit !== null
|
|
|| this.options.title.create !== null
|
|
)) {
|
|
return (this.context.edit) ? this.options.title.edit : this.options.title.create;
|
|
}
|
|
return (this.context.edit) ? this.default.title.edit : this.default.title.create;
|
|
},
|
|
getTextButton() {
|
|
if ( typeof this.options.button.text !== 'undefined'
|
|
&& ( this.options.button.text.edit !== null
|
|
|| this.options.button.text.create !== null
|
|
)) {
|
|
return (this.context.edit) ? this.options.button.text.edit : this.options.button.text.create;
|
|
}
|
|
return (this.context.edit) ? this.default.button.text.edit : this.default.button.text.create;
|
|
},
|
|
getClassButton() {
|
|
let type = (this.context.edit) ? this.default.button.type.edit : this.default.button.type.create;
|
|
let size = (typeof this.options.button !== 'undefined' && this.options.button.size !== null) ?
|
|
`${this.options.button.size} ` : '';
|
|
return `${size}${type}`;
|
|
},
|
|
displayTextButton() {
|
|
return (typeof this.options.button !== 'undefined' && typeof this.options.button.displayText !== 'undefined') ?
|
|
this.options.button.displayText : this.default.button.displayText;
|
|
},
|
|
context() {
|
|
return this.context;
|
|
}
|
|
},
|
|
mounted() {
|
|
if (!this.step1WithModal) {
|
|
//console.log('Mounted now !');
|
|
this.openShowPane();
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
/*
|
|
* Opening and closing Panes when interacting with buttons
|
|
*/
|
|
openShowPane() {
|
|
console.log('open the Show Panel');
|
|
|
|
if (this.context.edit) {
|
|
this.getInitialAddress(this.context.addressId);
|
|
}
|
|
|
|
// when create new address, start first with editPane
|
|
if ( this.context.edit === false
|
|
&& this.flag.editPane === false
|
|
) {
|
|
this.openEditPane();
|
|
this.flag.editPane = true;
|
|
|
|
} else {
|
|
this.flag.showPane = true;
|
|
}
|
|
},
|
|
|
|
openEditPane() {
|
|
console.log('open the Edit panel');
|
|
this.initForm();
|
|
this.getCountries();
|
|
},
|
|
|
|
closeEditPane() {
|
|
console.log('close the Edit Panel');
|
|
this.applyChanges();
|
|
this.flag.showPane = true;
|
|
this.flag.editPane = 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.flag.loading = false;
|
|
});
|
|
},
|
|
|
|
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();
|
|
}))
|
|
.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 (get out step2 edit pane, button valid),
|
|
* 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);
|
|
}
|
|
},
|
|
|
|
/*
|
|
* Async POST transactions,
|
|
* creating new address, and receive backend datas when promise is resolved
|
|
*/
|
|
addAddress(payload)
|
|
{
|
|
this.flag.loading = true;
|
|
if ('newPostcode' in payload) {
|
|
|
|
let postcodeBody = payload.newPostcode;
|
|
if (this.context.entity.type === 'person') {
|
|
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) => {
|
|
this.entity.address = address;
|
|
this.flag.loading = false;
|
|
this.flag.success = true;
|
|
resolve();
|
|
}))
|
|
.catch((error) => {
|
|
this.errorMsg.push(error);
|
|
this.flag.loading = false;
|
|
});
|
|
})
|
|
|
|
} else {
|
|
postAddress(payload)
|
|
.then(address => new Promise((resolve, reject) => {
|
|
this.entity.address = address;
|
|
this.flag.loading = false;
|
|
this.flag.success = true;
|
|
resolve();
|
|
}))
|
|
.catch((error) => {
|
|
this.errorMsg.push(error);
|
|
this.flag.loading = false;
|
|
});
|
|
}
|
|
},
|
|
|
|
/*
|
|
* Async PATCH transactions,
|
|
* then update existing address with backend datas when promise is resolved
|
|
*/
|
|
updateAddress(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) => {
|
|
this.entity.address = address;
|
|
this.flag.loading = false;
|
|
this.flag.success = true;
|
|
resolve();
|
|
}))
|
|
.catch((error) => {
|
|
this.errorMsg.push(error);
|
|
this.flag.loading = false;
|
|
});
|
|
})
|
|
|
|
} else {
|
|
patchAddress(payload.addressId, payload.newAddress)
|
|
.then(address => new Promise((resolve, reject) => {
|
|
this.entity.address = address;
|
|
this.flag.loading = false;
|
|
this.flag.success = true;
|
|
resolve();
|
|
}))
|
|
.catch((error) => {
|
|
this.errorMsg.push(error);
|
|
this.flag.loading = false;
|
|
});
|
|
}
|
|
},
|
|
|
|
/*
|
|
* When submit address
|
|
* (get out step1 show pane, submit button)
|
|
*/
|
|
submitNewAddress()
|
|
{
|
|
let payload = {
|
|
entity: this.context.entity.type,
|
|
entityId: this.context.entity.id,
|
|
addressId: this.entity.address.address_id,
|
|
body: {
|
|
validFrom: {
|
|
datetime: `${this.valid.from.toISOString().split('T')[0]}T00:00:00+0100`
|
|
}
|
|
},
|
|
backUrl: this.context.backUrl
|
|
}
|
|
|
|
if ( payload.entity !== 'person' && payload.entity !== 'household' ) {
|
|
|
|
// just return payload to parent
|
|
// (changes will be patched in parent store)
|
|
this.initForm();
|
|
this.flag.showPane = false;
|
|
return payload;
|
|
}
|
|
|
|
console.log('submitNewAddress with', payload);
|
|
this.addDateToAddressAndAddressTo(payload);
|
|
|
|
this.initForm();
|
|
this.flag.showPane = false;
|
|
},
|
|
|
|
addDateToAddressAndAddressTo(payload)
|
|
{
|
|
console.log('addDateToAddressAndAddressTo', payload.entity)
|
|
this.flag.loading = true;
|
|
return patchAddress(payload.addressId, payload.body)
|
|
.then(address => new Promise((resolve, reject) => {
|
|
this.valid.from = address.validFrom;
|
|
resolve();
|
|
})
|
|
.then(this.postAddressTo(payload))
|
|
)
|
|
.catch((error) => {
|
|
this.errorMsg.push(error);
|
|
this.flag.loading = false;
|
|
});
|
|
},
|
|
|
|
postAddressTo(payload)
|
|
{
|
|
console.log('postAddressTo', payload.entity);
|
|
if (!this.context.edit) {
|
|
switch (payload.entity) {
|
|
case 'household':
|
|
postAddressToHousehold(payload.entityId, payload.addressId)
|
|
.then(household => new Promise((resolve, reject) => {
|
|
console.log('postAddressToHousehold', household);
|
|
this.flag.loading = false;
|
|
this.flag.success = true;
|
|
window.location.assign(payload.backUrl);
|
|
resolve();
|
|
}))
|
|
.catch((error) => {
|
|
this.errorMsg.push(error);
|
|
this.flag.loading = false;
|
|
})
|
|
;
|
|
break;
|
|
case 'person':
|
|
postAddressToPerson(payload.entityId, payload.addressId)
|
|
.then(person => new Promise((resolve, reject) => {
|
|
console.log('postAddressToPerson', person);
|
|
this.flag.loading = false;
|
|
this.flag.success = true;
|
|
window.location.assign(payload.backUrl);
|
|
resolve();
|
|
}))
|
|
.catch((error) => {
|
|
this.errorMsg.push(error);
|
|
this.flag.loading = false;
|
|
})
|
|
;
|
|
break;
|
|
default:
|
|
this.errorMsg.push('That entity is not managed by address !');
|
|
}
|
|
} else {
|
|
// address is already linked, just finish !
|
|
window.location.assign(payload.backUrl);
|
|
}
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
div.entity-address {
|
|
position: relative;
|
|
div.loading {
|
|
position: absolute;
|
|
right: 0; top: -55px;
|
|
}
|
|
}
|
|
</style>
|