Merge pull request #10878 from demarches-simplifiees/update-routage-interface

ETQ admin j'ai accès à une nouvelle interface de gestion des instructeurs

app/components/procedure/groupes_ajout_component/groupes_ajout_component.html.haml

@@ -1,9 +1,6 @@
 - content_for(:title, 'Ajout de groupes')
 %h1 Ajout de groupes d'instructeurs
 
-= render partial: 'administrateurs/groupe_instructeurs/import_export',
-    locals: { procedure: @procedure }
-
 %section
   = form_for :groupe_instructeur,
     method: :post do |f|

app/components/procedure/import_component.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+class Procedure::ImportComponent < ApplicationComponent
+  def initialize(procedure:)
+    @procedure = procedure
+  end
+
+  def scope
+    @procedure.routing_enabled? ? 'groupes' : 'instructeurs'
+  end
+
+  def template_file
+    if @procedure.routing_enabled?
+      '/csv/import-groupe-test.csv'
+    else
+      '/csv/import-instructeurs-test.csv'
+    end
+  end
+
+  def template_detail
+    "#{File.extname(csv_template.to_path).upcase.delete_prefix('.')} – #{number_to_human_size(csv_template.size)}"
+  end
+
+  def csv_max_size
+    Administrateurs::GroupeInstructeursController::CSV_MAX_SIZE
+  end
+
+  private
+
+  def csv_template
+    template_path.open
+  end
+
+  def template_path
+    Rails.public_path.join(template_file.delete_prefix('/'))
+  end
+end

app/components/procedure/import_component/import_component.en.yml

@@ -0,0 +1,14 @@
+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
+    file_size_limit: "File size limit : %{max_file_size}."
+    groupes:
+      title: Bulk Import / Export
+      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, 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>.

app/components/procedure/import_component/import_component.fr.yml

@@ -0,0 +1,15 @@
+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
+    file_size_limit: "Taille maximale : %{max_file_size}."
+    groupes:
+      title: Ajout de groupes / instructeurs avec import de fichier
+      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, 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>.

app/components/procedure/import_component/import_component.html.haml

@@ -0,0 +1,23 @@
+%section.fr-accordion.fr-mb-3w
+  %h3.fr-accordion__title
+    %button.fr-accordion__btn{ "aria-controls" => "accordion-106", "aria-expanded" => "false" }
+      = t(".csv_import.#{scope}.title")
+  .fr-collapse#accordion-106
+    .notice.fr-mb-1w
+      = t(".csv_import.#{scope}.notice_1_html", csv_max_size: number_to_human_size(csv_max_size))
+    .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", "data-controller" => "enable-submit-if-uploaded" do
+      %label.fr-label.font-weight-bold
+        = t('.csv_import.file_to_import')
+      .fr-download
+        = link_to template_file, {class: "fr-download__link", download: ''} do
+          = t('.csv_import.download_template')
+          %span.fr-download__detail
+            = template_detail
+      .fr-hint-text.fr-mb-1w
+        = 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', id: 'submit-button', data: { disable_with: "Envoi...", confirm: t('.csv_import.import_file_alert') }, disabled: true

app/components/procedure/instructeurs_management_component/instructeurs_management_component.en.yml

@@ -0,0 +1,6 @@
+---
+en:
+  title: Instructors management
+  notification_alert:
+    non_publiee: Even if your procedure is still in test / unpublished, all the instructors you add to the procedure will be notified by email.
+    publiee: All the instructors you add to the procedure will be notified by email.

app/components/procedure/instructeurs_management_component/instructeurs_management_component.fr.yml

@@ -0,0 +1,6 @@
+---
+fr:
+  title: Gestion des instructeurs
+  notification_alert:
+   non_publiee: Même si votre démarche est encore en test / non publiée, tous les instructeurs que vous ajouterez à la démarche seront notifiés par email.
+   publiee: Tous les instructeurs que vous ajouterez à la démarche seront notifiés par email.

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

@@ -1,8 +1,9 @@
-- content_for(:title, 'Instructeurs')
+- content_for(:title, t('.title'))
-%h1.fr-h2 Instructeurs
+%h1.fr-h2= t('.title')
+.fr-icon-mail-line.fr-alert.fr-mb-3w
+  %p= t(@procedure.publiee? ? '.notification_alert.publiee' : '.notification_alert.non_publiee')
 
-= render partial: 'administrateurs/groupe_instructeurs/import_export',
+= render Procedure::ImportComponent.new(procedure: @procedure)
-    locals: { procedure: @procedure }
 
 = render partial: 'administrateurs/groupe_instructeurs/instructeurs',
     locals: { procedure: @procedure,
@@ -11,5 +12,4 @@
     available_instructeur_emails: @available_instructeur_emails,
     disabled_as_super_admin: @disabled_as_super_admin }
 
