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
mfo
parent
6d074abc3f
commit
10706a2712
5 changed files with 80 additions and 32 deletions
|
|
@ -44,8 +44,12 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-export .dropdown-content {
|
||||
.dropdown-export.dropdown-content {
|
||||
width: 450px;
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-label.dropdown-content {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 @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|
|
||||
- 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
|
||||
%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'
|
||||
|
|
|
|||
|
|
@ -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 &&
|
||||
|
|
|
|||
|
|
@ -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.')
|
||||
|
|
|
|||
Loading…
Reference in a new issue