style(instructeurs import): update import card

app/components/procedure/instructeurs_management_component.rb

@@ -8,4 +8,20 @@ class Procedure::InstructeursManagementComponent < ApplicationComponent
     @available_instructeur_emails = available_instructeur_emails
     @disabled_as_super_admin = disabled_as_super_admin
   end
+
+  def csv_template
+    template_path.open
+  end
+
+  def template_path
+    Rails.public_path.join('csv/import-instructeurs-test.csv')
+  end
+
+  def template_url
+    template_path.to_s
+  end
+
+  def template_detail
+    "#{File.extname(csv_template.to_path).upcase.delete_prefix('.')} – #{number_to_human_size(csv_template.size)}"
+  end
 end

app/components/procedure/instructeurs_management_component/instructeurs_management_component.html.haml

@@ -2,7 +2,7 @@
 %h1.fr-h2=t('.title')
 
 = render partial: 'administrateurs/groupe_instructeurs/import_export',
-    locals: { procedure: @procedure }
+    locals: { procedure: @procedure, template_url:, template_detail: }
 
 = render partial: 'administrateurs/groupe_instructeurs/instructeurs',
     locals: { procedure: @procedure,

app/views/administrateurs/groupe_instructeurs/_import_export.html.haml

@@ -5,13 +5,23 @@
       = t(".csv_import.#{key}.title")
   .fr-collapse#accordion-106
     - csv_max_size = Administrateurs::GroupeInstructeursController::CSV_MAX_SIZE
-    %p.notice
+    .notice.fr-mb-1w
       = t(".csv_import.#{key}.notice_1_html", csv_max_size: number_to_human_size(csv_max_size))
-    %p.notice
-      = t(".csv_import.#{key}.notice_2")
-    = form_tag import_admin_procedure_groupe_instructeurs_path(procedure), method: :post, multipart: true, class: "mt-4 form flex justify-between align-center" do
-      = file_field_tag :csv_file, required: true, accept: 'text/csv', size: "1"
-      = submit_tag t('.csv_import.import_file'), class: 'fr-btn fr-btn--secondary', data: { disable_with: "Envoi...", confirm: t('.csv_import.import_file_alert') }
+    .notice
+      = t(".csv_import.#{key}.notice_2_html")
+
+    = form_tag import_admin_procedure_groupe_instructeurs_path(procedure), method: :post, multipart: true, class: "mt-4 column" do
+      %label.fr-label.font-weight-bold
+        = t('.csv_import.file_to_import')
+      .fr-download
+        = link_to template_url, {class: "fr-download__link", download: ''} do
+          = t('.csv_import.download_template')
+          %span.fr-download__detail
+            = template_detail
+      .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--secondary', data: { disable_with: "Envoi...", confirm: t('.csv_import.import_file_alert') }
+
     - if procedure.groupe_instructeurs.many?
       .flex.justify-between.align-center.mt-4
         %div

config/locales/views/administrateurs/groupe_instructeurs/en.yml

@@ -32,14 +32,15 @@ en:
         csv_import:
           import_file: Import file
           import_file_alert: All instructors added to the procedure will be notified by email. Do you want to continue?
+          file_to_import: File to import
           groupes:
             title: Bulk Import / Export
-            notice_1_html: For the import, your csv file must have 2 columns (Group, Email) and be comma separated (<a href=/csv/en/import-groupe-test.csv>example file</a>). The file size must be less than %{csv_max_size}.
-            notice_2: The import does not overwrite existing groups and instructors. It only allows you to add them.
+            notice_1_html: For the import, your csv file must have <strong>2 columns (Group, Email)</strong> (see file model below). The file size must be less than %{csv_max_size}.
+            notice_2_html: The import does not overwrite existing groups and instructors. It only allows you to <strong>add them</strong>.
           instructeurs:
             title: Adding instructors with file import
-            notice_1_html: For the import, the csv file must have only 1 column (Email) with one instructor email address per line (<a href=/csv/import-instructeurs-test.csv>example file</a>). The file size must be less than %{csv_max_size}.
-            notice_2: The import does not overwrite existing instructors. It only allows you to add them.
+            notice_1_html: For the import, your csv file must have <strong>1 column (Email)</strong> listing the email addresses of the instructors (see file model below). The file size must be less than %{csv_max_size}.
+            notice_2_html: The import does not overwrite existing instructors. It only allows you to <strong>add them</strong>.
         existing_groupe:
           one: "%{count} groupe existe"
           other: "%{count} groupes existent"

config/locales/views/administrateurs/groupe_instructeurs/fr.yml

@@ -39,14 +39,16 @@ fr:
         csv_import:
           import_file: Importer le fichier
           import_file_alert: Tous les instructeurs ajoutés à la procédure vont être notifiés par email. Voulez-vous continuer ?
+          file_to_import: Fichier à importer
+          download_template: Modèle à télécharger
           groupes:
             title: Import / Export en masse
-            notice_1_html: Pour l’import, votre fichier csv doit comporter 2 colonnes (Groupe, Email) et être séparé par des virgules (<a href=/csv/fr/import-groupe-test.csv>exemple de fichier</a>). Le poids du fichier doit être inférieur à %{csv_max_size}.
-            notice_2: L’import n’écrase pas les groupes et instructeurs existants. Il permet uniquement d'en ajouter.
+            notice_1_html: Pour l’import, votre fichier csv doit comporter <strong>2 colonnes (Groupe, Email)</strong> (voir modèle de fichier ci-dessous). Le poids du fichier doit être inférieur à %{csv_max_size}.
+            notice_2_html: L’import n’écrase pas les groupes et instructeurs existants. Il permet uniquement <strong>d’en ajouter</strong>.
           instructeurs:
             title: Ajout d’instructeurs avec import de fichier
-            notice_1_html: Pour l’import, le fichier csv doit comporter 1 seule colonne (Email) avec une adresse email d’instructeur par ligne (<a href=/csv/import-instructeurs-test.csv>exemple de fichier</a>). Le poids du fichier doit être inférieur à %{csv_max_size}.
-            notice_2: L’import n’écrase pas les instructeurs existants. Il permet uniquement d'en ajouter.
+            notice_1_html: Pour l’import, votre fichier csv doit comporter <strong>1 seule colonne (Email)</strong> listant les adresses emails des instructeurs (voir modèle de fichier ci-dessous). Le poids du fichier doit être inférieur à %{csv_max_size}.
+            notice_2_html: L’import n’écrase pas les instructeurs existants. Il permet uniquement <strong>d’en ajouter</strong>.
         existing_groupe:
           one: "%{count} groupe existe"
           other: "%{count} groupes existent"