Skip to content

Commit cc025c9

Browse files
kara22kara22
authored
Merge pull request #13145 from demarche-numerique/feat/12915-foundations
Tech: mes-dossiers, base service de filtrage usager
2 parents 773a7cc + c87bc49 commit cc025c9

77 files changed

Lines changed: 2897 additions & 1058 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎app/assets/stylesheets/dossiers_list.scss‎

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
.mes-dossiers-header {
2+
display: flex;
3+
align-items: flex-end;
4+
justify-content: space-between;
5+
flex-wrap: wrap;
6+
gap: 1rem;
7+
8+
h1 {
9+
margin-bottom: 0;
10+
}
11+
12+
&__corbeille {
13+
white-space: nowrap;
14+
15+
--underline-img: none;
16+
--text-decoration: underline;
17+
18+
text-underline-offset: 2px;
19+
}
20+
}
21+
22+
.user-search-bar {
23+
display: flex;
24+
flex-direction: row;
25+
align-items: center;
26+
justify-content: space-between;
27+
gap: 1rem;
28+
margin-bottom: 1rem;
29+
30+
@media (min-width: 768px) {
31+
align-items: flex-end;
32+
margin-bottom: 1.5rem;
33+
34+
// Le bouton est déjà poussé à droite ; on retire son padding droit pour que
35+
// le libellé soit flush au bord (aligné avec le lien « Corbeille » au-dessus).
36+
.fr-btn--tertiary-no-outline {
37+
padding-right: 0;
38+
}
39+
}
40+
41+
&__form {
42+
@media (max-width: 767px) {
43+
display: none;
44+
}
45+
46+
@media (min-width: 768px) {
47+
flex: 0 1 50%;
48+
}
49+
}
50+
51+
&__search-trigger {
52+
@media (min-width: 768px) {
53+
display: none;
54+
}
55+
}
56+
57+
&__filter-count {
58+
margin-left: 0.25rem;
59+
color: var(--text-default-error);
60+
}
61+
62+
@media (max-width: 767px) {
63+
.fr-btn--tertiary-no-outline {
64+
padding-left: 0;
65+
padding-right: 0;
66+
white-space: nowrap;
67+
}
68+
}
69+
}
70+
71+
.user-active-filters {
72+
display: flex;
73+
flex-wrap: wrap;
74+
align-items: center;
75+
justify-content: flex-end;
76+
gap: 0.5rem;
77+
margin: 1rem 0;
78+
79+
&__chip {
80+
background-color: var(--background-action-high-blue-france);
81+
color: var(--text-inverted-blue-france);
82+
}
83+
}
84+
85+
.user-filter-panel {
86+
.fr-modal__header {
87+
padding-bottom: 0;
88+
}
89+
90+
.fr-modal__content {
91+
margin-bottom: 0;
92+
}
93+
94+
.fr-modal__title {
95+
@media (min-width: 768px) {
96+
margin-bottom: 1rem;
97+
}
98+
}
99+
100+
&__content {
101+
max-height: 100vh;
102+
overflow-y: auto;
103+
}
104+
105+
&__count {
106+
margin-left: 0.25rem;
107+
color: var(--text-action-high-blue-france);
108+
109+
&--zero {
110+
color: var(--text-disabled-grey);
111+
}
112+
}
113+
114+
.fr-fieldset {
115+
margin: 0 0 1rem;
116+
padding: 0;
117+
}
118+
119+
.fr-fieldset__legend {
120+
margin: 0;
121+
padding: 0 0 0.75rem;
122+
}
123+
124+
.fr-fieldset__element {
125+
margin-bottom: 0.75rem;
126+
padding: 0;
127+
128+
&:last-child {
129+
margin-bottom: 0;
130+
}
131+
}
132+
133+
.fr-fieldset:not(:last-of-type) {
134+
border-bottom: 1px solid var(--border-default-grey);
135+
padding-bottom: 1rem;
136+
}
137+
138+
&__actions {
139+
position: sticky;
140+
bottom: 0;
141+
margin: 0 -1rem;
142+
padding: 1rem;
143+
background: var(--background-default-grey);
144+
border-top: 3px solid var(--border-plain-blue-france);
145+
display: flex;
146+
flex-direction: column;
147+
gap: 0.5rem;
148+
149+
@media (min-width: 768px) {
150+
margin: 0 -2rem;
151+
padding: 1rem 2rem;
152+
}
153+
154+
.fr-btn {
155+
width: 100%;
156+
justify-content: center;
157+
white-space: nowrap;
158+
}
159+
}
160+
161+
@media (min-width: 768px) {
162+
.user-filter-panel__content {
163+
position: fixed;
164+
inset: 0 0 0 auto;
165+
width: 420px;
166+
max-width: 90vw;
167+
height: 100vh;
168+
overflow: hidden;
169+
}
170+
171+
.fr-modal__body {
172+
height: 100vh;
173+
max-height: 100vh;
174+
overflow-y: auto;
175+
border-radius: 0;
176+
}
177+
}
178+
}
179+
180+
.user-filter-panel,
181+
.user-search-panel {
182+
@media (max-width: 767px) {
183+
.fr-modal__body {
184+
position: fixed;
185+
inset: 0;
186+
height: 100vh;
187+
max-height: 100vh;
188+
overflow-y: auto;
189+
border-radius: 0;
190+
}
191+
}
192+
}
193+
194+
.mes-dossiers-results-count {
195+
font-size: 1.25rem;
196+
line-height: 1.5rem;
197+
font-weight: bold;
198+
margin: 1.5rem 0;
199+
200+
// Corbeille sans lien « Historique » : le compteur est le premier élément,
201+
// on remonte le contenu au lieu de laisser un trou blanc.
202+
&:first-child {
203+
margin-top: 0;
204+
}
205+
}
206+
207+
.trash-list-header {
208+
display: flex;
209+
justify-content: flex-end;
210+
margin-top: 0;
211+
}
212+
213+
.transfer-requests-close-top {
214+
display: flex;
215+
justify-content: flex-end;
216+
margin-bottom: 1rem;
217+
}
218+
219+
.transfer-requests-close-bottom {
220+
// bordure haute, fond, position et padding-haut viennent de .fixed-footer
221+
display: flex;
222+
justify-content: center;
223+
}
224+
225+
.no-result-search__form {
226+
background: var(--background-alt-blue-france);
227+
padding: 1rem;
228+
border-radius: 0.25rem;
229+
}

