Skip to content

Commit

Permalink
fix(frontend): add search button
Browse files Browse the repository at this point in the history
  • Loading branch information
@pYassine
pYassine committed Nov 21, 2024
1 parent beb4f70 commit ecf3352
Show file tree
Hide file tree
Showing 8 changed files with 167 additions and 172 deletions.
13 changes: 0 additions & 13 deletions packages/frontend/src/app/modules/general/components/navbar/navbar.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,19 +157,6 @@
Admin DomiFa
</a>

<a
*ngIf="me.role !== 'facteur'"
routerLink="/usager/nouveau"
ariaCurrentWhenActive="page"
class="btn btn-outline-primary"
>
<fa-icon
aria-hidden="true"
[icon]="['fas', 'plus']"
class="me-2"
></fa-icon>
Créer une demande
</a>
<a
class="btn btn-outline-primary"
routerLink="/manage"
Expand Down
161 changes: 86 additions & 75 deletions .../modules/manage-usagers/components/manage-usagers-page/manage-usagers-page.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,40 @@
<div class="container">
<div class="py-2 px-0 mx-0">
<div
class="row text-center justify-content-md-between justify-content-center align-items-center"
class="row text-center justify-content-md-between justify-content-center align-items-center py-2"
>
<h1 class="col-md-2 col-12 title text-start">Domiciliés</h1>
<div class="col-md-8 col-12 align-items-center">
<div
ngbDropdown
id="dropdownSearchString"
class="d-block d-md-inline-block my-1"
#dropdownSearchString="ngbDropdown"
<div class="col-md-2 col-6 text-end order-2 order-md-3">
<a
*ngIf="me.role !== 'facteur'"
routerLink="/usager/nouveau"
ariaCurrentWhenActive="page"
class="btn btn-white-primary"
>
<button
type="button"
aria-label="Type de donnée recherchée"
aria-haspopup="true"
ngbDropdownToggle
<fa-icon
aria-hidden="true"
[icon]="['fas', 'plus']"
class="me-2"
></fa-icon>
Créer une demande
</a>
</div>
<h1 class="col-md-2 col-6 title text-start order-1 order-md-1">
Domiciliés
</h1>
<div class="col-md-8 col-12 order-3 order-md-2">
<div class="input-group" id="search-bar">
<div
ngbDropdown
id="dropdownSearchString"
#dropdownSearchString="ngbDropdown"
>
<span>
<button
class="btn btn-light"
type="button"
aria-label="Type de donnée recherchée"
aria-haspopup="true"
ngbDropdownToggle
>
<fa-icon
[icon]="['fas', 'list']"
aria-hidden="true"
Expand All @@ -28,64 +45,56 @@ <h1 class="col-md-2 col-12 title text-start">Domiciliés</h1>
SEARCH_STRING_FIELD_LABELS[this.filters.searchStringField]
.label
}}
</span>
</button>
<div
ngbDropdownMenu
aria-labelledby="dropdownSearchString"
class="dropdown-menu"
role="listbox"
>
<button
type="button"
(click)="
updateFilters({
element: 'searchStringField',
value: 'DATE_NAISSANCE'
})
"
role="option"
[attr.aria-selected]="
filters.searchStringField === 'DATE_NAISSANCE'
"
ngbDropdownItem
>
Date de naissance
</button>
<button
type="button"
(click)="
updateFilters({
element: 'searchStringField',
value: 'DEFAULT'
})
"
role="option"
[attr.aria-selected]="filters.searchStringField === 'DEFAULT'"
ngbDropdownItem

<div
ngbDropdownMenu
aria-labelledby="dropdownSearchString"
class="dropdown-menu"
role="listbox"
>
{{ SEARCH_STRING_FIELD_LABELS.DEFAULT.label }}
</button>
<button
type="button"
(click)="
updateFilters({
element: 'searchStringField',
value: 'DATE_NAISSANCE'
})
"
role="option"
[attr.aria-selected]="
filters.searchStringField === 'DATE_NAISSANCE'
"
ngbDropdownItem
>
Date de naissance
</button>
<button
type="button"
(click)="
updateFilters({
element: 'searchStringField',
value: 'DEFAULT'
})
"
role="option"
[attr.aria-selected]="filters.searchStringField === 'DEFAULT'"
ngbDropdownItem
>
{{ SEARCH_STRING_FIELD_LABELS.DEFAULT.label }}
</button>
</div>
</div>
</div>

