refactor(batch): simplify stimulus controller

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

@@ -1,17 +1,16 @@
-- if available_operations[:options].count == 1
+.batch-operation.fr-ml-auto
+  - if available_operations[:options].count == 1
     - opt = available_operations[:options].dig(0)
-  = form_for(BatchOperation.new, url: instructeur_batch_operations_path(procedure_id: procedure.id), method: :post, html: { class: 'fr-ml-auto', id: "#{dom_id(BatchOperation.new)}" }, data: { "batch-operation-target" => "form"}) do |form|
+    = form_for(BatchOperation.new, url: instructeur_batch_operations_path(procedure_id: procedure.id), method: :post, html: { class: 'fr-ml-auto', id: "#{dom_id(BatchOperation.new)}" }) do |form|
-    = form.button opt[:label], class: ['fr-btn fr-btn--icon-left', icons[opt[:operation].to_sym]], disabled: :disabled, name: "#{form.object_name}[operation]", data: { "batch-operation-target" => "submit", "submitter-operation" => opt[:operation] }
+      = form.button opt[:label], class: ['fr-btn fr-btn--icon-left', icons[opt[:operation].to_sym]], disabled: true, name: "#{form.object_name}[operation]", value: opt[:operation]
-
+  - else
-- else
-  .fr-ml-auto
     .dropdown{ data: { controller: 'menu-button', popover: 'true' } }
       -# Dropdown button title
-      %button.fr-btn.dropdown-button{ id: 'batch_operation_dropdown', disabled: :disabled, data: { menu_button_target: 'button'} }
+      %button.fr-btn.dropdown-button{ disabled: true, data: { menu_button_target: 'button'} }
         Actions multiples
 
       #state-menu.dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' } }
-        = form_for(BatchOperation.new, url: instructeur_batch_operations_path(procedure_id: procedure.id), method: :post, html: { class: 'form', id: "#{dom_id(BatchOperation.new)}" }, data: { "batch-operation-target" => "form"}) do |form|
+        = form_for(BatchOperation.new, url: instructeur_batch_operations_path(procedure_id: procedure.id), method: :post, html: { class: 'form', id: "#{dom_id(BatchOperation.new)}" }) do |form|
           %ul.dropdown-items
             - available_operations[:options].each do |opt|
               %li{ 'data-turbo': 'true' }
@@ -33,9 +32,10 @@
                       .text-right
                         %span{ onclick: 'DS.motivationCancel();', class: 'fr-btn fr-btn--secondary' } Annuler
 
-                        = form.button "Valider la décision", class: ['fr-btn'], disabled: :disabled, name: "#{form.object_name}[operation]", data: { "batch-operation-target" => "submit", "submitter-operation" => opt[:operation]}
+                        = form.button "Valider la décision", class: ['fr-btn'], disabled: true, name: "#{form.object_name}[operation]", value: opt[:operation]
                 - else
-                  = form.button opt[:label], class: 'dropdown-items-link', disabled: :disabled, name: "#{form.object_name}[operation]", data: { "batch-operation-target" => "submit", "submitter-operation" => opt[:operation]} do
+                  = form.button opt[:label], class: 'dropdown-items-link', disabled: true, name: "#{form.object_name}[operation]", value: opt[:operation] do
                     %span{ class: icons[opt[:operation].to_sym] }
                     .dropdown-description
                       %h4= opt[:label]
+

app/javascript/controllers/batch_operation_controller.ts

@@ -1,31 +1,13 @@
 import { ApplicationController } from './application_controller';
