mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
Merge branch 'improve_address' into person_renderbox_thirdparty_onthefly
This commit is contained in:
commit
8204107ceb
@ -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() {
|
||||
|
@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<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>
|
||||
</li>
|
||||
-->
|
||||
|
||||
<slot name="action"></slot>
|
||||
|
||||
<!--
|
||||
<li v-if="isStickyForm">
|
||||
<a class="btn btn-save">
|
||||
{{ $t('action.save')}}
|
||||
</a>
|
||||
</li>
|
||||
-->
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ActionButtons",
|
||||
props: [ 'options', 'default' ],
|
||||
computed: {
|
||||
isStickyForm() {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
@ -1,18 +1,21 @@
|
||||
<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>
|
||||
<!-- step0 -->
|
||||
<show-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:flag="this.flag"
|
||||
@openEditPane="openEditPane"
|
||||
ref="showAddress">
|
||||
</show-pane>
|
||||
|
||||
<!-- step 1 -->
|
||||
<teleport to="body" v-if="step1WithModal">
|
||||
<modal v-if="flag.showPane"
|
||||
<teleport to="body" v-if="inModal">
|
||||
<modal v-if="flag.suggestPane"
|
||||
modalDialogClass="modal-dialog-scrollable modal-xl"
|
||||
@close="flag.showPane = false">
|
||||
@close="resetPane">
|
||||
|
||||
<template v-slot:header>
|
||||
<h2 class="modal-title">{{ $t(getTextTitle) }}
|
||||
@ -24,14 +27,14 @@
|
||||
</template>
|
||||
|
||||
<template v-slot:body>
|
||||
<show-address-pane
|
||||
<suggest-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"
|
||||
ref="showAddress">
|
||||
</show-address-pane>
|
||||
ref="suggestAddress">
|
||||
</suggest-pane>
|
||||
</template>
|
||||
|
||||
<template v-slot:footer>
|
||||
@ -39,17 +42,17 @@
|
||||
class="btn btn-update">
|
||||
{{ $t('action.edit')}}
|
||||
</button>
|
||||
<button class="btn btn-save"
|
||||
@click.prevent="$emit('submitAddress')">
|
||||
<!--
|
||||
<button class="btn btn-save">
|
||||
{{ $t('action.save')}}
|
||||
</button>
|
||||
-->
|
||||
</template>
|
||||
|
||||
</modal>
|
||||
</teleport>
|
||||
<div class="mt-4" v-else>
|
||||
|
||||
<show-address-pane v-if="flag.showPane"
|
||||
<suggest-pane v-if="flag.suggestPane"
|
||||
v-bind:context="this.context"
|
||||
v-bind:options="this.options"
|
||||
v-bind:default="this.default"
|
||||
@ -57,15 +60,15 @@
|
||||
v-bind:flag="this.flag"
|
||||
v-bind:insideModal="false"
|
||||
@openEditPane="openEditPane"
|
||||
ref="showAddress">
|
||||
</show-address-pane>
|
||||
ref="suggestAddress">
|
||||
</suggest-pane>
|
||||
</div>
|
||||
|
||||
<!-- step 2 -->
|
||||
<teleport to="body" v-if="step2WithModal">
|
||||
<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) }}
|
||||
@ -77,7 +80,7 @@
|
||||
</template>
|
||||
|
||||
<template v-slot:body>
|
||||
<edit-address-pane
|
||||
<edit-pane
|
||||
v-bind:context="this.context"
|
||||
v-bind:options="this.options"
|
||||
v-bind:default="this.default"
|
||||
@ -85,7 +88,7 @@
|
||||
v-bind:flag="this.flag"
|
||||
@getCities="getCities"
|
||||
@getReferenceAddresses="getReferenceAddresses">
|
||||
</edit-address-pane>
|
||||
</edit-pane>
|
||||
</template>
|
||||
|
||||
<template v-slot:footer>
|
||||
@ -101,8 +104,7 @@
|
||||
</modal>
|
||||
</teleport>
|
||||
<div class="mt-4" v-else>
|
||||
|
||||
<edit-address-pane v-if="flag.editPane"
|
||||
<edit-pane v-if="flag.editPane"
|
||||
v-bind:context="this.context"
|
||||
v-bind:options="this.options"
|
||||
v-bind:default="this.default"
|
||||
@ -112,7 +114,58 @@
|
||||
@closeEditPane="closeEditPane"
|
||||
@getCities="getCities"
|
||||
@getReferenceAddresses="getReferenceAddresses">
|
||||
</edit-address-pane>
|
||||
</edit-pane>
|
||||
</div>
|
||||
|
||||
<!-- step 3 -->
|
||||
<teleport to="body" v-if="inModal">
|
||||
<modal v-if="flag.datePane"
|
||||
modalDialogClass="modal-dialog-scrollable modal-xl"
|
||||
@close="resetPane">
|
||||
|
||||
<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>
|
||||
<date-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"
|
||||
ref="dateAddress">
|
||||
</date-pane>
|
||||
</template>
|
||||
|
||||
<template v-slot:footer>
|
||||
<button @click="openEditPane"
|
||||
class="btn btn-update">
|
||||
{{ $t('action.edit')}}
|
||||
</button>
|
||||
<button class="btn btn-save">
|
||||
{{ $t('action.save')}}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
</modal>
|
||||
</teleport>
|
||||
<div class="mt-4" v-else>
|
||||
<date-pane v-if="flag.datePane"
|
||||
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"
|
||||
@openEditPane="openEditPane"
|
||||
ref="dateAddress">
|
||||
</date-pane>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@ -121,22 +174,28 @@
|
||||
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';
|
||||
import ShowPane from './ShowPane.vue';
|
||||
import SuggestPane from './SuggestPane.vue';
|
||||
import EditPane from './EditPane.vue';
|
||||
import DatePane from './DatePane.vue';
|
||||
|
||||
export default {
|
||||
name: "AddAddress",
|
||||
props: ['context', 'options', 'addressChangedCallback'],
|
||||
components: {
|
||||
Modal,
|
||||
ShowAddressPane,
|
||||
EditAddressPane,
|
||||
ShowPane,
|
||||
SuggestPane,
|
||||
EditPane,
|
||||
DatePane
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
flag: {
|
||||
showPane: false,
|
||||
showPane: true, // begin with showPane
|
||||
suggestPane: false,
|
||||
editPane: false,
|
||||
datePane: false,
|
||||
loading: false,
|
||||
success: false
|
||||
},
|
||||
@ -147,10 +206,8 @@ export default {
|
||||
displayText: true
|
||||
},
|
||||
title: { create: 'add_an_address_title', edit: 'edit_address' },
|
||||
bindModal: {
|
||||
step1: true,
|
||||
step2: true,
|
||||
},
|
||||
openPanesInModal: true,
|
||||
stickyActions: false,
|
||||
useDate: {
|
||||
validFrom: false,
|
||||
validTo: false
|
||||
@ -192,19 +249,23 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
step1WithModal() {
|
||||
return (typeof this.options.bindModal !== 'undefined' && typeof this.options.bindModal.step1 !== 'undefined') ?
|
||||
this.options.bindModal.step1 : this.default.bindModal.step1;
|
||||
inModal() {
|
||||
return (typeof this.options.openPanesInModal !== 'undefined') ?
|
||||
this.options.openPanesInModal : this.default.openPanesInModal;
|
||||
},
|
||||
step2WithModal() {
|
||||
let step2 = (typeof this.options.bindModal !== 'undefined' && 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;
|
||||
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'
|
||||
@ -215,27 +276,9 @@ export default {
|
||||
}
|
||||
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;
|
||||
bypassFirstStep() {
|
||||
// exception: passing step0 if new address and pane are not in modal
|
||||
return !this.context.edit && !this.inModal && this.flag.editPane === false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -243,13 +286,13 @@ export default {
|
||||
//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: {
|
||||
|
||||
@ -257,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;
|
||||
},
|
||||
|
||||
/*
|
||||
|
@ -1,47 +0,0 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<VueMultiselect
|
||||
v-model="value"
|
||||
@select="selectAddress"
|
||||
name="field"
|
||||
track-by="id"
|
||||
label="value"
|
||||
:custom-label="transName"
|
||||
:multiple="false"
|
||||
:placeholder="$t('select_address')"
|
||||
:options="addresses">
|
||||
</VueMultiselect>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueMultiselect from 'vue-multiselect';
|
||||
|
||||
export default {
|
||||
name: 'SelectHouseholdAddress',
|
||||
components: { VueMultiselect },
|
||||
props: ['address'],
|
||||
data() {
|
||||
return {
|
||||
value: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
addresses() {
|
||||
return this.address.loaded.addresses;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
transName(value) {
|
||||
return `${value.text} ${value.postcode.name}`
|
||||
},
|
||||
selectAddress(value) {
|
||||
this.address.selected.address = value;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style src="vue-multiselect/dist/vue-multiselect.css"></style>
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<div v-if="insideModal == false" class="loading">
|
||||
<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>
|
||||
@ -39,36 +39,39 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul v-if="insideModal == false"
|
||||
class="record_actions">
|
||||
<!--
|
||||
<li class="cancel">
|
||||
<a class="btn btn-cancel" v-bind:href="context.backUrl">
|
||||
{{ $t('back_to_the_list') }}</a>
|
||||
</li>-->
|
||||
<li>
|
||||
<a @click.prevent="$emit('openEditPane')"
|
||||
class="btn btn-update">
|
||||
{{ $t('action.edit')}}
|
||||
</a>
|
||||
</li>
|
||||
<!--<li>
|
||||
<a class="btn btn-save"
|
||||
@click.prevent="$emit('submitAddress')">
|
||||
{{ $t('action.save')}}
|
||||
</a>
|
||||
</li>-->
|
||||
</ul>
|
||||
<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')"
|
||||
class="btn btn-update">
|
||||
{{ $t('action.edit')}}
|
||||
</a>
|
||||
</li>
|
||||
<!--
|
||||
<li>
|
||||
<a class="btn btn-save">
|
||||
{{ $t('action.save')}}
|
||||
</a>
|
||||
</li>
|
||||
-->
|
||||
</template>
|
||||
</action-buttons>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { dateToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date.js';
|
||||
import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
|
||||
import ActionButtons from './ActionButtons.vue';
|
||||
|
||||
export default {
|
||||
name: 'ShowAddressPane',
|
||||
name: "DatePane",
|
||||
components: {
|
||||
AddressRenderBox
|
||||
AddressRenderBox,
|
||||
ActionButtons
|
||||
},
|
||||
props: [
|
||||
'context',
|
||||
@ -79,7 +82,7 @@ export default {
|
||||
'errorMsg',
|
||||
'insideModal'
|
||||
],
|
||||
emits: ['openEditPane'], // 'submitAddress'
|
||||
emits: ['openEditPane'],
|
||||
computed: {
|
||||
address() {
|
||||
return this.entity.address;
|
||||
@ -106,18 +109,6 @@ export default {
|
||||
getValidToDateText() {
|
||||
return 'validTo';
|
||||
},
|
||||
getSuccessText() {
|
||||
switch (this.context.entity.name) {
|
||||
/*
|
||||
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';
|
||||
}
|
||||
},
|
||||
showDateFrom() {
|
||||
return !this.context.edit && this.options.useDate.validFrom;
|
||||
},
|
||||
@ -125,5 +116,9 @@ export default {
|
||||
return !this.context.edit && this.options.useDate.validTo;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
@ -2,7 +2,7 @@
|
||||
<div class="address-form">
|
||||
|
||||
<!-- Not display in modal -->
|
||||
<div v-if="insideModal == false" class="loading">
|
||||
<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>
|
||||
</div>
|
||||
@ -54,25 +54,23 @@
|
||||
v-bind:entity="entity">
|
||||
</address-more>
|
||||
|
||||
<!-- Not display in modal -->
|
||||
<ul v-if="insideModal == false"
|
||||
class="record_actions sticky-form-buttons">
|
||||
<li class="cancel">
|
||||
<a class="btn btn-cancel" v-bind:href="context.backUrl">
|
||||
{{ $t('back_to_the_list') }}
|
||||
</a>
|
||||
</li>
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
<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-save" @click.prevent="$emit('closeEditPane')">
|
||||
{{ $t('action.save')}}
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
</action-buttons>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@ -82,16 +80,18 @@ import CountrySelection from './AddAddress/CountrySelection';
|
||||
import CitySelection from './AddAddress/CitySelection';
|
||||
import AddressSelection from './AddAddress/AddressSelection';
|
||||
import AddressMap from './AddAddress/AddressMap';
|
||||
import AddressMore from './AddAddress/AddressMore'
|
||||
import AddressMore from './AddAddress/AddressMore';
|
||||
import ActionButtons from './ActionButtons.vue';
|
||||
|
||||
export default {
|
||||
name: "EditAddressPane",
|
||||
name: "EditPane",
|
||||
components: {
|
||||
CountrySelection,
|
||||
CitySelection,
|
||||
AddressSelection,
|
||||
AddressMap,
|
||||
AddressMore
|
||||
AddressMore,
|
||||
ActionButtons
|
||||
},
|
||||
props: [
|
||||
'context',
|
@ -0,0 +1,86 @@
|
||||
<template>
|
||||
|
||||
<div 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="flag.success" class="alert alert-success">
|
||||
{{ $t(getSuccessText) }}
|
||||
</div>
|
||||
|
||||
<address-render-box :address="address"></address-render-box>
|
||||
|
||||
<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,
|
||||
ActionButtons
|
||||
},
|
||||
props: [
|
||||
'context',
|
||||
'options',
|
||||
'default',
|
||||
'flag',
|
||||
'entity',
|
||||
'errorMsg'
|
||||
],
|
||||
emits: ['openEditPane'],
|
||||
computed: {
|
||||
address() {
|
||||
return this.entity.address;
|
||||
},
|
||||
displayTextButton() {
|
||||
return (typeof this.options.button !== 'undefined' && typeof this.options.button.displayText !== 'undefined') ?
|
||||
this.options.button.displayText : this.default.button.displayText;
|
||||
},
|
||||
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}`;
|
||||
},
|
||||
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;
|
||||
},
|
||||
getSuccessText() {
|
||||
switch (this.context.entity.name) {
|
||||
/*
|
||||
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';
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
@ -0,0 +1,63 @@
|
||||
<template>
|
||||
|
||||
<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="flag.success" class="alert alert-success">
|
||||
{{ $t(getSuccessText) }}
|
||||
</div>
|
||||
|
||||
suggestions
|
||||
|
||||
<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')"
|
||||
class="btn btn-update">
|
||||
{{ $t('action.edit')}}
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
</action-buttons>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
|
||||
import ActionButtons from './ActionButtons.vue';
|
||||
|
||||
export default {
|
||||
name: "SuggestPane",
|
||||
components: {
|
||||
AddressRenderBox,
|
||||
ActionButtons
|
||||
},
|
||||
props: [
|
||||
'context',
|
||||
'options',
|
||||
'default',
|
||||
'flag',
|
||||
'entity',
|
||||
'errorMsg',
|
||||
'insideModal'
|
||||
],
|
||||
emits: ['openEditPane'],
|
||||
computed: {
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
@ -38,12 +38,11 @@ containers.forEach((container) => {
|
||||
create: container.dataset.modalTitle || null,
|
||||
edit: container.dataset.modalTitle || null
|
||||
},
|
||||
/// Display each step in page or Modal
|
||||
bindModal: {
|
||||
step1: container.dataset.bindModalStep1 !== 'false', //boolean, default: true
|
||||
step2: container.dataset.bindModalStep2 !== 'false' //boolean, default: true
|
||||
},
|
||||
// Use Date fields
|
||||
/// Display panes in Modal for step123
|
||||
openPanesInModal: container.dataset.openPanesInModal !== 'false', //boolean, default: true
|
||||
/// Display actions buttons of panes in a sticky-form-button navbar
|
||||
stickyActions: container.dataset.stickyActions === 'true', //boolean, default: false
|
||||
/// Use Date fields
|
||||
useDate: {
|
||||
validFrom: container.dataset.useValidFrom === 'true', //boolean, default: false
|
||||
validTo: container.dataset.useValidTo === 'true' //boolean, default: false
|
||||
@ -57,5 +56,5 @@ containers.forEach((container) => {
|
||||
.component('app', App)
|
||||
.mount(container);
|
||||
|
||||
console.log('container dataset', container.dataset);
|
||||
//console.log('container dataset', container.dataset);
|
||||
});
|
||||
|
@ -7,16 +7,17 @@
|
||||
name: string
|
||||
id: integer
|
||||
}
|
||||
* mode string ['edit*'|'create']
|
||||
* mode string ['edit*'|'new']
|
||||
* addressId integer
|
||||
* backUrl twig route: path('route', {parameters})
|
||||
* modalTitle twig translated chain
|
||||
* buttonText twig translated chain
|
||||
* buttonSize bootstrap class like 'btn-sm'
|
||||
* buttonDisplayText bool
|
||||
* bindModalStep1 bool
|
||||
* bindModalStep2 bool
|
||||
|
||||
* buttonDisplayText bool (default: true)
|
||||
* openPanesInModal bool (default: true)
|
||||
* stickyActions bool (default: false)
|
||||
* useValidFrom bool (default: false)
|
||||
* useValidTo bool (default: false)
|
||||
#}
|
||||
<div class="address-container"
|
||||
|
||||
@ -51,12 +52,12 @@
|
||||
data-button-display-text="false"
|
||||
{% endif %}
|
||||
|
||||
{% if bindModalStep1 is defined and bindModalStep1 != 1 %}
|
||||
data-bind-modal-step1="false"
|
||||
{% if openPanesInModal is defined and openPanesInModal != 1 %}
|
||||
data-open-panes-in-modal="false"
|
||||
{% endif %}
|
||||
|
||||
{% if bindModalStep2 is defined and bindModalStep2 != 1 %}
|
||||
data-bind-modal-step2="false"
|
||||
{% if stickyActions is defined and stickyActions == 1 %}
|
||||
data-sticky-actions="true"
|
||||
{% endif %}
|
||||
|
||||
{% if useValidFrom is defined and useValidFrom == 1 %}
|
||||
|
@ -88,9 +88,7 @@ export default {
|
||||
edit: 'courselocation.edit_temporary_address'
|
||||
},
|
||||
/// Display each step in page or Modal
|
||||
bindModal: {
|
||||
//step1: false, step2: false
|
||||
},
|
||||
openPanesInModal: true,
|
||||
// Use Date fields
|
||||
useDate: {
|
||||
validFrom: true
|
||||
|
@ -30,8 +30,7 @@
|
||||
{% 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 }),
|
||||
bindModalStep1: false,
|
||||
bindModalStep2: false,
|
||||
openPanesInModal: false,
|
||||
} %}
|
||||
|
||||
{% endblock %}
|
||||
|
@ -32,7 +32,7 @@
|
||||
{% 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 }),
|
||||
mode: 'create',
|
||||
mode: 'new',
|
||||
buttonSize: 'btn-lg',
|
||||
buttonText: 'Add an address',
|
||||
modalTitle: 'Add an address',
|
||||
@ -74,8 +74,7 @@
|
||||
backUrl: path('chill_person_address_list', { 'person_id': person.id }),
|
||||
mode: 'edit',
|
||||
addressId: address.id,
|
||||
bindModalStep1: false,
|
||||
bindModalStep2: false,
|
||||
openPanesInModal: false,
|
||||
} %}
|
||||
#}
|
||||
|
||||
@ -90,8 +89,7 @@
|
||||
backUrl: path('chill_person_address_list', { 'person_id': person.id }),
|
||||
mode: 'edit',
|
||||
addressId: address.id,
|
||||
bindModalStep1: false,
|
||||
bindModalStep2: false,
|
||||
openPanesInModal: false,
|
||||
} %}
|
||||
#}
|
||||
|
||||
|
@ -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 }),
|
||||
bindModalStep1: false,
|
||||
bindModalStep2: false,
|
||||
useValidFrom: true,
|
||||
useValidTo: false
|
||||
openPanesInModal: false,
|
||||
stickyActions: true,
|
||||
} %}
|
||||
{#
|
||||
#}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
|
@ -10,8 +10,8 @@
|
||||
{% 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 }),
|
||||
bindModalStep1: false,
|
||||
bindModalStep2: false,
|
||||
openPanesInModal: false,
|
||||
stickyActions: true
|
||||
} %}
|
||||
</div>
|
||||
|
||||
|
@ -10,8 +10,7 @@
|
||||
{% 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 }),
|
||||
bindModalStep1: false,
|
||||
bindModalStep2: false,
|
||||
openPanesInModal: false,
|
||||
} %}
|
||||
</div>
|
||||
|
||||
|
@ -18,7 +18,7 @@
|
||||
{% 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 }),
|
||||
mode: 'create',
|
||||
mode: 'new',
|
||||
buttonSize: 'btn-lg',
|
||||
buttonText: 'Move household',
|
||||
modalTitle: 'Move household',
|
||||
|
@ -33,15 +33,14 @@
|
||||
{% 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 }),
|
||||
mode: 'create',
|
||||
mode: 'new',
|
||||
buttonSize: 'btn-sm',
|
||||
buttonText: 'Move household',
|
||||
modalTitle: 'Move household',
|
||||
buttonDisplayText: false,
|
||||
} %}
|
||||
{#
|
||||
bindModalStep1: false,
|
||||
bindModalStep2: true,
|
||||
openPanesInModal: false
|
||||
#}
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
|
Loading…
x
Reference in New Issue
Block a user