-
 = render Procedure::FixedFooterComponent.new(procedure: @procedure)

app/components/procedure/instructeurs_menu_component/instructeurs_menu_component.en.yml

@@ -0,0 +1,5 @@
+---
+en:
+  instructeurs:
+    one: "%{count} instructor"
+    other: "%{count} instructors"

app/components/procedure/one_groupe_management_component/one_groupe_management_component.html.haml

@@ -1,8 +1,7 @@
 %div{ id: dom_id(@groupe_instructeur, :routing) }
   %h1 Paramètres du groupe
 
-  = render partial: 'administrateurs/groupe_instructeurs/import_export',
+  = render Procedure::ImportComponent.new(procedure: @procedure)
-      locals: { procedure: @procedure }
 
   = form_for @groupe_instructeur,
     url: admin_procedure_groupe_instructeur_path(@procedure, @groupe_instructeur),

app/controllers/administrateurs/groupe_instructeurs_controller.rb

@@ -322,44 +322,42 @@ module Administrateurs
     end
 
     def import
-      if procedure.publiee_or_close?
+      if !CSV_ACCEPTED_CONTENT_TYPES.include?(csv_file.content_type) && !CSV_ACCEPTED_CONTENT_TYPES.include?(marcel_content_type)
-        if !CSV_ACCEPTED_CONTENT_TYPES.include?(csv_file.content_type) && !CSV_ACCEPTED_CONTENT_TYPES.include?(marcel_content_type)
+        flash[:alert] = "Importation impossible : veuillez importer un fichier CSV"
-          flash[:alert] = "Importation impossible : veuillez importer un fichier CSV"
 
-        elsif csv_file.size > CSV_MAX_SIZE
+      elsif csv_file.size > CSV_MAX_SIZE
-          flash[:alert] = "Importation impossible : le poids du fichier est supérieur à #{number_to_human_size(CSV_MAX_SIZE)}"
+        flash[:alert] = "Importation impossible : le poids du fichier est supérieur à #{number_to_human_size(CSV_MAX_SIZE)}"
 
-        else
+      else
-          file = csv_file.read
+        file = csv_file.read
-          base_encoding = CharlockHolmes::EncodingDetector.detect(file)
+        base_encoding = CharlockHolmes::EncodingDetector.detect(file)
 
-          csv_content = ACSV::CSV.new_for_ruby3(file.encode("UTF-8", base_encoding[:encoding], invalid: :replace, replace: ""), headers: true, header_converters: :downcase).map(&:to_h)
+        csv_content = ACSV::CSV.new_for_ruby3(file.encode("UTF-8", base_encoding[:encoding], invalid: :replace, replace: ""), headers: true, header_converters: :downcase).map(&:to_h)
 
-          if csv_content.first.has_key?("groupe") && csv_content.first.has_key?("email")
+        if csv_content.first.has_key?("groupe") && csv_content.first.has_key?("email")
-            groupes_emails = csv_content.map { |r| r.to_h.slice('groupe', 'email') }
+          groupes_emails = csv_content.map { |r| r.to_h.slice('groupe', 'email') }
 
-            added_instructeurs_by_group, invalid_emails = InstructeursImportService.import_groupes(procedure, groupes_emails)
+          added_instructeurs_by_group, invalid_emails = InstructeursImportService.import_groupes(procedure, groupes_emails)
 
-            added_instructeurs_by_group.each do |groupe, added_instructeurs|
+          added_instructeurs_by_group.each do |groupe, added_instructeurs|
-              if added_instructeurs.present?
-                notify_instructeurs(groupe, added_instructeurs)
-              end
-              flash_message_for_import(invalid_emails)
-            end
-
-          elsif csv_content.first.has_key?("email") && !csv_content.map(&:to_h).first.keys.many? && procedure.groupe_instructeurs.one?
-            instructors_emails = csv_content.map(&:to_h)
-
-            added_instructeurs, invalid_emails = InstructeursImportService.import_instructeurs(procedure, instructors_emails)
             if added_instructeurs.present?
-              notify_instructeurs(groupe_instructeur, added_instructeurs)
+              notify_instructeurs(groupe, added_instructeurs)
             end
             flash_message_for_import(invalid_emails)
-          else
-            flash_message_for_invalid_csv
           end
-          redirect_to admin_procedure_groupe_instructeurs_path(procedure)
+
+        elsif csv_content.first.has_key?("email") && !csv_content.map(&:to_h).first.keys.many? && procedure.groupe_instructeurs.one?
+          instructors_emails = csv_content.map(&:to_h)
+
+          added_instructeurs, invalid_emails = InstructeursImportService.import_instructeurs(procedure, instructors_emails)
+          if added_instructeurs.present?
+            notify_instructeurs(groupe_instructeur, added_instructeurs)
+          end
+          flash_message_for_import(invalid_emails)
+        else
+          flash_message_for_invalid_csv
         end
