Merge pull request #8150 from demarches-simplifiees/feat/8082

ETQ Instructeur, je souhaite voir : le numéro de dossier, le lien vers la démarche, la liste des administrateurs sur mon interface

app/components/dsfr/copy_button_component.rb

@@ -0,0 +1,7 @@
+class Dsfr::CopyButtonComponent < ApplicationComponent
+  def initialize(text:, title:, success: nil)
+    @text = text
+    @title = title
+    @success = success
+  end
+end

app/components/dsfr/copy_button_component/copy_button_component.fr.yml

@@ -0,0 +1,3 @@
+---
+fr:
+  copy_confirmation: Le lien est copié

app/components/dsfr/copy_button_component/copy_button_component.html.haml

@@ -0,0 +1,5 @@
+%span{ data: { controller: 'clipboard', clipboard_text_value: @text } }
+  %button{ data: { action: 'clipboard#copy' }, title: @title }
+    %span.fr-icon-clipboard-line
+  %span.fr-text--sm.hidden{ data: { clipboard_target: 'success' } }
+    = @success || t('.copy_confirmation')

app/controllers/instructeurs/procedures_controller.rb

@@ -244,6 +244,11 @@ module Instructeurs
       redirect_to instructeur_procedure_path(@procedure)
     end
 
+    def administrateurs
+      @procedure = procedure
+      @administrateurs = procedure.administrateurs
+    end
+
     private
 
     def create_bulk_message_mail(dossier_count, dossier_state)

app/javascript/controllers/clipboard_controller.ts

@@ -0,0 +1,34 @@
+import { Controller } from '@hotwired/stimulus';
+
+const SUCCESS_MESSAGE_TIMEOUT = 1000;
+
+export class ClipboardController extends Controller {
+  static values = { text: String };
+  static targets = ['success'];
+
+  declare readonly textValue: string;
+  declare readonly successTarget: HTMLElement;
+  declare readonly hasSuccessTarget: boolean;
+
+  #timer?: ReturnType<typeof setTimeout>;
+
+  disconnect(): void {
+    clearTimeout(this.#timer);
+  }
+
+  copy() {
+    navigator.clipboard
+      .writeText(this.textValue)
+      .then(() => this.displayCopyConfirmation());
+  }
+
+  private displayCopyConfirmation() {
+    if (this.hasSuccessTarget) {
+      this.successTarget.classList.remove('hidden');
+      clearTimeout(this.#timer);
+      this.#timer = setTimeout(() => {
+        this.successTarget.classList.add('hidden');
+      }, SUCCESS_MESSAGE_TIMEOUT);
+    }
+  }
+}

app/views/instructeurs/procedures/_header.html.haml

@@ -1,5 +1,8 @@
 .procedure-header
-  %h1= procedure_libelle procedure
+  .flex.clipboard-container
+    %h1
+      = "#{procedure_libelle procedure} - n°#{procedure.id}"
+    = render Dsfr::CopyButtonComponent.new(title: t('instructeurs.procedures.index.copy_link_button'), text: procedure_lien(procedure))
   = link_to t('instructeurs.dossiers.header.banner.notification_management'), email_notifications_instructeur_procedure_path(procedure), class: 'header-link'
   |
   = link_to t('instructeurs.dossiers.header.banner.statistics'), stats_instructeur_procedure_path(procedure), class: 'header-link'
@@ -16,3 +19,6 @@
   - if can_send_groupe_message?(procedure)
     |
     = link_to t('instructeurs.dossiers.header.banner.contact_users'), email_usagers_instructeur_procedure_path(procedure), class: 'header-link'
+
+  |
+  = link_to t('instructeurs.dossiers.header.banner.administrators_list'), administrateurs_instructeur_procedure_path(procedure), class: 'header-link'

app/views/instructeurs/procedures/_list.html.haml

@@ -4,9 +4,12 @@
       .procedure-logo{ style: "background-image: url(#{p.logo_url})" }
 
     .procedure-details
