mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
twig pass arguments to vue_address with dataset attributes
This commit is contained in:
parent
17a3f45247
commit
a5ceb551eb
@ -2,21 +2,13 @@
|
||||
<add-address
|
||||
v-bind:key="context.entity.type"
|
||||
v-bind:context="context"
|
||||
v-bind:options="addAddress.options"
|
||||
v-bind:result="addAddress.result"
|
||||
v-bind:options="options"
|
||||
v-bind:addressChanged="submitAddress"
|
||||
ref="addAddress">
|
||||
</add-address>
|
||||
</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';
|
||||
import { patchAddress } from "./api";
|
||||
import { postAddressToHousehold, postAddressToPerson } from "ChillPersonAssets/vuejs/_api/AddAddress";
|
||||
@ -26,49 +18,19 @@ export default {
|
||||
components: {
|
||||
AddAddress
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
context: {
|
||||
edit: window.mode === 'edit',
|
||||
entity: {
|
||||
type: window.entityType,
|
||||
id: window.entityId
|
||||
},
|
||||
addressId: window.addressId | null,
|
||||
backUrl: window.backUrl,
|
||||
valid: {
|
||||
from: new Date()
|
||||
},
|
||||
},
|
||||
addAddress: {
|
||||
options: {
|
||||
|
||||
/// Options override default.
|
||||
/// null value take default component value defined in AddAddress data()
|
||||
button: {
|
||||
text: {
|
||||
create: window.buttonText || null,
|
||||
edit: window.buttonText || null
|
||||
},
|
||||
size: window.buttonSize || null,
|
||||
displayText: window.buttonDisplayText //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, //boolean, default: true
|
||||
step2: window.binModalStep2 //boolean, default: true
|
||||
}
|
||||
}
|
||||
}
|
||||
props: ['addAddress'],
|
||||
computed: {
|
||||
context() {
|
||||
return this.addAddress.context;
|
||||
},
|
||||
options() {
|
||||
return this.addAddress.options;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('AddAddress: data context', this.context);
|
||||
console.log('AddAddress: data options', this.options);
|
||||
},
|
||||
methods: {
|
||||
displayErrors() {
|
||||
return this.$refs.addAddress.errorMsg;
|
||||
|
||||
@ -1,13 +1,61 @@
|
||||
import { createApp } from 'vue';
|
||||
import App from './App.vue';
|
||||
import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
|
||||
import { addressMessages } from './i18n';
|
||||
import App from './App.vue';
|
||||
|
||||
const i18n = _createI18n( addressMessages );
|
||||
|
||||
const app = createApp({
|
||||
template: `<app></app>`,
|
||||
})
|
||||
.use(i18n)
|
||||
.component('app', App)
|
||||
.mount('#address');
|
||||
let containers = document.querySelectorAll('.address-container');
|
||||
containers.forEach((container) => {
|
||||
const app = createApp({
|
||||
template: `<app v-bind:addAddress="this.addAddress" ></app>`,
|
||||
data() {
|
||||
return {
|
||||
addAddress: {
|
||||
context: {
|
||||
edit: container.dataset.mode === 'edit',
|
||||
entity: {
|
||||
type: container.dataset.targetEntityName,
|
||||
id: container.dataset.targetEntityId
|
||||
},
|
||||
addressId: container.dataset.addressId | null,
|
||||
backUrl: container.dataset.backUrl,
|
||||
valid: {
|
||||
from: new Date()
|
||||
},
|
||||
},
|
||||
options: {
|
||||
|
||||
/// Options override default.
|
||||
/// null value take default component value defined in AddAddress data()
|
||||
button: {
|
||||
text: {
|
||||
create: container.dataset.buttonText || null,
|
||||
edit: container.dataset.buttonText || null
|
||||
},
|
||||
size: container.dataset.buttonSize || null,
|
||||
displayText: container.dataset.buttonDisplayText //boolean, default: true
|
||||
},
|
||||
|
||||
/// Modal title text if create or edit address (trans chain, see i18n)
|
||||
title: {
|
||||
create: container.dataset.modalTitle || null,
|
||||
edit: container.dataset.modalTitle || null
|
||||
},
|
||||
|
||||
/// Display each step in page or Modal
|
||||
bindModal: {
|
||||
step1: container.dataset.bindModalStep1, //boolean, default: true
|
||||
step2: container.dataset.bindModalStep2 //boolean, default: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
.use(i18n)
|
||||
.component('app', App)
|
||||
.mount(container);
|
||||
|
||||
console.log('container dataset', container.dataset);
|
||||
});
|
||||
|
||||
@ -14,54 +14,51 @@
|
||||
* buttonText twig translated chain
|
||||
* buttonSize bootstrap class like 'btn-sm'
|
||||
* buttonDisplayText bool
|
||||
* binModalStep1 bool
|
||||
* binModalStep2 bool
|
||||
* bindModalStep1 bool
|
||||
* bindModalStep2 bool
|
||||
|
||||
#}
|
||||
<div id="address"></div>
|
||||
<div class="address-container"
|
||||
|
||||
<script type="text/javascript">
|
||||
window.vueRootComponent = 'app';
|
||||
|
||||
window.entityType = '{{ targetEntity.name|e('js') }}';
|
||||
window.entityId = '{{ targetEntity.id|e('js') }}';
|
||||
data-target-entity-name="{{ targetEntity.name|e('html_attr') }}"
|
||||
data-target-entity-id="{{ targetEntity.id|e('html_attr') }}"
|
||||
|
||||
{% if 'edit' in app.request.get('_route') %}
|
||||
window.mode = 'edit';
|
||||
window.addressId = {{ app.request.get('address_id')|e('js') }};
|
||||
data-mode="edit"
|
||||
data-address-id="{{ app.request.get('address_id')|e('html_attr') }}"
|
||||
{% elseif mode is defined and mode == 'edit' %}
|
||||
window.mode = 'edit';
|
||||
window.addressId = {{ addressId|e('js') }};
|
||||
data-mode="edit"
|
||||
data-address-id="{{ addressId|e('html_attr') }}"
|
||||
{% endif %}
|
||||
|
||||
{% if backUrl is defined %}
|
||||
window.backUrl = '{{ backUrl|e('js') }}';
|
||||
data-back-url="{{ backUrl|e('html_attr') }}"
|
||||
{% endif %}
|
||||
|
||||
{% if modalTitle is defined %}
|
||||
window.modalTitle = '{{ modalTitle|trans|e('js') }}';
|
||||
data-modal-title="{{ modalTitle|trans|e('html_attr') }}"
|
||||
{% endif %}
|
||||
|
||||
{% if buttonText is defined %}
|
||||
window.buttonText = '{{ buttonText|trans|e('js') }}';
|
||||
data-button-text="{{ buttonText|trans|e('html_attr') }}"
|
||||
{% endif %}
|
||||
|
||||
{% if buttonSize is defined %}
|
||||
window.buttonSize = '{{ buttonSize|e('js') }}';
|
||||
data-button-size="{{ buttonSize|e('html_attr') }}"
|
||||
{% endif %}
|
||||
|
||||
{% if buttonDisplayText is defined and buttonDisplayText == false %}
|
||||
window.buttonDisplayText = false;
|
||||
data-button-display-text=false
|
||||
{% endif %}
|
||||
|
||||
{% if binModalStep1 is defined and binModalStep1 == false %}
|
||||
window.binModalStep1 = false;
|
||||
{% if bindModalStep1 is defined and bindModalStep1 == false %}
|
||||
data-bind-modal-step1=false
|
||||
{% endif %}
|
||||
|
||||
{% if binModalStep2 is defined and binModalStep2 == false %}
|
||||
window.binModalStep2 = false;
|
||||
{% if bindModalStep2 is defined and bindModalStep2 == false %}
|
||||
data-bind-modal-step2=false
|
||||
{% endif %}
|
||||
</script>
|
||||
></div>
|
||||
|
||||
{{ encore_entry_script_tags('vue_address') }}
|
||||
{{ encore_entry_link_tags('vue_address') }}
|
||||
|
||||
@ -30,8 +30,8 @@
|
||||
{% 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 }),
|
||||
binModalStep1: false,
|
||||
binModalStep2: false,
|
||||
bindModalStep1: false,
|
||||
bindModalStep2: false,
|
||||
} %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
@ -74,8 +74,8 @@
|
||||
backUrl: path('chill_person_address_list', { 'person_id': person.id }),
|
||||
mode: 'edit',
|
||||
addressId: address.id,
|
||||
binModalStep1: false,
|
||||
binModalStep2: false,
|
||||
bindModalStep1: false,
|
||||
bindModalStep2: false,
|
||||
} %}
|
||||
#}
|
||||
|
||||
@ -90,8 +90,8 @@
|
||||
backUrl: path('chill_person_address_list', { 'person_id': person.id }),
|
||||
mode: 'edit',
|
||||
addressId: address.id,
|
||||
binModalStep1: false,
|
||||
binModalStep2: false,
|
||||
bindModalStep1: false,
|
||||
bindModalStep2: false,
|
||||
} %}
|
||||
#}
|
||||
|
||||
|
||||
@ -30,8 +30,8 @@
|
||||
{% 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 }),
|
||||
binModalStep1: false,
|
||||
binModalStep2: false,
|
||||
bindModalStep1: false,
|
||||
bindModalStep2: false,
|
||||
} %}
|
||||
|
||||
{% 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 })
|
||||
binModalStep1: false,
|
||||
binModalStep2: false,
|
||||
bindModalStep1: false,
|
||||
bindModalStep2: false,
|
||||
} %}
|
||||
</div>
|
||||
|
||||
|
||||
@ -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 })
|
||||
binModalStep1: false,
|
||||
binModalStep2: false,
|
||||
bindModalStep1: false,
|
||||
bindModalStep2: false,
|
||||
} %}
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user