‎app/assets/stylesheets/icons.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,14 @@
158158
}
159159
}
160160

161+
&-equalizer-2-line {
162+
&:before,
163+
&:after {
164+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5 7C5 6.17157 5.67157 5.5 6.5 5.5C7.32843 5.5 8 6.17157 8 7C8 7.82843 7.32843 8.5 6.5 8.5C5.67157 8.5 5 7.82843 5 7ZM6.5 3.5C4.567 3.5 3 5.067 3 7C3 8.933 4.567 10.5 6.5 10.5C8.433 10.5 10 8.933 10 7C10 5.067 8.433 3.5 6.5 3.5ZM12 8H20V6H12V8ZM16 17C16 16.1716 16.6716 15.5 17.5 15.5C18.3284 15.5 19 16.1716 19 17C19 17.8284 18.3284 18.5 17.5 18.5C16.6716 18.5 16 17.8284 16 17ZM17.5 13.5C15.567 13.5 14 15.067 14 17C14 18.933 15.567 20.5 17.5 20.5C19.433 20.5 21 18.933 21 17C21 15.067 19.433 13.5 17.5 13.5ZM4 16V18H12V16H4Z'%3E%3C/path%3E%3C/svg%3E");
165+
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5 7C5 6.17157 5.67157 5.5 6.5 5.5C7.32843 5.5 8 6.17157 8 7C8 7.82843 7.32843 8.5 6.5 8.5C5.67157 8.5 5 7.82843 5 7ZM6.5 3.5C4.567 3.5 3 5.067 3 7C3 8.933 4.567 10.5 6.5 10.5C8.433 10.5 10 8.933 10 7C10 5.067 8.433 3.5 6.5 3.5ZM12 8H20V6H12V8ZM16 17C16 16.1716 16.6716 15.5 17.5 15.5C18.3284 15.5 19 16.1716 19 17C19 17.8284 18.3284 18.5 17.5 18.5C16.6716 18.5 16 17.8284 16 17ZM17.5 13.5C15.567 13.5 14 15.067 14 17C14 18.933 15.567 20.5 17.5 20.5C19.433 20.5 21 18.933 21 17C21 15.067 19.433 13.5 17.5 13.5ZM4 16V18H12V16H4Z'%3E%3C/path%3E%3C/svg%3E");
166+
}
167+
}
168+
161169
&-eye {
162170
&:before,
163171
&:after {
@@ -278,6 +286,14 @@
278286
}
279287
}
280288

