mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
Merge branch 'address_refactoring' into add-location-period
This commit is contained in:
commit
da98b42c8c
@ -93,7 +93,8 @@ section.chill-entity {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
span.address-valid {
|
||||
.address-valid {
|
||||
margin-top: 2em;
|
||||
&.date-since {}
|
||||
&.date-until {}
|
||||
}
|
||||
|
@ -19,7 +19,7 @@
|
||||
</div>
|
||||
|
||||
<add-address
|
||||
v-bind:key="addAddress.type"
|
||||
v-bind:key="context.entity.type"
|
||||
v-bind:context="context"
|
||||
v-bind:options="addAddress.options"
|
||||
v-bind:result="addAddress.result"
|
||||
@ -28,6 +28,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/*
|
||||
* Address component is a uniq component for many contexts.
|
||||
* Allow to create/attach/edit an address to
|
||||
* - a person (new or edit address),
|
||||
* - a household (move or edit address)
|
||||
*
|
||||
* */
|
||||
import AddAddress from './components/AddAddress.vue';
|
||||
|
||||
export default {
|
||||
@ -39,40 +46,44 @@ export default {
|
||||
return {
|
||||
context: {
|
||||
edit: window.mode === 'edit',
|
||||
personId: window.personId,
|
||||
addressId: window.addressId,
|
||||
entity: {
|
||||
type: window.entityType,
|
||||
id: window.entityId
|
||||
},
|
||||
addressId: window.addressId | null,
|
||||
backUrl: window.backUrl,
|
||||
},
|
||||
addAddress: {
|
||||
options: {
|
||||
|
||||
/// Options override default.
|
||||
/// null value take default component value
|
||||
/// null value take default component value defined in AddAddress data()
|
||||
button: {
|
||||
text: {
|
||||
/// if create or edit address
|
||||
create: window.buttonText || null,
|
||||
edit: window.buttonText || null
|
||||
},
|
||||
type: window.button.type || null,
|
||||
size: window.button.size || null,
|
||||
display: window.button.display
|
||||
type: window.buttonType || null,
|
||||
size: window.buttonSize || null,
|
||||
display: window.buttonDisplay //boolean, default: true
|
||||
},
|
||||
|
||||
/// Modal title text if create or edit address (trans chain, see i18n)
|
||||
title: {
|
||||
create: window.modalTitle || null,
|
||||
edit: window.modalTitle || null
|
||||
},
|
||||
|
||||
/// Display each step in page or Modal
|
||||
bindModal: {
|
||||
step1: window.binModalStep1,
|
||||
step2: window.binModalStep2
|
||||
step1: window.binModalStep1, //boolean, default: true
|
||||
step2: window.binModalStep2 //boolean, default: true
|
||||
},
|
||||
|
||||
// Options only for root parent component
|
||||
displayResult: true,
|
||||
redirectToBackUrl: true
|
||||
},
|
||||
type: 'person',
|
||||
result: null // <== returned from addAddress component
|
||||
}
|
||||
}
|
||||
|
@ -125,31 +125,6 @@ const postPostalCode = (postalCode) => {
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* Endpoint chill_api_single_person_address
|
||||
* method POST, post Person instance
|
||||
*
|
||||
* @id integer - id of Person
|
||||
* @body Object - dictionary with changes to post
|
||||
*/
|
||||
const postAddressToPerson = (personId, addressId) => {
|
||||
//console.log(personId);
|
||||
//console.log(addressId);
|
||||
const body = {
|
||||
'id': addressId
|
||||
};
|
||||
const url = `/api/1.0/person/person/${personId}/address.json`
|
||||
return fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json;charset=utf-8'},
|
||||
body: JSON.stringify(body)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) { return response.json(); }
|
||||
throw Error('Error with request resource response');
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* Endpoint chill_api_single_address__index
|
||||
* method GET, get Address Object
|
||||
@ -174,6 +149,5 @@ export {
|
||||
postAddress,
|
||||
patchAddress,
|
||||
postPostalCode,
|
||||
postAddressToPerson,
|
||||
getAddress
|
||||
};
|
||||
|
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
|
||||
<!-- start with a button -->
|
||||
<button v-if="step1WithModal"
|
||||
@click="openShowPane"
|
||||
class="btn" :class="getClassButton"
|
||||
@ -28,6 +29,7 @@
|
||||
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>
|
||||
@ -53,6 +55,7 @@
|
||||
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"
|
||||
@ -117,13 +120,11 @@
|
||||
|
||||
<script>
|
||||
import Modal from 'ChillMainAssets/vuejs/_components/Modal';
|
||||
import { getAddress, fetchCountries, fetchCities, fetchReferenceAddresses, patchAddress, postAddress, postPostalCode } from '../api';
|
||||
import { postAddressToPerson } from "ChillPersonAssets/vuejs/_api/AddAddress/Person.js";
|
||||
import { postAddressToHousehold } from "ChillPersonAssets/vuejs/_api/AddAddress/Household.js";
|
||||
import ShowAddress from './ShowAddress.vue';
|
||||
import EditAddress from './EditAddress.vue';
|
||||
import {
|
||||
getAddress,
|
||||
fetchCountries, fetchCities, fetchReferenceAddresses,
|
||||
patchAddress, postAddress, postPostalCode, postAddressToPerson
|
||||
} from '../api'
|
||||
|
||||
export default {
|
||||
name: "AddAddress",
|
||||
@ -182,7 +183,7 @@ export default {
|
||||
},
|
||||
},
|
||||
valid: {
|
||||
from: null,
|
||||
from: new Date(),
|
||||
to: null
|
||||
},
|
||||
errorMsg: []
|
||||
@ -227,7 +228,7 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
if (!this.step1WithModal) {
|
||||
console.log('Mounted now !');
|
||||
//console.log('Mounted now !');
|
||||
this.openShowPane();
|
||||
}
|
||||
},
|
||||
@ -238,9 +239,11 @@ export default {
|
||||
*/
|
||||
openShowPane() {
|
||||
console.log('open the Show Panel');
|
||||
if (this.context.addressId) {
|
||||
|
||||
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
|
||||
@ -260,7 +263,7 @@ export default {
|
||||
},
|
||||
|
||||
closeEditPane() {
|
||||
console.log('close the Edit Panel (with validation)');
|
||||
console.log('close the Edit Panel');
|
||||
this.applyChanges();
|
||||
this.flag.showPane = true;
|
||||
this.flag.editPane = false;
|
||||
@ -359,12 +362,12 @@ export default {
|
||||
},
|
||||
|
||||
/*
|
||||
* When changes are validated,
|
||||
* 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() {
|
||||
|
||||
applyChanges()
|
||||
{
|
||||
let newAddress = {
|
||||
'isNoAddress': this.entity.selected.isNoAddress,
|
||||
'street': this.entity.selected.isNoAddress ? '' : this.entity.selected.address.street,
|
||||
@ -395,21 +398,71 @@ export default {
|
||||
}
|
||||
|
||||
if (this.context.edit) {
|
||||
this.updateAddress({ addressId: this.context.addressId, newAddress: newAddress });
|
||||
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) {
|
||||
|
||||
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});
|
||||
|
||||
@ -421,6 +474,7 @@ export default {
|
||||
.then(address => new Promise((resolve, reject) => {
|
||||
this.entity.address = address;
|
||||
this.flag.loading = false;
|
||||
this.flag.success = true;
|
||||
resolve();
|
||||
}))
|
||||
.catch((error) => {
|
||||
@ -434,6 +488,7 @@ export default {
|
||||
.then(address => new Promise((resolve, reject) => {
|
||||
this.entity.address = address;
|
||||
this.flag.loading = false;
|
||||
this.flag.success = true;
|
||||
resolve();
|
||||
}))
|
||||
.catch((error) => {
|
||||
@ -444,93 +499,101 @@ export default {
|
||||
},
|
||||
|
||||
/*
|
||||
* Async POST transactions,
|
||||
* creating new address, and receive backend datas when promise is resolved
|
||||
* When submit address
|
||||
* (get out step1 show pane, submit button)
|
||||
*/
|
||||
addAddress(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) => {
|
||||
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) => {
|
||||
this.entity.address = address;
|
||||
resolve();
|
||||
this.flag.loading = false;
|
||||
}))
|
||||
.catch((error) => {
|
||||
this.errorMsg.push(error);
|
||||
this.flag.loading = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
* When submited
|
||||
*/
|
||||
submitAddress() {
|
||||
console.log('@@@ CLICK button submitAddress');
|
||||
this.addDateToAddressAndAddressToPerson({
|
||||
personId: this.context.personId,
|
||||
submitAddress()
|
||||
{
|
||||
let payload = {
|
||||
entityId: this.context.entity.id,
|
||||
addressId: this.entity.address.address_id,
|
||||
body: { validFrom: { datetime: `${this.$refs.showAddress.validFrom}T00:00:00+0100`}},
|
||||
body: {
|
||||
validFrom: {
|
||||
datetime: `${this.valid.from.toISOString().split('T')[0]}T00:00:00+0100`
|
||||
}
|
||||
},
|
||||
backUrl: this.context.backUrl
|
||||
});
|
||||
}
|
||||
|
||||
console.log('@@@ CLICK button submitAddress for', this.context.entity.type, 'with payload', payload);
|
||||
this.addDateToAddressAndAddressTo(payload, this.context.entity.type);
|
||||
|
||||
this.initForm();
|
||||
this.flag.showPane = false;
|
||||
},
|
||||
|
||||
addDateToAddressAndAddressToPerson(payload) {
|
||||
console.log('addDateToAddressAndAddressToPerson payload', payload);
|
||||
addDateToAddressAndAddressTo(payload, postTo)
|
||||
{
|
||||
console.log('addDateToAddressAndAddressTo', postTo)
|
||||
this.flag.loading = true;
|
||||
patchAddress(payload.addressId, payload.body)
|
||||
.then(address => new Promise((resolve, reject) => {
|
||||
this.valid.from = address.validFrom;
|
||||
resolve();
|
||||
}).then(
|
||||
postAddressToPerson(payload.personId, payload.addressId)
|
||||
.then(person => new Promise((resolve, reject) => {
|
||||
|
||||
console.log('commit addAddressToPerson !!!', person);
|
||||
this.$props.result = person;
|
||||
|
||||
this.flag.loading = false;
|
||||
this.flag.success = true;
|
||||
|
||||
if (this.options.redirectToBackUrl) {
|
||||
window.location.assign(payload.backUrl);
|
||||
}
|
||||
resolve();
|
||||
}))
|
||||
.catch((error) => {
|
||||
this.errorMsg.push(error);
|
||||
this.flag.loading = false;
|
||||
})
|
||||
))
|
||||
this.valid.from = address.validFrom;
|
||||
resolve();
|
||||
})
|
||||
.then(
|
||||
this.postAddressTo(payload, postTo)
|
||||
)
|
||||
)
|
||||
.catch((error) => {
|
||||
this.errorMsg.push(error);
|
||||
this.flag.loading = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
postAddressTo(payload, postTo)
|
||||
{
|
||||
console.log('postAddressTo', postTo);
|
||||
if (!this.context.edit) {
|
||||
switch (postTo) {
|
||||
case 'household':
|
||||
postAddressToHousehold(payload.entityId, payload.addressId)
|
||||
.then(household => new Promise((resolve, reject) => {
|
||||
|
||||
console.log('commit addAddressToHousehold', household);
|
||||
|
||||
this.flag.loading = false;
|
||||
this.flag.success = true;
|
||||
if (this.options.redirectToBackUrl) {
|
||||
window.location.assign(payload.backUrl);
|
||||
}
|
||||
resolve();
|
||||
}))
|
||||
.catch((error) => {
|
||||
this.errorMsg.push(error);
|
||||
this.flag.loading = false;
|
||||
})
|
||||
;
|
||||
break;
|
||||
|
||||
case 'person':
|
||||
default:
|
||||
postAddressToPerson(payload.entityId, payload.addressId)
|
||||
.then(person => new Promise((resolve, reject) => {
|
||||
|
||||
console.log('commit addAddressToPerson !!!', person);
|
||||
|
||||
this.flag.loading = false;
|
||||
this.flag.success = true;
|
||||
if (this.options.redirectToBackUrl) {
|
||||
window.location.assign(payload.backUrl);
|
||||
}
|
||||
resolve();
|
||||
}))
|
||||
.catch((error) => {
|
||||
this.errorMsg.push(error);
|
||||
this.flag.loading = false;
|
||||
})
|
||||
;
|
||||
}
|
||||
} else {
|
||||
// address is already posted, just finish !
|
||||
if (this.options.redirectToBackUrl) {
|
||||
window.location.assign(payload.backUrl);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
@ -31,7 +31,7 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
sortedCountries() {
|
||||
console.log('sorted countries');
|
||||
//console.log('sorted countries');
|
||||
const countries = this.entity.loaded.countries;
|
||||
let sortedCountries = [];
|
||||
sortedCountries.push(...countries.filter(c => c.countryCode === 'FR'))
|
||||
@ -56,7 +56,7 @@ export default {
|
||||
return name.fr //TODO multilang
|
||||
},
|
||||
selectCountry(value) {
|
||||
console.log('select country', value);
|
||||
//console.log('select country', value);
|
||||
this.entity.selected.country = value;
|
||||
this.$emit('getCities', value);
|
||||
}
|
||||
|
@ -3,7 +3,13 @@
|
||||
|
||||
<div v-if="insideModal == false" class="loading">
|
||||
<i v-if="flag.loading" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i>
|
||||
<span class="sr-only">Loading...</span>
|
||||
<span class="sr-only">{{ $t('loading') }}</span>
|
||||
</div>
|
||||
<div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
|
||||
{{ errorMsg }}
|
||||
</div>
|
||||
<div v-if="flag.success" class="alert alert-success">
|
||||
{{ $t(getSuccessText) }}
|
||||
</div>
|
||||
|
||||
<div class="address multiline">
|
||||
@ -59,24 +65,15 @@
|
||||
</div>
|
||||
|
||||
<div v-if="!context.edit" class='address-valid date-since'>
|
||||
<h3>{{ $t('date') }}</h3>
|
||||
<h3>{{ $t(getValidFromDateText) }}</h3>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="validFrom"><i class="fa fa-fw fa-calendar"></i></span>
|
||||
<input type="date" class="form-control form-control-lg" name="validFrom"
|
||||
v-bind:placeholder="$t('validFrom')"
|
||||
v-bind:placeholder="$t(getValidFromDateText)"
|
||||
v-model="validFrom"
|
||||
aria-describedby="validFrom"
|
||||
/>
|
||||
</div>
|
||||
<!--div v-if="errorMsg.length > 0">
|
||||
{{ errors }}
|
||||
</div-->
|
||||
<div v-if="flag.loading">
|
||||
{{ $t('loading') }}
|
||||
</div>
|
||||
<div v-if="flag.success">
|
||||
{{ $t('person_address_creation_success') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -95,7 +92,7 @@
|
||||
</li>
|
||||
<li>
|
||||
<a class="btn btn-save"
|
||||
@click.prevent="$emit('submitAddress', { getSubmited , flag })">
|
||||
@click.prevent="$emit('submitAddress')">
|
||||
{{ $t('action.save')}}
|
||||
</a>
|
||||
</li>
|
||||
@ -103,6 +100,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { dateToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date.js';
|
||||
|
||||
export default {
|
||||
name: 'ShowAddress',
|
||||
@ -112,10 +110,11 @@ export default {
|
||||
'default',
|
||||
'flag',
|
||||
'entity',
|
||||
'valid',
|
||||
'errorMsg',
|
||||
'insideModal'
|
||||
],
|
||||
emits: ['openEditPane', 'submitAddress', 'validFrom'],
|
||||
emits: ['openEditPane', 'submitAddress'], //?
|
||||
computed: {
|
||||
address() {
|
||||
return this.entity.address;
|
||||
@ -132,8 +131,28 @@ export default {
|
||||
getSubmited() {
|
||||
return this.entity.address;
|
||||
},
|
||||
validFrom() {
|
||||
return new Date().toISOString().split('T')[0];
|
||||
validFrom: {
|
||||
set(value) {
|
||||
this.valid.from = ISOToDate(value);
|
||||
},
|
||||
get() {
|
||||
return dateToISO(this.valid.from);
|
||||
}
|
||||
},
|
||||
getValidFromDateText() {
|
||||
return (this.context.entity.type === 'household') ? 'move_date' : 'validFrom';
|
||||
},
|
||||
getSuccessText() {
|
||||
switch (this.context.entity.type) {
|
||||
/*
|
||||
case 'household':
|
||||
return (this.context.edit) ? 'household_address_edit_success' : 'household_address_move_success';
|
||||
case 'person':
|
||||
return (this.context.edit) ? 'person_address_edit_success' : 'person_address_creation_success';
|
||||
*/
|
||||
default:
|
||||
return (this.context.edit) ? 'address_edit_success' : 'address_new_success';
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -29,11 +29,24 @@ const addressMessages = {
|
||||
postalCode_name: 'Nom',
|
||||
postalCode_code: 'Code postal',
|
||||
date: 'Date de la nouvelle adresse',
|
||||
add_an_address_to_person: 'Ajouter l\'adresse à la personne',
|
||||
validFrom: 'Date de la nouvelle adresse',
|
||||
back_to_the_list: 'Retour à la liste',
|
||||
loading: 'chargement en cours...',
|
||||
address_new_success: 'La nouvelle adresse est enregistrée',
|
||||
address_edit_success: 'L\'adresse a été mise à jour',
|
||||
|
||||
// person specific
|
||||
add_an_address_to_person: 'Ajouter l\'adresse à la personne',
|
||||
person_address_creation_success: 'La nouvelle adresse de la personne est enregistrée',
|
||||
loading: 'chargement en cours...'
|
||||
person_address_edit_success: 'L\'adresse de la personne a été mise à jour',
|
||||
|
||||
// household specific
|
||||
move_date: 'Date du déménagement',
|
||||
select_a_existing_address: 'Sélectionner une adresse existante',
|
||||
add_an_address_to_household: 'Enregistrer',
|
||||
household_address_move_success: 'La nouvelle adresse du ménage est enregistrée',
|
||||
household_address_edit_success: 'L\'adresse du ménage a été mise à jour',
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -1,160 +0,0 @@
|
||||
<template>
|
||||
<div class='chill-entity entity-address'>
|
||||
|
||||
<div class="my-3">
|
||||
<h2 v-if="!edit">{{ $t('create_a_new_address') }}</h2>
|
||||
<h2 v-else>{{ $t('edit_address') }}</h2>
|
||||
|
||||
<show-address
|
||||
v-if="newAddress"
|
||||
v-bind:address="newAddress">
|
||||
</show-address>
|
||||
|
||||
<add-address
|
||||
modalAddTitle="add_an_address_title"
|
||||
modalEditTitle="edit_address"
|
||||
@addNewAddress="addNewAddress">
|
||||
</add-address>
|
||||
</div>
|
||||
|
||||
<div v-if="!edit" class='address-valid'>
|
||||
<h2>{{ $t('move_date') }}</h2>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="validFrom"><i class="fa fa-fw fa-calendar"></i></span>
|
||||
<input type="date" class="form-control form-control-lg" name="validFrom"
|
||||
v-bind:placeholder="$t('validFrom')"
|
||||
v-model="validFrom"
|
||||
aria-describedby="validFrom" />
|
||||
</div>
|
||||
<div v-if="errors.length > 0">
|
||||
{{ errors }}
|
||||
</div>
|
||||
<div v-if="loading">
|
||||
{{ $t('loading') }}
|
||||
</div>
|
||||
<div v-if="success && !edit">
|
||||
{{ $t('household_address_move_success') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="success && edit">
|
||||
{{ $t('household_address_edit_success') }}
|
||||
</div>
|
||||
|
||||
<ul class="record_actions sticky-form-buttons">
|
||||
<li class="cancel">
|
||||
<a :href="backUrl" class="btn btn-cancel">{{ $t('back_to_the_list') }}</a>
|
||||
</li>
|
||||
<li v-if="!edit">
|
||||
<button type="submit" class="btn btn-update" @click="addToHousehold">
|
||||
{{ $t('add_an_address_to_household') }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AddAddress from 'ChillMainAssets/vuejs/Address/components/AddAddress.vue';
|
||||
import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
AddAddress,
|
||||
ShowAddress
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
edit: window.mode === 'edit',
|
||||
householdId: window.householdId,
|
||||
addressId: window.addressId,
|
||||
backUrl: `/fr/person/household/${householdId}/addresses`, //TODO better way to pass this
|
||||
validFrom: new Date().toISOString().split('T')[0]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
newAddress() {
|
||||
return this.$store.state.newAddress;
|
||||
},
|
||||
errors() {
|
||||
return this.$store.state.errorMsg;
|
||||
},
|
||||
loading() {
|
||||
return this.$store.state.loading;
|
||||
},
|
||||
success() {
|
||||
return this.$store.state.success;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addNewAddress({ address, modal }) {
|
||||
console.log('@@@ CLICK button addNewAdress', address);
|
||||
|
||||
let createdAddress = {
|
||||
'isNoAddress': address.isNoAddress,
|
||||
'street': address.isNoAddress ? '' : address.street,
|
||||
'streetNumber': address.isNoAddress ? '' : address.streetNumber,
|
||||
'postcode': {'id': address.selected.city.id},
|
||||
'floor': address.floor,
|
||||
'corridor': address.corridor,
|
||||
'steps': address.steps,
|
||||
'flat': address.flat,
|
||||
'buildingName': address.buildingName,
|
||||
'distribution': address.distribution,
|
||||
'extra': address.extra
|
||||
};
|
||||
|
||||
if (address.selected.address.point !== undefined){
|
||||
createdAddress = Object.assign(createdAddress, {
|
||||
'point': address.selected.address.point.coordinates
|
||||
});
|
||||
}
|
||||
|
||||
if(address.writeNewPostalCode){
|
||||
let newPostalCode = address.newPostalCode;
|
||||
newPostalCode = Object.assign(newPostalCode, {
|
||||
'country': {'id': address.selected.country.id },
|
||||
});
|
||||
createdAddress = Object.assign(createdAddress, {
|
||||
'newPostalCode': newPostalCode
|
||||
});
|
||||
}
|
||||
|
||||
if (this.edit){
|
||||
this.$store.dispatch('updateAddress', {
|
||||
addressId: this.addressId,
|
||||
newAddress: createdAddress
|
||||
});
|
||||
} else {
|
||||
this.$store.dispatch('addAddress', createdAddress);
|
||||
}
|
||||
|
||||
modal.showModal = false;
|
||||
},
|
||||
addToHousehold() {
|
||||
this.$store.dispatch('addDateToAddressAndAddressToHousehold', {
|
||||
householdId: this.householdId,
|
||||
addressId: this.$store.state.newAddress.address_id,
|
||||
body: { validFrom: {datetime: `${this.validFrom}T00:00:00+0100`}},
|
||||
backUrl: this.backUrl
|
||||
})
|
||||
},
|
||||
getEditAddress() {
|
||||
this.$store.dispatch('getEditAddress', this.addressId);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.edit) {
|
||||
this.getEditAddress();
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
div.entity-address {
|
||||
border: 1px dashed grey;
|
||||
}
|
||||
</style>
|
@ -1,25 +0,0 @@
|
||||
import { createApp } from 'vue'
|
||||
import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
|
||||
import { appMessages } from './js/i18n'
|
||||
import { store } from './store'
|
||||
|
||||
import App from './App.vue';
|
||||
|
||||
const root = window.vueRootComponent;
|
||||
|
||||
/*
|
||||
* Load all App component, for Household edition page
|
||||
*/
|
||||
|
||||
const i18n = _createI18n(appMessages);
|
||||
|
||||
const app = createApp({
|
||||
template: `<app></app>`,
|
||||
})
|
||||
.use(store)
|
||||
.use(i18n)
|
||||
.component('app', App)
|
||||
.mount('#household-address');
|
||||
|
||||
|
||||
|
@ -1,160 +0,0 @@
|
||||
import 'es6-promise/auto';
|
||||
import { createStore } from 'vuex';
|
||||
|
||||
import { postAddress, postPostalCode, patchAddress, getAddress } from 'ChillMainAssets/vuejs/Address/api';
|
||||
import { postAddressToHousehold } from '../api';
|
||||
|
||||
const debug = process.env.NODE_ENV !== 'production';
|
||||
|
||||
const store = createStore({
|
||||
strict: debug,
|
||||
state: {
|
||||
newAddress: {},
|
||||
editAddress: {}, //TODO or should be newAddress?
|
||||
household: {},
|
||||
validFrom: {},
|
||||
errorMsg: [],
|
||||
loading: false,
|
||||
success: false
|
||||
},
|
||||
getters: {
|
||||
},
|
||||
mutations: {
|
||||
catchError(state, error) {
|
||||
state.errorMsg.push(error);
|
||||
},
|
||||
addAddress(state, address) {
|
||||
console.log('@M addAddress address', address);
|
||||
state.newAddress = address;
|
||||
},
|
||||
updateAddress(state, address) {
|
||||
console.log('@M updateAddress address', address);
|
||||
state.newAddress = address;
|
||||
},
|
||||
addAddressToHousehold(state, household) {
|
||||
console.log('@M addAddressToHousehold household', household);
|
||||
state.household = household;
|
||||
},
|
||||
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;
|
||||
},
|
||||
setLoading(state, b) {
|
||||
state.loading = b;
|
||||
},
|
||||
setSuccess(state, b) {
|
||||
state.success = b;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
addAddress({ commit }, payload) {
|
||||
console.log('@A addAddress payload', payload);
|
||||
commit('setLoading', true);
|
||||
if('newPostalCode' in payload){
|
||||
postPostalCode(payload.newPostalCode)
|
||||
.then(postalCode => {
|
||||
let body = payload;
|
||||
body.postcode = {'id': postalCode.id },
|
||||
postAddress(body)
|
||||
.then(address => new Promise((resolve, reject) => {
|
||||
commit('addAddress', address);
|
||||
resolve();
|
||||
commit('setLoading', false);
|
||||
}))
|
||||
.catch((error) => {
|
||||
commit('catchError', error);
|
||||
commit('setLoading', false);
|
||||
});
|
||||
})
|
||||
|
||||
} else {
|
||||
postAddress(payload)
|
||||
.then(address => new Promise((resolve, reject) => {
|
||||
commit('addAddress', address);
|
||||
resolve();
|
||||
commit('setLoading', false);
|
||||
}))
|
||||
.catch((error) => {
|
||||
commit('catchError', error);
|
||||
commit('setLoading', false);
|
||||
});
|
||||
}
|
||||
},
|
||||
addDateToAddressAndAddressToHousehold({ commit }, payload) {
|
||||
console.log('@A addDateToAddressAndAddressToHousehold payload', payload);
|
||||
commit('setLoading', true);
|
||||
patchAddress(payload.addressId, payload.body)
|
||||
.then(address => new Promise((resolve, reject) => {
|
||||
commit('addDateToAddress', address.validFrom);
|
||||
resolve();
|
||||
}).then(
|
||||
postAddressToHousehold(payload.householdId, payload.addressId)
|
||||
.then(household => new Promise((resolve, reject) => {
|
||||
commit('addAddressToHousehold', household);
|
||||
commit('setSuccess', true);
|
||||
commit('setLoading', false);
|
||||
window.location.assign(payload.backUrl);
|
||||
resolve();
|
||||
}))
|
||||
.catch((error) => {
|
||||
commit('catchError', error);
|
||||
commit('setLoading', false);
|
||||
})
|
||||
))
|
||||
.catch((error) => {
|
||||
commit('catchError', error);
|
||||
commit('setLoading', false);
|
||||
});
|
||||
},
|
||||
updateAddress({ commit }, payload) {
|
||||
console.log('@A updateAddress payload', payload);
|
||||
|
||||
if('newPostalCode' in payload.newAddress){ // TODO change the condition because it writes new postal code in edit mode now: !writeNewPostalCode
|
||||
let postalCodeBody = payload.newAddress.newPostalCode;
|
||||
postalCodeBody = Object.assign(postalCodeBody, {'origin': 3});
|
||||
postPostalCode(postalCodeBody)
|
||||
.then(postalCode => {
|
||||
let body = payload.newAddress;
|
||||
body.postcode = {'id': postalCode.id },
|
||||
patchAddress(payload.addressId, body)
|
||||
.then(address => new Promise((resolve, reject) => {
|
||||
commit('updateAddress', address);
|
||||
commit('setSuccess', true);
|
||||
resolve();
|
||||
}))
|
||||
.catch((error) => {
|
||||
commit('catchError', error);
|
||||
});
|
||||
})
|
||||
|
||||
} else {
|
||||
patchAddress(payload.addressId, payload.newAddress)
|
||||
.then(address => new Promise((resolve, reject) => {
|
||||
commit('updateAddress', address);
|
||||
commit('setSuccess', true);
|
||||
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);
|
||||
});
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
export { store };
|
@ -0,0 +1,27 @@
|
||||
|
||||
/*
|
||||
* Endpoint chill_api_single_person_address
|
||||
* method POST, post Person instance
|
||||
*
|
||||
* @id integer - id of Person
|
||||
* @body Object - dictionary with changes to post
|
||||
*/
|
||||
const postAddressToPerson = (personId, addressId) => {
|
||||
//console.log(personId);
|
||||
//console.log(addressId);
|
||||
const body = {
|
||||
'id': addressId
|
||||
};
|
||||
const url = `/api/1.0/person/person/${personId}/address.json`
|
||||
return fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json;charset=utf-8'},
|
||||
body: JSON.stringify(body)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) { return response.json(); }
|
||||
throw Error('Error with request resource response');
|
||||
});
|
||||
};
|
||||
|
||||
export { postAddressToPerson };
|
@ -1,38 +1,76 @@
|
||||
<div id="address"></div>{# <== vue_address component #}
|
||||
{#
|
||||
This Twig template include load vue_address component.
|
||||
It push all variables from context in Address/App.vue.
|
||||
|
||||
OPTIONS
|
||||
* mode string ['edit*'|'new'|'create']
|
||||
* address_id integer
|
||||
* backUrl twig route: path('route', {parameters})
|
||||
* modalTitle twig translated chain
|
||||
* buttonText twig translated chain
|
||||
* buttonType chill class like 'btn-update'
|
||||
* buttonSize bootstrap class like 'btn-sm'
|
||||
|
||||
#}
|
||||
<div id="address"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
window.vueRootComponent = 'app';
|
||||
window.mode = '{{ mode|e('js') }}';
|
||||
window.personId = {{ person.id|e('js') }};
|
||||
window.addressId = {{ address_id|e('js') }};
|
||||
{% if backUrl is defined %}
|
||||
window.backUrl = '{{ backUrl|e('js') }}';
|
||||
{% else %}
|
||||
window.backUrl = '{{ path('chill_person_address_list', { 'person_id': person.id })|e('js') }}';
|
||||
{% endif %}
|
||||
|
||||
{% if modalTitle is defined %}
|
||||
window.modalTitle = '{{ modalTitle|trans|e('js') }}';
|
||||
{% endif %}
|
||||
window.button = {};
|
||||
{% if buttonText is defined %}
|
||||
window.buttonText = '{{ buttonText|trans|e('js') }}';
|
||||
{% endif %}
|
||||
{% if buttonType is defined %}
|
||||
window.button.type = '{{ buttonType|e('js') }}';
|
||||
{% endif %}
|
||||
{% if buttonSize is defined %}
|
||||
window.button.size = '{{ buttonSize|e('js') }}';
|
||||
{% endif %}
|
||||
{% if buttonDisplay is defined and buttonDisplay == false %}
|
||||
window.button.display = false;
|
||||
{% endif %}
|
||||
{% if binModalStep1 is defined and binModalStep1 == false %}
|
||||
window.binModalStep1 = false;
|
||||
{% endif %}
|
||||
{% if binModalStep2 is defined and binModalStep2 == false %}
|
||||
window.binModalStep2 = false;
|
||||
{% endif %}
|
||||
{% if person is defined %}
|
||||
window.entityType = 'person';
|
||||
window.entityId = {{ person.id|e('js') }};
|
||||
{% elseif household is defined %}
|
||||
window.entityType = 'household';
|
||||
window.entityId = {{ household.id|e('js') }};
|
||||
{% endif %}
|
||||
|
||||
{% if 'edit' in app.request.get('_route') %}
|
||||
window.addressId = {{ app.request.get('address_id')|e('js') }};
|
||||
window.mode = 'edit';
|
||||
{% elseif mode is defined and mode == 'edit' %}
|
||||
window.addressId = {{ address_id|e('js') }};
|
||||
window.mode = 'edit';
|
||||
{% endif %}
|
||||
|
||||
{% if backUrl is not defined %}
|
||||
{% if person is defined %}
|
||||
window.backUrl = '{{ path('chill_person_address_list', { 'person_id': person.id })|e('js') }}';
|
||||
{% elseif household is defined %}
|
||||
window.backUrl = '{{ path('chill_person_household_addresses', { 'household_id': household.id })|e('js') }}';
|
||||
{% endif %}
|
||||
{% else %}
|
||||
window.backUrl = '{{ backUrl|e('js') }}';
|
||||
{% endif %}
|
||||
|
||||
{% if modalTitle is defined %}
|
||||
window.modalTitle = '{{ modalTitle|trans|e('js') }}';
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if buttonText is defined %}
|
||||
window.buttonText = '{{ buttonText|trans|e('js') }}';
|
||||
{% endif %}
|
||||
|
||||
{% if buttonType is defined %}
|
||||
window.buttonType = '{{ buttonType|e('js') }}';
|
||||
{% endif %}
|
||||
|
||||
{% if buttonSize is defined %}
|
||||
window.buttonSize = '{{ buttonSize|e('js') }}';
|
||||
{% endif %}
|
||||
|
||||
{% if buttonDisplay is defined and buttonDisplay == false %}
|
||||
window.buttonDisplay = false;
|
||||
{% endif %}
|
||||
|
||||
{% if binModalStep1 is defined and binModalStep1 == false %}
|
||||
window.binModalStep1 = false;
|
||||
{% endif %}
|
||||
|
||||
{% if binModalStep2 is defined and binModalStep2 == false %}
|
||||
window.binModalStep2 = false;
|
||||
{% endif %}
|
||||
</script>
|
||||
|
||||
{{ encore_entry_script_tags('vue_address') }}
|
||||
|
@ -28,8 +28,6 @@
|
||||
|
||||
{# include vue_address component #}
|
||||
{% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
|
||||
address_id: person.lastAddress.id,
|
||||
mode: 'edit',
|
||||
binModalStep1: false,
|
||||
binModalStep2: false,
|
||||
} %}
|
||||
|
@ -30,7 +30,6 @@
|
||||
|
||||
{# include vue_address component #}
|
||||
{% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
|
||||
address_id: person.lastAddress.id,
|
||||
mode: 'new',
|
||||
buttonSize: 'btn-lg',
|
||||
buttonText: 'Add an address',
|
||||
|
@ -28,8 +28,6 @@
|
||||
|
||||
{# include vue_address component #}
|
||||
{% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
|
||||
address_id: person.lastAddress.id,
|
||||
mode: 'new',
|
||||
binModalStep1: false,
|
||||
binModalStep2: false,
|
||||
} %}
|
||||
|
@ -7,21 +7,10 @@
|
||||
|
||||
<div>
|
||||
{# include vue_address component #}
|
||||
<div id="household-address"></div>
|
||||
{% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
|
||||
binModalStep1: false,
|
||||
binModalStep2: false,
|
||||
} %}
|
||||
</div>
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ encore_entry_link_tags('vue_address') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
<script type="text/javascript">
|
||||
window.householdId = {{ household.id|e('js') }};
|
||||
window.addressId = {{ address.id|e('js') }};
|
||||
window.mode = 'edit';
|
||||
window.vueRootComponent = 'app';
|
||||
</script>
|
||||
{{ encore_entry_script_tags('vue_household_address') }}
|
||||
{% endblock %}
|
||||
|
||||
{% endblock %}
|
||||
|
@ -7,19 +7,10 @@
|
||||
|
||||
<div>
|
||||
{# include vue_address component #}
|
||||
<div id="household-address"></div>
|
||||
{% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
|
||||
binModalStep1: false,
|
||||
binModalStep2: false,
|
||||
} %}
|
||||
</div>
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ encore_entry_link_tags('vue_address') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
<script type="text/javascript">
|
||||
window.householdId = {{ household.id|e('js') }};
|
||||
window.vueRootComponent = 'app';
|
||||
</script>
|
||||
{{ encore_entry_script_tags('vue_household_address') }}
|
||||
{% endblock %}
|
||||
|
||||
{% endblock %}
|
||||
|
@ -15,10 +15,13 @@
|
||||
<li style="margin: auto;">
|
||||
|
||||
{# include vue_address component #}
|
||||
<a class="btn btn-lg btn-create"
|
||||
href="{{ chill_path_add_return_path('chill_person_household_address_move', { 'household_id': household.id }) }}">
|
||||
{{ 'Move household'|trans }}
|
||||
</a>
|
||||
{% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
|
||||
mode: 'new',
|
||||
backUrl: chill_path_add_return_path('chill_person_household_address_move', { 'household_id': household.id }),
|
||||
buttonSize: 'btn-lg',
|
||||
buttonText: 'Move household',
|
||||
modalTitle: 'Move household',
|
||||
} %}
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
|
@ -202,9 +202,9 @@ This view should receive those arguments:
|
||||
<li class="list-inline-item">
|
||||
{# include vue_address component #}
|
||||
{% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
|
||||
mode: 'edit',
|
||||
address_id: person.lastAddress.id,
|
||||
backUrl: path('chill_person_view', { 'person_id': person.id }),
|
||||
mode: 'edit',
|
||||
modalTitle: 'Edit address',
|
||||
buttonText: 'Edit address',
|
||||
buttonType: 'btn-update',
|
||||
|
@ -8,7 +8,6 @@ module.exports = function(encore, entries)
|
||||
ChillPersonAssets: __dirname + '/Resources/public'
|
||||
});
|
||||
|
||||
encore.addEntry('vue_household_address', __dirname + '/Resources/public/vuejs/HouseholdAddress/index.js');
|
||||
|
||||
encore.addEntry('vue_household_members_editor', __dirname + '/Resources/public/vuejs/HouseholdMembersEditor/index.js');
|
||||
encore.addEntry('vue_accourse', __dirname + '/Resources/public/vuejs/AccompanyingCourse/index.js');
|
||||
|
Loading…
x
Reference in New Issue
Block a user