add dropdown component for traditional or with export_template export

Co-authored-by: mfo <mfo@users.noreply.github.com>
This commit is contained in:
Christophe Robillard 2024-10-25 15:00:27 +02:00 committed by mfo
parent 6d074abc3f
commit 10706a2712
No known key found for this signature in database
GPG key ID: 7CE3E1F5B794A8EC
5 changed files with 80 additions and 32 deletions

View file

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

View file

@ -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

View file

@ -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'

View file

@ -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 &&

View file

@ -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.')