diff --git a/src/app/annuaire/search-bar/search-bar.component.html b/src/app/annuaire/annuaire-header/annuaire-header.component.html
similarity index 69%
rename from src/app/annuaire/search-bar/search-bar.component.html
rename to src/app/annuaire/annuaire-header/annuaire-header.component.html
index d419808131b3114dfa7e6d06cdfc2ec777879546..a353f0bf96da96f3c3fc5e3d08906acc199cf6b9 100644
--- a/src/app/annuaire/search-bar/search-bar.component.html
+++ b/src/app/annuaire/annuaire-header/annuaire-header.component.html
@@ -1,28 +1,7 @@
<div class="block">
<div class="content">
- <form
- *ngIf="searchForm"
- class="inputSearch"
- fxLayout="row"
- fxLayoutGap="4px"
- fxLayoutAlign=" center"
- [formGroup]="searchForm"
- (ngSubmit)="applyFilter(searchForm.value.searchTerm)"
- >
- <div fxLayout="row" fxLayoutAlign="space-between center" class="container">
- <input type="text" formControlName="searchTerm" placeholder="Rechercher un utilisateur..." />
- <button
- *ngIf="this.searchForm.get('searchTerm').value?.length > 0"
- class="icon close"
- type="button"
- (click)="clearInput()"
- >
- <div class="ico-close-search"></div>
- </button>
- <span *ngIf="this.searchForm.get('searchTerm').value?.length > 0" class="separation"></span>
- <app-button [style]="buttonTypeEnum.searchIcon" [iconBtn]="'search'" [type]="'submit'" />
- </div>
- </form>
+ <app-v3-search-bar [(value)]="searchInput" (search)="applyFilter()" />
+
<div class="btn-container" (appClickOutside)="closeModal()">
<div class="btnSection" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="4px">
<button
diff --git a/src/app/annuaire/search-bar/search-bar.component.scss b/src/app/annuaire/annuaire-header/annuaire-header.component.scss
similarity index 50%
rename from src/app/annuaire/search-bar/search-bar.component.scss
rename to src/app/annuaire/annuaire-header/annuaire-header.component.scss
index fd546fb82311fe8be3c6c7ad0eabb258024eca5b..c5c373ff88bdb3f1c88f04cb122c94beab401078 100644
--- a/src/app/annuaire/search-bar/search-bar.component.scss
+++ b/src/app/annuaire/annuaire-header/annuaire-header.component.scss
@@ -5,16 +5,6 @@
flex-direction: column;
gap: 0.5rem;
.content {
- .inputSearch {
- max-width: 400px;
- width: 100%;
- border: 1px transparent;
- transition: all 0.2s;
- &:focus-within {
- border: 1px solid $grey-3;
- }
- }
-
.btn-container {
@media #{$large-tablet} {
display: none;
diff --git a/src/app/annuaire/search-bar/search-bar.component.ts b/src/app/annuaire/annuaire-header/annuaire-header.component.ts
similarity index 80%
rename from src/app/annuaire/search-bar/search-bar.component.ts
rename to src/app/annuaire/annuaire-header/annuaire-header.component.ts
index cbc967139a5284edcf6c7953977acbe2edcf701b..74242617e79b8eea33df13546de87c5b7a4df11c 100644
--- a/src/app/annuaire/search-bar/search-bar.component.ts
+++ b/src/app/annuaire/annuaire-header/annuaire-header.component.ts
@@ -1,5 +1,4 @@
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { forkJoin, lastValueFrom } from 'rxjs';
import { ButtonType } from '../../shared/components/button/buttonType.enum';
@@ -8,11 +7,11 @@ import { TypeModal } from '../enums/TypeModal.enum';
import { SearchQuery } from '../models/searchQuery.model';
@Component({
- selector: 'app-search-bar',
- templateUrl: './search-bar.component.html',
- styleUrls: ['./search-bar.component.scss'],
+ selector: 'app-annuaire-header',
+ templateUrl: './annuaire-header.component.html',
+ styleUrls: ['./annuaire-header.component.scss'],
})
-export class SearchBarComponent implements OnInit, OnChanges {
+export class AnnuaireHeaderComponent implements OnInit, OnChanges {
@Input() shouldResetFilters = 0;
@Input() shouldShowMore = 0;
@Output() searchEvent = new EventEmitter<SearchQuery>();
@@ -20,7 +19,6 @@ export class SearchBarComponent implements OnInit, OnChanges {
public addStructureFormModal = false;
public buttonTypeEnum = ButtonType;
- public searchForm: FormGroup;
public modalTypeOpened: TypeModal;
public employersFiltersActive = false;
public jobsFiltersActive = false;
@@ -28,11 +26,11 @@ export class SearchBarComponent implements OnInit, OnChanges {
public employerTypes: string[] = [];
public TypeModal = TypeModal;
+ public searchInput = '';
public jobFilterChecked: string[] = [];
public employerFilterChecked: string[] = [];
constructor(
- private fb: FormBuilder,
private activatedRoute: ActivatedRoute,
private route: ActivatedRoute,
private router: Router,
@@ -45,21 +43,19 @@ export class SearchBarComponent implements OnInit, OnChanges {
const queryString = this.activatedRoute.snapshot.queryParamMap.get('search');
// Use existing query if back to the page or init the query
if (!this.searchService.annuaireSearchQuery) {
- this.searchService.annuaireSearchQuery = { queryParam: '', page: 1, jobFilters: [], employerFilters: [] };
+ this.searchService.annuaireSearchQuery = { search: '', page: 1, jobFilters: [], employerFilters: [] };
}
if (queryString) {
- this.searchService.annuaireSearchQuery.queryParam = queryString;
+ this.searchService.annuaireSearchQuery.search = queryString;
}
this.splitFilters(this.searchService.checkedFilterList);
- this.searchForm = this.fb.group({
- searchTerm: this.searchService.annuaireSearchQuery.queryParam,
- });
- const term = this.searchForm.get('searchTerm').value || '';
+
+ this.searchInput = this.searchService.annuaireSearchQuery.search || '';
// Prevent re-fetching if previous data
if (this.searchService.previousResult$.getValue().docs.length !== 0) return;
this.searchEvent.emit({
- queryParam: term,
+ search: this.searchInput,
jobFilters: this.jobFilterChecked,
employerFilters: this.employerFilterChecked,
});
@@ -71,9 +67,8 @@ export class SearchBarComponent implements OnInit, OnChanges {
this.shouldLoad.emit(true);
}
if (changes.shouldShowMore && !changes.shouldShowMore.firstChange) {
- const term = this.searchForm.get('searchTerm').value || '';
this.searchEvent.emit({
- queryParam: term,
+ search: this.searchInput,
page: changes.shouldShowMore.currentValue,
jobFilters: this.jobFilterChecked,
employerFilters: this.employerFilterChecked,
@@ -94,32 +89,25 @@ export class SearchBarComponent implements OnInit, OnChanges {
this.countCheckedFilters();
}
- public clearInput(): void {
- this.searchForm.reset();
- this.applyFilter('');
- }
-
/** Sends an array containing all filters */
- public applyFilter(term: string): void {
+ public applyFilter(): void {
this.shouldLoad.emit(true);
this.shouldResetFilters = 0;
// Add search input filter
- if (term) {
+ if (this.searchInput) {
this.router.navigate(['/annuaire'], {
relativeTo: this.route,
- queryParams: {
- search: term,
- },
+ queryParams: { search: this.searchInput },
queryParamsHandling: 'merge',
});
- } else if (!term) {
+ } else {
this.router.navigate(['/annuaire'], {
relativeTo: this.route,
});
}
this.splitFilters(this.searchService.checkedFilterList);
this.searchEvent.emit({
- queryParam: term || '',
+ search: this.searchInput,
jobFilters: this.jobFilterChecked,
employerFilters: this.employerFilterChecked,
});
@@ -132,9 +120,8 @@ export class SearchBarComponent implements OnInit, OnChanges {
public fetchResults(checkedFilters: string[]): void {
this.searchService.checkedFilterList = checkedFilters;
- const inputTerm = this.searchForm.get('searchTerm').value;
this.closeModal();
- this.applyFilter(inputTerm);
+ this.applyFilter();
}
public getModalCategory(): string[] {
@@ -173,25 +160,24 @@ export class SearchBarComponent implements OnInit, OnChanges {
public resetFilters(): void {
this.shouldLoad.emit(true);
+ this.searchInput = '';
this.searchService.checkedFilterList = [];
this.employersFiltersActive = false;
this.jobsFiltersActive = false;
this.employerFilterChecked = [];
this.jobFilterChecked = [];
- this.searchEvent.emit({ queryParam: '', jobFilters: [], employerFilters: [] });
+ this.searchEvent.emit({ search: '', jobFilters: [], employerFilters: [] });
this.router.navigate(['/annuaire']);
- this.searchForm.reset();
}
public removeFilter(filter: string): void {
this.shouldLoad.emit(true);
const index = this.searchService.checkedFilterList.findIndex((checkedFilter: string) => checkedFilter === filter);
this.searchService.checkedFilterList.splice(index, 1);
- const inputTerm = this.searchForm.get('searchTerm').value;
this.splitFilters(this.searchService.checkedFilterList);
this.countCheckedFilters();
this.searchEvent.emit({
- queryParam: inputTerm || '',
+ search: this.searchInput,
jobFilters: this.jobFilterChecked,
employerFilters: this.employerFilterChecked,
});
diff --git a/src/app/annuaire/annuaire.component.html b/src/app/annuaire/annuaire.component.html
index ba28a1f1da0f3a3ab83d5377593f5b03b23e715a..46359c3bd7e620ec7e2b036f6a91c7f61b7981db 100644
--- a/src/app/annuaire/annuaire.component.html
+++ b/src/app/annuaire/annuaire.component.html
@@ -1,7 +1,7 @@
<div class="content-container no-pt" [ngClass]="{ logged: userIsLoggedIn() }">
<h1 class="visually-hidden">Annuaire</h1>
<div *ngIf="userIsLoggedIn()">
- <app-search-bar
+ <app-annuaire-header
class="hide-on-print"
[shouldResetFilters]="resetFilters"
[shouldShowMore]="nextPage"
diff --git a/src/app/annuaire/annuaire.component.ts b/src/app/annuaire/annuaire.component.ts
index 67a4be2649d2b2265ede43992c73f007fb64a8c2..a637df1700ec19eef457a066b4404fbba5d423c3 100644
--- a/src/app/annuaire/annuaire.component.ts
+++ b/src/app/annuaire/annuaire.component.ts
@@ -12,7 +12,6 @@ import { SearchQuery } from './models/searchQuery.model';
export class AnnuaireComponent implements OnInit {
constructor(private searchService: SearchService, private authService: AuthService) {}
public userList: UserAnnuary[] = [];
- public searchedValue: string;
public totalUserResult: number;
public resetFilters: number = 0;
public nextPage: number = 1;
@@ -50,7 +49,7 @@ export class AnnuaireComponent implements OnInit {
public searchUsers(params: SearchQuery): void {
this.loadParams(params);
this.searchService
- .searchUserRegistry(params.queryParam, params.page, params.jobFilters, params.employerFilters)
+ .searchUserRegistry(params.search, params.page, params.jobFilters, params.employerFilters)
.then((res) => {
this.searchService.previousResult$.next({ count: res.count, docs: res.docs });
this.userList = res.docs;
diff --git a/src/app/annuaire/models/searchQuery.model.ts b/src/app/annuaire/models/searchQuery.model.ts
index 91186da0ec65d89d49b30d4ad8d13c2158239009..61a73194f8e9d52b920163dcedbbd7257ce3ca2b 100644
--- a/src/app/annuaire/models/searchQuery.model.ts
+++ b/src/app/annuaire/models/searchQuery.model.ts
@@ -1,7 +1,7 @@
import { UserAnnuary } from '../../models/user.model';
export interface SearchQuery {
- queryParam: string;
+ search: string;
page?: number;
jobFilters?: string[];
employerFilters?: string[];
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index b0caadecb9749bef28bd07e8af9f006cc0de19e7..cce14593732832525302c2613f9ca9001bcd653c 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,4 +1,4 @@
-import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { LOCALE_ID, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -8,10 +8,10 @@ import { MatomoInitializationMode, NgxMatomoTrackerModule } from '@ngx-matomo/tr
import { ToastrModule } from 'ngx-toastr';
import { RuntimeConfigLoaderModule } from 'runtime-config-loader';
import { environment } from '../environments/environment';
+import { AnnuaireHeaderComponent } from './annuaire/annuaire-header/annuaire-header.component';
import { AnnuaireComponent } from './annuaire/annuaire.component';
import { FilterModalComponent } from './annuaire/filter-modal/filter-modal.component';
import { ResultListComponent } from './annuaire/result-list/result-list.component';
-import { SearchBarComponent } from './annuaire/search-bar/search-bar.component';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CartoModule } from './carto/carto.module';
@@ -62,7 +62,7 @@ import { StructureJoinComponent } from './structure/structure-join/structure-joi
LoginComponent,
StructureExcludeComponent,
AnnuaireComponent,
- SearchBarComponent,
+ AnnuaireHeaderComponent,
ResultListComponent,
FilterModalComponent,
StructureListSearchPrintComponent,
diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts
index fc1c59438aeabe44842a4bd719d83718dfd8b704..2933587384c7de326d0ed3a94a5de8a4fbcf5149 100644
--- a/src/app/shared/components/index.ts
+++ b/src/app/shared/components/index.ts
@@ -26,6 +26,7 @@ import { CheckboxV3Component } from './v3/checkbox/checkbox.component';
import { InputV3Component } from './v3/input/input.component';
import { LabelCheckboxV3Component } from './v3/label-checkbox/label-checkbox.component';
import { RadioV3Component } from './v3/radio/radio.component';
+import { SearchBarV3Component } from './v3/search-bar/search-bar.component';
import { TagItemV3Component } from './v3/tag/tag-item/tag-item.component';
import { TextareaV3Component } from './v3/textarea/textarea.component';
@@ -79,6 +80,7 @@ export const SharedComponents = [
ProgressBarComponent,
RadioFormComponent,
RadioV3Component,
+ SearchBarV3Component,
StructureDetailPrintComponent,
StructureListPrintComponent,
StructurePmrComponent,
diff --git a/src/app/shared/components/v3/button/button.component.scss b/src/app/shared/components/v3/button/button.component.scss
index 0e3721e3e94cf517577627fe0dea03115d147fe0..9e4b2aba50c522ca9e12c600025254615801fd33 100644
--- a/src/app/shared/components/v3/button/button.component.scss
+++ b/src/app/shared/components/v3/button/button.component.scss
@@ -5,7 +5,7 @@ button {
border-radius: 4px;
cursor: pointer;
border: 1px solid transparent;
- transition: all 0.2s ease-in-out;
+ transition: background-color 0.2s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
@@ -27,11 +27,17 @@ button {
height: 32px;
font-size: $font-size-xsmall;
padding-inline: 12px;
+ &.icon-only {
+ width: 32px;
+ }
}
&.medium {
height: 40px;
font-size: $font-size-small;
padding-inline: 16px;
+ &.icon-only {
+ width: 40px;
+ }
}
&.large {
height: 48px;
@@ -40,12 +46,6 @@ button {
}
// VARIANT
- &.icon-only {
- height: 32px;
- width: 32px;
- padding-inline: 12px;
- }
-
&.primary {
background-color: $red;
color: $white;
diff --git a/src/app/shared/components/v3/button/icon-button/icon-button.component.ts b/src/app/shared/components/v3/button/icon-button/icon-button.component.ts
index 36db43ed05998aad471d0337eebc66aa41de4e84..66bea3898c23f0765aeabe243fbe15e0f9c59595 100644
--- a/src/app/shared/components/v3/button/icon-button/icon-button.component.ts
+++ b/src/app/shared/components/v3/button/icon-button/icon-button.component.ts
@@ -13,6 +13,9 @@ export class IconButtonV3Component {
/** What variant should the button be ? */
@Input() variant?: ButtonTypeV3 = ButtonTypeV3.Primary;
+ /** Affects the height of the button */
+ @Input() size?: 'small' | 'medium' = 'small';
+
/** Should the button be disabled ? */
@Input() disabled?: boolean = false;
@@ -26,6 +29,6 @@ export class IconButtonV3Component {
@Output() action = new EventEmitter<Event>();
public get classes(): string[] {
- return ['icon-only', this.variant];
+ return ['icon-only', this.variant, this.size];
}
}
diff --git a/src/app/shared/components/v3/radio/radio.component.html b/src/app/shared/components/v3/radio/radio.component.html
index 4909fa7ae2193107766af9eb363c37ceff0c070d..c02f0154a5d7966e21154e59caadd0d838b5fd35 100644
--- a/src/app/shared/components/v3/radio/radio.component.html
+++ b/src/app/shared/components/v3/radio/radio.component.html
@@ -1,7 +1,7 @@
<div class="radioContainer">
<input
- [id]="id"
type="radio"
+ [id]="id"
[checked]="checked"
[disabled]="disabled"
[ngClass]="classes"
diff --git a/src/app/shared/components/v3/search-bar/search-bar.component.html b/src/app/shared/components/v3/search-bar/search-bar.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..2ff8504e59bcc5f865cdbee0c9fe10dcb18c4548
--- /dev/null
+++ b/src/app/shared/components/v3/search-bar/search-bar.component.html
@@ -0,0 +1,17 @@
+<form class="search-bar">
+ <input
+ type="text"
+ name="search"
+ [placeholder]="placeholder"
+ [(ngModel)]="value"
+ (change)="onChange($event)"
+ (keyup.enter)="handleSearch()"
+ />
+ <app-v3-icon-button
+ iconFolder="ico"
+ iconName="search"
+ size="medium"
+ [variant]="buttonTypeV3.PrimaryBlack"
+ (action)="handleSearch()"
+ />
+</form>
diff --git a/src/app/shared/components/v3/search-bar/search-bar.component.scss b/src/app/shared/components/v3/search-bar/search-bar.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..534e4d3ffb360ea228b58237f7db183313bb3508
--- /dev/null
+++ b/src/app/shared/components/v3/search-bar/search-bar.component.scss
@@ -0,0 +1,37 @@
+@import 'color';
+@import 'typography';
+
+.search-bar {
+ display: flex;
+ align-items: center;
+
+ input {
+ box-sizing: border-box;
+ height: 40px;
+ width: 250px;
+ padding: 0.5rem 0.5rem 0.5rem 1rem;
+ border-radius: 4px 0 0 4px;
+ border: 1px solid $grey-3;
+ line-height: 24px;
+ transition: all 0.1s ease-in;
+
+ &:focus-visible {
+ outline-offset: 2px;
+ outline: 2px solid $blue-focus;
+ }
+
+ &::placeholder {
+ font-style: italic;
+ color: $grey-3;
+ }
+
+ &:active {
+ border: 1px solid $grey-1;
+ }
+ }
+ app-v3-icon-button {
+ button {
+ border-radius: 0 4px 4px 0;
+ }
+ }
+}
diff --git a/src/app/shared/components/v3/search-bar/search-bar.component.ts b/src/app/shared/components/v3/search-bar/search-bar.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fe60fb85f5def9565e50cfb550428653d0a34ce9
--- /dev/null
+++ b/src/app/shared/components/v3/search-bar/search-bar.component.ts
@@ -0,0 +1,28 @@
+import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
+import { ButtonTypeV3 } from '../button/button.type';
+
+@Component({
+ selector: 'app-v3-search-bar',
+ templateUrl: './search-bar.component.html',
+ styleUrls: ['./search-bar.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+})
+export class SearchBarV3Component {
+ @Input() placeholder: string = 'Rechercher';
+ @Input() value: string = '';
+ /** Triggers when input changes */
+ @Output() valueChange = new EventEmitter<string>();
+ /** Triggers when button is clicked or Enter is pressed on input */
+ @Output() search = new EventEmitter<string>();
+
+ public buttonTypeV3 = ButtonTypeV3;
+
+ public handleSearch() {
+ this.search.emit(this.value);
+ }
+
+ public onChange(event: Event) {
+ this.value = (event.target as HTMLInputElement).value;
+ this.valueChange.emit(this.value);
+ }
+}
diff --git a/src/app/shared/components/v3/search-bar/search-bar.stories.ts b/src/app/shared/components/v3/search-bar/search-bar.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..33043de812da9ed98ff9f332f4097b2fb369b63f
--- /dev/null
+++ b/src/app/shared/components/v3/search-bar/search-bar.stories.ts
@@ -0,0 +1,34 @@
+import { CommonModule } from '@angular/common';
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { SvgIconComponent } from '../../svg-icon/svg-icon.component';
+import { ButtonV3Component } from '../button/button.component';
+import { IconButtonV3Component } from '../button/icon-button/icon-button.component';
+import { SearchBarV3Component } from './search-bar.component';
+
+// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
+const meta: Meta<SearchBarV3Component> = {
+ title: 'Components/Search bar',
+ component: SearchBarV3Component,
+ tags: ['autodocs'],
+ decorators: [
+ moduleMetadata({
+ declarations: [IconButtonV3Component, ButtonV3Component, SvgIconComponent],
+ imports: [CommonModule],
+ }),
+ ],
+ argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<SearchBarV3Component>;
+
+export const Default: Story = {
+ args: {},
+};
+
+export const Placeholder: Story = {
+ args: {
+ placeholder: 'Rechercher un mot, une référence...',
+ },
+};
diff --git a/src/app/structure-list/components/structure-list-search/structure-list-search.component.html b/src/app/structure-list/components/structure-list-search/structure-list-search.component.html
index 09a1ed629d2c689cda893d6cae2871a61f54b203..fc37213d9cbab4d7762c5bd39279f75fddd4f020 100644
--- a/src/app/structure-list/components/structure-list-search/structure-list-search.component.html
+++ b/src/app/structure-list/components/structure-list-search/structure-list-search.component.html
@@ -1,23 +1,6 @@
<div class="block">
<div class="content">
- <form class="inputSearch" [formGroup]="searchForm" (ngSubmit)="applyFilter(searchForm.value.searchTerm)">
- <input
- type="text"
- formControlName="searchTerm"
- placeholder="Rechercher une association, une commune..."
- aria-label="Rechercher une structure"
- />
- <button
- *ngIf="this.searchForm.get('searchTerm').value?.length > 0"
- class="icon close"
- type="button"
- (click)="clearInput()"
- >
- <div class="ico-close-search"></div>
- </button>
- <span *ngIf="this.searchForm.get('searchTerm').value?.length > 0" class="separation"></span>
- <app-button alt="Rechercher" [style]="buttonTypeEnum.searchIcon" [iconBtn]="'search'" [type]="'submit'" />
- </form>
+ <app-v3-search-bar [(value)]="searchInput" (search)="applyFilter()" />
<div class="btnSection" (appClickOutside)="closeModal()">
<button
class="btn-filter isntPhoneContent"
diff --git a/src/app/structure-list/components/structure-list-search/structure-list-search.component.ts b/src/app/structure-list/components/structure-list-search/structure-list-search.component.ts
index 740599d6f66adf7e1766c07e0fe45618e9d5035e..e9e5d9dabc3722a43da2424b42c506e8137bea1b 100644
--- a/src/app/structure-list/components/structure-list-search/structure-list-search.component.ts
+++ b/src/app/structure-list/components/structure-list-search/structure-list-search.component.ts
@@ -1,5 +1,4 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { ButtonType } from '../../../shared/components/button/buttonType.enum';
import { Utils } from '../../../utils/utils';
@@ -22,8 +21,7 @@ export class StructureListSearchComponent implements OnInit {
// Show/hide form createStructure
public buttonTypeEnum = ButtonType;
- // Form search input
- public searchForm: FormGroup;
+ public searchInput = '';
public modalTypeOpened: TypeModal;
// Checkbox variable
public checkedModulesFilter: Module[] = [];
@@ -42,22 +40,16 @@ export class StructureListSearchComponent implements OnInit {
public categoriesMoreFilters: Category[] = [];
public prmAdded = false;
- public hasUrlParams: Boolean = false;
+ public hasUrlParams = false;
constructor(
public searchService: SearchService,
- private fb: FormBuilder,
private activatedRoute: ActivatedRoute,
private route: ActivatedRoute,
private router: Router
- ) {
- this.searchForm = this.fb.group({
- searchTerm: this.activatedRoute.snapshot.queryParamMap.get('query')
- ? this.activatedRoute.snapshot.queryParamMap.get('query')
- : '',
- });
- }
+ ) {}
ngOnInit(): void {
+ this.searchInput = this.activatedRoute.snapshot.queryParamMap.get('query');
this.searchService.getCategories().subscribe((categories: Category[]) => {
// manually add PMR module for More Filters modal
if (!this.prmAdded) {
@@ -93,14 +85,8 @@ export class StructureListSearchComponent implements OnInit {
return TypeModal;
}
- // Clear input search
- public clearInput(): void {
- this.searchForm.reset();
- this.applyFilter(null);
- }
-
- public applyFilter(term: string): void {
- const filters = this.convertModulesToFilters(this.checkedModulesFilter, term);
+ public applyFilter(): void {
+ const filters = this.convertModulesToFilters(this.checkedModulesFilter, this.searchInput);
this.updateUrlParams(filters);
this.countCheckFiltersOnModules(this.checkedModulesFilter);
// Send filters
@@ -135,7 +121,6 @@ export class StructureListSearchComponent implements OnInit {
}
public fetchResults(checkedModules: Module[]): void {
- const inputTerm = this.searchForm.get('searchTerm').value;
// Check if some modules is checked in filters
if (this.checkedModulesFilter !== checkedModules) {
this.countCheckFiltersOnModules(checkedModules);
@@ -144,7 +129,7 @@ export class StructureListSearchComponent implements OnInit {
this.checkedModulesFilter = checkedModules;
// Close modal after receive filters from her.
this.closeModal();
- this.applyFilter(inputTerm);
+ this.applyFilter();
}
// Check if some modules is checked on filter and store number of modules checked
@@ -206,7 +191,6 @@ export class StructureListSearchComponent implements OnInit {
public externalCheckboxCheck(event, categ, displayName): void {
this.closeModal();
const checkValue: string = event.target.value;
- const inputTerm = this.searchForm.get('searchTerm').value;
if (event.target.checked) {
this.checkedModulesFilter.push(new Module(checkValue, categ, displayName));
this.numberMoreFiltersChecked++;
@@ -218,7 +202,7 @@ export class StructureListSearchComponent implements OnInit {
this.countCheckFiltersOnModules(this.checkedModulesFilter);
}
}
- this.applyFilter(inputTerm);
+ this.applyFilter();
}
// Get URL parameters if they exist and make them filters
@@ -296,22 +280,21 @@ export class StructureListSearchComponent implements OnInit {
}
public resetFilters(): void {
+ this.searchInput = '';
this.checkedModulesFilter = [];
this.numberTrainingChecked = 0;
this.numberAccompanimentChecked = 0;
this.numberPublicChecked = 0;
this.numberEquipmentChecked = 0;
this.numberMoreFiltersChecked = 0;
- const inputTerm = this.searchForm.get('searchTerm').value;
- const filters = this.convertModulesToFilters(this.checkedModulesFilter, inputTerm);
+ const filters = this.convertModulesToFilters(this.checkedModulesFilter, this.searchInput);
this.updateUrlParams(filters);
this.searchEvent.emit(filters);
}
public removeFilter(module: Module): void {
const index = this.checkedModulesFilter.findIndex((m: Module) => m.id === module.id);
this.checkedModulesFilter.splice(index, 1);
- const inputTerm = this.searchForm.get('searchTerm').value;
- const filters = this.convertModulesToFilters(this.checkedModulesFilter, inputTerm);
+ const filters = this.convertModulesToFilters(this.checkedModulesFilter, this.searchInput);
this.countCheckFiltersOnModules(this.checkedModulesFilter);
this.updateUrlParams(filters);
this.searchEvent.emit(filters);
diff --git a/src/assets/ico/search.svg b/src/assets/ico/search.svg
index 6bb967269df2bff8038a6699a115c29d04888595..99a685d72f7b021c8055f4970c1193b4b10acfc4 100644
--- a/src/assets/ico/search.svg
+++ b/src/assets/ico/search.svg
@@ -1,5 +1,5 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M19.8262 19.8262L24.0001 24.0001Z" fill="#333333"/>
-<path d="M19.8262 19.8262L24.0001 24.0001" stroke="#828282" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M14.6087 21.2174C18.2586 21.2174 21.2174 18.2586 21.2174 14.6087C21.2174 10.9588 18.2586 8 14.6087 8C10.9588 8 8 10.9588 8 14.6087C8 18.2586 10.9588 21.2174 14.6087 21.2174Z" stroke="#828282" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M15.4996 14H14.7096L14.4296 13.73C15.6296 12.33 16.2496 10.42 15.9096 8.39C15.4396 5.61 13.1196 3.39 10.3196 3.05C6.08965 2.53 2.52965 6.09 3.04965 10.32C3.38965 13.12 5.60965 15.44 8.38965 15.91C10.4196 16.25 12.3296 15.63 13.7296 14.43L13.9996 14.71V15.5L18.2496 19.75C18.6596 20.16 19.3296 20.16 19.7396 19.75C20.1496 19.34 20.1496 18.67 19.7396 18.26L15.4996 14ZM9.49965 14C7.00965 14 4.99965 11.99 4.99965 9.5C4.99965 7.01 7.00965 5 9.49965 5C11.9896 5 13.9996 7.01 13.9996 9.5C13.9996 11.99 11.9896 14 9.49965 14Z"
+ fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/ico/sprite.svg b/src/assets/ico/sprite.svg
index 07439fecdd282aec2a037a8eb980d860c6b4a053..4ddb1483ebb40c4d668e39a295c6436ce330161a 100644
--- a/src/assets/ico/sprite.svg
+++ b/src/assets/ico/sprite.svg
@@ -679,13 +679,10 @@
stroke-linecap="round" />
</symbol>
- <symbol id="search" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path d="M19.8262 19.8262L24.0001 24.0001Z" fill="#333333" />
- <path d="M19.8262 19.8262L24.0001 24.0001" stroke="#828282" stroke-width="2" stroke-linecap="round"
- stroke-linejoin="round" />
+ <symbol id="search" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
- d="M14.6087 21.2174C18.2586 21.2174 21.2174 18.2586 21.2174 14.6087C21.2174 10.9588 18.2586 8 14.6087 8C10.9588 8 8 10.9588 8 14.6087C8 18.2586 10.9588 21.2174 14.6087 21.2174Z"
- stroke="#828282" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+ d="M15.4996 14H14.7096L14.4296 13.73C15.6296 12.33 16.2496 10.42 15.9096 8.39C15.4396 5.61 13.1196 3.39 10.3196 3.05C6.08965 2.53 2.52965 6.09 3.04965 10.32C3.38965 13.12 5.60965 15.44 8.38965 15.91C10.4196 16.25 12.3296 15.63 13.7296 14.43L13.9996 14.71V15.5L18.2496 19.75C18.6596 20.16 19.3296 20.16 19.7396 19.75C20.1496 19.34 20.1496 18.67 19.7396 18.26L15.4996 14ZM9.49965 14C7.00965 14 4.99965 11.99 4.99965 9.5C4.99965 7.01 7.00965 5 9.49965 5C11.9896 5 13.9996 7.01 13.9996 9.5C13.9996 11.99 11.9896 14 9.49965 14Z"
+ fill="currentColor" stroke-width="1" stroke-linecap="round" />
</symbol>
<symbol id="tagDelete" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/src/styles.scss b/src/styles.scss
index bdf5eb8f920a7a17241aaa4f02e798e519587af4..ad1754751e0901199e6f7e3b74c3278a1873b34d 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -185,9 +185,6 @@ form p.notRequired {
}
/** Inputs **/
-input {
- margin-top: 4px;
-}
.form-group .addressRow {
padding-bottom: 1.5rem;
}