fix(instructeur): motivations from different states should not conflict

app/components/dossiers/batch_operation_component/batch_operation_component.html.haml

@@ -17,7 +17,7 @@
         #state-menu.dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' }, "aria-labelledby" => "batch_operation_others" }
           %ul.dropdown-items
             - available_operations[:options][2, available_operations[:options].count].each do |opt|
-              %li{ 'data-turbo': 'true' }
+              %li
                 = form.button opt[:label], class: 'dropdown-items-link ', disabled: true, name: "#{form.object_name}[operation]", value: opt[:operation], data: { operation: opt[:operation] } do
                   %span{ class: icons[opt[:operation].to_sym] }
                   .dropdown-description

app/javascript/entrypoints/application.js

@@ -17,7 +17,6 @@ import { toggleCondidentielExplanation } from '../new_design/avis';
 import {
   showMotivation,
   motivationCancel,
-  motivationCancelBatchDropdown,
   showImportJustificatif,
   showDeleteJustificatif,
   deleteJustificatif
@@ -32,7 +31,6 @@ const DS = {
   toggleCondidentielExplanation,
   showMotivation,
   motivationCancel,
-  motivationCancelBatchDropdown,
   showImportJustificatif,
   showDeleteJustificatif,
   deleteJustificatif,

app/javascript/new_design/instruction-button.js

@@ -1,51 +0,0 @@
-import { show, hide } from '@utils';
-
-export function showMotivation(event, state) {
-  event.preventDefault();
-  motivationCancel();
-  const stateElement = document.querySelector(`.motivation.${state}`);
-
-  show(stateElement.parentElement);
-  show(stateElement);
-  hide(document.querySelector('.dropdown-items'));
-}
-
-export function motivationCancel() {
-  document.querySelectorAll('.motivation').forEach(hide);
-  document
-    .querySelectorAll('.motivation')
-    .forEach((el) => hide(el.parentElement));
-
-  show(document.querySelector('.dropdown-items'));
-
-  document.querySelectorAll('.js_delete_motivation').forEach(hide);
-}
-
-export function motivationCancelBatchDropdown() {
-  document.querySelector('#dropdown_batch').classList.remove('open');
-  hide(document.querySelector('.js_delete_motivation'));
-}
-
-export function showDeleteJustificatif(name) {
-  const justificatif = document.querySelector(
-    '#dossier_justificatif_motivation_' + name
-  );
-
-  if (justificatif.value != '') {
-    show(document.querySelector('#delete_motivation_import_' + name));
-    document.querySelector('#delete_motivation_import_' + name);
-  }
-}
-
-export function deleteJustificatif(name) {
-  const justificatif = document.querySelector(
-    '#dossier_justificatif_motivation_' + name
-  );
-  justificatif.value = '';
-  hide(document.querySelector('#delete_motivation_import_' + name));
-}
-
-export function showImportJustificatif(name) {
-  show(document.querySelector('#justificatif_motivation_import_' + name));
-  hide(document.querySelector('#justificatif_motivation_suggest_' + name));
-}

app/javascript/new_design/instruction-button.ts

@@ -0,0 +1,51 @@
+import { isInputElement } from '@coldwired/utils';
+import { show, hide, disable, enable } from '@coldwired/actions';
+
+export function showMotivation(event: Event, state: string) {
+  event.preventDefault();
+  motivationCancel();
+  const stateElement = document.querySelector(`.motivation.${state}`);
+
+  if (stateElement) {
+    show(stateElement.parentElement);
+    show(stateElement);
+    stateElement.querySelectorAll('input, textarea').forEach(enable);
+  }
+}
+
+export function motivationCancel() {
+  document.querySelectorAll('.motivation').forEach((stateElement) => {
+    hide(stateElement);
+    hide(stateElement.parentElement);
+    stateElement.querySelectorAll('input, textarea').forEach(disable);
+  });
+
+  hide('.js_delete_motivation');
+}
+
+export function showDeleteJustificatif(name: string) {
+  const justificatif = document.querySelector(
+    `#dossier_justificatif_motivation_${name}`
+  );
+
+  if (isInputElement(justificatif)) {
+    if (justificatif.value != '') {
+      show(`#delete_motivation_import_${name}`);
+    }
+  }
+}
+
+export function deleteJustificatif(name: string) {
+  const justificatif = document.querySelector(
+    `#dossier_justificatif_motivation_${name}`
+  );
+  if (isInputElement(justificatif)) {
+    justificatif.value = '';
+    hide(`#delete_motivation_import_${name}`);
+  }
+}
+
+export function showImportJustificatif(name: string) {
+  show(`#justificatif_motivation_import_${name}`);
+  hide(`#justificatif_motivation_suggest_${name}`);
+}

app/views/instructeurs/dossiers/_instruction_button_motivation_batch.html.haml

@@ -8,6 +8,6 @@
   .hidden.js_delete_motivation{ id: "delete_motivation_import_#{instruction_operation}" }
     %button.fr-btn.fr-btn--sm.fr-btn--tertiary-no-outline.fr-btn--icon-left.fr-icon-delete-line.fr-ml-0.fr-mt-1w{ type: 'button', onclick: "DS.deleteJustificatif('#{instruction_operation}');" } Supprimer le  justificatif
 
-  = button_tag "Annuler", type: :reset, class: 'fr-btn fr-btn--sm fr-btn--secondary', onclick: 'DS.motivationCancelBatch();'
+  = button_tag "Annuler", type: :reset, class: 'fr-btn fr-btn--sm fr-btn--secondary', onclick: 'DS.motivationCancel();'
 
   = form.button "Valider la décision", class: ['fr-btn fr-btn--sm fr-mt-2w'], disabled: true, name: "#{form.object_name}[operation]", value: opt[:operation], data: { operation: opt[:operation], action: "batch-operation#onSubmitInstruction" }