fix(batch): disable dropdown when alls buttons inside are disabled

Co-Authored-by: Lisa Durand <lisa.c.durand@gmail.com>

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

@@ -11,10 +11,10 @@
 
       .dropdown{ data: { controller: 'menu-button', popover: 'true' } }
         -# Dropdown button title
-        %button.fr-btn.fr-btn--sm.fr-btn--secondary.fr-ml-1w.dropdown-button{ disabled: true, data: { menu_button_target: 'button', batch_operation_target: 'menu' } }
+        %button#batch_operation_others.fr-btn.fr-btn--sm.fr-btn--secondary.fr-ml-1w.dropdown-button{ disabled: true, data: { menu_button_target: 'button', batch_operation_target: 'dropdown' } }
           = t('.operations.other')
 
-        #state-menu.dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' } }
+        #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' }

app/components/dossiers/batch_operation_inline_buttons_component/batch_operation_inline_buttons_component.html.haml

@@ -1,5 +1,5 @@
 - if opt.keys.include?(:instruction)
-  = render Dropdown::MenuComponent.new(wrapper: :div, wrapper_options: { data: {controller: 'menu-button', popover: 'true', operation: opt[:operation]} }, menu_options: { id: "dropdown_batch" }, button_options: { disabled: true, data: { batch_operation_target: "menu" }, class: "fr-btn fr-btn--sm fr-ml-1w"}, role: :region ) do |menu|
+  = render Dropdown::MenuComponent.new(wrapper: :div, wrapper_options: { data: {controller: 'menu-button', popover: 'true', operation: opt[:operation]} }, menu_options: { id: "dropdown_batch" }, button_options: { disabled: true, data: { batch_operation_target: "dropdown" }, class: "fr-btn fr-btn--sm fr-ml-1w"}, role: :region ) do |menu|
     - menu.with_button_inner_html do
       = t(".labels.instruction")
 

app/javascript/controllers/batch_operation_controller.ts

@@ -3,11 +3,11 @@ import { disable, enable, show, hide } from '@utils';
 import invariant from 'tiny-invariant';
 
 export class BatchOperationController extends ApplicationController {
-  static targets = ['menu', 'input'];
+  static targets = ['menu', 'input', 'dropdown'];
 
   declare readonly menuTargets: HTMLButtonElement[];
-  declare readonly hasMenuTarget: boolean;
   declare readonly inputTargets: HTMLInputElement[];
+  declare readonly dropdownTargets: HTMLButtonElement[];
 
   onCheckOne() {
     this.toggleSubmitButtonWhenNeeded();
@@ -110,18 +110,37 @@ export class BatchOperationController extends ApplicationController {
         return available;
       });
 
-      if (this.hasMenuTarget) {
+      if (this.menuTargets.length) {
         if (available.length) {
           this.menuTargets.forEach((e) => enable(e));
         } else {
           this.menuTargets.forEach((e) => disable(e));
         }
       }
+
+      this.dropdownTargets.forEach((dropdown) => {
+        const buttons = Array.from(
+          document.querySelectorAll<HTMLButtonElement>(
+            `[aria-labelledby='${dropdown.id}'] button[data-operation]`
+          )
+        );
+
+        const disabled = buttons.every((button) => button.disabled);
+
+        if (disabled) {
+          disable(dropdown);
+        } else {
+          enable(dropdown);
+        }
+      });
+
+      // pour chaque chaque dropdown, on va chercher tous les boutons
+      // si tous les boutons sont disabled, on disable le dropdown
     } else {
-      if (this.hasMenuTarget) {
+      this.menuTargets.forEach((e) => disable(e));
-        this.menuTargets.forEach((e) => disable(e));
-      }
       buttons.forEach((button) => switchButton(button, false));
+
+      this.dropdownTargets.forEach((e) => disable(e));
     }
   }
 }