Skip to content

Commit 2e1d406

Browse files
pYassinepYassine
committed
fix(frontend): add search button
1 parent 10cbca3 commit 2e1d406

File tree

8 files changed

+167
-172
lines changed

8 files changed

+167
-172
lines changed

‎packages/frontend/src/app/modules/general/components/navbar/navbar.component.html‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -157,19 +157,6 @@
157157
Admin DomiFa
158158
</a>
159159

160-
<a
161-
*ngIf="me.role !== 'facteur'"
162-
routerLink="/usager/nouveau"
163-
ariaCurrentWhenActive="page"
164-
class="btn btn-outline-primary"
165-
>
166-
<fa-icon
167-
aria-hidden="true"
168-
[icon]="['fas', 'plus']"
169-
class="me-2"
170-
></fa-icon>
171-
Créer une demande
172-
</a>
173160
<a
174161
class="btn btn-outline-primary"
175162
routerLink="/manage"

‎packages/frontend/src/app/modules/manage-usagers/components/manage-usagers-page/manage-usagers-page.component.html‎

Lines changed: 86 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,40 @@
22
<div class="container">
33
<div class="py-2 px-0 mx-0">
44
<div
5-
class="row text-center justify-content-md-between justify-content-center align-items-center"
5+
class="row text-center justify-content-md-between justify-content-center align-items-center py-2"
66
>
7-
<h1 class="col-md-2 col-12 title text-start">Domiciliés</h1>
8-
<div class="col-md-8 col-12 align-items-center">
9-
<div
10-
ngbDropdown
11-
id="dropdownSearchString"
12-
class="d-block d-md-inline-block my-1"
13-
#dropdownSearchString="ngbDropdown"
7+
<div class="col-md-2 col-6 text-end order-2 order-md-3">
8+
<a
9+
*ngIf="me.role !== 'facteur'"
10+
routerLink="/usager/nouveau"
11+
ariaCurrentWhenActive="page"
12+
class="btn btn-white-primary"
1413
>
15-
<button
16-
type="button"
17-
aria-label="Type de donnée recherchée"
18-
aria-haspopup="true"
19-
ngbDropdownToggle
14+
<fa-icon
15+
aria-hidden="true"
16+
[icon]="['fas', 'plus']"
17+
class="me-2"
18+
></fa-icon>
19+
Créer une demande
20+
</a>
21+
</div>
22+
<h1 class="col-md-2 col-6 title text-start order-1 order-md-1">
23+
Domiciliés
24+
</h1>
25+
<div class="col-md-8 col-12 order-3 order-md-2">
26+
<div class="input-group" id="search-bar">
27+
<div
28+
ngbDropdown
29+
id="dropdownSearchString"
30+
#dropdownSearchString="ngbDropdown"
2031
>
21-
<span>
32+
<button
33+
class="btn btn-light"
34+
type="button"
35+
aria-label="Type de donnée recherchée"
36+
aria-haspopup="true"
37+
ngbDropdownToggle
38+
>
2239
<fa-icon
2340
[icon]="['fas', 'list']"
2441
aria-hidden="true"
@@ -28,64 +45,56 @@ <h1 class="col-md-2 col-12 title text-start">Domiciliés</h1>
2845
SEARCH_STRING_FIELD_LABELS[this.filters.searchStringField]
2946
.label
3047
}}
31-
</span>
32-
</button>
33-
<div
34-
ngbDropdownMenu
35-
aria-labelledby="dropdownSearchString"
36-
class="dropdown-menu"
37-
role="listbox"
38-
>
39-
<button
40-
type="button"
41-
(click)="
42-
updateFilters({
43-
element: 'searchStringField',
44-
value: 'DATE_NAISSANCE'
45-
})
46-
"
47-
role="option"
48-
[attr.aria-selected]="
49-
filters.searchStringField === 'DATE_NAISSANCE'
50-
"
51-
ngbDropdownItem
52-
>
53-
Date de naissance
5448
</button>
55-
<button
56-
type="button"
57-
(click)="
58-
updateFilters({
59-
element: 'searchStringField',
60-
value: 'DEFAULT'
61-
})
62-
"
63-
role="option"
64-
[attr.aria-selected]="filters.searchStringField === 'DEFAULT'"
65-
ngbDropdownItem
49+
50+
<div
51+
ngbDropdownMenu
52+
aria-labelledby="dropdownSearchString"
53+
class="dropdown-menu"
54+
role="listbox"
6655
>
67-
{{ SEARCH_STRING_FIELD_LABELS.DEFAULT.label }}
68-
</button>
56+
<button
57+
type="button"
58+
(click)="
59+
updateFilters({
60+
element: 'searchStringField',
61+
value: 'DATE_NAISSANCE'
62+
})
63+
"
64+
role="option"
65+
[attr.aria-selected]="
66+
filters.searchStringField === 'DATE_NAISSANCE'
67+
"
68+
ngbDropdownItem
69+
>
70+
Date de naissance
71+
</button>
72+
<button
73+
type="button"
74+
(click)="
75+
updateFilters({
76+
element: 'searchStringField',
77+
value: 'DEFAULT'
78+
})
79+
"
80+
role="option"
81+
[attr.aria-selected]="filters.searchStringField === 'DEFAULT'"
82+
ngbDropdownItem
83+
>
84+
{{ SEARCH_STRING_FIELD_LABELS.DEFAULT.label }}
85+
</button>
86+
</div>
6987
</div>
70-
</div>
71-
72-
<div
73-
class="d-block d-md-inline-block my-1"
74-
id="search-bar"
75-
role="search"
76-
>
77-
<label for="searchInput" class="visually-hidden"
78-
>Rechercher un domicilié</label
79-
>
80-
<span id="searchIcon">
81-
<fa-icon [icon]="['fas', 'search']" aria-hidden="true"></fa-icon>
82-
</span>
8388

