Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
View File

@ -33,8 +33,8 @@ export default {
},
mounted() {
console.log('AddAddress: data context', this.context);
console.log('AddAddress: data options', this.options);
//console.log('AddAddress: data context', this.context);
//console.log('AddAddress: data options', this.options);
},
methods: {
displayErrors() {

17
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ActionButtons.vue
View File

@ -2,19 +2,23 @@
<ul class="record_actions"
:class="{ 'sticky-form-buttons': isStickyForm }">
<!--
<li v-if="isStickyForm" class="cancel">
<a class="btn btn-cancel" v-bind:href="context.backUrl">
<a class="btn btn-cancel" @click="resetPane">
{{ $t('back_to_the_list') }}
</a>
</li>
-->
<slot name="action"></slot>
<!--
<li v-if="isStickyForm">
<a class="btn btn-save">
{{ $t('action.save')}}
</a>
</li>
-->
</ul>
</template>
@ -24,7 +28,16 @@ export default {
props: [ 'options', 'default' ],
computed: {
isStickyForm() {
return (typeof this.options.stickyActions !== 'undefined') ? this.options.stickyActions : this.default.stickyActions;
return (typeof this.options.stickyActions !== 'undefined') ?
this.options.stickyActions : this.default.stickyActions;
},
},
methods: {
resetPane() {
this.flag.suggestPane = false;
this.flag.editPane = false;
this.flag.datePane = false;
this.flag.showPane = true;
}
}
}

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;
},
/*

5
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue
View File

@ -39,7 +39,10 @@
</div>
</div>
<action-buttons v-if="insideModal === false">
<action-buttons v-if="insideModal === false"
:flag="this.flag"
:options="this.options"
:default="this.default">
<template v-slot:action>
<li>
<a @click.prevent="$emit('openEditPane')"

12
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue
View File

@ -54,21 +54,21 @@
v-bind:entity="entity">
</address-more>
<!-- Not display in modal -->
<action-buttons v-if="insideModal === false">
<action-buttons v-if="insideModal === false"
:flag="this.flag"
:options="this.options"
:default="this.default">
<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-update" @click.prevent="$emit('closeEditPane')">
{{ $t('action.valid_and_see')}}
<a class="btn btn-save" @click.prevent="$emit('closeEditPane')">
{{ $t('action.save')}}
</a>
</li>
-->
</template>
</action-buttons>

20
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue
View File

@ -13,21 +13,29 @@
<address-render-box :address="address"></address-render-box>
<button @click.prevent="$emit('openEditPane')"
class="btn" :class="getClassButton"
type="button" name="button" :title="$t(getTextButton)">
<span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
</button>
<action-buttons :flag="this.flag" :options="this.options" :default="this.default">
<template v-slot:action>
<li>
<button @click.prevent="$emit('openEditPane')"
class="btn" :class="getClassButton"
type="button" name="button" :title="$t(getTextButton)">
<span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
</button>
</li>
</template>
</action-buttons>
</template>
<script>
import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
import ActionButtons from './ActionButtons.vue';
export default {
name: 'ShowPane',
components: {
AddressRenderBox
AddressRenderBox,
ActionButtons
},
props: [
'context',

5
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/SuggestPane.vue
View File

@ -15,7 +15,10 @@
suggestions
<action-buttons v-if="insideModal === false">
<action-buttons v-if="insideModal === false"
:flag="this.flag"
:options="this.options"
:default="this.default">
<template v-slot:action>
<li>
<a @click.prevent="$emit('openEditPane')"

2
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js
View File

@ -56,5 +56,5 @@ containers.forEach((container) => {
.component('app', App)
.mount(container);
console.log('container dataset', container.dataset);
//console.log('container dataset', container.dataset);
});

5
src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig
View File

@ -30,11 +30,12 @@
{% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
targetEntity: { name: 'person', id: person.id },
backUrl: path('chill_person_address_list', { 'person_id': person.id }),
useValidFrom: true,
openPanesInModal: false,
stickyActions: true,
useValidFrom: true,
useValidTo: false
} %}
{#
#}
{% endblock %}

1
src/Bundle/ChillPersonBundle/Resources/views/Household/address_edit.html.twig
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>