diff --git a/app/assets/stylesheets/instructeur.scss b/app/assets/stylesheets/instructeur.scss index b42345d6a..1b8105aed 100644 --- a/app/assets/stylesheets/instructeur.scss +++ b/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 { diff --git a/app/components/dossiers/export_dropdown_component.rb b/app/components/dossiers/export_dropdown_component.rb index c970576e3..9710c3704 100644 --- a/app/components/dossiers/export_dropdown_component.rb +++ b/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 diff --git a/app/components/dossiers/export_dropdown_component/export_dropdown_component.html.haml b/app/components/dossiers/export_dropdown_component/export_dropdown_component.html.haml index 441149066..e9c41e5be 100644 --- a/app/components/dossiers/export_dropdown_component/export_dropdown_component.html.haml +++ b/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| - - 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) - += 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_button_inner_html do = @count.nil? ? t(".download_all") : t(".download", count: @count) - - formats.each do |format| - - menu.with_item do - = link_to download_export_path(export_format: format), role: 'menuitem', data: { turbo_method: :post, turbo: true } do - = t(".everything_#{format}_html") + - menu.with_form do + .fr-container + .fr-tabs.fr-my-3w + %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 export_templates.present? - - export_templates.each do |export_template| - - menu.with_item do - = link_to download_export_path(export_template_id: export_template.id), role: 'menuitem', data: { turbo_method: :post, turbo: true } do - = "Exporter à partir du modèle #{export_template.name}" - - menu.with_item do - = link_to [:new, :instructeur, @procedure, :export_template], role: 'menuitem' do - Ajouter un modèle d'export + - 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? + %label.fr-label{ for: 'select' } + Sélectionner le modèle d'export + = f.collection_select :export_template_id, export_templates, :id, :name, {}, { class: "fr-select fr-mb-2w" } + - else + %p + %i Aucun modèle configuré + %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' diff --git a/app/javascript/controllers/menu_button_controller.ts b/app/javascript/controllers/menu_button_controller.ts index a5edf9b53..b89b9025c 100644 --- a/app/javascript/controllers/menu_button_controller.ts +++ b/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 && diff --git a/spec/system/instructeurs/instruction_spec.rb b/spec/system/instructeurs/instruction_spec.rb index 2473c352e..bfd9447d2 100644 --- a/spec/system/instructeurs/instruction_spec.rb +++ b/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 - click_on "Demander un export au format .csv" + within(:css, '#tabpanel-standard1-panel') do + choose "Fichier csv", allow_label_click: true + click_on "Demander l'export" end expect(page).to have_text('Nous générons cet export.')