-      %p.fr-mb-2w
-        = procedure_badge(p)
-        = link_to(p.libelle, instructeur_procedure_path(p), class: "fr-link fr-ml-1w")
+      .flex.clipboard-container
+        %p.fr-mb-2w
+          = procedure_badge(p)
+          = link_to("#{p.libelle} - n°#{p.id}", instructeur_procedure_path(p), class: "fr-link fr-ml-1w")
+          = render Dsfr::CopyButtonComponent.new(title: t('instructeurs.procedures.index.copy_link_button'), text: procedure_lien(p))
+
       %ul.procedure-stats.flex
         %li
           %object

app/views/instructeurs/procedures/administrateurs.html.haml

@@ -0,0 +1,12 @@
+- content_for(:title, "Administrateurs de #{@procedure.libelle}")
+
+= render partial: 'administrateurs/breadcrumbs',
+  locals: { steps: [[@procedure.libelle.truncate_words(10), administrateurs_instructeur_procedure_path(@procedure)],['Administrateurs']] }
+
+.container
+  %h1
+    = t('instructeurs.procedures.administrators_list.title', procedure_id: @procedure.id, procedure_libelle: @procedure.libelle)
+
+  %ul
+    - @administrateurs.each do |admin|
+      %li= admin.email

config/locales/views/instructeurs/header/en.yml

@@ -11,6 +11,7 @@ en:
             termine: This file had been processed and will soon expire. So it will be deleted soon. If you want to keep it, you can dowload a PDF file of it.
           button_delay_expiration: "Keep for one more month"
           notification_management: notification management
+          administrators_list: administrators list
           statistics: statistics
           instructeurs: instructors
           contact_users: contact users (draft)

config/locales/views/instructeurs/header/fr.yml

@@ -11,6 +11,7 @@ fr:
             termine: Le traitement de ce dossier est terminé, mais il va bientôt expirer. Cela signifie qu’il va bientôt être supprimé. Si vous souhaitez conserver une trace, vous pouvez le télécharger au format PDF.
           button_delay_expiration: "Conserver un mois de plus"
           notification_management: gestion des notifications
+          administrators_list: voir les administrateurs
           statistics: statistiques
           instructeurs: instructeurs
           contact_users: contacter les usagers (brouillon)

config/locales/views/instructeurs/procedures/en.yml

@@ -9,8 +9,11 @@ en:
         archived: archived
         dossiers_close_to_expiration: expiring
         dossiers_supprimes_recemment: recently deleted
+        copy_link_button: Copy the procedure link to clipboard
       email_usagers:
         contact_users: Contact users (draft)
         notice: "You will send a message to %{dossiers_count} whose files are in draft, in the instructor groups : %{groupe_instructeurs}."
+      administrators_list:
+        title: "%{procedure_libelle} - n°%{procedure_id} - administrators"
       stats: 
         title: Statistics

config/locales/views/instructeurs/procedures/fr.yml

@@ -9,8 +9,11 @@ fr:
         archived: archivés
         dossiers_close_to_expiration: expirant
         dossiers_supprimes_recemment: supprimés
+        copy_link_button: Copier le lien de la démarche dans le presse papier
       email_usagers:
         contact_users: Contacter les usagers (brouillon)
         notice: "Vous allez envoyer un message à %{dossiers_count} dont les dossiers sont en brouillon, dans les groupes instructeurs : %{groupe_instructeurs}."
+      administrators_list:
+        title: "%{procedure_libelle} - n°%{procedure_id} - administrateurs"
       stats:
         title: Statistiques

config/routes.rb

@@ -377,6 +377,7 @@ Rails.application.routes.draw do
         post 'download_export'
         get 'stats'
         get 'email_notifications'
+        get 'administrateurs'
         patch 'update_email_notifications'
         get 'deleted_dossiers'
         get 'email_usagers'

spec/views/instructeur/procedures/_list.html.haml_spec.rb

@@ -27,5 +27,13 @@ describe 'instructeurs/procedures/_list.html.haml', type: :view do
     it 'does not contain link to expiring dossiers within procedure' do
       expect(subject).to have_selector(%Q(a[href="#{instructeur_procedure_path(procedure, statut: 'expirant')}"]), count: 0)
     end
+
+    it 'contains copy link' do
+      expect(subject).to have_selector('.fr-icon-clipboard-line')
+    end
+
+    it 'contains procedure number' do
+      expect(subject).to have_text(procedure.id)
+    end
   end
 end