improve workflow decision form

src/Bundle/ChillMainBundle/Resources/public/lib/show_hide/show_hide.js

@@ -1,19 +1,19 @@
 /**
  * Create a control to show or hide values
- * 
+ *
  * Possible options are:
- * 
+ *
  *  - froms: an Element, an Array of Element, or a NodeList. A
  *    listener will be attached to **all** input of those elements
  *    and will trigger the check on changes
- *  - test: a function which will test the element and will return true 
+ *  - test: a function which will test the element and will return true
  *    if the content must be shown, false if it must be hidden.
- *    The function will receive the `froms` as first argument, and the 
+ *    The function will receive the `froms` as first argument, and the
  *    event as second argument.
- *  - container: an Element, an Array of Element, or a Node List. The 
+ *  - container: an Element, an Array of Element, or a Node List. The
  *    child nodes will be hidden / shown inside this container
  *  - event_name: the name of the event to listen to. `'change'` by default.
- * 
+ *
  * @param object options
  */
 var ShowHide = function(options) {
@@ -26,8 +26,10 @@ var ShowHide = function(options) {
         container_content = [],
         debug = 'debug' in options ? options.debug : false,
         load_event = 'load_event' in options ? options.load_event : 'load',
-        id = 'uid' in options ? options.id : Math.random();
-    
+        id = 'uid' in options ? options.id : Math.random(),
+        toggle_callback = 'toggle_callback' in options ? options.toggle_callback : null
+    ;
+
     var bootstrap = function(event) {
         if (debug) {
             console.log('debug is activated on this show-hide', this);
@@ -39,15 +41,14 @@ var ShowHide = function(options) {
                 contents.push(el);
             }
             container_content.push(contents);
-            // console.log('container content', container_content);
         }
 
         // attach the listener on each input
         for (let f of froms.values()) {
-            let 
-                inputs = f.querySelectorAll('input'), 
+            let
+                inputs = f.querySelectorAll('input'),
                 selects = f.querySelectorAll('select');
-        
+
             for (let input of inputs.values()) {
                 if (debug) {
                     console.log('attaching event to input', input);
@@ -67,10 +68,10 @@ var ShowHide = function(options) {
         }
 
         // first launch of the show/hide
-        onChange(event);    
+        onChange(event);
     };
 
-    
+
     var onChange = function (event) {
         var result = test(froms, event), me;
 
@@ -89,45 +90,53 @@ var ShowHide = function(options) {
         } else {
             throw "the result of test is not a boolean";
         }
-        
+
     };
-    
+
     var forceHide = function() {
         if (debug) {
             console.log('force hide');
         }
-        for (let contents of container_content.values()) {
-            for (let el of contents.values()) {
-                el.remove();
+        if (toggle_callback !== null) {
+            toggle_callback(container, 'hide');
+        } else {
+            for (let contents of container_content.values()) {
+                for (let el of contents.values()) {
+                    el.remove();
+                }
             }
         }
         is_shown = false;
     };
-    
+
     var forceShow = function() {
         if (debug) {
             console.log('show');
         }
-        for (let i of container_content.keys()) {
-            var contents = container_content[i];
-            for (let el of contents.values()) {
-                container[i].appendChild(el);
+        if (toggle_callback !== null) {
+            toggle_callback(container, 'show');
+        } else {
+            for (let i of container_content.keys()) {
+                var contents = container_content[i];
+                for (let el of contents.values()) {
+                    container[i].appendChild(el);
+                }
             }
         }
         is_shown = true;
     };
-    
+
     var forceCompute = function(event) {
         onChange(event);
     };
-    
-    
+
+
     if (load_event !== null) {
         window.addEventListener('load', bootstrap);
     } else {
         bootstrap(null);
     }
-    
+
     return {
         forceHide: forceHide,
         forceShow: forceShow,

src/Bundle/ChillMainBundle/Resources/public/page/workflow-show/index.js

@@ -2,29 +2,74 @@ import {ShowHide} from 'ChillMainAssets/lib/show_hide/show_hide.js';
 
 window.addEventListener('DOMContentLoaded', function() {
     let
-        finalizeAfterContainer = document.querySelector('#finalizeAfter'),
+        divTransitions = document.querySelector('#transitions'),
         futureDestUsersContainer = document.querySelector('#futureDestUsers')
     ;
 
-    if (null === finalizeAfterContainer) {
-        return;
-    }
-
-    new ShowHide({
-        load_event: null,
-        froms: [finalizeAfterContainer],
-        container: [futureDestUsersContainer],
-        test: function(containers, arg2, arg3) {
-            for (let container of containers) {
-                for (let input of container.querySelectorAll('input')) {
-                    if (!input.checked) {
-                        return true;
-                    } else {
-                        return false;
+    if (null !== divTransitions) {
+        new ShowHide({
+            load_event: null,
+            froms: [divTransitions],
+            container: [futureDestUsersContainer],
+            test: function(divs, arg2, arg3) {
+                for (let div of divs) {
+                    for (let input of div.querySelectorAll('input')) {
+                        if (input.checked) {
+                            if (input.dataset.toFinal === "1") {
+                                return false;
+                            } else {
+                                return true;
+                            }
+                        }
                     }
                 }
-            }
 
-        },
-    })
+                return true;
+            },
+        });
+    }
+
+    let
+        transitionFilterContainer = document.querySelector('#transitionFilter'),
+        transitions = document.querySelector('#transitions')
+    ;
+
+    if (null !== transitionFilterContainer) {
+        transitions.querySelectorAll('.form-check').forEach(function(row) {
+
+            const isForward = row.querySelector('input').dataset.isForward;
+            console.log(row);
+            console.log(isForward);
+
+            new ShowHide({
+                load_event: null,
+                froms: [transitionFilterContainer],
+                container: row,
+                test: function (containers) {
+                    for (let container of containers) {
+                        for (let input of container.querySelectorAll('input')) {
+                            if (input.checked) {
+                                return isForward === input.value;
+                            }
+                        }
+                    }
+                },
+                toggle_callback: function (c, dir) {
+                    for (let div of c) {
+                        let input = div.querySelector('input');
+                        if ('hide' === dir) {
+                            input.checked = false;
+                            input.disabled = true;
+                        } else {
+                            input.disabled = false;
+                        }
+                    }
+                },
+            });
+        });
+    }
+
+
+
+
 });