add dropdown component for traditional or with export_template export

Co-authored-by: mfo <mfo@users.noreply.github.com>

app/assets/stylesheets/instructeur.scss

@@ -44,8 +44,12 @@
   position: relative;
 }
 
-.dropdown-export .dropdown-content {
+.dropdown-export.dropdown-content {
   width: 450px;
+
+  a {
+    text-decoration: underline;
+  }
 }
 
 .dropdown-label.dropdown-content {

app/components/dossiers/export_dropdown_component.rb

@@ -3,13 +3,14 @@
 class Dossiers::ExportDropdownComponent < ApplicationComponent
   include ApplicationHelper
 
-  def initialize(procedure:, export_templates: nil, statut: nil, count: nil, class_btn: nil, export_url: nil)
+  def initialize(procedure:, export_templates: nil, statut: nil, count: nil, class_btn: nil, export_url: nil, show_export_template_tab: true)
     @procedure = procedure
     @export_templates = export_templates
     @statut = statut
     @count = count
     @class_btn = class_btn
     @export_url = export_url
+    @show_export_template_tab = show_export_template_tab
   end
 
   def formats

app/components/dossiers/export_dropdown_component/export_dropdown_component.html.haml

@@ -1,26 +1,68 @@
-= render Dropdown::MenuComponent.new(wrapper: :span, button_options: { class: ['fr-btn--sm', @class_btn.present? ? @class_btn : 'fr-btn--secondary']}, menu_options: { id: @count.nil? ? "download_menu" : "download_all_menu", class: ['dropdown-export'] }) do |menu|
+= render Dropdown::MenuComponent.new(wrapper: :div, button_options: { class: ['fr-btn--sm', @class_btn.present? ? @class_btn : 'fr-btn--secondary']}, menu_options: { id: @count.nil? ? "download_menu" : "download_all_menu", class: ['dropdown-export'] }) do |menu|
-  - menu.with_menu_header_html do
-    %p.menu-component-header.fr-px-2w.fr-pt-2w.fr-mb-0
-      %span.fr-icon-info-line{ aria: { hidden: true } }
-        Des macros ? Lisez la
-        = link_to('doc', t('.macros_doc.url'),
-          title: t('.macros_doc.title'),
-          **external_link_attributes)
-
   - menu.with_button_inner_html do
     = @count.nil? ? t(".download_all") : t(".download", count: @count)
 
-  - formats.each do |format|
+  - menu.with_form do
-    - menu.with_item do
+    .fr-container
-      = link_to download_export_path(export_format: format), role: 'menuitem', data: { turbo_method: :post, turbo: true } do
+      .fr-tabs.fr-my-3w
-        = t(".everything_#{format}_html")
+        %ul.fr-tabs__list{ role: 'tablist' }
+          %li{ role: 'presentation' }
+            %button.fr-tabs__tab.fr-tabs__tab--icon-left{ id: "tabpanel-standard#{@count}", tabindex: "0", role: "tab", "aria-selected": "true", "aria-controls": "tabpanel-standard#{@count}-panel" } Standard
 
-  - if @procedure.feature_enabled?(:export_template)
+          - if @show_export_template_tab
+            %li{ role: 'presentation' }
+              %button.fr-tabs__tab.fr-tabs__tab--icon-left{ id: "tabpanel-template#{@count}", tabindex: "-1", role: "tab", "aria-selected": "false", "aria-controls": "tabpanel-template#{@count}-panel" } A partir d'un modèle
+
+        .fr-tabs__panel.fr-pb-8w.fr-tabs__panel--selected{ id: "tabpanel-standard#{@count}-panel", role: "tabpanel", "aria-labelledby": "tabpanel-standard#{@count}", tabindex: "0" }
+          = form_with url: download_export_path, namespace: "export#{@count}", data: { turbo_method: :post, turbo: true } do |f|
+            = f.hidden_field :statut, value: @statut
+            %fieldset.fr-fieldset#radio-hint{ "aria-labelledby": "radio-hint-legend" }
+              %legend.fr-fieldset__legend--regular.fr-fieldset__legend#radio-hint-legend Séletionner le format de l'export
+              .fr-fieldset__element
+                .fr-radio-group
+                  = f.radio_button :export_format, 'xlsx'
+                  = f.label :export_format_xlsx, 'Fichier xlsx'
+              .fr-fieldset__element
+                .fr-radio-group
+                  = f.radio_button :export_format, 'ods'
+                  = f.label :export_format_ods, 'Fichier ods'
+              .fr-fieldset__element
+                .fr-radio-group
+                  = f.radio_button :export_format, 'csv'
+                  = f.label :export_format_csv do
+                    Fichier csv
+                    %span.fr-hint-text Uniquement les dossiers, sans les champs répétables
+              .fr-fieldset__element
+                .fr-radio-group
+                  = f.radio_button :export_format, 'zip'
+                  = f.label :export_format_zip do
+                    Fichier zip
+                    %span.fr-hint-text ne contient pas l'horodatage ni le journal de log
+
+              .fr-fieldset__element
+                %ul.fr-btns-group.fr-btns-group--sm.fr-btns-group--inline
+                  %li
+                    %button.fr-btn.fr-btn--secondary{ type: 'button', "data-action": "click->menu-button#close" } Annuler
+                  %li
+                    = f.submit "Demander l'export", "data-action": "click->menu-button#close", class: 'fr-btn'
+
+
+        - if @show_export_template_tab
+          .fr-tabs__panel.fr-pr-3w.fr-pb-8w{ id: "tabpanel-template#{@count}-panel", role: "tabpanel", "aria-labelledby": "tabpanel-template", tabindex: "0" }
+            = form_with url: download_export_path, namespace: "export_template_#{@count}", data: { turbo_method: :post, turbo: true }  do |f|
+              = f.hidden_field :statut, value: @statut
+              .fr-select-group
                 - if export_templates.present?
-      - export_templates.each do |export_template|
+                  %label.fr-label{ for: 'select' }
-        - menu.with_item do
+                    Sélectionner le modèle d'export
-          = link_to download_export_path(export_template_id: export_template.id), role: 'menuitem', data: { turbo_method: :post, turbo: true } do
+                    = f.collection_select :export_template_id, export_templates, :id, :name, {}, { class: "fr-select fr-mb-2w" }
-            = "Exporter à partir du modèle #{export_template.name}"
+                - else
-      - menu.with_item do
+                  %p
-        = link_to [:new, :instructeur, @procedure, :export_template], role: 'menuitem' do
+                    %i Aucun modèle configuré
-          Ajouter un modèle d'export
+                %p
+                  = link_to "Configurer les modèles d'export", exports_instructeur_procedure_path(procedure_id: params[:procedure_id]), class: 'fr-link'
+                %ul.fr-btns-group.fr-btns-group--sm.fr-btns-group--inline
+                  %li
+                    %button.fr-btn.fr-btn--secondary{ type: 'button', "data-action": "click->menu-button#close" } Annuler
+                  %li
+                    = f.submit "Demander l'export", "data-action": "click->menu-button#close", class: 'fr-btn'

app/javascript/controllers/menu_button_controller.ts

@@ -61,6 +61,12 @@ export class MenuButtonController extends ApplicationController {
     });
   }
 
