Fix functioning of show hide

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

@@ -7,69 +7,20 @@ window.addEventListener('DOMContentLoaded', function() {
         personSignatureField = document.querySelector('#person-signature-field');
         userSignatureField = document.querySelector('#user-signature-field');
         signatureTypeChoices = document.querySelector('#signature-type-choice');
-    ;
+        personChoice = document.querySelector('#workflow_step_isPersonOrUserSignature_0');
+        userChoice = document.querySelector('#workflow_step_isPersonOrUserSignature_1');
+        signatureZone = document.querySelector('#signature-zone');
+  ;
 
     let
       transitionFilterContainer = document.querySelector('#transitionFilter'),
       transitionsContainer = document.querySelector('#transitions')
     ;
 
-  // ShowHide instance for personSignatureField
-  new ShowHide({
-      debug: false,
-      froms: [signatureTypeChoices],
-      container: [personSignatureField],
-      test: function(froms, event) {
-        // console.log('froms', froms)
-        for (let container of froms) {
-          if (container.children.length === 0) {
-            console.log('im empty dont show person or user picker');
-            return false
-          } else {
-            return container.querySelector('input[value="person"]').checked;
-          }
-        }
-        return false;
-      },
-    });
+    // ShowHide instance for signatureTypeChoices. This should always be present in the DOM and we toggle visibility.
+    // The field is not mapped and so not submitted with the form. Without it's presence upon DOM loading other show hides do not function well.
+    signatureTypeChoices.style.display = 'none';
 
-    // ShowHide instance for userSignatureField
-    new ShowHide({
-      debug: false,
-      froms: [signatureTypeChoices],
-      container: [userSignatureField],
-      test: function(froms, event) {
-        for (let container of froms) {
-          if (container.children.length === 0) {
-            console.log('im empty dont show person or user picker');
-            return false
-          } else {
-            return container.querySelector('input[value="person"]').checked;
-          }
-        }
-        return false;
-      },
-    });
-
-    // ShowHide instance for signatureTypeChoices
-    new ShowHide({
-      debug: false,
-      load_event: null,
-      froms: [divTransitions],
-      container: [signatureTypeChoices],
-      test: function(froms, event) {
-        for (let transition of froms) {
-          for (let input of transition.querySelectorAll('input')) {
-            if (input.checked) {
-              const inputData = JSON.parse(input.getAttribute('data-is-signature'))
-              return inputData.includes('person') && inputData.includes('user');
-            }
-          }
-        }
-
-        return false;
-      }
-    });
 
     // ShowHide instance for future dest users
     new ShowHide({
@@ -82,7 +33,16 @@ window.addEventListener('DOMContentLoaded', function() {
           for (let input of transition.querySelectorAll('input')) {
             if (input.checked) {
               const inputData = JSON.parse(input.getAttribute('data-is-signature'))
-              return !(inputData.includes('person') || inputData.includes('user'));
+              if (inputData.includes('person') || inputData.includes('user')) {
+                signatureTypeChoices.style.display = '';
+                return false;
+              } else {
+                personChoice.checked = false
+                userChoice.checked = false
+
+                signatureTypeChoices.style.display = 'none';
+                return true;
+              }
             }
           }
         }
@@ -90,6 +50,53 @@ window.addEventListener('DOMContentLoaded', function() {
       }
     });
 
+    // ShowHide signature zone
+    new ShowHide({
+      debug: false,
+      load_event: null,
+      froms: [divTransitions],
+      container: [signatureZone],
+      test: function(froms, event) {
+        for (let transition of froms) {
+          for (let input of transition.querySelectorAll('input')) {
+            if (input.checked) {
+              const inputData = JSON.parse(input.getAttribute('data-is-signature'))
+              if (inputData.includes('person') || inputData.includes('user')) {
+                signatureTypeChoices.style.display = '';
+                return true;
+              }
+            }
+          }
+        }
+        return false;
+      }
+    });
+
+    // ShowHides for personSignatureField or userSignatureField within signature zone
+    new ShowHide({
+      debug: false,
+      froms: [signatureTypeChoices],
+      container: [personSignatureField],
+      test: function(froms, event) {
+        for (let container of froms) {
+          return personChoice.checked;
+        }
+        return false;
+      },
+    });
+
+    new ShowHide({
+      debug: false,
+      froms: [signatureTypeChoices],
+      container: [userSignatureField],
+      test: function(froms, event) {
+        for (let container of froms) {
+          return userChoice.checked;
+        }
+        return false;
+      },
+    });
+
     if (null !== divTransitions) {
       new ShowHide({
           load_event: null,