Merge branch 'improve_address' into person_renderbox_thirdparty_onthefly

This commit is contained in:
Mathieu Jaumotte 2021-09-18 17:05:13 +02:00
commit 4b87e16f6d
13 changed files with 149 additions and 139 deletions

View File

@ -10,7 +10,6 @@
<script>
import AddAddress from './components/AddAddress.vue';
import { patchAddress } from "./api";
import { postAddressToHousehold, postAddressToPerson } from "ChillPersonAssets/vuejs/_api/AddAddress";
export default {
@ -30,7 +29,6 @@ export default {
return (this.context.edit) ? 'address_' + this.context.addressId
: this.context.entity.name + '_' + this.context.entity.id ;
}
},
mounted() {
//console.log('AddAddress: data context', this.context);

View File

@ -2,43 +2,30 @@
<ul class="record_actions"
:class="{ 'sticky-form-buttons': isStickyForm }">
<!--
<li v-if="isStickyForm" class="cancel">
<a class="btn btn-cancel" @click="resetPane">
{{ $t('back_to_the_list') }}
</a>
<slot name="before"></slot>
</li>
-->
<slot name="action"></slot>
<!--
<li v-if="isStickyForm">
<a class="btn btn-save">
{{ $t('action.save')}}
</a>
<slot name="after"></slot>
</li>
-->
</ul>
</template>
<script>
export default {
name: "ActionButtons",
props: [ 'options', 'default' ],
props: ['options', 'defaultz'],
computed: {
isStickyForm() {
return (typeof this.options.stickyActions !== 'undefined') ?
this.options.stickyActions : this.default.stickyActions;
this.options.stickyActions : this.defaultz.stickyActions;
},
},
methods: {
resetPane() {
this.flag.suggestPane = false;
this.flag.editPane = false;
this.flag.datePane = false;
this.flag.showPane = true;
}
}
}
</script>

View File

@ -4,7 +4,7 @@
<show-pane v-if="flag.showPane"
v-bind:context="this.context"
v-bind:options="this.options"
v-bind:default="this.default"
v-bind:defaultz="this.defaultz"
v-bind:entity="this.entity"
v-bind:flag="this.flag"
@openEditPane="openEditPane"
@ -30,7 +30,7 @@
<suggest-pane
v-bind:context="this.context"
v-bind:options="this.options"
v-bind:default="this.default"
v-bind:defaultz="this.defaultz"
v-bind:entity="this.entity"
v-bind:flag="this.flag"
ref="suggestAddress">
@ -39,14 +39,9 @@
<template v-slot:footer>
<button @click="openEditPane"
class="btn btn-update">
{{ $t('action.edit')}}
class="btn btn-create">
{{ $t('create_a_new_address')}}
</button>
<!--
<button class="btn btn-save">
{{ $t('action.save')}}
</button>
-->
</template>
</modal>
@ -55,12 +50,26 @@
<suggest-pane v-if="flag.suggestPane"
v-bind:context="this.context"
v-bind:options="this.options"
v-bind:default="this.default"
v-bind:defaultz="this.defaultz"
v-bind:entity="this.entity"
v-bind:flag="this.flag"
v-bind:insideModal="false"
@openEditPane="openEditPane"
ref="suggestAddress">
<template v-slot:before v-if="!bypassFirstStep">
<a class="btn btn-cancel" @click="resetPane">
{{ $t('action.cancel') }}
</a>
</template>
<template v-slot:action>
<li>
<button @click="openEditPane"
class="btn btn-create">
{{ $t('create_a_new_address')}}
</button>
</li>
</template>
</suggest-pane>
</div>
@ -83,7 +92,7 @@
<edit-pane
v-bind:context="this.context"
v-bind:options="this.options"
v-bind:default="this.default"
v-bind:defaultz="this.defaultz"
v-bind:entity="this.entity"
v-bind:flag="this.flag"
@getCities="getCities"
@ -92,12 +101,11 @@
</template>
<template v-slot:footer>
<button class="btn btn-cancel change-icon" @click="flag.showPane = true; flag.editPane = false;">
<button class="btn btn-cancel change-icon" @click="resetPane">
{{ $t('action.cancel') }}
</button>
<button class="btn btn-update"
@click="closeEditPane">
{{ $t('action.valid')}}
<button class="btn btn-save" @click="closeEditPane">
{{ $t('action.save')}}
</button>
</template>
@ -107,13 +115,26 @@
<edit-pane v-if="flag.editPane"
v-bind:context="this.context"
v-bind:options="this.options"
v-bind:default="this.default"
v-bind:defaultz="this.defaultz"
v-bind:entity="this.entity"
v-bind:flag="this.flag"
v-bind:insideModal="false"
@closeEditPane="closeEditPane"
@getCities="getCities"
@getReferenceAddresses="getReferenceAddresses">
<template v-slot:before>
<a class="btn btn-cancel" @click="resetPane">
{{ $t('action.cancel') }}
</a>
</template>
<template v-slot:action>
<li>
<button class="btn btn-save" @click="closeEditPane">
{{ $t('action.save')}}
</button>
</li>
</template>
</edit-pane>
</div>
@ -136,7 +157,7 @@
<date-pane
v-bind:context="this.context"
v-bind:options="this.options"
v-bind:default="this.default"
v-bind:defaultz="this.defaultz"
v-bind:entity="this.entity"
v-bind:flag="this.flag"
ref="dateAddress">
@ -144,13 +165,14 @@
</template>
<template v-slot:footer>
<button @click="openEditPane"
class="btn btn-update">
<button class="btn btn-update" @click="openEditPane">
{{ $t('action.edit')}}
</button>
<!--
<button class="btn btn-save">
{{ $t('action.save')}}
</button>
-->
</template>
</modal>
@ -159,12 +181,20 @@
<date-pane v-if="flag.datePane"
v-bind:context="this.context"
v-bind:options="this.options"
v-bind:default="this.default"
v-bind:defaultz="this.defaultz"
v-bind:entity="this.entity"
v-bind:flag="this.flag"
v-bind:insideModal="false"
@openEditPane="openEditPane"
ref="dateAddress">
<template v-slot:action>
<li>
<button class="btn btn-update" @click="openEditPane">
{{ $t('action.edit')}}
</button>
</li>
</template>
</date-pane>
</div>
@ -199,7 +229,7 @@ export default {
loading: false,
success: false
},
default: {
defaultz: {
button: {
text: { create: 'add_an_address_title', edit: 'edit_address' },
type: { create: 'btn-create', edit: 'btn-update'},
@ -211,7 +241,9 @@ export default {
useDate: {
validFrom: false,
validTo: false
}
},
forceRedirect: false,
onlyButton: false
},
entity: {
address: {}, // <== loaded and returned
@ -251,15 +283,15 @@ export default {
computed: {
inModal() {
return (typeof this.options.openPanesInModal !== 'undefined') ?
this.options.openPanesInModal : this.default.openPanesInModal;
this.options.openPanesInModal : this.defaultz.openPanesInModal;
},
useDatePane() {
let vFrom = (typeof this.options.useDate !== 'undefined'
&& typeof this.options.useDate.validFrom !== 'undefined') ?
this.options.useDate.validFrom : this.default.useDate.validFrom ;
this.options.useDate.validFrom : this.defaultz.useDate.validFrom ;
let vTo = (typeof this.options.useDate !== 'undefined'
&& typeof this.options.useDate.validTo !== 'undefined') ?
this.options.useDate.validTo : this.default.useDate.validTo ;
this.options.useDate.validTo : this.defaultz.useDate.validTo ;
return (vFrom || vTo) ? true : false;
},
hasSuggestions() {
@ -267,6 +299,10 @@ export default {
//return addressSuggestions.length > 0
return true;
},
displaySuggestions() {
console.log('displaySuggestions');
return !this.context.edit && this.hasSuggestions;
},
getTextTitle() {
if ( typeof this.options.title !== 'undefined'
&& ( this.options.title.edit !== null
@ -274,11 +310,12 @@ export default {
)) {
return (this.context.edit) ? this.options.title.edit : this.options.title.create;
}
return (this.context.edit) ? this.default.title.edit : this.default.title.create;
return (this.context.edit) ? this.defaultz.title.edit : this.defaultz.title.create;
},
bypassFirstStep() {
// exception: passing step0 if new address and pane are not in modal
return !this.context.edit && !this.inModal && this.flag.editPane === false
console.log('bypassFirstStep');
return !this.context.edit && !this.inModal;
}
},
mounted() {
@ -290,7 +327,7 @@ export default {
//console.log('options useDate.validTo', this.options.useDate.validTo);
console.log('useDatePane', this.useDatePane);
//console.log('Mounted now !');
console.log('Mounted now !');
this.openShowPane();
},
@ -304,7 +341,7 @@ export default {
console.log('getInitialAddress');
this.getInitialAddress(this.context.addressId);
}
if (this.bypassFirstStep) {
if (this.flag.editPane === false && this.bypassFirstStep) {
this.closeShowPane();
this.openEditPane();
} else {
@ -328,28 +365,27 @@ export default {
console.log('step1: close the Suggestion Panel');
},
openEditPane() {
/*
if (!this.context.edit && this.hasSuggestions) {
if (this.flag.suggestPane === false && this.displaySuggestions) {
this.openSuggestPane();
} else {
if (this.flag.suggestPane === true) {
this.closeSuggestPane();
}
this.initForm();
this.getCountries();
this.flag.editPane = true;
console.log('step2: open the Edit panel');
}
*/
this.initForm();
this.getCountries();
this.flag.editPane = true;
console.log('step2: open the Edit panel');
},
closeEditPane() {
this.applyChanges();
this.flag.editPane = false;
console.log('step2: close the Edit Panel');
/*
if (!this.context.edit && this.useDatePane) {
this.openDatePane();
} else {
this.openShowPane()
}
*/
this.openShowPane()
},
openDatePane() {
this.flag.datePane = true;
@ -363,7 +399,7 @@ export default {
this.flag.suggestPane = false;
this.flag.editPane = false;
this.flag.datePane = false;
this.flag.showPane = true;
this.openShowPane();
},
/*
@ -494,16 +530,13 @@ export default {
});
}
console.log('apply changes');
if (this.context.edit) {
this.updateAddress({
addressId: this.context.addressId,
newAddress: newAddress
})
.then(payload => {
console.log('payload', payload);
this.closePaneAndCallbackSubmit(payload);
}
);
.then(payload => this.closePaneAndCallbackSubmit(payload));
} else {
this.addNewAddress(newAddress)

View File

@ -1,4 +1,4 @@
<template>
<template>step3
<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>
@ -40,23 +40,16 @@
</div>
<action-buttons v-if="insideModal === false"
:flag="this.flag"
:options="this.options"
:default="this.default">
:defaultz="this.defaultz">
<template v-slot:before>
<slot name="before"></slot>
</template>
<template v-slot:action>
<li>
<a @click.prevent="$emit('openEditPane')"
class="btn btn-update">
{{ $t('action.edit')}}
</a>
</li>
<!--
<li>
<a class="btn btn-save">
{{ $t('action.save')}}
</a>
</li>
-->
<slot name="action"></slot>
</template>
<template v-slot:after>
<slot name="after"></slot>
</template>
</action-buttons>
@ -76,13 +69,12 @@ export default {
props: [
'context',
'options',
'default',
'defaultz',
'flag',
'entity',
'errorMsg',
'insideModal'
],
emits: ['openEditPane'],
computed: {
address() {
return this.entity.address;

View File

@ -1,4 +1,4 @@
<template>
<template>step2
<div class="address-form">
<!-- Not display in modal -->
@ -55,20 +55,16 @@
</address-more>
<action-buttons v-if="insideModal === false"
:flag="this.flag"
:options="this.options"
:default="this.default">
:defaultz="this.defaultz">
<template v-slot:before>
<slot name="before"></slot>
</template>
<template v-slot:action>
<li>
<a class="btn btn-cancel change-icon" @click="flag.showPane = true; flag.editPane = false;">
{{ $t('action.cancel') }}
</a>
</li>
<li>
<a class="btn btn-save" @click.prevent="$emit('closeEditPane')">
{{ $t('action.save')}}
</a>
</li>
<slot name="action"></slot>
</template>
<template v-slot:after>
<slot name="after"></slot>
</template>
</action-buttons>
@ -96,13 +92,13 @@ export default {
props: [
'context',
'options',
'default',
'defaultz',
'flag',
'entity',
'errorMsg',
'insideModal'
],
emits: ['closeEditPane', 'getCities', 'getReferenceAddresses'],
emits: ['getCities', 'getReferenceAddresses'],
data() {
return {
value: false

View File

@ -11,9 +11,11 @@
{{ $t(getSuccessText) }}
</div>
<address-render-box :address="address"></address-render-box>
<address-render-box v-if="!onlyButton" :address="address"></address-render-box>
<action-buttons :flag="this.flag" :options="this.options" :default="this.default">
<action-buttons
:options="this.options"
:defaultz="this.defaultz">
<template v-slot:action>
<li>
<button @click.prevent="$emit('openEditPane')"
@ -40,7 +42,7 @@ export default {
props: [
'context',
'options',
'default',
'defaultz',
'flag',
'entity',
'errorMsg'
@ -52,10 +54,10 @@ export default {
},
displayTextButton() {
return (typeof this.options.button !== 'undefined' && typeof this.options.button.displayText !== 'undefined') ?
this.options.button.displayText : this.default.button.displayText;
this.options.button.displayText : this.defaultz.button.displayText;
},
getClassButton() {
let type = (this.context.edit) ? this.default.button.type.edit : this.default.button.type.create;
let type = (this.context.edit) ? this.defaultz.button.type.edit : this.defaultz.button.type.create;
let size = (typeof this.options.button !== 'undefined' && this.options.button.size !== null) ?
`${this.options.button.size} ` : '';
return `${size}${type}`;
@ -67,7 +69,7 @@ export default {
)) {
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;
return (this.context.edit) ? this.defaultz.button.text.edit : this.defaultz.button.text.create;
},
getSuccessText() {
switch (this.context.entity.name) {
@ -80,6 +82,10 @@ export default {
default:
return (this.context.edit) ? 'address_edit_success' : 'address_new_success';
}
},
onlyButton() {
return (typeof this.options.onlyButton !== 'undefined') ?
this.options.onlyButton : this.defaultz.onlyButton;
}
}
};

View File

@ -1,33 +1,30 @@
<template>
<template>step1
<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">{{ $t('loading') }}</span>
</div>
<div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
{{ errorMsg }}
</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 v-if="flag.success" class="alert alert-success">{{ $t(getSuccessText) }}</div>
suggestions
<h3>{{ $t('address_suggestions') }}</h3>
<action-buttons v-if="insideModal === false"
:flag="this.flag"
:options="this.options"
:default="this.default">
:defaultz="this.defaultz">
<template v-slot:before>
<slot name="before"></slot>
</template>
<template v-slot:action>
<li>
<a @click.prevent="$emit('openEditPane')"
class="btn btn-update">
{{ $t('action.edit')}}
</a>
</li>
<slot name="action"></slot>
</template>
<template v-slot:after>
<slot name="after"></slot>
</template>
</action-buttons>
</template>
<script>
@ -43,21 +40,13 @@ export default {
props: [
'context',
'options',
'default',
'defaultz',
'flag',
'entity',
'errorMsg',
'insideModal'
],
emits: ['openEditPane'],
computed: {
},
methods: {
}
computed: {},
methods: {}
}
</script>
<style scoped>
</style>

View File

@ -33,6 +33,7 @@ const addressMessages = {
validTo: "L'adresse est valable jusqu'au",
back_to_the_list: 'Retour à la liste',
loading: 'chargement en cours...',
address_suggestions: "Suggestion d'adresses",
address_new_success: 'La nouvelle adresse est enregistrée',
address_edit_success: 'L\'adresse a été mise à jour',

View File

@ -48,7 +48,9 @@ containers.forEach((container) => {
validTo: container.dataset.useValidTo === 'true' //boolean, default: false
},
/// Force redirection after last step (cfr. backUrl)
forceRedirect: container.dataset.forceRedirect === 'true' //boolean, default: false
forceRedirect: container.dataset.forceRedirect === 'true', //boolean, default: false
/// Don't display show renderbox Address
onlyButton: container.dataset.onlyButton === 'true' //boolean, default: false
}
}
}

View File

@ -92,7 +92,8 @@ export default {
// Use Date fields
useDate: {
validFrom: true
}
},
onlyButton: true
}
}
}

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

@ -11,6 +11,7 @@
targetEntity: { name: 'household', id: household.id },
backUrl: path('chill_person_household_addresses', { 'household_id': household.id }),
openPanesInModal: false,
stickyActions: true
} %}
</div>

View File

@ -17,8 +17,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_address_move', { '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',