<div
class="d-block d-md-inline-block my-1"
id="search-bar"
role="search"
>
<label for="searchInput" class="visually-hidden"
>Rechercher un domicilié</label
>
<span id="searchIcon">
<fa-icon [icon]="['fas', 'search']" aria-hidden="true"></fa-icon>
</span>

<label for="searchInput" class="visually-hidden">
Rechercher un domicilié
</label>
<input
id="searchInput"
type="text"
name="searchInput"
#searchInput
class="form-control"
[placeholder]="
SEARCH_STRING_FIELD_LABELS[this.filters.searchStringField]
.placeholder
Expand All @@ -96,23 +105,24 @@ <h1 class="col-md-2 col-12 title text-start">Domiciliés</h1>
aria-label="Supprimer le texte saisie"
*ngIf="searchInput?.value !== ''"
(click)="resetSearchBar()"
class="btn"
id="deleteSearchIcon"
>
<fa-icon aria-hidden="true" [icon]="['fas', 'times']"></fa-icon>
<fa-icon
aria-hidden="true"
[icon]="['fas', 'circle-xmark']"
></fa-icon>
</button>
<button
class="btn btn-light"
type="button"
#refreshButton
aria-label="Lancer la recherche"
id="search-btn"
>
<fa-icon [icon]="['fas', 'search']" aria-hidden="true"></fa-icon>
</button>
</div>
</div>
<div class="col-md-2 col-12 text-end">
<button type="button" class="btn btn-white-primary" #refreshButton>
<fa-icon
[icon]="['fas', 'search']"
aria-hidden="true"
class="me-2"
></fa-icon>
Lancer la recherche
</button>
</div>
</div>
</div>
<div role="tablist" id="statut-selector" class="mt-3 row">
Expand Down Expand Up @@ -289,6 +299,7 @@ <h1 class="col-md-2 col-12 title text-start">Domiciliés</h1>
<app-manage-manage-usagers-table
[selectedRefs]="selectedRefs"
[usagers]="usagers"
[selectAllCheckboxes]="selectAllCheckboxes"
[filters]="filters"
(updateFilters)="updateFilters($event)"
(goToPrint)="goToPrint()"
Expand Down
90 changes: 37 additions & 53 deletions .../modules/manage-usagers/components/manage-usagers-page/manage-usagers-page.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,67 +87,42 @@
}

#search-bar {
max-width: 450px;
width: 100%;
font-size: 0.95rem;
display: inline-block;
position: relative;

max-width: 800px;
margin: 0 auto;
input {
padding: 8px 8px 8px 40px;
padding: 0.3rem 0.8rem;
height: 44px;
background: #f4f5f7;
border: none;
background: white;
border: none !important;
outline: none;
vertical-align: top;
color: #1a191a;
letter-spacing: 0;
width: 100%;
border-radius: 0 5px 5px 0;
border-left: 1px solid black;
border-right: 1px solid black;
margin-left: 1px;
}

button:focus,
input:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.2);
}

input::placeholder {
color: #7e7e7e;
font-weight: 500;
}

label {
color: white;
}

span,
button {
display: block;
position: absolute;
top: 0;
padding: 0.5rem;
background: transparent !important;
font-size: 1.3rem;
box-shadow: 0 0 0 0.15rem rgba(0, 0, 0, 0.38);
}
}

#searchIcon {
left: 0;
color: #959595;
}

#deleteSearchIcon {
top: 0;
right: 2px;
display: block;
position: absolute;
outline: none;
border: none;
right: 44px;
height: 44px;
color: black;
cursor: pointer;
}

#deleteSearchIcon:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.5);
background-color: transparent;
font-size: 1.5rem;
z-index: 10;
}

#dropdownSearch {
padding: 8px 8px 8px 40px;
#searchIcon {
left: 0;
color: #959595;
}

#dropdownSearchString {
Expand All @@ -169,13 +144,22 @@
}

@media all and (max-width: 520px) {
#search-bar input,
#dropdownSearchString button {
#dropdownSearchString {
margin: 0.5rem 0;
width: 100% !important;
border-radius: 5px !important;

button,
button.dropdown-toggle {
width: 100% !important;
border-radius: 6px !important;
}
}

#search-bar input {
width: 80% !important;
border-radius: 6px 0px 0px 6px !important;
}
.dropdown-item {
font-size: 0.9rem;
padding: 0.6rem;
#deleteSearchIcon {
bottom: 0px !important;
}
}
Loading

0 comments on commit ecf3352

Please sign in to comment.