From 0248ac02a9aa7196ce4dd67e038f1e0cd5b5433a Mon Sep 17 00:00:00 2001 From: Benjamin Dalsass Date: Wed, 6 Sep 2023 11:13:42 +0200 Subject: [PATCH] poc form SDK (change dependencies implementation) --- css/DI/app.css | 3 + js/DI/app.js | 5 ++ js/DI/collection.js | 12 ++-- js/DI/form.js | 49 ++++++++----- sources/DI/Controller/ObjectController.php | 5 +- sources/DI/Form/Builder/AttributeBuilder.php | 4 ++ sources/DI/Form/Type/Compound/ObjectType.php | 5 +- templates/DI/base.html.twig | 75 ++------------------ templates/DI/configuration/edit.html.twig | 3 - templates/DI/form/classic_theme.html.twig | 16 +++-- templates/DI/navbar.html.twig | 57 +++++++++++++++ templates/DI/object/edit.html.twig | 72 +++++++++++++++---- templates/DI/object/view.html.twig | 32 +++++++-- 13 files changed, 212 insertions(+), 126 deletions(-) create mode 100644 templates/DI/navbar.html.twig diff --git a/css/DI/app.css b/css/DI/app.css index ab84f87f5..b64f85186 100644 --- a/css/DI/app.css +++ b/css/DI/app.css @@ -50,6 +50,9 @@ label.locked:after{ color: #ffcc00; font-size: .7rem; } +label.dependent{ + color: #2757af; +} form{ /*background-color: #f8f8f8;*/ border-radius: 10px; diff --git a/js/DI/app.js b/js/DI/app.js index dcba71d68..9b6fab20d 100644 --- a/js/DI/app.js +++ b/js/DI/app.js @@ -27,6 +27,11 @@ const App = function(){ $(aSelectors.darkModeButton).toggleClass('active', true); } + const tooltips = document.querySelectorAll("[data-bs-toggle='tooltip']"); + tooltips.forEach((el) => { + new bootstrap.Tooltip(el); + }); + } return { diff --git a/js/DI/collection.js b/js/DI/collection.js index 94a5fd53a..4f54ba1ce 100644 --- a/js/DI/collection.js +++ b/js/DI/collection.js @@ -64,8 +64,6 @@ const Collection = function(oForm, objectFormUrl, objectSaveUrl){ */ function addFormToCollection(e){ - alert('addFormToCollection'); - // retrieve link set container const oContainer = e.currentTarget.closest('.link_set_widget_container'); @@ -113,7 +111,7 @@ const Collection = function(oForm, objectFormUrl, objectSaveUrl){ const cont = e.currentTarget.closest('.link_set_widget_container'); // open modal - const myModalAlternative = new bootstrap.Modal('#object_modal', []); + const myModalAlternative = new bootstrap.Modal('#object_modal', {}); myModalAlternative.show(); // compute object form url @@ -159,8 +157,6 @@ const Collection = function(oForm, objectFormUrl, objectSaveUrl){ */ function handleElement(oContainer) { - console.log('collection handleElement ' + oContainer); - listenAddItem(oContainer); listenCreateItem(oContainer); listenRemoveItem(oContainer); @@ -208,8 +204,10 @@ const Collection = function(oForm, objectFormUrl, objectSaveUrl){ // const el = oToolkit.createElementFromHtml(inner); // console.log(el); // - // const myModalAlternative = new bootstrap.Modal('#object_modal', []); - // myModalAlternative.hide(); + const myModalAlternative = new bootstrap.Modal('#object_modal', { + hide: true + }); + console.log($(`[data-att-code="${oForm.dataset.attCode}"] tbody`)); diff --git a/js/DI/form.js b/js/DI/form.js index 6f9867999..842811d0c 100644 --- a/js/DI/form.js +++ b/js/DI/form.js @@ -54,12 +54,12 @@ const Form = function(oWidget, oDynamic){ * updateField. * * @param oEvent - * @param oForm + * @param oObjectContainer * @param oElement * @param aDependentAttCodes * @returns {Promise} */ - async function updateField(oEvent, oForm, oElement, aDependentAttCodes){ + async function updateField(oEvent, oObjectContainer, oElement, aDependentAttCodes){ const aDependenciesAttCodes = []; @@ -119,7 +119,7 @@ const Form = function(oWidget, oDynamic){ // update fom - const sReloadResponse = await updateForm(sRequestBody, oForm.dataset.reloadUrl, oForm.getAttribute('method')); + const sReloadResponse = await updateForm(sRequestBody, oObjectContainer.dataset.reloadUrl, 'POST'); const oReloadedElement = oToolkit.parseTextToHtml(sReloadResponse); @@ -152,9 +152,6 @@ const Form = function(oWidget, oDynamic){ */ function initDependencies(oElement){ - // retrieve parent form - const oForm = oElement.closest('form'); - // compute dependencies map let aMapDependencies = {}; @@ -164,6 +161,9 @@ const Form = function(oWidget, oDynamic){ // iterate throw dependent fields... aDependentsFields.forEach(function (oDependentField) { + // retrieve object container + const oObjectContainer = oDependentField.closest('[data-block="object_container"]'); + // retrieve dependency data const sDependsOn = oDependentField.dataset.dependsOn; @@ -173,27 +173,44 @@ const Form = function(oWidget, oDynamic){ // iterate throw the dependencies... aDependsEls.forEach(function(sEl){ - // add dependency att code to map - if(!(sEl in aMapDependencies)){ - aMapDependencies[sEl] = []; + const sId = oObjectContainer.dataset.containerId; + + if(!(sId in aMapDependencies)) { + aMapDependencies[sId] = []; } - aMapDependencies[sEl].push(oDependentField.dataset.attCode); + + // add dependency att code to map + if(!(sEl in aMapDependencies[sId])){ + aMapDependencies[sId][sEl] = []; + } + aMapDependencies[sId][sEl].push(oDependentField.dataset.attCode); }); }); // iterate throw dependencies map... - for(let sAttCode in aMapDependencies){ + for(let sContainerId in aMapDependencies) { - // retrieve corresponding field - const oDependsOnElement = oElement.querySelector(String.format(aSelectors.dataAttCode, sAttCode)); + // retrieve object container + const oObjectContainer = document.querySelector(`[data-container-id="${sContainerId}"]`); - // listen changes - if(oDependsOnElement !== null){ - oDependsOnElement.addEventListener('change', (event) => updateField(event, oForm, oElement, aMapDependencies[sAttCode])); + const aMapContainer = aMapDependencies[sContainerId]; + + // iterate throw dependencies map... + for (let sAttCode in aMapContainer) { + + // retrieve corresponding field + const oDependsOnElement = oObjectContainer.querySelector(String.format(aSelectors.dataAttCode, sAttCode)); + + // listen changes + if (oDependsOnElement !== null) { + oDependsOnElement.addEventListener('change', (event) => updateField(event, oObjectContainer, oElement, aMapContainer[sAttCode])); + } } + } + } /** diff --git a/sources/DI/Controller/ObjectController.php b/sources/DI/Controller/ObjectController.php index 0b1d3485e..c9217cedf 100644 --- a/sources/DI/Controller/ObjectController.php +++ b/sources/DI/Controller/ObjectController.php @@ -81,10 +81,7 @@ class ObjectController extends AbstractController // create object form $oForm = $this->createForm(ObjectType::class, $oObject, [ - 'object_class' => $class, - 'attr' => [ - 'data-reload-url' => $this->generateUrl('object_reload', ['class' => $class, "id" => $id]) - ] + 'object_class' => $class ]); // handle HTTP request diff --git a/sources/DI/Form/Builder/AttributeBuilder.php b/sources/DI/Form/Builder/AttributeBuilder.php index cc0d81864..f80d2d915 100644 --- a/sources/DI/Form/Builder/AttributeBuilder.php +++ b/sources/DI/Form/Builder/AttributeBuilder.php @@ -94,6 +94,10 @@ class AttributeBuilder if(count($oAttributeDefinition->GetPrerequisiteAttributes()) > 0){ $dependencies = implode(' ', $oAttributeDefinition->GetPrerequisiteAttributes()); $aFormType['options']['attr']['data-depends-on'] = $dependencies; + $aFormType['options']['label_attr']['data-bs-toggle'] = 'tooltip'; + $aFormType['options']['label_attr']['data-bs-title'] = 'Depends on ' . $dependencies; + $aFormType['options']['label_attr']['data-bs-html'] = 'true'; + $aFormType['options']['label_attr']['class'] .= ' dependent'; $aFormType['depends_on'] = $dependencies; } diff --git a/sources/DI/Form/Type/Compound/ObjectType.php b/sources/DI/Form/Type/Compound/ObjectType.php index 5ddf28803..447b6b8e4 100644 --- a/sources/DI/Form/Type/Compound/ObjectType.php +++ b/sources/DI/Form/Type/Compound/ObjectType.php @@ -3,8 +3,6 @@ namespace Combodo\iTop\DI\Form\Type\Compound; use cmdbAbstractObject; -use Combodo\iTop\DI\Form\Builder\AttributeBuilder; -use Combodo\iTop\DI\Form\Builder\LayoutBuilder; use Combodo\iTop\DI\Form\Listener\ObjectFormListener; use Combodo\iTop\DI\Services\ObjectPresentationService; use Symfony\Component\Form\AbstractType; @@ -32,8 +30,6 @@ class ObjectType extends AbstractType * * @param ObjectFormListener $oObjectFormModifier * @param ObjectPresentationService $objectPresentationService - * @param \Combodo\iTop\DI\Form\Builder\AttributeBuilder $oAttributeBuilder - * @param \Combodo\iTop\DI\Form\Builder\LayoutBuilder $oLayoutBuilder */ public function __construct(ObjectFormListener $oObjectFormModifier, ObjectPresentationService $objectPresentationService) { @@ -80,6 +76,7 @@ class ObjectType extends AbstractType parent::buildView($view, $form, $options); $view->vars['z_list'] = $options['z_list']; + $view->vars['object_class'] = $options['object_class']; } } diff --git a/templates/DI/base.html.twig b/templates/DI/base.html.twig index 5a581eb33..b68231b2f 100644 --- a/templates/DI/base.html.twig +++ b/templates/DI/base.html.twig @@ -32,58 +32,12 @@ - - + {# navbar #} + {% include 'DI/navbar.html.twig' %} {# - BLOCK BODY - #}
{% block body %}{% endblock %} -
{# - BLOCK TOASTS - #} @@ -91,29 +45,10 @@ {% block toasts %}{% endblock %} - - - - -
- - -
+ {# - BLOCK MODALS - #} + {% block modals %}{% endblock %} + {# scripts #}