From 7af934daf5739d091e9690f96b47b6eb789f6d35 Mon Sep 17 00:00:00 2001
From: Eric Leroy-Terquem <eric.leroyterquem@beta.gouv.fr>
Date: Mon, 30 Sep 2024 10:14:27 +0200
Subject: [PATCH] feat(instructeurs import): display submit button only if file
 uploaded

---
 .../import_component.html.haml                |  4 ++--
 .../enable_submit_if_uploaded_controller.tsx  | 21 +++++++++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 app/javascript/controllers/enable_submit_if_uploaded_controller.tsx

diff --git a/app/components/procedure/import_component/import_component.html.haml b/app/components/procedure/import_component/import_component.html.haml
index 14b741740..85eb3ffbf 100644
--- a/app/components/procedure/import_component/import_component.html.haml
+++ b/app/components/procedure/import_component/import_component.html.haml
@@ -8,7 +8,7 @@
     .notice
       = 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
         = t('.csv_import.file_to_import')
       .fr-download
@@ -20,4 +20,4 @@
         = t('.csv_import.file_size_limit', max_file_size: number_to_human_size(csv_max_size))
       .flex.column
         = 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
diff --git a/app/javascript/controllers/enable_submit_if_uploaded_controller.tsx b/app/javascript/controllers/enable_submit_if_uploaded_controller.tsx
new file mode 100644
index 000000000..7135f1da0
--- /dev/null
+++ b/app/javascript/controllers/enable_submit_if_uploaded_controller.tsx
@@ -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);
+      }
+    });
+  }
+}