feat(instructeurs import): display submit button only if file uploaded

This commit is contained in:
Eric Leroy-Terquem 2024-09-30 10:14:27 +02:00
parent ec7aea50b3
commit 7af934daf5
No known key found for this signature in database
GPG key ID: 53D8FAECEF207605
2 changed files with 23 additions and 2 deletions

View file

@ -8,7 +8,7 @@
.notice .notice
= t(".csv_import.#{scope}.notice_2_html") = t(".csv_import.#{scope}.notice_2_html")
= form_tag import_admin_procedure_groupe_instructeurs_path(@procedure), method: :post, multipart: true, class: "mt-4 column" do = form_tag import_admin_procedure_groupe_instructeurs_path(@procedure), method: :post, multipart: true, class: "mt-4 column", "data-controller" => "enable-submit-if-uploaded" do
%label.fr-label.font-weight-bold %label.fr-label.font-weight-bold
= t('.csv_import.file_to_import') = t('.csv_import.file_to_import')
.fr-download .fr-download
@ -20,4 +20,4 @@
= t('.csv_import.file_size_limit', max_file_size: number_to_human_size(csv_max_size)) = t('.csv_import.file_size_limit', max_file_size: number_to_human_size(csv_max_size))
.flex.column .flex.column
= file_field_tag :csv_file, required: true, accept: 'text/csv', size: "1", class: 'fr-mb-2w' = file_field_tag :csv_file, required: true, accept: 'text/csv', size: "1", class: 'fr-mb-2w'
= submit_tag t('.csv_import.import_file'), class: 'fr-btn fr-btn--tertiary', data: { disable_with: "Envoi...", confirm: t('.csv_import.import_file_alert') }, disabled: true = submit_tag t('.csv_import.import_file'), class: 'fr-btn fr-btn--tertiary', id: 'submit-button', data: { disable_with: "Envoi...", confirm: t('.csv_import.import_file_alert') }, disabled: true

View file

@ -0,0 +1,21 @@
import { Controller } from '@hotwired/stimulus';
import { enable, disable } from '@utils';
export class EnableSubmitIfUploadedController extends Controller {
connect() {
const fileInput = document.querySelector(
'input[type="file"]'
) as HTMLInputElement;
const submitButton = document.getElementById(
'submit-button'
) as HTMLButtonElement;
fileInput.addEventListener('change', function () {
if (fileInput.files && fileInput.files.length > 0) {
enable(submitButton);
} else {
disable(submitButton);
}
});
}
}