Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-08-21 15:13:50 +00:00
Code Issues Actions Projects Releases Wiki Activity

AddAddress: adjust Open and Close methods for each step

Browse Source
This commit is contained in:
Mathieu Jaumotte
2021-09-17 13:09:18 +02:00
parent 331dd286e7
commit 3f3b7af42b
10 changed files with 132 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
View File

@@ -12,10 +12,10 @@
</show-pane>
<!-- step 1 -->
<teleport to="body" v-if="InModal">
<teleport to="body" v-if="inModal">
<modal v-if="flag.suggestPane"
modalDialogClass="modal-dialog-scrollable modal-xl"
@close="flag.suggestPane = false">
@close="resetPane">
<template v-slot:header>
<h2 class="modal-title">{{ $t(getTextTitle) }}
@@ -42,9 +42,11 @@
class="btn btn-update">
{{ $t('action.edit')}}
</button>
<!--
<button class="btn btn-save">
{{ $t('action.save')}}
</button>
-->
</template>
</modal>
@@ -63,10 +65,10 @@
</div>
<!-- step 2 -->
<teleport to="body" v-if="InModal">
<teleport to="body" v-if="inModal">
<modal v-if="flag.editPane"
modalDialogClass="modal-dialog-scrollable modal-xl"
@close="flag.editPane = false">
@close="resetPane">
<template v-slot:header>
<h2 class="modal-title">{{ $t(getTextTitle) }}
@@ -116,10 +118,10 @@
</div>
<!-- step 3 -->
<teleport to="body" v-if="InModal">
<teleport to="body" v-if="inModal">
<modal v-if="flag.datePane"
modalDialogClass="modal-dialog-scrollable modal-xl"
@close="flag.datePane = false">
@close="resetPane">
<template v-slot:header>
<h2 class="modal-title">{{ $t(getTextTitle) }}
@@ -247,10 +249,24 @@ export default {
}
},
computed: {
InModal() {
inModal() {
return (typeof this.options.openPanesInModal !== 'undefined') ?
this.options.openPanesInModal : this.default.openPanesInModal;
},
useDatePane() {
let vFrom = (typeof this.options.useDate !== 'undefined'
&& typeof this.options.useDate.validFrom !== 'undefined') ?
this.options.useDate.validFrom : this.default.useDate.validFrom ;
let vTo = (typeof this.options.useDate !== 'undefined'
&& typeof this.options.useDate.validTo !== 'undefined') ?
this.options.useDate.validTo : this.default.useDate.validTo ;
return (vFrom || vTo) ? true : false;
},
hasSuggestions() {
// TODO
//return addressSuggestions.length > 0
return true;
},
getTextTitle() {
if ( typeof this.options.title !== 'undefined'
&& ( this.options.title.edit !== null
@@ -260,22 +276,23 @@ export default {
}
return (this.context.edit) ? this.default.title.edit : this.default.title.create;
},
//context() {
// return this.context;
//}
bypassFirstStep() {
// exception: passing step0 if new address and pane are not in modal
return !this.context.edit && !this.inModal && this.flag.editPane === false
}
},
mounted() {
//console.log('options displayText', this.options.button.displayText);
//console.log('options bindModal.step1', this.options.bindModal.step1);
//console.log('options bindModal.step2', this.options.bindModal.step2);
console.log('options useDate.validFrom', this.options.useDate.validFrom);
console.log('options useDate.validTo', this.options.useDate.validTo);
//console.log('options useDate.validFrom', this.options.useDate.validFrom);
//console.log('options useDate.validTo', this.options.useDate.validTo);
console.log('useDatePane', this.useDatePane);
//console.log('Mounted now !');
this.openShowPane();
if (!this.step1WithModal) {
//console.log('Mounted now !');
this.openShowPane();
}
},
methods: {
@@ -283,35 +300,72 @@ export default {
* Opening and closing Panes when interacting with buttons
*/
openShowPane() {
if (this.context.edit) {
console.log('getInitialAddress');
this.getInitialAddress(this.context.addressId);
}
// when create new address, start first with editPane !!
if ( this.context.edit === false
&& this.flag.editPane === false
) {
if (this.bypassFirstStep) {
this.closeShowPane();
this.openEditPane();
this.flag.editPane = true;
} else {
this.flag.showPane = true;
console.log('step1: open the Show Panel');
console.log('step0: open the Show Panel');
}
},
closeShowPane() {
// Show pane can be closed only when openPanesInModal is false
if (!this.inModal) {
this.flag.showPane = false;
console.log('step0: close the Show Panel');
}
},
openSuggestPane() {
this.flag.suggestPane = true;
console.log('step1: open the Suggestion Panel');
},
closeSuggestPane() {
this.flag.suggestPane = false;
console.log('step1: close the Suggestion Panel');
},
openEditPane() {
console.log('step2: open the Edit panel');
/*
if (!this.context.edit && this.hasSuggestions) {
this.openSuggestPane();
} else {
}
*/
this.initForm();
this.getCountries();
this.flag.editPane = true;
console.log('step2: open the Edit panel');
},
closeEditPane() {
console.log('step2: close the Edit Panel');
this.applyChanges();
this.flag.showPane = true;
this.flag.editPane = false;
console.log('step2: close the Edit Panel');
/*
if (!this.context.edit && this.useDatePane) {
this.openDatePane();
} else {
}
*/
this.openShowPane()
},
openDatePane() {
this.flag.datePane = true;
console.log('step3: open the Date Panel');
},
closeDatePane() {
this.flag.datePane = false;
console.log('step3: close the Date Panel');
},
resetPane() {
this.flag.suggestPane = false;
this.flag.editPane = false;
this.flag.datePane = false;
this.flag.showPane = true;
},
/*