arbetsformedlingen/mina-sidor-fa-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(employee-list): Added search functionality using API. (TV-221)

Browse Source 
Squashed commit of the following:

commit 4b93fcf4b8442a30c8d56cf8364f710b2d24c4e2
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Mon Jun 14 15:50:17 2021 +0200

    Added fullName inside mock-api and filtering using api
This commit is contained in:
Erik Tiekstra
2021-06-15 09:16:15 +02:00
parent c0202ccd78
commit 5a97ebff78
5 changed files with 31 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/dafa-web/src/app/pages/administration/pages/employees/employees.component.html
View File

@@ -14,11 +14,11 @@
<h2>Personallista</h2>
<form class="employees__search-wrapper" (ngSubmit)="handleSearchSubmit()">
<form class="employees__search-wrapper" (ngSubmit)="setSearchFilter()">
<digi-form-input-search
af-label="Sök personal"
af-label-description="Sök på namn"
(afOnInput)="handleSearchInput($event)"
(afOnInput)="setSearchValue($event)"
></digi-form-input-search>
</form>

4
apps/dafa-web/src/app/pages/administration/pages/employees/employees.component.ts
View File

@@ -23,11 +23,11 @@ export class EmployeesComponent {
return this._searchValue$.getValue();
}
handleSearchSubmit(): void {
setSearchFilter(): void {
this.employeeService.setSearchFilter(this.searchValue);
}
handleSearchInput($event: CustomEvent): void {
setSearchValue($event: CustomEvent): void {
this._searchValue$.next($event.detail.target.value);
}

35
apps/dafa-web/src/app/services/api/employee.service.ts
View File

@@ -27,18 +27,28 @@ export class EmployeeService {
private _sort$ = new BehaviorSubject<Sort<keyof Employee>>({ key: 'fullName', order: SortOrder.ASC });
public sort$: Observable<Sort<keyof Employee>> = this._sort$.asObservable();
private _searchFilter$ = new BehaviorSubject<string>('');
public searchFilter$: Observable<string> = this._searchFilter$.asObservable();
private _fetchEmployees$(limit: number, page: number, sort: Sort<keyof Employee>): Observable<EmployeesData> {
private _fetchEmployees$(
limit: number,
page: number,
sort: Sort<keyof Employee>,
searchFilter: string
): Observable<EmployeesData> {
const params: { [param: string]: string | string[] } = {
sort: sort.key as string,
order: sort.order as string,
limit: limit.toString(),
page: page.toString(),
};
if (searchFilter) {
params.search = searchFilter;
}
return this.httpClient
.get<EmployeesApiResponse>(this._apiUrl, {
...API_HEADERS,
params: {
sort: sort.key,
order: sort.order,
limit: limit.toString(),
page: page.toString(),
},
params,
})
.pipe(
map(({ data, meta }) => {
@@ -47,9 +57,12 @@ export class EmployeeService {
);
}
public employeesData$: Observable<EmployeesData> = combineLatest([this._limit$, this._page$, this._sort$]).pipe(
switchMap(([limit, page, sort]) => this._fetchEmployees$(limit, page, sort))
);
public employeesData$: Observable<EmployeesData> = combineLatest([
this._limit$,
this._page$,
this._sort$,
this._searchFilter$,
]).pipe(switchMap(([limit, page, sort, searchFilter]) => this._fetchEmployees$(limit, page, sort, searchFilter)));
public fetchDetailedEmployeeData$(id: string): Observable<Employee> {
return this.httpClient