+import { disable, enable } from '@utils';
 
 export class BatchOperationController extends ApplicationController {
-  static targets = ['form', 'input', 'submit'];
+  static targets = ['input'];
 
-  declare readonly formTargets: HTMLFormElement[];
-  declare readonly submitTargets: HTMLInputElement[];
   declare readonly inputTargets: HTMLInputElement[];
 
-  connect() {
+  onCheckOne() {
-    this.formTargets.forEach((e) =>
-      e.addEventListener('submit', this.interceptFormSubmit.bind(this))
-    );
-  }
-
-  // DSFR recommends a <input type="submit" /> or <button type="submit" /> a form (not a <select>)
-  // but we have many actions on the same form (archive all, accept all, ...)
-  // so we intercept the form submit, and set the BatchOperation.operation by hand using the Event.submitter
-  interceptFormSubmit(event: SubmitEvent): SubmitEvent {
-    const submitter = event.submitter as HTMLInputElement;
-
-    submitter.setAttribute('value', submitter.dataset.submitterOperation || '');
-    return event;
-  }
-
-  onCheckOne(event: Event) {
     this.toggleSubmitButtonWhenNeeded();
-    return event;
   }
 
   onCheckAll(event: Event) {
@@ -33,21 +15,18 @@ export class BatchOperationController extends ApplicationController {
 
     this.inputTargets.forEach((e) => (e.checked = target.checked));
     this.toggleSubmitButtonWhenNeeded();
-    return event;
   }
 
   toggleSubmitButtonWhenNeeded() {
     const available = this.inputTargets.some((e) => e.checked);
-    const dropdown = document.querySelector('#batch_operation_dropdown');
+    const buttons = this.element.querySelectorAll<HTMLButtonElement>(
+      '.batch-operation button'
+    );
+    for (const button of buttons) {
       if (available) {
-      this.submitTargets.forEach((e) => e.removeAttribute('disabled'));
+        enable(button);
-      if (dropdown) {
-        dropdown.removeAttribute('disabled');
-      }
       } else {
-      this.submitTargets.forEach((e) => e.setAttribute('disabled', 'disabled'));
+        disable(button);
-      if (dropdown) {
-        dropdown.setAttribute('disabled', 'disabled');
       }
     }
   }

app/views/instructeurs/procedures/show.html.haml

@@ -105,7 +105,7 @@
               %tr
                 - if batch_operation_component.render?
                   %th.text-center
-                    %input{ type: "checkbox", data: { "batch-operation-target" => "all","action" => "batch-operation#onCheckAll"}, id: dom_id(BatchOperation.new, :checkbox_all), aria: { label: t('views.instructeurs.dossiers.select_all') } }
+                    %input{ type: "checkbox", data: { action: "batch-operation#onCheckAll" }, id: dom_id(BatchOperation.new, :checkbox_all), aria: { label: t('views.instructeurs.dossiers.select_all') } }
                 - else
                   - if @statut.in? %w(suivis traites tous)
                     = render partial: "header_field", locals: { field: { "label" => "●", "table" => "notifications", "column" => "notifications" }, classname: "notification-col text-center" }
@@ -126,9 +126,9 @@
                   %td.text-center
                     - if batch_operation_component.render?
                       - if p.batch_operation_id.present?
-                        = check_box_tag :"batch_operation[dossier_ids][]", p.dossier_id, true, disabled: true, id: dom_id(BatchOperation.new, "checkbox_#{p.dossier_id}"), aria: {label: t('views.instructeurs.dossiers.batch_operation.disabled')}
+                        = check_box_tag :"batch_operation[dossier_ids][]", p.dossier_id, true, disabled: true, id: dom_id(BatchOperation.new, "checkbox_#{p.dossier_id}"), aria: { label: t('views.instructeurs.dossiers.batch_operation.disabled') }
                       - else
-                        = check_box_tag :"batch_operation[dossier_ids][]", p.dossier_id, false, data: { "batch-operation-target" => "input", "action" => "batch-operation#onCheckOne"}, form: dom_id(BatchOperation.new), id: dom_id(BatchOperation.new, "checkbox_#{p.dossier_id}"), aria: {label: t('views.instructeurs.dossiers.batch_operation.enabled')}
+                        = check_box_tag :"batch_operation[dossier_ids][]", p.dossier_id, false, data: { batch_operation_target: "input", action: "batch-operation#onCheckOne" }, form: dom_id(BatchOperation.new), id: dom_id(BatchOperation.new, "checkbox_#{p.dossier_id}"), aria: { label: t('views.instructeurs.dossiers.batch_operation.enabled') }
 
                       - if @not_archived_notifications_dossier_ids.include?(p.dossier_id)
                         %span.notifications{ 'aria-label': 'notifications' }