+        redirect_to admin_procedure_groupe_instructeurs_path(procedure)
       end
     end
 

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);
+      }
+    });
+  }
+}

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

@@ -1,28 +0,0 @@
-- key = procedure.groupe_instructeurs.one? ? 'instructeurs' : 'groupes'
-%section.fr-accordion.fr-mb-3w
-  %h3.fr-accordion__title
-    %button.fr-accordion__btn{ "aria-controls" => "accordion-106", "aria-expanded" => "false" }
-      = t(".csv_import.#{key}.title")
-  .fr-collapse#accordion-106
-    - csv_max_size = Administrateurs::GroupeInstructeursController::CSV_MAX_SIZE
-    - if procedure.publiee_or_close?
-      %p.notice
-        = 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') }
-    - else
-      %p.mt-4.form.font-weight-bold.mb-2.text-lg
-        = t(".csv_import.#{key}.title")
-      %p.notice
-        = t('.csv_import.import_file_procedure_not_published')
-    - if procedure.groupe_instructeurs.many?
-      .flex.justify-between.align-center.mt-4
-        %div
-          = t(".existing_groupe", count: procedure.groupe_instructeurs.count)
-        = button_to "Exporter au format CSV",
-          export_groupe_instructeurs_admin_procedure_groupe_instructeurs_path(procedure, format: :csv),
-          method: :get,
-          class: 'fr-btn fr-btn--secondary'

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

@@ -1,11 +1,12 @@
 
 .card
   = render Procedure::InvitationWithTypoComponent.new(maybe_typos: @maybe_typos, url: add_instructeur_admin_procedure_groupe_instructeur_path(@procedure, groupe_instructeur.id), title: "Avant d'ajouter l'email, veuillez confirmer" )
-  .card-title Affectation des instructeurs
+  .card-title= t('.instructeur_assignation')
   = form_for :instructeur, url: { action: :add_instructeur, id: groupe_instructeur.id }, html: { class: 'form' } do |f|
     .instructeur-wrapper
       - if !procedure.routing_enabled?
-        %p Entrez les adresses email des instructeurs que vous souhaitez affecter à cette démarche
+        %p= t('.instructeur_emails')
+        %p.fr-hint-text= t('.copy_paste_hint')
 
       - if disabled_as_super_admin
         = f.select :emails, available_instructeur_emails, {}, disabled: disabled_as_super_admin, id: 'instructeur_emails'
@@ -13,25 +14,33 @@
         %react-fragment
           = render ReactComponent.new 'ComboBox/MultiComboBox', items: available_instructeur_emails, id: 'instructeur_emails', name: 'emails[]', allows_custom_value: true, 'aria-label': 'Emails'
 
-      = f.submit 'Affecter', class: 'fr-btn', disabled: disabled_as_super_admin
+      = f.submit t('.assign'), class: 'fr-btn fr-btn--tertiary', disabled: disabled_as_super_admin
 
-  %table.fr-table.fr-mt-2w.width-100
+  %hr.fr-mt-4w
+
+  .flex.justify-between.align-baseline
+    .card-title= t('.assigned_instructeur', count: instructeurs.count)
+    = button_to export_groupe_instructeurs_admin_procedure_groupe_instructeurs_path(procedure, format: :csv), method: :get, class: 'fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-download-line' do
+      Exporter la liste (.CSV)
+
+  %table.fr-table.fr-table--bordered.width-100
     %thead
       %tr
-        %th{ colspan: 2 }= t('.assigned_instructeur', count: instructeurs.count)
+        %th= t('.title')
+        %th.text-right= t('.actions')
     %tbody
       - instructeurs.each do |instructeur|
         %tr
           %td
-            = dsfr_icon('fr-icon-user-fill')
+            = dsfr_icon('fr-icon-user-line')
             #{instructeur.email}
 
           - confirmation_message = procedure.routing_enabled? ? "Êtes-vous sûr de vouloir retirer l’instructeur « #{instructeur.email} » du groupe « #{groupe_instructeur.label} » ?" : "Êtes-vous sûr de vouloir retirer l’instructeur « #{instructeur.email} » de la démarche ?"
-          %td.actions= button_to 'Retirer',
+          %td.actions= button_to t('.remove'),
             { action: :remove_instructeur, id: groupe_instructeur.id },
             { method: :delete,
               data: { confirm: confirmation_message },
               params: { instructeur: { id: instructeur.id }},
-              class: 'fr-btn fr-btn--secondary' }
+              class: 'fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-subtract-line' }
 
   = paginate instructeurs, views_prefix: 'shared'

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

