refactor(batch): simplify stimulus controller
This commit is contained in:
Paul Chavard
parent
7dc1d91530
commit
416550c6ea
3 changed files with 25 additions and 46 deletions
|
|
@ -1,17 +1,16 @@
|
|||
- 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.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] }
|
||||
|
||||
- else
|
||||
.fr-ml-auto
|
||||
.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)}" }) do |form|
|
||||
= 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
|
||||
.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]
|
||||
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
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) {
|
||||
onCheckOne() {
|
||||
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');
|
||||
if (available) {
|
||||
this.submitTargets.forEach((e) => e.removeAttribute('disabled'));
|
||||
if (dropdown) {
|
||||
dropdown.removeAttribute('disabled');
|
||||
}
|
||||
} else {
|
||||
this.submitTargets.forEach((e) => e.setAttribute('disabled', 'disabled'));
|
||||
if (dropdown) {
|
||||
dropdown.setAttribute('disabled', 'disabled');
|
||||
const buttons = this.element.querySelectorAll<HTMLButtonElement>(
|
||||
'.batch-operation button'
|
||||
);
|
||||
for (const button of buttons) {
|
||||
if (available) {
|
||||
enable(button);
|
||||
} else {
|
||||
disable(button);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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' }
|
||||
|
|
|
|||
Loading…
Reference in a new issue