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> <h2>Personallista</h2>
<form class="employees__search-wrapper" (ngSubmit)="handleSearchSubmit()"> <form class="employees__search-wrapper" (ngSubmit)="setSearchFilter()">
<digi-form-input-search <digi-form-input-search
af-label="Sök personal" af-label="Sök personal"
af-label-description="Sök på namn" af-label-description="Sök på namn"
(afOnInput)="handleSearchInput($event)" (afOnInput)="setSearchValue($event)"
></digi-form-input-search> ></digi-form-input-search>
</form> </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(); return this._searchValue$.getValue();
} }
handleSearchSubmit(): void { setSearchFilter(): void {
this.employeeService.setSearchFilter(this.searchValue); this.employeeService.setSearchFilter(this.searchValue);
} }
handleSearchInput($event: CustomEvent): void { setSearchValue($event: CustomEvent): void {
this._searchValue$.next($event.detail.target.value); 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 }); private _sort$ = new BehaviorSubject<Sort<keyof Employee>>({ key: 'fullName', order: SortOrder.ASC });
public sort$: Observable<Sort<keyof Employee>> = this._sort$.asObservable(); public sort$: Observable<Sort<keyof Employee>> = this._sort$.asObservable();
private _searchFilter$ = new BehaviorSubject<string>(''); 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 return this.httpClient
.get<EmployeesApiResponse>(this._apiUrl, { .get<EmployeesApiResponse>(this._apiUrl, {
...API_HEADERS, ...API_HEADERS,
params: { params,
sort: sort.key,
order: sort.order,
limit: limit.toString(),
page: page.toString(),
},
}) })
.pipe( .pipe(
map(({ data, meta }) => { map(({ data, meta }) => {
@@ -47,9 +57,12 @@ export class EmployeeService {
); );
} }
public employeesData$: Observable<EmployeesData> = combineLatest([this._limit$, this._page$, this._sort$]).pipe( public employeesData$: Observable<EmployeesData> = combineLatest([
switchMap(([limit, page, sort]) => this._fetchEmployees$(limit, page, sort)) 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> { public fetchDetailedEmployeeData$(id: string): Observable<Employee> {
return this.httpClient return this.httpClient

1
mock-api/dafa-web/scripts/employees.js
View File

@@ -28,6 +28,7 @@ function generateEmployees(amount = 10) {
createdAt: Date.now(), createdAt: Date.now(),
}; };
person.fullName = `${person.firstName} ${person.lastName}`;
employees.push(person); employees.push(person);
} }

5
mock-api/dafa-web/server.js
View File

@@ -11,7 +11,7 @@ server.use(
'/api/*': '/$1', '/api/*': '/$1',
'*sort=services*': '$1sort=services[0].name$2', '*sort=services*': '$1sort=services[0].name$2',
'*sort=organizations*': '$1sort=organizations[0].address.city$2', '*sort=organizations*': '$1sort=organizations[0].address.city$2',
'*sort=fullName*': '$1sort=firstName,lastName$2', '/employee*search=*': '/employee$1fullName_like=$2',
'/employee*': '/employees$1', '/employee*': '/employees$1',
'/participants': '/participants?_embed=employees', '/participants': '/participants?_embed=employees',
'/participant/:id': '/participants/:id?_embed=employees', '/participant/:id': '/participants/:id?_embed=employees',
@@ -24,10 +24,9 @@ server.use(
); );
router.render = (req, res) => { router.render = (req, res) => {
// all paths except getToken requires Authorization header. // all paths except getToken requires Authorization header.
if (!req._parsedUrl.pathname.includes('getToken') && !req.headers.authorization) { if (!req._parsedUrl.pathname.includes('getToken') && !req.headers.authorization) {
return res.status(401).jsonp({ error: "No valid access-token" }); return res.status(401).jsonp({ error: 'No valid access-token' });
} }
const params = new URLSearchParams(req._parsedUrl.query); const params = new URLSearchParams(req._parsedUrl.query);