mirror of
https://github.com/Combodo/iTop.git
synced 2026-04-27 04:28:44 +02:00
poc form SDK (change dependencies implementation)
This commit is contained in:
12
js/DI/app.js
12
js/DI/app.js
@@ -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) => {
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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];
|
||||
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user