DGNum/demarches-normaliennes
15
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

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

Browse source 
Co-Authored-by: Lisa Durand <lisa.c.durand@gmail.com>
This commit is contained in:
Colin Darie 2023-07-11 18:30:52 +02:00
parent ae55655014
commit 9462d66778
3 changed files with 28 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/components/dossiers/batch_operation_component/batch_operation_component.html.haml
View file

@ -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' }

2
app/components/dossiers/batch_operation_inline_buttons_component/batch_operation_inline_buttons_component.html.haml
View file

@ -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")

31
app/javascript/controllers/batch_operation_controller.ts
View file

@ -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));
}
}
}