DGNum/demarches-normaliennes
14
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

refactor(dossiers): table in new dsfr design

Browse source 
- remove obsolete css
- handle check / check all dsfr UI
- min height hack does not work anymore (pending a new solution)
This commit is contained in:
Colin Darie 2024-11-12 17:04:30 +01:00
parent 753c602802
commit e7768bbf4b
No known key found for this signature in database
GPG key ID: 4FB865FDBCA4BCC4
15 changed files with 228 additions and 282 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
app/assets/stylesheets/dossiers_table.scss
View file

@ -1,70 +1,20 @@
@import 'colors';
@import 'constants';
.table.dossiers-table {
font-size: 14px;
th {
padding: (2 * $default-spacer) $default-spacer;
}
.dossiers-table {
a {
background-image: none; // remove DSFR underline
}
.caret-icon {
vertical-align: top;
margin-top: 9px;
margin-left: 4px;
}
.cell-link {
// In order to have identical height in the table header and the table rows,
// we compensate for the height difference between the biggest element of the header
// (the Personnaliser button, 38px) and the biggest cell-link element of the rows (the label, 28px)
padding: calc((2 * #{$default-spacer}) + ((38px - 28px) / 2))
$default-spacer;
display: block;
}
.deleted-cell {
padding: (2 * $default-spacer) $default-spacer;
}
.notification-col {
a {
font-size: 16px;
}
}
.number-col,
.fr-badge {
white-space: nowrap;
}
.text-center {
text-align: center;
}
.status-col {
width: 175px;
}
.updated-at-col {
width: 110px;
}
.follow-col {
width: 450px;
.fr-btn {
margin-bottom: 0;
}
}
.no-border {
background-image: none;
}
}
.file-hidden-by-user {
@ -74,7 +24,3 @@
background-color: rgba(242, 137, 0, 0.6) !important;
}
}
table.display-table {
display: table;
}

4
app/assets/stylesheets/flex.scss
View file

@ -56,6 +56,10 @@
flex-grow: 1;
}
.flex-no-grow {
flex-grow: 0;
}
.flex-no-shrink {
flex-shrink: 0;
}

14
app/assets/stylesheets/procedure_show.scss
View file

@ -9,15 +9,6 @@
}
#procedure-show {
.titre-dossiers {
text-align: center;
}
.dossiers-table {
margin-top: $default-spacer;
margin-bottom: 3 * $default-spacer;
}
.procedure-actions {
margin-left: auto;
flex-shrink: 0;
@ -48,9 +39,4 @@
.fr-ds-combobox__multiple {
margin-bottom: $default-fields-spacer;
}
// fix/dsfr
.fr-checkbox-group.fix-dsfr-notified-toggle-component {
margin-top: -0.5rem;
}
}

11
app/assets/stylesheets/table.scss
View file

@ -27,12 +27,6 @@
}
}
&.hoverable {
tbody tr:hover {
background-color: var(--hover);
}
}
&.vertical {
font-size: 16px;
line-height: 22px;
@ -66,8 +60,3 @@
}
}
}
// Hacky css to display dropdown "customize table" for table with only 1 or 2 lines
table.min-height-300 {
min-height: 300px;
}

4
app/components/dossiers/batch_select_more_component/batch_select_more_component.html.haml
View file

@ -1,5 +1,5 @@
%tr#js_batch_select_more.fr-background-alt--blue-france.hidden
%td.fr-py-2w.text-center{ colspan: 100 }
%tr#js_batch_select_more.hidden
%td.fr-py-2w.fr-cell--center.fr-background-alt--blue-france{ colspan: 100 }
#not_selected
%p{ role: "status" }
= t('.pagination_files_selected_html')

2
app/components/dossiers/deleted_dossiers_component/deleted_dossiers_component.html.haml
View file

@ -20,7 +20,7 @@
%table
%thead
%tr
%th.number-col N° dossier
%th N° dossier
%th Libellé de la démarche
%th Raison de suppression
%th Date de suppression

1
app/components/instructeurs/column_table_header_component.rb
View file