89+
<label for="searchInput" class="visually-hidden">
90+
Rechercher un domicilié
91+
</label>
8492
<input
8593
id="searchInput"
8694
type="text"
8795
name="searchInput"
8896
#searchInput
97+
class="form-control"
8998
[placeholder]="
9099
SEARCH_STRING_FIELD_LABELS[this.filters.searchStringField]
91100
.placeholder
@@ -96,23 +105,24 @@ <h1 class="col-md-2 col-12 title text-start">Domiciliés</h1>
96105
aria-label="Supprimer le texte saisie"
97106
*ngIf="searchInput?.value !== ''"
98107
(click)="resetSearchBar()"
99-
class="btn"
100108
id="deleteSearchIcon"
101109
>
102-
<fa-icon aria-hidden="true" [icon]="['fas', 'times']"></fa-icon>
110+
<fa-icon
111+
aria-hidden="true"
112+
[icon]="['fas', 'circle-xmark']"
113+
></fa-icon>
114+
</button>
115+
<button
116+
class="btn btn-light"
117+
type="button"
118+
#refreshButton
119+
aria-label="Lancer la recherche"
120+
id="search-btn"
121+
>
122+
<fa-icon [icon]="['fas', 'search']" aria-hidden="true"></fa-icon>
103123
</button>
104124
</div>
105125
</div>
106-
<div class="col-md-2 col-12 text-end">
107-
<button type="button" class="btn btn-white-primary" #refreshButton>
108-
<fa-icon
109-
[icon]="['fas', 'search']"
110-
aria-hidden="true"
111-
class="me-2"
112-
></fa-icon>
113-
Lancer la recherche
114-
</button>
115-
</div>
116126
</div>
117127
</div>
118128
<div role="tablist" id="statut-selector" class="mt-3 row">
@@ -289,6 +299,7 @@ <h1 class="col-md-2 col-12 title text-start">Domiciliés</h1>
289299
<app-manage-manage-usagers-table
290300
[selectedRefs]="selectedRefs"
291301
[usagers]="usagers"
302+
[selectAllCheckboxes]="selectAllCheckboxes"
292303
[filters]="filters"
293304
(updateFilters)="updateFilters($event)"
294305
(goToPrint)="goToPrint()"

‎packages/frontend/src/app/modules/manage-usagers/components/manage-usagers-page/manage-usagers-page.component.scss‎

Lines changed: 37 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -87,67 +87,42 @@
8787
}
8888

8989
#search-bar {
90-
max-width: 450px;
9190
width: 100%;
92-
font-size: 0.95rem;
93-
display: inline-block;
94-
position: relative;
95-
91+
max-width: 800px;
92+
margin: 0 auto;
9693
input {
97-
padding: 8px 8px 8px 40px;
94+
padding: 0.3rem 0.8rem;
9895
height: 44px;
99-
background: #f4f5f7;
100-
border: none;
96+
background: white;
97+
border: none !important;
10198
outline: none;
102-
vertical-align: top;
103-
color: #1a191a;
104-
letter-spacing: 0;
105-
width: 100%;
106-
border-radius: 0 5px 5px 0;
99+
border-left: 1px solid black;
100+
border-right: 1px solid black;
101+
margin-left: 1px;
107102
}
108103

104+
button:focus,
109105
input:focus {
110-
box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.2);
111-
}
112-
113-
input::placeholder {
114-
color: #7e7e7e;
115-
font-weight: 500;
116-
}
117-
118-
label {
119-
color: white;
120-
}
121-
122-
span,
123-
button {
124-
display: block;
125-
position: absolute;
126-
top: 0;
127-
padding: 0.5rem;
128-
background: transparent !important;
129-
font-size: 1.3rem;
106+
box-shadow: 0 0 0 0.15rem rgba(0, 0, 0, 0.38);
130107
}
131108
}
132109

133-
#searchIcon {
134-
left: 0;
135-
color: #959595;
136-
}
137-
138110
#deleteSearchIcon {
139-
top: 0;
140-
right: 2px;
111+
display: block;
112+
position: absolute;
113+
outline: none;
114+
border: none;
115+
right: 44px;
116+
height: 44px;
141117
color: black;
142-
cursor: pointer;
143-
}
144-
145-
#deleteSearchIcon:focus {
146-
box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.5);
118+
background-color: transparent;
119+
font-size: 1.5rem;
120+
z-index: 10;
147121
}
148122

149-
#dropdownSearch {
150-
padding: 8px 8px 8px 40px;
123+
#searchIcon {
124+
left: 0;
125+
color: #959595;
151126
}
152127

153128
#dropdownSearchString {
@@ -169,13 +144,22 @@
169144
}
170145

171146
@media all and (max-width: 520px) {
172-
#search-bar input,
173-
#dropdownSearchString button {
147+
#dropdownSearchString {
148+
margin: 0.5rem 0;
174149
width: 100% !important;
175-
border-radius: 5px !important;
150+
151+
button,
152+
button.dropdown-toggle {
153+
width: 100% !important;
154+
border-radius: 6px !important;
155+
}
156+
}
157+
158+
#search-bar input {
159+
width: 80% !important;
160+
border-radius: 6px 0px 0px 6px !important;
176161
}
177-
.dropdown-item {
178-
font-size: 0.9rem;
179-
padding: 0.6rem;
162+
#deleteSearchIcon {
163+
bottom: 0px !important;
180164
}
181165
}

0 commit comments

Comments
 (0)