@@ -20,22 +20,13 @@ en:
           one: "%{count} group exist"
           other: "%{count} groups exist"
       instructeurs:
+        title: Instructors
         assigned_instructeur:
-          one: "%{count} instructor is assigned"
+          one: "%{count} instructor assigned"
-          other: "%{count} instructors are assigned"
+          other: "%{count} instructors assigned"
-      import_export:
+        instructeur_assignation: Instructors assignment
-        csv_import:
+        assign: Assign
-          import_file: Importer le fichier
+        remove: Remove
-          import_file_alert: Tous les instructeurs ajoutés à la procédure vont être notifiés par email. Voulez-vous continuer ?
+        instructeur_emails: Email addresses of the instructors you want to assign to this procedure
-          import_file_procedure_not_published: L’import par fichier CSV est disponible une fois la démarche publiée
+        copy_paste_hint: "You can enter addresses individually, or copy-paste a list of addresses separated by semicolons into the field below (example: adress1@mail.com; adress2@mail.com; adress3@mail.com)."
-          groupes:
+        actions: Remove
-            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 existants. Il permet uniquement d'en ajouter. Pour supprimer un groupe, allez dans la page dédiée et cliquez sur le bouton « Supprimer ».
-          instructeurs:
-            title: Import en masse
-            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. Pour supprimer un instructeur, cliquez sur le bouton « Retirer ».
-        existing_groupe:
-          one: "%{count} groupe existe"
-          other: "%{count} groupes existent"

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

@@ -27,25 +27,17 @@ fr:
           one: "%{count} groupe existe"
           other: "%{count} groupes existent"
       instructeurs:
+        title: Instructeurs
         assigned_instructeur:
-          one: "%{count} instructeur est affecté"
+          one: "%{count} instructeur affecté"
-          other: "%{count} instructeurs sont affectés"
+          other: "%{count} instructeurs affectés"
-      import_export:
+        instructeur_assignation: Affectation des instructeurs
-        csv_import:
+        assign: Affecter
-          import_file: Importer le fichier
+        remove: Retirer
-          import_file_alert: Tous les instructeurs ajoutés à la procédure vont être notifiés par email. Voulez-vous continuer ?
+        instructeur_emails: Adresse électronique des instructeurs que vous souhaitez affecter à cette démarche
-          import_file_procedure_not_published: L’import par fichier CSV est disponible une fois la démarche publiée
+        copy_paste_hint: "Vous pouvez saisir les adresses individuellement, ou bien copier-coller dans le champ ci-dessous une liste d’adresses séparées par des points-virgules (exemple : adresse1@mail.com; adresse2@mail.com; adresse3@mail.com)."
-          groupes:
+        actions: Retirer
-            title: Import / Export en masse
+      import:
-            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.
-          instructeurs:
-            title: Import en masse
-            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.
-        existing_groupe:
-          one: "%{count} groupe existe"
-          other: "%{count} groupes existent"
         groupe:
           one: "%{count} groupe"
           other: "%{count} groupes"

public/csv/en/import-groupe-test.csv

@@ -1,5 +0,0 @@
-Email,Groupe
-camilia@gouv.fr,Nord
-kara@gouv.fr,Finistère
-simon@gouv.fr,Isère
-pauline@gouv.fr,Bouches-du-Rhône

spec/system/administrateurs/procedure_groupe_instructeur_spec.rb

@@ -19,7 +19,7 @@ describe 'Manage procedure instructeurs', js: true do
     scenario 'it works' do
       visit admin_procedure_path(procedure)
       find('#groupe-instructeurs').click
-      expect(page).to have_css("h1", text: "Instructeurs")
+      expect(page).to have_css("h1", text: "Gestion des instructeurs")
     end
   end
 

spec/system/routing/rules_full_scenario_spec.rb

@@ -75,7 +75,7 @@ describe 'The routing with rules', js: true do
     alain = User.find_by(email: 'alain@gouv.fr').instructeur
 
     # add inactive groupe
-    click_on 'Ajout de groupes'
+    visit ajout_admin_procedure_groupe_instructeurs_path(procedure)
     fill_in 'Nouveau groupe', with: 'non visible car inactif'
     click_on 'Ajouter'
     expect(page).to have_text('Le groupe d’instructeurs « non visible car inactif » a été créé. ')
@@ -121,7 +121,7 @@ describe 'The routing with rules', js: true do
     procedure.groupe_instructeurs.where(closed: false).each { |gi| wait_until { gi.reload.routing_rule.present? } }
 
     # add a group without routing rules
-    click_on 'Ajout de groupes'
+    visit ajout_admin_procedure_groupe_instructeurs_path(procedure)
     fill_in 'Nouveau groupe', with: 'artistique'
     click_on 'Ajouter'
     expect(page).to have_text('Le groupe d’instructeurs « artistique » a été créé. ')