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

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

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

@@ -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>
 

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

@@ -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);
   }
 

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

@@ -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

mock-api/dafa-web/scripts/employees.js

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

mock-api/dafa-web/server.js

@@ -11,7 +11,7 @@ server.use(
     '/api/*': '/$1',
     '*sort=services*': '$1sort=services[0].name$2',
     '*sort=organizations*': '$1sort=organizations[0].address.city$2',
-    '*sort=fullName*': '$1sort=firstName,lastName$2',
+    '/employee*search=*': '/employee$1fullName_like=$2',
     '/employee*': '/employees$1',
     '/participants': '/participants?_embed=employees',
     '/participant/:id': '/participants/:id?_embed=employees',
@@ -24,10 +24,9 @@ server.use(
 );
 
 router.render = (req, res) => {
-
   // all paths except getToken requires Authorization header.
   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);