289+
&-user-shared-line {
290+
&:before,
291+
&:after {
292+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M14 14.252V16.3414C13.3744 16.1203 12.7013 16 12 16C8.68629 16 6 18.6863 6 22H4C4 17.5817 7.58172 14 12 14C12.6906 14 13.3608 14.0875 14 14.252ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11ZM18.5858 17L16.7574 15.1716L18.1716 13.7574L22.4142 18L18.1716 22.2426L16.7574 20.8284L18.5858 19H15V17H18.5858Z'%3E%3C/path%3E%3C/svg%3E");
293+
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M14 14.252V16.3414C13.3744 16.1203 12.7013 16 12 16C8.68629 16 6 18.6863 6 22H4C4 17.5817 7.58172 14 12 14C12.6906 14 13.3608 14.0875 14 14.252ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11ZM18.5858 17L16.7574 15.1716L18.1716 13.7574L22.4142 18L18.1716 22.2426L16.7574 20.8284L18.5858 19H15V17H18.5858Z'%3E%3C/path%3E%3C/svg%3E");
294+
}
295+
}
296+
281297
&-vidicon-fill {
282298
&:before,
283299
&:after {

‎app/components/dossiers/pending_transfers_banner_component.rb‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# frozen_string_literal: true
2+
3+
class Dossiers::PendingTransfersBannerComponent < ApplicationComponent
4+
def initialize(count:)
5+
@count = count
6+
end
7+
8+
def render?
9+
@count.positive?
10+
end
11+
12+
attr_reader :count
13+
end

‎app/components/dossiers/pending_transfers_banner_component/pending_transfers_banner_component.en.yml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
en:
3+
title: "Transfer requests"
4+
link:
5+
one: "See the pending request (%{count})"
6+
other: "See pending requests (%{count})"

‎app/components/dossiers/pending_transfers_banner_component/pending_transfers_banner_component.fr.yml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
fr:
3+
title: "Demandes de transfert de dossier"
4+
link:
5+
one: "Voir la demande en attente (%{count})"
6+
other: "Voir les demandes en attente (%{count})"

‎app/components/dossiers/pending_transfers_banner_component/pending_transfers_banner_component.html.erb‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<%= render Dsfr::AlertComponent.new(state: :info, size: :sm, extra_class_names: "fr-pb-1w fr-mb-2w") do |c| %>
2+
<% c.with_body do %>
3+
<p class="fr-alert__title"><%= t('.title') %></p>
4+
5+
<p>
6+
<%= link_to t('.link', count: count), transferts_path, class: 'fr-link', data: { turbo_frame: '_top' } %>
7+
</p>
8+
<% end %>
9+
<% end %>

‎app/components/dossiers/user_active_filters_component.rb‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# frozen_string_literal: true
2+
3+
class Dossiers::UserActiveFiltersComponent < ApplicationComponent
4+
def initialize(tags:, current_filter_params:)
5+
@tags = tags
6+
@current_filter_params = current_filter_params
7+
end
8+
9+
attr_reader :tags, :current_filter_params
10+
11+
def render?
12+
tags.any?
13+
end
14+
15+
def remove_params_for(tag)
16+
new_params = current_filter_params.deep_dup
17+
case tag[:group]
18+
when :state, :alert
19+
new_params[tag[:group]] = Array(new_params[tag[:group]]) - [tag[:value]]
20+
new_params.delete(tag[:group]) if new_params[tag[:group]].empty?
21+
else
22+
new_params.delete(tag[:group])
23+
end
24+
new_params
25+
end
26+
27+
def reset_params
28+
{ search: current_filter_params[:search] }.compact
29+
end
30+
end

‎app/components/dossiers/user_active_filters_component/user_active_filters_component.html.erb‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div class="user-active-filters">
2+
<% tags.each do |tag| %>
3+
<%= link_to dossiers_path(remove_params_for(tag)),
4+
class: 'user-active-filters__chip fr-tag fr-tag--sm fr-tag--dismiss',
5+
data: { turbo_frame: 'dossiers_list', turbo_action: 'advance' },
6+
aria: { label: t('views.users.dossiers.index.active_filters.remove_tag', label: tag[:label]) } do %>
7+
<%= tag[:label] %>
8+
<% end %>
9+
<% end %>
10+
11+
<%= link_to t('views.users.dossiers.index.active_filters.reset'),
12+
dossiers_path(reset_params),
13+
class: 'fr-btn fr-btn--tertiary-no-outline fr-btn--sm fr-ml-1w',
14+
data: { turbo_frame: 'dossiers_list', turbo_action: 'advance' } %>
15+
</div>

‎app/components/dossiers/user_filter_component.rb‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎app/components/dossiers/user_filter_component/user_filter_component.en.yml‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

0 commit comments

Comments
 (0)