Implement show and hide logic within workflow form

src/Bundle/ChillMainBundle/Form/WorkflowStepType.php

@@ -17,6 +17,7 @@ use Chill\MainBundle\Form\Type\ChillTextareaType;
 use Chill\MainBundle\Form\Type\PickUserDynamicType;
 use Chill\MainBundle\Templating\TranslatableStringHelperInterface;
 use Chill\MainBundle\Workflow\WorkflowTransitionContextDTO;
+use Chill\PersonBundle\Form\Type\PickPersonDynamicType;
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
 use Symfony\Component\Form\Extension\Core\Type\EmailType;
@@ -102,6 +103,7 @@ class WorkflowStepType extends AbstractType
                 'choice_attr' => static function (Transition $transition) use ($workflow) {
                     $toFinal = true;
                     $isForward = 'neutral';
+                    $isSignature = [];
 
                     $metadata = $workflow->getMetadataStore()->getTransitionMetadata($transition);
 
@@ -121,15 +123,38 @@ class WorkflowStepType extends AbstractType
                         ) {
                             $toFinal = false;
                         }
+
+                        if (\array_key_exists('isSignature', $meta)) {
+                            $isSignature = $meta['isSignature'];
+                        }
                     }
 
                     return [
                         'data-is-transition' => 'data-is-transition',
                         'data-to-final' => $toFinal ? '1' : '0',
                         'data-is-forward' => $isForward,
+                        'data-is-signature' => json_encode($isSignature),
                     ];
                 },
             ])
