diff --git a/app/components/dossiers/batch_operation_component/batch_operation_component.html.haml b/app/components/dossiers/batch_operation_component/batch_operation_component.html.haml index e3de57caf..f75cbc6da 100644 --- a/app/components/dossiers/batch_operation_component/batch_operation_component.html.haml +++ b/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 diff --git a/app/javascript/entrypoints/application.js b/app/javascript/entrypoints/application.js index d347c7eb4..0ceb3b061 100644 --- a/app/javascript/entrypoints/application.js +++ b/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, diff --git a/app/javascript/new_design/instruction-button.js b/app/javascript/new_design/instruction-button.js deleted file mode 100644 index 21499c72c..000000000 --- a/app/javascript/new_design/instruction-button.js +++ /dev/null @@ -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)); -} diff --git a/app/javascript/new_design/instruction-button.ts b/app/javascript/new_design/instruction-button.ts new file mode 100644 index 000000000..38b06dc2e --- /dev/null +++ b/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}`); +} diff --git a/app/views/instructeurs/dossiers/_instruction_button_motivation_batch.html.haml b/app/views/instructeurs/dossiers/_instruction_button_motivation_batch.html.haml index 654babf26..e931d3160 100644 --- a/app/views/instructeurs/dossiers/_instruction_button_motivation_batch.html.haml +++ b/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" }