+  close() {
+    this.buttonTarget.setAttribute('aria-expanded', 'false');
+    this.menuTarget.parentElement?.classList.remove('open');
+    this.setFocusToMenuitem(null);
+  }
+
   private open(focusMenuItem: 'first' | 'last' = 'first') {
     this.buttonTarget.setAttribute('aria-expanded', 'true');
     this.menuTarget.parentElement?.classList.add('open');
@@ -75,12 +81,6 @@ export class MenuButtonController extends ApplicationController {
     });
   }
 
-  private close() {
-    this.buttonTarget.setAttribute('aria-expanded', 'false');
-    this.menuTarget.parentElement?.classList.remove('open');
-    this.setFocusToMenuitem(null);
-  }
-
   private isClickOutside(target: HTMLElement) {
     return (
       target.isConnected &&

spec/system/instructeurs/instruction_spec.rb

@@ -132,8 +132,9 @@ describe 'Instructing a dossier:', js: true do
     test_statut_bar(a_suivre: 1, tous_les_dossiers: 1)
 
     click_on "Télécharger un dossier"
-    within(:css, '.dossiers-export') do
+    within(:css, '#tabpanel-standard1-panel') do
-      click_on "Demander un export au format .csv"
+      choose "Fichier csv", allow_label_click: true
+      click_on "Demander l'export"
     end
 
     expect(page).to have_text('Nous générons cet export.')