@ -10,7 +10,6 @@ class Instructeurs::ColumnTableHeaderComponent < ApplicationComponent
private
def classname(column)
return 'status-col' if column.dossier_state?
return 'number-col' if column.dossier_id?
return 'sva-col' if column.column == 'sva_svr_decision_on'
end

10
app/javascript/controllers/batch_operation_controller.ts
View file

@ -17,10 +17,16 @@ export class BatchOperationController extends ApplicationController {
onCheckAll(event: Event) {
const target = event.target as HTMLInputElement;
this.inputTargets.forEach((e) => (e.checked = target.checked));
this.inputTargets.forEach((e) => {
e.checked = target.checked;
e.dispatchEvent(new Event('change')); // dispatch change for dsfr checkbox behavior
});
this.toggleSubmitButtonWhenNeeded();
const pagination = document.querySelector('tfoot .fr-pagination');
const pagination = document.querySelector(
'.fr-table__footer .fr-pagination'
);
if (pagination) {
displayNotice(this.inputTargets);
}

1
app/javascript/shared/dsfr.ts
View file

@ -4,6 +4,7 @@ import '@gouvfr/dsfr/dist/scheme/scheme.module';
import '@gouvfr/dsfr/dist/component/display/display.module';
import '@gouvfr/dsfr/dist/component/toggle/toggle.module';
import '@gouvfr/dsfr/dist/component/breadcrumb/breadcrumb.module';
import '@gouvfr/dsfr/dist/component/checkbox/checkbox.module';
import '@gouvfr/dsfr/dist/component/modal/modal.module';
import '@gouvfr/dsfr/dist/component/navigation/navigation.module';
import '@gouvfr/dsfr/dist/component/segmented/segmented.module';

12
app/views/experts/avis/procedure.html.haml
View file

@ -29,10 +29,14 @@
.fr-container
- if @avis.present?
%table.table.dossiers-table.hoverable
.fr-table.fr-table--no-scroll.fr-table--bordered
.fr-table__wrapper
.fr-table__container
.fr-table__content
%table.dossiers-table
%thead
%tr
%th.number-col Nº dossier
%th Nº dossier
%th Demandeur
%th Démarche
%tbody
@ -43,6 +47,10 @@
= avis.dossier.id
%td= link_to(avis.dossier.user_email_for(:display), expert_avis_path(avis.procedure, avis), class: 'cell-link')
%td= link_to(avis.procedure.libelle, expert_avis_path(avis.procedure, avis), class: 'cell-link')
.fr-table__footer
.fr-table__footer--start
.fr-table__footer--middle
= paginate @avis, views_prefix: 'shared'
.fr-table__footer--end.flex-no-grow
- else
%h2.empty-text Aucun avis

47
app/views/instructeurs/procedures/show.html.haml
View file

@ -82,19 +82,24 @@
= render batch_operation_component
.fr-table.fr-table--bordered
%table.table.dossiers-table.hoverable.min-height-300
.fr-table__wrapper
.fr-table__container
.fr-table__content
%table#table-dossiers.dossiers-table
%thead
%tr
- if batch_operation_component.render?
%th.text-center
%th.fr-cell--fixed{ role: 'columnheader', scope: 'col' }
.fr-checkbox-group.fr-checkbox-group--sm
%input{ type: "checkbox", disabled: @disable_checkbox_all, checked: @disable_checkbox_all, data: { action: "batch-operation#onCheckAll" }, id: dom_id(BatchOperation.new, :checkbox_all), aria: { label: t('views.instructeurs.dossiers.select_all') } }
= label_tag dom_id(BatchOperation.new, :checkbox_all), "Sélectionner tous les dossiers", class: 'fr-label'
= render Instructeurs::ColumnTableHeaderComponent.new(procedure_presentation: @procedure_presentation)
%th.follow-col
%th.follow-col{ scope: 'col' }
Actions
%th.text-right
%th.fr-cell--right
= render Dropdown::MenuComponent.new(wrapper: :span, button_options: { class: ['fr-btn--sm', 'fr-btn--tertiary-no-outline', 'fr-btn--icon-right', 'fr-icon-settings-5-line'] }, menu_options: { id: 'custom-menu' }) do |menu|
- menu.with_button_inner_html do
= t('views.instructeurs.dossiers.personalize')
@ -106,13 +111,21 @@
- @projected_dossiers.each do |p|
- path = instructeur_dossier_path(@procedure, p.dossier_id)
%tr{ class: [p.hidden_by_user_at.present? && "file-hidden-by-user"] }
%tr{ class: class_names("file-hidden-by-user" => p.hidden_by_user_at.present?), id: "table-dossiers-row-#{p.dossier_id}", "aria-selected" => "false", "data-row-key" => p.dossier_id }
- if batch_operation_component.render?
%td.text-center
%th.fr-cell--fixed{ scope: 'row' }
.fr-checkbox-group.fr-checkbox-group--sm
- if p.batch_operation_id.present?
= check_box_tag :"batch_operation[dossier_ids][]", p.dossier_id, true, disabled: true, id: dom_id(BatchOperation.new, "checkbox_#{p.dossier_id}"), aria: { label: t('views.instructeurs.dossiers.batch_operation.disabled', dossier_id: p.dossier_id) }
= check_box_tag "batch_operation[dossier_ids][]", p.dossier_id, true, disabled: true,
id: dom_id(BatchOperation.new, "checkbox_#{p.dossier_id}"),
aria: { label: t('views.instructeurs.dossiers.batch_operation.disabled', dossier_id: p.dossier_id) },
data: { "fr-row-select" => "true" }
- else
= check_box_tag :"batch_operation[dossier_ids][]", p.dossier_id, false, data: { batch_operation_target: "input", action: "batch-operation#onCheckOne", operations: batch_operation_component.operations_for_dossier(p).join(',') }, form: dom_id(BatchOperation.new), id: dom_id(BatchOperation.new, "checkbox_#{p.dossier_id}"), aria: { label: t('views.instructeurs.dossiers.batch_operation.enabled', dossier_id: p.dossier_id) }
= check_box_tag "batch_operation[dossier_ids][]", p.dossier_id, false,
data: { batch_operation_target: "input", action: "batch-operation#onCheckOne", operations: batch_operation_component.operations_for_dossier(p).join(','), "fr-row-select" => "true" },
form: dom_id(BatchOperation.new), id: dom_id(BatchOperation.new, "checkbox_#{p.dossier_id}"),
aria: { label: t('views.instructeurs.dossiers.batch_operation.enabled', dossier_id: p.dossier_id) }
= label_tag dom_id(BatchOperation.new, "checkbox_#{p.dossier_id}"), "Sélectionner le dossier #{p.dossier_id}", class: 'fr-label'
%td.number-col
- if p.hidden_by_administration_at.present?
@ -136,21 +149,21 @@
= column.is_a?(Hash) ? tags_label(column[:value]) : column
= "- #{t("views.instructeurs.dossiers.deleted_reason.#{p.hidden_by_reason}")}" if p.hidden_by_user_at.present?
%td.status-col
%td
- status = [status_badge(p.state)]
- if p.pending_correction?
- status << pending_correction_badge(:for_instructeur, html_class: "fr-mt-1v")
- elsif p.state.to_sym == :en_construction && p.resolved_corrections?
- status << correction_resolved_badge(html_class: "fr-mt-1v")
= link_to_if(p.hidden_by_administration_at.blank?, safe_join(status), path, class: class_names("cell-link": true, "fr-py-0": status.many?))
= link_to_if(p.hidden_by_administration_at.blank?, safe_join(status), path, class: "cell-link flex column")
- if @procedure.sva_svr_enabled?
%td
%span.cell-link
= link_to_if p.hidden_by_administration_at.blank?, render(Instructeurs::SVASVRDecisionBadgeComponent.new(projection_or_dossier: p, procedure: @procedure)), path
%td.follow-col{ colspan:'2' }
%ul.inline.fr-btns-group.fr-btns-group--sm.fr-btns-group--inline.fr-btns-group--icon-right
%td.follow-col
%ul.fr-btns-group.fr-btns-group--lg.fr-btns-group--inline-lg.fr-btns-group--icon-right
= render partial: 'instructeurs/procedures/dossier_actions', locals: { procedure_id: @procedure.id,
dossier_id: p.dossier_id,
state: p.state,
@ -164,10 +177,14 @@
turbo: false,
with_menu: false }
%tfoot
%tr
%td.force-table-100{ colspan: @procedure_presentation.displayed_fields_for_headers.size + 2 }
.fr-table__footer
.fr-table__footer--start
%p.fr-table__detail
= number_with_delimiter @dossiers_count
= t('activerecord.models.dossier', count: @dossiers_count).downcase
.fr-table__footer--middle
= paginate @filtered_sorted_paginated_ids, views_prefix: 'shared'
.fr-table__footer--end.flex-no-grow
- else
%h2.empty-text

4
app/views/recherche/_hidden_dossier.html.haml
View file

@ -9,5 +9,5 @@
= user_email
= "- #{t('views.instructeurs.dossiers.deleted_by_administration')}" if p.hidden_by_administration_at.present?
%td.status-col
%p.cell-link= status_badge(p.state)
%td
%p.cell-link.flex.column= status_badge(p.state)

33
app/views/recherche/index.html.haml
View file

@ -9,20 +9,21 @@
.fr-alert.fr-alert--info.fr-alert--sm.fr-mt-3w
= p t('views.instructeurs.search.deleted_dossier', dossier_id: @deleted_dossier.dossier_id, procedure_libelle: @deleted_dossier.procedure.libelle, deleted_at: l(@deleted_dossier.deleted_at))
.page-title
- if @projected_dossiers.present?
.fr-table.fr-table--no-scroll.fr-table--bordered
.fr-table__wrapper
.fr-table__container
.fr-table__content
%table.dossiers-table
%caption
Résultat de la recherche :
= t('pluralize.dossier_trouve', count: @dossiers_count)
- if @projected_dossiers.present?
= paginate @paginated_ids, views_prefix: 'shared'
.fr-table.fr-table--bordered
%table.table.dossiers-table.hoverable
%thead
%tr
%th.number-col Nº dossier
%th Nº dossier
%th Démarche
%th Demandeur
%th.status-col Statut
%th Statut
%th.follow-col
%tbody
- @projected_dossiers.each do |p|
@ -44,8 +45,8 @@
.cell-link= procedure_libelle
%td
.cell-link= user_email
%td.status-col
.cell-link= status_badge(p.state)
%td
.cell-link.flex.column= status_badge(p.state)
- elsif hidden_by_administration
= render partial: "recherche/hidden_dossier", locals: {p: p, procedure_libelle: procedure_libelle, user_email: user_email}
@ -63,8 +64,8 @@
%td
%a.cell-link{ href: path }= user_email
%td.status-col
%a.cell-link{ href: path }= status_badge(p.state)
%td
%a.cell-link.flex.column{ href: path }= status_badge(p.state)
- if instructeur_dossier && expert_dossier
@ -93,7 +94,7 @@
- else
%td.follow-col
%ul.inline.fr-btns-group.fr-btns-group--sm.fr-btns-group--inline.fr-btns-group--icon-right
%ul.fr-btns-group.fr-btns-group--sm.fr-btns-group--inline-lg.fr-btns-group--icon-right
= render partial: "instructeurs/procedures/dossier_actions",
locals: { procedure_id: procedure_id,
dossier_id: p.dossier_id,
@ -110,7 +111,11 @@
- else
%td
.fr-table__footer
.fr-table__footer--start
.fr-table__footer--middle
= paginate @paginated_ids, views_prefix: 'shared'
.fr-table__footer--end
- else
%h2 Aucun dossier correspondant à votre recherche n’a été trouvé
%h2.fr-h4.fr-my-4w Aucun dossier correspondant à votre recherche n’a été trouvé

15
app/views/root/patron.html.haml
View file

@ -180,21 +180,6 @@
%td Table Data 3
%td Table Data 4
%h2 Hoverable (.table.hoverable)
%table.table.hoverable
%thead
%tr
%th Header 1
%th Header 2
%tbody
%tr
%td Table Data 1
%td Table Data 2
%tr
%td Table Data 3
%td Table Data 4
%h2 Vertical layout (.table.vertical)
%table.table.vertical

2
app/views/shared/archives/_table.html.haml
View file

@ -1,4 +1,4 @@
%table.table.hoverable.archive-table
%table.archive-table
%thead
%tr
%th &nbsp;