mod input address: add an event listener to add this component for collections

This commit is contained in:
nobohan 2021-10-26 14:12:53 +02:00
parent f6806f7743
commit 816855e6f8

View File

@ -5,82 +5,89 @@ import App from './App.vue';
const i18n = _createI18n(addressMessages); const i18n = _createI18n(addressMessages);
let inputs = document.querySelectorAll('input[type="hidden"][data-input-address]'); const addAddressInput = (inputs) => {
const isNumeric = function(v) { return !isNaN(v); }; inputs.forEach(el => {
let
addressId = el.value,
uniqid = el.dataset.inputAddress,
container = document.querySelector('div[data-input-address-container="' + uniqid + '"]'),
isEdit = addressId !== '',
addressIdInt = addressId !== '' ? parseInt(addressId) : null
;
inputs.forEach(el => { if (container === null) {
let throw Error("no container");
addressId = el.value, }
uniqid = el.dataset.inputAddress, console.log('useValidFrom', el.dataset.useValidFrom === '1');
container = document.querySelector('div[data-input-address-container="' + uniqid + '"]'),
isEdit = addressId !== '',
addressIdInt = addressId !== '' ? parseInt(addressId) : null
;
if (container === null) { const app = createApp({
throw Error("no container"); template: `<app v-bind:addAddress="this.addAddress" @address-created="associateToInput"></app>`,
} data() {
console.log('useValidFrom', el.dataset.useValidFrom === '1'); return {
addAddress: {
const app = createApp({ context: {
template: `<app v-bind:addAddress="this.addAddress" @address-created="associateToInput"></app>`, // for legacy ? can be remove ?
data() { target: {
return { name: 'input-address',
addAddress: { id: addressIdInt,
context: {
// for legacy ? can be remove ?
target: {
name: 'input-address',
id: addressIdInt,
},
edit: isEdit,
addressId: addressIdInt,
},
options: {
/// Options override default.
/// null value take default component value defined in AddAddress data()
button: {
text: {
create: el.dataset.buttonTextCreate || null,
edit: el.dataset.buttonTextUpdate || null,
}, },
size: null, edit: isEdit,
displayText: true addressId: addressIdInt,
}, },
options: {
/// Options override default.
/// null value take default component value defined in AddAddress data()
button: {
text: {
create: el.dataset.buttonTextCreate || null,
edit: el.dataset.buttonTextUpdate || null,
},
size: null,
displayText: true
},
/// Modal title text if create or edit address (trans chain, see i18n) /// Modal title text if create or edit address (trans chain, see i18n)
title: { title: {
create: null, create: null,
edit: null, edit: null,
}, },
/// Display panes in Modal for step123 /// Display panes in Modal for step123
openPanesInModal: true, openPanesInModal: true,
/// Display actions buttons of panes in a sticky-form-button navbar /// Display actions buttons of panes in a sticky-form-button navbar
stickyActions: false, stickyActions: false,
showMessageWhenNoAddress: true, showMessageWhenNoAddress: true,
/// Use Date fields /// Use Date fields
useDate: { useDate: {
validFrom: el.dataset.useValidFrom === '1' || false, //boolean, default: false validFrom: el.dataset.useValidFrom === '1' || false, //boolean, default: false
validTo: el.dataset.useValidTo === '1' || false, //boolean, default: false validTo: el.dataset.useValidTo === '1' || false, //boolean, default: false
}, },
/// Don't display show renderbox Address: showPane display only a button /// Don't display show renderbox Address: showPane display only a button
onlyButton: false, onlyButton: false,
}
} }
} }
},
methods: {
associateToInput(payload) {
el.value = payload.addressId;
}
} }
}, })
methods: { .use(i18n)
associateToInput(payload) { .component('app', App)
el.value = payload.addressId; .mount(container);
} });
} };
})
.use(i18n) document.addEventListener('DOMContentLoaded', (_e) =>
.component('app', App) addAddressInput(document.querySelectorAll('input[type="hidden"][data-input-address]'))
.mount(container); );
});
window.addEventListener('collection-add-entry', (_e) =>
addAddressInput(document.querySelectorAll('input[type="hidden"][data-input-address]'))
);