bugfixes in display of dynamicPicker

This commit is contained in:
Julie Lenaerts 2022-01-25 16:06:27 +01:00
parent 9056ea8449
commit bf7fcfa41a
4 changed files with 50 additions and 11 deletions

View File

@ -39,7 +39,7 @@ var ShowHide = function(options) {
contents.push(el); contents.push(el);
} }
container_content.push(contents); container_content.push(contents);
console.log('container content', container_content); // console.log('container content', container_content);
} }
// attach the listener on each input // attach the listener on each input

View File

@ -5,18 +5,22 @@ import { appMessages } from 'ChillMainAssets/vuejs/PickEntity/i18n';
const i18n = _createI18n(appMessages); const i18n = _createI18n(appMessages);
window.addEventListener('DOMContentLoaded', function(e) { let appsOnPage = new Map();
let apps = document.querySelectorAll('[data-module="pick-dynamic"]');
function loadDynamicPicker(element) {
let apps = element.querySelectorAll('[data-module="pick-dynamic"]');
apps.forEach(function(el) { apps.forEach(function(el) {
const const
isMultiple = parseInt(el.dataset.multiple) === 1, isMultiple = parseInt(el.dataset.multiple) === 1,
input = document.querySelector('[data-input-uniqid="'+ el.dataset.uniqid +'"]'), uniqId = el.dataset.uniqid,
picked = isMultiple ? JSON.parse(input.value) : [JSON.parse(input.value)]; input = element.querySelector('[data-input-uniqid="'+ el.dataset.uniqid +'"]'),
picked = (isMultiple) ? (JSON.parse(input.value)) : ((input.value === '[]') ? (null) : ([JSON.parse(input.value)]));
createApp({ const app = createApp({
template: '<pick-entity ' + template: '<pick-entity ' +
':multiple="multiple" ' + ':multiple="multiple" ' +
':types="types" ' + ':types="types" ' +
@ -65,5 +69,36 @@ window.addEventListener('DOMContentLoaded', function(e) {
}) })
.use(i18n) .use(i18n)
.mount(el); .mount(el);
appsOnPage.set(uniqId, app);
}); });
}); }
// document.addEventListener('show-hide-show', function(e) {
// console.log('creation event caught')
// loadDynamicPicker(e.detail.container)
// })
// document.addEventListener('show-hide-hide', function(e) {
// console.log('hiding event caught')
// e.detail.container.querySelectorAll('[data-module="pick-dynamic"]').forEach((el) => {
// let uniqId = el.dataset.uniqid;
// console.log(uniqId);
// if (appsOnPage.has(uniqId)) {
// appsOnPage.get(uniqId).unmount();
// console.log('App has been unmounted')
// appsOnPage.delete(uniqId);
// }
// })
// })
document.addEventListener('DOMContentLoaded', function(e) {
console.log('loaded event', e)
loadDynamicPicker(document)
})

View File

@ -1,5 +1,5 @@
<template> <template>
<ul class="list-suggest remove-items"> <ul class="list-suggest remove-items" v-if="picked.length">
<li v-for="p in picked" @click="removeEntity(p)" :key="p.type+p.id"> <li v-for="p in picked" @click="removeEntity(p)" :key="p.type+p.id">
<span class="chill_denomination">{{ p.text }}</span> <span class="chill_denomination">{{ p.text }}</span>
</li> </li>
@ -79,11 +79,15 @@ export default {
); );
this.$refs.addPersons.resetSearch(); // to cast child method this.$refs.addPersons.resetSearch(); // to cast child method
modal.showModal = false; modal.showModal = false;
console.log(this.picked)
}, },
removeEntity(entity) { removeEntity(entity) {
console.log('remove entity', entity); console.log('remove entity', entity);
this.$emit('removeEntity', entity); this.$emit('removeEntity', entity);
} }
}, },
mounted() {
console.log(this.picked);
}
} }
</script> </script>

View File

@ -12,7 +12,7 @@ window.addEventListener('DOMContentLoaded', function() {
} }
new ShowHide({ new ShowHide({
debug: true, debug: false,
load_event: null, load_event: null,
froms: [entitySelector], froms: [entitySelector],
container: [personContainer], container: [personContainer],
@ -26,7 +26,7 @@ window.addEventListener('DOMContentLoaded', function() {
}) })
new ShowHide({ new ShowHide({
debug: true, debug: false,
load_event: null, load_event: null,
froms: [entitySelector], froms: [entitySelector],
container: [thirdpartyContainer], container: [thirdpartyContainer],
@ -40,7 +40,7 @@ window.addEventListener('DOMContentLoaded', function() {
}) })
new ShowHide({ new ShowHide({
debug: true, debug: false,
load_event: null, load_event: null,
froms: [entitySelector], froms: [entitySelector],
container: [freetextContainer], container: [freetextContainer],