Todo: toggle visibility of displayOnDashboard in form when selecting …

…module from list

src/Controller/Utils/Utils.php

@@ -159,6 +159,18 @@ public static function formClassToFormPrefix(string $class){
         return StringUtil::fqcnToBlockPrefix($class) ?: '';
     }
 
+    /**
+     * Will return the string formatted in the way that symfony does it for fields
+     *
+     * @param string $data_class - the class used in `configureOptions` method of Form
+     * @param string $field_name
+     * @return string
+     */
+    public static function fieldIdForSymfonyForm(string $data_class, string $field_name): string
+    {
+        return self::formClassToFormPrefix($data_class) . '_' . $field_name;
+    }
+
     /**
      * @return string
      */

src/Form/Modules/Todo/MyTodoType.php

@@ -4,6 +4,8 @@
 
 use App\Controller\Core\Application;
 use App\Controller\Core\Controllers;
+use App\Controller\Modules\ModulesController;
+use App\Controller\Utils\Utils;
 use App\Entity\Interfaces\EntityInterface;
 use App\Entity\Modules\Todo\MyTodo;
 use App\Entity\System\Module;
@@ -55,6 +57,11 @@ public function buildForm(FormBuilderInterface $builder, array $options) {
             $is_module_predefined = false;
         }
 