+            ->add('isPersonOrUserSignature', ChoiceType::class, [
+                'mapped' => false,
+                'multiple' => false,
+                'expanded' => true,
+                'label' => 'workflow.Type of signature',
+                'choices' => [
+                    'person' => 'person',
+                    'user' => 'user',
+                ],
+            ])
+            ->add('futurePersonSignatures', PickPersonDynamicType::class, [
+                'label' => 'workflow.person signatures',
+                'multiple' => true,
+            ])
+            ->add('futureUserSignature', PickUserDynamicType::class, [
+                'label' => 'workflow.user signatures',
+                'multiple' => false,
+            ])
             ->add('futureDestUsers', PickUserDynamicType::class, [
                 'label' => 'workflow.dest for next steps',
                 'multiple' => true,
@@ -140,6 +165,7 @@ class WorkflowStepType extends AbstractType
                 'multiple' => true,
                 'required' => false,
                 'suggested' => $options['suggested_users'],
+                'attr' => ['class' => 'future-cc-users'],
             ])
             ->add('futureDestEmails', ChillCollectionType::class, [
                 'label' => 'workflow.dest by email',

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

@@ -4,8 +4,86 @@ window.addEventListener('DOMContentLoaded', function() {
     let
         divTransitions = document.querySelector('#transitions'),
         futureDestUsersContainer = document.querySelector('#futureDests')
+        personSignatureField = document.querySelector('#person-signature-field');
+        userSignatureField = document.querySelector('#user-signature-field');
+        signatureTypeChoices = document.querySelector('#signature-type-choice');
     ;
 
+    console.log('signature type', signatureTypeChoices);
+
+    let
+      transitionFilterContainer = document.querySelector('#transitionFilter'),
+      transitionsContainer = document.querySelector('#transitions')
+    ;
+
+    personSignatureField.style.display = 'none';
+    userSignatureField.style.display = 'none';
+    futureDestUsersContainer.style.display = 'none';
+    signatureTypeChoices.style.display = 'none';
+
+    // ShowHide instance for signatureTypeChoices and futureDestUsersContainer
+    new ShowHide({
+      load_event: null,
+      froms: [transitionsContainer],
+      container: [signatureTypeChoices, futureDestUsersContainer],
+      test: function() {
+        const selectedTransition = document.querySelector('input[name="workflow_step[transition]"]:checked');
+        console.log('transition', selectedTransition)
+        if (!selectedTransition) {
+          return false; // No transition selected, hide all
+        }
+
+        const isSignature = JSON.parse(selectedTransition.getAttribute('data-is-signature') || '[]');
+
+        if (isSignature.includes('person') && isSignature.includes('user')) {
+          signatureTypeChoices.style.display = '';
+        } else {
+          signatureTypeChoices.style.display = 'none';
+        }
+
+        if (!isSignature.length) {
+          futureDestUsersContainer.style.display = '';
+          personSignatureField.style.display = 'none';
+          userSignatureField.style.display = 'none';
+        } else {
+          futureDestUsersContainer.style.display = 'none';
+        }
+
+        return true; // Always return true to ensure ShowHide manages visibility
+      }
+    });
+
+    // Event listener for changes in signature type selection
+    signatureTypeChoices.addEventListener('change', function() {
+      // ShowHide instance for personSignatureField and userSignatureField
+      new ShowHide({
+        load_event: null,
+        froms: [signatureTypeChoices],
+        container: [personSignatureField, userSignatureField],
+        test: function() {
+          console.log(signatureTypeChoices)
+          const selectedSignatureType = document.querySelector('input[name="workflow_step[isPersonOrUserSignature]"]:checked');
+          console.log('signataure type', selectedSignatureType)
+          if (!selectedSignatureType) {
+            return false; // No signature type selected, hide both fields
+          }
+
+          if (selectedSignatureType.value === 'person') {
+            personSignatureField.style.display = '';
+            userSignatureField.style.display = 'none';
+          } else if (selectedSignatureType.value === 'user') {
+            personSignatureField.style.display = 'none';
+            userSignatureField.style.display = '';
+          } else {
+            personSignatureField.style.display = 'none';
+            userSignatureField.style.display = 'none';
+          }
+
+          return true; // Always return true to ensure ShowHide manages visibility
+        }
+      });
+    });
+
     if (null !== divTransitions) {
         new ShowHide({
             load_event: null,
@@ -29,13 +107,8 @@ window.addEventListener('DOMContentLoaded', function() {
         });
     }
 
-    let
-        transitionFilterContainer = document.querySelector('#transitionFilter'),
-        transitions = document.querySelector('#transitions')
-    ;
-
     if (null !== transitionFilterContainer) {
-        transitions.querySelectorAll('.form-check').forEach(function(row) {
+        transitionsContainer.querySelectorAll('.form-check').forEach(function(row) {
 
             const isForward = row.querySelector('input').dataset.isForward;
 
@@ -66,5 +139,4 @@ window.addEventListener('DOMContentLoaded', function() {
             });
         });
     }
-
 });

src/Bundle/ChillMainBundle/Resources/views/Workflow/_decision.html.twig

@@ -58,15 +58,34 @@
         {{ form_row(transition_form.transition) }}
     </div>
 
+    <div id="futureSignatures">
+        <div id="signature-type-choice">
+            {{ form_row(transition_form.isPersonOrUserSignature) }}
+            {{ form_errors(transition_form.isPersonOrUserSignature) }}
+        </div>
+        <div id="user-signature-field">
+            {{ form_row(transition_form.futureUserSignature) }}
+            {{ form_errors(transition_form.futureUserSignature) }}
+        </div>
+        <div id="person-signature-field">
+            {{ form_row(transition_form.futurePersonSignatures) }}
+            {{ form_errors(transition_form.futurePersonSignatures) }}
+        </div>
+    </div>
+
     <div id="futureDests">
+        <div id="future-dest-users">
         {{ form_row(transition_form.futureDestUsers) }}
         {{ form_errors(transition_form.futureDestUsers) }}
-
+        </div>
+        <div id="future-cc-users">
         {{ form_row(transition_form.futureCcUsers) }}
         {{ form_errors(transition_form.futureCcUsers) }}
-
+        </div>
+        <div id="future-dest-emails">
         {{ form_row(transition_form.futureDestEmails) }}
         {{ form_errors(transition_form.futureDestEmails) }}
+        </div>
     </div>
 
     <p>{{ form_label(transition_form.comment) }}</p>