poc form SDK (change dependencies implementation)

This commit is contained in:
Benjamin Dalsass
2023-09-06 15:12:51 +02:00
parent 20a663d631
commit d63b3d7265
8 changed files with 148 additions and 67 deletions

View File

@@ -1,7 +1,7 @@
/**
* Application handling.
*
* @returns {{init: init}}
* @returns {{init: init, handleTooltips: handleTooltips}}
* @constructor
*/
const App = function(){
@@ -12,24 +12,32 @@ const App = function(){
};
/**
* init.
* initialization.
*
*/
function init(){
// dark theme button
$(aSelectors.darkModeButton).on('click', function(){
$('body').attr('data-bs-theme', this.ariaPressed === 'true' ? 'dark' : 'light');
});
// dark theme button state
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
$('body').attr('data-bs-theme', 'dark');
$(aSelectors.darkModeButton).attr('aria-pressed', 'true');
$(aSelectors.darkModeButton).toggleClass('active', true);
}
// handle tooltips
handleTooltips(document);
}
/**
* Bootstrap tooltip initialization.
*
* @param oElement
*/
function handleTooltips(oElement){
const tooltips = oElement.querySelectorAll("[data-bs-toggle='tooltip']");
tooltips.forEach((el) => {

View File

@@ -9,17 +9,23 @@
*/
const Collection = function(oForm, objectFormUrl, objectSaveUrl){
// dom selectors
const aSelectors = {
addItem: '.add_item_link',
createItem: '.create_item_link',
removeItem: '.btn-remove-link',
linkSetContainer: '.link_set_widget_container',
};
/**
* Listen for add item buttons.
*
* @param oContainer
*/
function listenAddItem (oContainer) {
oContainer.querySelectorAll('.add_item_link').forEach(btn => {
btn.addEventListener("click", addFormToCollection)
oContainer.querySelectorAll(aSelectors.addItem).forEach(btn => {
btn.addEventListener('click', addFormToCollection)
});
}
/**
@@ -28,11 +34,9 @@ const Collection = function(oForm, objectFormUrl, objectSaveUrl){
* @param oContainer
*/
function listenCreateItem (oContainer) {
oContainer.querySelectorAll('.create_item_link').forEach(btn => {
btn.addEventListener("click", createObject)
oContainer.querySelectorAll(aSelectors.createItem).forEach(btn => {
btn.addEventListener('click', createObject)
});
}
/**
@@ -41,20 +45,9 @@ const Collection = function(oForm, objectFormUrl, objectSaveUrl){
* @param oContainer
*/
function listenRemoveItem(oContainer){
oContainer.querySelectorAll('.btn-remove-link').forEach(btn => {
btn.addEventListener("click", (e) => {
const oContainer = e.currentTarget.closest('.link_set_widget_container');
btn.closest('tr').remove()
if(oContainer.querySelectorAll('tbody tr').length === 1) {
oContainer.querySelector('.no_data').style.display = 'table-row';
}
})
oContainer.querySelectorAll(aSelectors.removeItem).forEach(btn => {
btn.addEventListener('click', removeItem);
});
}
/**
@@ -67,7 +60,7 @@ const Collection = function(oForm, objectFormUrl, objectSaveUrl){
// retrieve link set container
const oContainer = e.currentTarget.closest('.link_set_widget_container');
// retrieve collection holder
// retrieve collection holder (replace ':' character otherwise the selector is invalid)
const exp = e.currentTarget.dataset.collectionHolderClass.replaceAll(/:/g, '\\:');
const collectionHolder = oContainer.querySelector('.' + exp);
@@ -145,12 +138,33 @@ const Collection = function(oForm, objectFormUrl, objectSaveUrl){
handleElement(formEl);
oApp.handleTooltips(formEl);
});
listenSaveModalObject(myModalAlternative);
})
.catch(function (error) {
console.error(error);
});
}
/**
* Remove an item.
*
* @param e
*/
function removeItem(e)
{
// retrieve link set container
const oContainer = e.currentTarget.closest(aSelectors.linkSetContainer);
// remove row
e.currentTarget.closest('tr').remove();
// handle no data row visibility
if(oContainer.querySelectorAll('tbody tr').length === 1) {
oContainer.querySelector('.no_data').style.display = 'table-row';
}
}
/**
* Handle collection on the provided container element.
*
@@ -163,8 +177,11 @@ const Collection = function(oForm, objectFormUrl, objectSaveUrl){
listenRemoveItem(oContainer);
}
function listenSaveModalobject(){
/**
*
*/
function listenSaveModalObject(myModalAlternative)
{
const oSave = document.querySelector('[data-action="save_modal_object"]');
oSave.addEventListener('click', function(e){
@@ -194,25 +211,29 @@ const Collection = function(oForm, objectFormUrl, objectSaveUrl){
.then((response) => response.json())
.then((data) => {
let form = $(data.template);
if(data.succeeded){
console.log(form);
//
// console.log(oForm.dataset.attCode);
//
// const fragment = oToolkit.createElementFromHtml(data.template);
// const inner = fragment.querySelector('form').innerHTML;
// const el = oToolkit.createElementFromHtml(inner);
// console.log(el);
//
const myModalAlternative = new bootstrap.Modal('#object_modal', {
hide: true
});
let form = $(data.template);
console.log(form);
//
// console.log(oForm.dataset.attCode);
//
// const fragment = oToolkit.createElementFromHtml(data.template);
// const inner = fragment.querySelector('form').innerHTML;
// const el = oToolkit.createElementFromHtml(inner);
// console.log(el);
//
myModalAlternative.hide();
console.log($(`[data-att-code="${oForm.dataset.attCode}"] tbody`));
console.log($(`[data-att-code="${oForm.dataset.attCode}"] tbody`));
$(`[data-att-code="${oForm.dataset.attCode}"] tbody`).append($(form.innerHTML));
$(`[data-att-code="${oForm.dataset.attCode}"] tbody`).append($(form.innerHTML));
}
else{
console.error('Error while saving object');
}
})
.catch(function (error) {
@@ -222,7 +243,6 @@ const Collection = function(oForm, objectFormUrl, objectSaveUrl){
});
}
listenSaveModalobject();
return {
handleElement

View File

@@ -193,7 +193,13 @@ const Form = function(oWidget, oDynamic){
for(let sContainerId in aMapDependencies) {
// retrieve object container
const oObjectContainer = document.querySelector(`[data-container-id="${sContainerId}"]`);
let oObjectContainer = null;
if(oElement.dataset !== undefined && oElement.dataset.containerId === sContainerId){
oObjectContainer = oElement;
}
else{
oObjectContainer = oElement.querySelector(`[data-container-id="${sContainerId}"]`);
}
const aMapContainer = aMapDependencies[sContainerId];

View File

@@ -22,8 +22,8 @@ const Widget = function(){
// initialize widget
const sWidgetName = widgetField.dataset.widget;
const oWidget = eval(`$(widgetField).${sWidgetName}()`);
console.log('Init widget: ' + sWidgetName);
console.log(oWidget);
console.debug('Init widget: ' + sWidgetName);
console.debug(oWidget);
});
}