+        $display_on_dashboard_id                     = Utils::fieldIdForSymfonyForm($options['data_class'], MyTodo::FIELD_DISPLAY_ON_DASHBOARD);
+        $toggle_display_on_dashboard_for_modules_ids = json_encode([
+            $this->controllers->getModuleController()->getOneByName(ModulesController::MODULE_NAME_GOALS)->getId()
+        ]);
+
         $builder
             ->add(MyTodo::FIELD_NAME, null, [
                 'label' => $this->app->translator->translate('forms.MyTodoType.name'),
@@ -74,6 +81,10 @@ public function buildForm(FormBuilderInterface $builder, array $options) {
                     'class'                                          => 'selectpicker',
                     'data-append-classes-to-bootstrap-select-parent' => 'bootstrap-select-width-100',
                     'data-append-classes-to-bootstrap-select-button' => 'm-0',
+                    'data-hide-dom-element'                          => '',
+                    'data-hide-dom-element-target-selector'          => '#' . $display_on_dashboard_id,
+                    'data-hide-dom-element-target-parent-selector'   => '.row',
+                    'data-hide-dom-element-for-options-values'       => $toggle_display_on_dashboard_for_modules_ids
                 ]
             ])
             ->add(MyTodo::FIELD_DISPLAY_ON_DASHBOARD,RoundcheckboxType::class,[

src/assets/scripts/Initializer.ts

@@ -84,6 +84,7 @@ export default class Initializer {
         let widgetsDialogs         = new WidgetsDialogs();
         let modal                  = new Modal();
         let dialog                 = new Dialog();
+        let domElements            = new DomElements();
 
         // modules
         let todoChecklist       = new TodoChecklist();
@@ -124,6 +125,8 @@ export default class Initializer {
         uploadBasedModules.init();
         JsColor.init();
 
+        domElements.init();
+
         modal.init();
         dialog.init();
 

src/assets/scripts/core/utils/ArrayUtils.ts

@@ -21,7 +21,20 @@ export default class ArrayUtils {
      */
     public static inArray(needle: string|number|boolean, haystack: Array<any>): boolean
     {
-       return $.inArray(needle, haystack) !== -1;
+        let inArray = ($.inArray(needle, haystack) !== -1);
+
+        if(
+                !inArray
+            &&  !Number.isNaN(needle)
+            &&  ("string" === typeof needle)
+        ){
+
+            let numericNeedle = parseInt(needle);
+            inArray           = ($.inArray(numericNeedle, haystack) !== -1);
+
+        }
+
+       return inArray;
     }
 
     /**

src/assets/scripts/core/utils/DomElements.ts

@@ -1,8 +1,28 @@
 import BackendStructureLoader   from "../ui/BackendStructure/BackendStructureLoader";
 import Ajax                     from "../ajax/Ajax";
+import ArrayUtils               from "./ArrayUtils";
+import StringUtils from "./StringUtils";
 
 export default class DomElements {
 
+    /**
+     *@type Object
+     */
+    private dataAttributes = {
+        hideDomElement                         : 'data-hide-dom-element',
+        hideDomElementTargetSelector           : 'data-hide-dom-element-target-selector',
+        hideDomElementForOptionsValues         : 'data-hide-dom-element-for-options-values',
+        hideDomElementForOptionsParentSelector : 'data-hide-dom-element-target-parent-selector'
+    };
+
+    /**
+     * @description will initialize logic for dom elements
+     */
+    public init(): void
+    {
+        this.showDomElementForSelectedOptionInSelect();
+    }
+
     /**
      * @description Checks if there are existing elements for domElements selected with $();
      *
@@ -87,4 +107,65 @@ export default class DomElements {
         let parentToRemove = $($element).closest(selector);
         parentToRemove.remove();
     }
+
+    /**
+     * @description this function will show given DOM element (by target selector) only when the target select
+     *              has explicit options selected
+     */
+    private showDomElementForSelectedOptionInSelect()
+    {
+        let $allSelectorsWithHidingLogic = $("[" + this.dataAttributes.hideDomElement + "]");
+        let _this                        = this;
+
+        $.each($allSelectorsWithHidingLogic, (index, element) => {
+            let $element = $(element);
+
+            $element.on('change', function(event){
+                let $changedSelectElement = $(event.currentTarget);
+                let selectedOptionValue   = $changedSelectElement.val() as string;
+
+                try {
+                    var targetDomElementSelectorToHide       = $changedSelectElement.attr(_this.dataAttributes.hideDomElementTargetSelector);
+                    var targetDomElementParentSelectorToHide = $changedSelectElement.attr(_this.dataAttributes.hideDomElementForOptionsParentSelector);
+                    var $targetDomElementToHide              = $(targetDomElementSelectorToHide);
+
+                    var optionsValuesToHideDomElementFor = JSON.parse($changedSelectElement.attr(_this.dataAttributes.hideDomElementForOptionsValues));
+                }catch(Exception){
+                    throw {
+                        "message"   : "Could not read/parse data attributes for showing dom elements depending on selected option",
+                        "exception" : Exception
+                    }
+                }
+
+                if( 0 === optionsValuesToHideDomElementFor.length ){
+                    throw{
+                        "message": "No options were provided for which dom element should be shown"
+                    }
+                }
+
+                // if parent selector is defined then closest parent of target element will be searched and that element will be toggled
+                if( !StringUtils.isEmptyString(targetDomElementParentSelectorToHide) ){
+                    $targetDomElementToHide = $targetDomElementToHide.closest(targetDomElementParentSelectorToHide)
+                }
+
+                if( !DomElements.doElementsExists($targetDomElementToHide) ){
+                    throw{
+                        "message"  : "No dom element was found for given selector",
+                        "selector" : targetDomElementSelectorToHide
+                    }
+                }
+
+                if( ArrayUtils.inArray(selectedOptionValue, optionsValuesToHideDomElementFor) ){
+                    $targetDomElementToHide.show();
+                }else{
+                    $targetDomElementToHide.hide();
+                }
+
+            })
+        })
+
+        // this trigger is required to initially hide/show DOM Elements
+        $allSelectorsWithHidingLogic.trigger('change');
+    }
+
 }

templates/modules/my-todo/components/modal.html.twig

@@ -88,6 +88,7 @@
                                                 {% if
                                                         constant("App\\Controller\\Modules\\ModulesController::MODULE_NAME_ISSUES") == module.name
                                                     and todo.module     is not null
+                                                    and todo.myIssue    is not null
                                                     and module.name     == todo.module.name
                                                     and todo.myIssue.id == entity_data_dto.getId()
                                                 %}