feat(employee-list): Added possibility to sort and paginate inside the list of employees (TV-217) (TV-222)

Squashed commit of the following:

commit f13b52a134693bb6237b2df6408020504c3fbe1c
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Jun 9 07:47:56 2021 +0200

    Updated after PR

commit 4055d3a14eda9737ef76ed5e85ea35480e19e71c
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Mon Jun 7 15:20:26 2021 +0200

    updates after PR comments

commit f515ed6d06087f62de7522745691429d7ca91153
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Mon Jun 7 12:07:50 2021 +0200

    Now using Sort interface again

commit 5c793a5a7579a520c3792bb3d13c00bb68dbfcd4
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Mon Jun 7 11:54:27 2021 +0200

    Fixed bug showing wrong amount in pagination component

commit 7c55751147e05c1279b75356dc143b069e63e6b2
Merge: 11eab63 a701888
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Mon Jun 7 11:42:59 2021 +0200

    Updated after merge with develop

commit 11eab6330191a140c2cfd7094838495793e02719
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Mon Jun 7 11:23:52 2021 +0200

    Added functionality to sort on different columns

commit f13422a2aa53a69a243f32f9cd0b7ed6bd3441fc
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Fri Jun 4 11:40:22 2021 +0200

    Fixed other mappings after changes in the mock-api

commit ba2d3200167281422354f5e3cfdf7720444a9c4c
Merge: 6232b32 d91b3e6
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Fri Jun 4 10:00:00 2021 +0200

    Added paging functionality

commit 6232b3274ff73f2da929342a244fbc87430b796f
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Fri Jun 4 09:25:01 2021 +0200

    Added meta model and changed services to adapt new API data structure

commit 3ea0046bb713a6ee13d2a2cb2983e92d10559aa3
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Jun 3 13:02:44 2021 +0200

    Adjusted mock-api functionality

apps/dafa-web/src/app/pages/administration/administration-routing.module.ts

@@ -14,7 +14,7 @@ const routes: Routes = [
     loadChildren: () => import('./pages/employees/employees.module').then(m => m.EmployeesModule),
   },
   {
-    path: 'personal/:id',
+    path: 'personal/:employeeId',
     loadChildren: () => import('./pages/employee-card/employee-card.module').then(m => m.EmployeeCardModule),
   },
   {
@@ -22,7 +22,7 @@ const routes: Routes = [
     loadChildren: () => import('./pages/employee-form/employee-form.module').then(m => m.EmployeeFormModule),
   },
   {
-    path: 'redigera-konto/:id',
+    path: 'redigera-konto/:employeeId',
     loadChildren: () => import('./pages/employee-form/employee-form.module').then(m => m.EmployeeFormModule),
   },
 ];

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

@@ -1,10 +1,10 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { UnsubscribeDirective } from '@dafa-directives/unsubscribe.directive';
 import { Employee } from '@dafa-models/employee.model';
 import { Participant } from '@dafa-models/participant.model';
 import { EmployeeService } from '@dafa-services/api/employee.service';
 import { BehaviorSubject, Observable } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
 
 @Component({
   selector: 'dafa-employee-card',
@@ -12,20 +12,15 @@ import { BehaviorSubject, Observable } from 'rxjs';
   styleUrls: ['./employee-card.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class EmployeeCardComponent extends UnsubscribeDirective {
-  detailedEmployeeData$: Observable<Employee>;
-  authorizationsAsString$: Observable<string>;
+export class EmployeeCardComponent {
   private _pendingSelectedParticipants$ = new BehaviorSubject<string[]>([]);
+  private _employeeId$: Observable<string> = this.activatedRoute.params.pipe(map(({ employeeId }) => employeeId));
+  authorizationsAsString$: Observable<string>;
+  detailedEmployeeData$: Observable<Employee> = this._employeeId$.pipe(
+    switchMap(employeeId => this.employeeService.fetchDetailedEmployeeData$(employeeId))
+  );
 
-  constructor(private activatedRoute: ActivatedRoute, private employeeService: EmployeeService) {
-    super();
-
-    super.unsubscribeOnDestroy(
-      this.activatedRoute.params.subscribe(({ id }) => {
-        this.detailedEmployeeData$ = this.employeeService.getDetailedEmployeeData(id);
-      })
-    );
-  }
+  constructor(private activatedRoute: ActivatedRoute, private employeeService: EmployeeService) {}
 
   get pendingSelectedParticipants(): string[] {
     return this._pendingSelectedParticipants$.getValue();

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

@@ -6,27 +6,45 @@
           <th scope="col" class="employees-list__column-head">
             <button class="employees-list__sort-button" (click)="handleSort('fullName')">
               Namn
-              <ng-container *ngIf="sortBy?.key === 'fullName'">
-                <digi-icon-caret-up class="employees-list__sort-icon" *ngIf="!sortBy.reverse"></digi-icon-caret-up>
-                <digi-icon-caret-down class="employees-list__sort-icon" *ngIf="sortBy.reverse"></digi-icon-caret-down>
+              <ng-container *ngIf="sort.key === 'fullName'">
+                <digi-icon-caret-up
+                  class="employees-list__sort-icon"
+                  *ngIf="sort.order === orderType.ASC"
+                ></digi-icon-caret-up>
+                <digi-icon-caret-down
+                  class="employees-list__sort-icon"
+                  *ngIf="sort.order === orderType.DESC"
+                ></digi-icon-caret-down>
               </ng-container>
             </button>
           </th>
           <th scope="col" class="employees-list__column-head">
             <button class="employees-list__sort-button" (click)="handleSort('services')">
               Tjänst
-              <ng-container *ngIf="sortBy?.key === 'services'">
-                <digi-icon-caret-up class="employees-list__sort-icon" *ngIf="!sortBy.reverse"></digi-icon-caret-up>
-                <digi-icon-caret-down class="employees-list__sort-icon" *ngIf="sortBy.reverse"></digi-icon-caret-down>
+              <ng-container *ngIf="sort.key === 'services'">
+                <digi-icon-caret-up
+                  class="employees-list__sort-icon"
+                  *ngIf="sort.order === orderType.ASC"
+                ></digi-icon-caret-up>
+                <digi-icon-caret-down
+                  class="employees-list__sort-icon"
+                  *ngIf="sort.order === orderType.DESC"
+                ></digi-icon-caret-down>
               </ng-container>
             </button>
           </th>
           <th scope="col" class="employees-list__column-head">
             <button class="employees-list__sort-button" (click)="handleSort('organizations')">
               Utförandeverksamheter
-              <ng-container *ngIf="sortBy?.key === 'organization'">
-                <digi-icon-caret-up class="employees-list__sort-icon" *ngIf="!sortBy.reverse"></digi-icon-caret-up>
-                <digi-icon-caret-down class="employees-list__sort-icon" *ngIf="sortBy.reverse"></digi-icon-caret-down>
+              <ng-container *ngIf="sort.key === 'organizations'">
+                <digi-icon-caret-up
+                  class="employees-list__sort-icon"
+                  *ngIf="sort.order === orderType.ASC"
+                ></digi-icon-caret-up>
+                <digi-icon-caret-down
+                  class="employees-list__sort-icon"
+                  *ngIf="sort.order === orderType.DESC"
+                ></digi-icon-caret-down>
               </ng-container>
             </button>
           </th>
@@ -34,7 +52,7 @@
         </tr>
       </thead>
       <tbody>
-        <tr *ngFor="let employee of pagedEmployees">
+        <tr *ngFor="let employee of employees">
           <th scope="row">
             <a [routerLink]="employee.id" class="employees-list__link">{{ employee.fullName }}</a>
           </th>
@@ -64,8 +82,8 @@
     [afTotalPages]="totalPages"
     [afCurrentResultStart]="currentResultStart"
     [afCurrentResultEnd]="currentResultEnd"
-    [afTotalResults]="employees.length"
-    (afOnPageChange)="handlePagination($event.detail)"
+    [afTotalResults]="count"
+    (afOnPageChange)="setNewPage($event.detail)"
     af-result-name="medarbetare"
   >
   </digi-navigation-pagination>

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

@@ -1,7 +1,8 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { SortOrder } from '@dafa-enums/sort-order.enum';
 import { Employee } from '@dafa-models/employee.model';
-import { SortBy } from '@dafa-models/sort-by.model';
-import { BehaviorSubject } from 'rxjs';
+import { PaginationMeta } from '@dafa-models/pagination-meta.model';
+import { Sort } from '@dafa-models/sort.model';
 
 @Component({
   selector: 'dafa-employees-list',
@@ -11,37 +12,36 @@ import { BehaviorSubject } from 'rxjs';
 })
 export class EmployeesListComponent {
   @Input() employees: Employee[];
-  @Input() sortBy: SortBy | null;
+  @Input() meta: PaginationMeta;
+  @Input() sort: Sort<keyof Employee>;
+  @Input() order: SortOrder;
   @Output() sorted = new EventEmitter<keyof Employee>();
+  @Output() paginated = new EventEmitter<number>();
 
-  private _currentPage$ = new BehaviorSubject<number>(1);
-  private _employeesPerPage = 10;
+  orderType = SortOrder;
 
   get currentPage(): number {
-    return this._currentPage$.getValue();
+    return this.meta.page;
   }
-
   get totalPages(): number {
-    return Math.ceil(this.employees.length / this._employeesPerPage);
+    return this.meta?.totalPages;
   }
-
-  get pagedEmployees(): Employee[] {
-    return [...this.employees].slice(this.currentResultStart - 1, this.currentResultEnd);
+  get count(): number {
+    return this.meta.count;
   }
-
   get currentResultStart(): number {
-    return (this.currentPage - 1) * this._employeesPerPage + 1;
+    return (this.currentPage - 1) * this.meta.limit + 1;
   }
-
   get currentResultEnd(): number {
-    return this.currentResultStart + this._employeesPerPage - 1;
+    const end = this.currentResultStart + this.meta.limit - 1;
+    return end < this.count ? end : this.count;
   }
 
   handleSort(key: keyof Employee): void {
     this.sorted.emit(key);
   }
 
-  handlePagination(page: number): void {
-    this._currentPage$.next(page);
+  setNewPage(page: number): void {
+    this.paginated.emit(page);
   }
 }

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

@@ -22,10 +22,13 @@
     </form>
 
     <dafa-employees-list
-      *ngIf="filteredEmployees$ | async as employees; else loadingRef"
-      [employees]="employees"
-      [sortBy]="employeesSortBy$ | async"
+      *ngIf="employeesData$ | async as employeesData; else loadingRef"
+      [employees]="employeesData.data"
+      [meta]="employeesData.meta"
+      [sort]="sort$ | async"
+      [order]="order$ | async"
       (sorted)="handleEmployeesSort($event)"
+      (paginated)="setNewPage($event)"
     ></dafa-employees-list>
   </digi-typography>
 

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

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { IconType } from '@dafa-enums/icon-type.enum';
-import { Employee } from '@dafa-models/employee.model';
-import { SortBy } from '@dafa-models/sort-by.model';
+import { Employee, EmployeesData } from '@dafa-models/employee.model';
+import { Sort } from '@dafa-models/sort.model';
 import { EmployeeService } from '@dafa-services/api/employee.service';
 import { BehaviorSubject, Observable } from 'rxjs';
 
@@ -13,8 +13,8 @@ import { BehaviorSubject, Observable } from 'rxjs';
 })
 export class EmployeesComponent {
   private _searchValue$ = new BehaviorSubject<string>('');
-  filteredEmployees$: Observable<Employee[]> = this.employeeService.filteredEmployees$;
-  employeesSortBy$: Observable<SortBy | null> = this.employeeService.employeesSortBy$;
+  employeesData$: Observable<EmployeesData> = this.employeeService.employeesData$;
+  sort$: Observable<Sort<keyof Employee>> = this.employeeService.sort$;
   iconType = IconType;
 
   constructor(private employeeService: EmployeeService) {}
@@ -32,6 +32,10 @@ export class EmployeesComponent {
   }
 
   handleEmployeesSort(key: keyof Employee): void {
-    this.employeeService.setEmployeesSortKey(key);
+    this.employeeService.setSort(key);
+  }
+
+  setNewPage(page: number): void {
+    this.employeeService.setPage(page);
   }
 }

apps/dafa-web/src/app/pages/participants/components/participants-list/participants-list.component.html

@@ -6,8 +6,14 @@
           <button class="participants-list__sort-button" (click)="handleSort('fullName')">
             Namn
             <ng-container *ngIf="sortBy?.key === 'fullName'">
-              <digi-icon-caret-up class="participants-list__sort-icon" *ngIf="!sortBy.reverse"></digi-icon-caret-up>
-              <digi-icon-caret-down class="participants-list__sort-icon" *ngIf="sortBy.reverse"></digi-icon-caret-down>
+              <digi-icon-caret-up
+                class="participants-list__sort-icon"
+                *ngIf="sortBy.order === 'asc'"
+              ></digi-icon-caret-up>
+              <digi-icon-caret-down
+                class="participants-list__sort-icon"
+                *ngIf="sortBy.order === 'desc'"
+              ></digi-icon-caret-down>
             </ng-container>
           </button>
         </th>
@@ -15,8 +21,14 @@
           <button class="participants-list__sort-button" (click)="handleSort('errandNumber')">
             Ärendenummer
             <ng-container *ngIf="sortBy?.key === 'errandNumber'">
-              <digi-icon-caret-up class="participants-list__sort-icon" *ngIf="!sortBy.reverse"></digi-icon-caret-up>
-              <digi-icon-caret-down class="participants-list__sort-icon" *ngIf="sortBy.reverse"></digi-icon-caret-down>
+              <digi-icon-caret-up
+                class="participants-list__sort-icon"
+                *ngIf="sortBy.order === 'asc'"
+              ></digi-icon-caret-up>
+              <digi-icon-caret-down
+                class="participants-list__sort-icon"
+                *ngIf="sortBy.order === 'desc'"
+              ></digi-icon-caret-down>
             </ng-container>
           </button>
         </th>
@@ -24,8 +36,14 @@
           <button class="participants-list__sort-button" (click)="handleSort('service')">
             Tjänst
             <ng-container *ngIf="sortBy?.key === 'service'">
-              <digi-icon-caret-up class="participants-list__sort-icon" *ngIf="!sortBy.reverse"></digi-icon-caret-up>
-              <digi-icon-caret-down class="participants-list__sort-icon" *ngIf="sortBy.reverse"></digi-icon-caret-down>
+              <digi-icon-caret-up
+                class="participants-list__sort-icon"
+                *ngIf="sortBy.order === 'asc'"
+              ></digi-icon-caret-up>
+              <digi-icon-caret-down
+                class="participants-list__sort-icon"
+                *ngIf="sortBy.order === 'desc'"
+              ></digi-icon-caret-down>
             </ng-container>
           </button>
         </th>
@@ -33,8 +51,14 @@
           <button class="participants-list__sort-button" (click)="handleSort('startDate')">
             Startdatum
             <ng-container *ngIf="sortBy?.key === 'startDate'">
-              <digi-icon-caret-up class="participants-list__sort-icon" *ngIf="!sortBy.reverse"></digi-icon-caret-up>
-              <digi-icon-caret-down class="participants-list__sort-icon" *ngIf="sortBy.reverse"></digi-icon-caret-down>
+              <digi-icon-caret-up
+                class="participants-list__sort-icon"
+                *ngIf="sortBy.order === 'asc'"
+              ></digi-icon-caret-up>
+              <digi-icon-caret-down
+                class="participants-list__sort-icon"
+                *ngIf="sortBy.order === 'desc'"
+              ></digi-icon-caret-down>
             </ng-container>
           </button>
         </th>
@@ -42,8 +66,14 @@
           <button class="participants-list__sort-button" (click)="handleSort('endDate')">
             Slutdatum
             <ng-container *ngIf="sortBy?.key === 'endDate'">
-              <digi-icon-caret-up class="participants-list__sort-icon" *ngIf="!sortBy.reverse"></digi-icon-caret-up>
-              <digi-icon-caret-down class="participants-list__sort-icon" *ngIf="sortBy.reverse"></digi-icon-caret-down>
+              <digi-icon-caret-up
+                class="participants-list__sort-icon"
+                *ngIf="sortBy.order === 'asc'"
+              ></digi-icon-caret-up>
+              <digi-icon-caret-down
+                class="participants-list__sort-icon"
+                *ngIf="sortBy.order === 'desc'"
+              ></digi-icon-caret-down>
             </ng-container>
           </button>
         </th>
@@ -51,8 +81,14 @@
           <button class="participants-list__sort-button" (click)="handleSort('handleBefore')">
             Hantera innan
             <ng-container *ngIf="sortBy?.key === 'handleBefore'">
-              <digi-icon-caret-up class="participants-list__sort-icon" *ngIf="!sortBy.reverse"></digi-icon-caret-up>
-              <digi-icon-caret-down class="participants-list__sort-icon" *ngIf="sortBy.reverse"></digi-icon-caret-down>
+              <digi-icon-caret-up
+                class="participants-list__sort-icon"
+                *ngIf="sortBy.order === 'asc'"
+              ></digi-icon-caret-up>
+              <digi-icon-caret-down
+                class="participants-list__sort-icon"
+                *ngIf="sortBy.order === 'desc'"
+              ></digi-icon-caret-down>
             </ng-container>
           </button>
         </th>

apps/dafa-web/src/app/pages/participants/components/participants-list/participants-list.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { Participant } from '@dafa-models/participant.model';
-import { SortBy } from '@dafa-models/sort-by.model';
+import { Sort } from '@dafa-models/sort.model';
 import { BehaviorSubject } from 'rxjs';
 
 @Component({
@@ -11,7 +11,7 @@ import { BehaviorSubject } from 'rxjs';
 })
 export class ParticipantsListComponent {
   @Input() participants: Participant[];
-  @Input() sortBy: SortBy | null;
+  @Input() sortBy: Sort<keyof Participant> | null;
   @Output() sorted = new EventEmitter<keyof Participant>();
 
   private _currentPage$ = new BehaviorSubject<number>(1);

apps/dafa-web/src/app/pages/participants/participants.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { Participant } from '@dafa-models/participant.model';
-import { SortBy } from '@dafa-models/sort-by.model';
+import { Sort } from '@dafa-models/sort.model';
 import { ParticipantsService } from '@dafa-services/api/participants.service';
 import { BehaviorSubject, Observable } from 'rxjs';
 
@@ -14,8 +14,10 @@ export class ParticipantsComponent {
   private _searchValue$ = new BehaviorSubject<string>('');
   activeParticipants$: Observable<Participant[]> = this.participantsService.activeParticipants$;
   followUpParticipants$: Observable<Participant[]> = this.participantsService.followUpParticipants$;
-  activeParticipantsSortBy$: Observable<SortBy | null> = this.participantsService.activeParticipantsSortBy$;
-  followUpParticipantsSortBy$: Observable<SortBy | null> = this.participantsService.followUpParticipantsSortBy$;
+  activeParticipantsSortBy$: Observable<Sort<keyof Participant> | null> = this.participantsService
+    .activeParticipantsSortBy$;
+  followUpParticipantsSortBy$: Observable<Sort<keyof Participant> | null> = this.participantsService
+    .followUpParticipantsSortBy$;
 
   constructor(private participantsService: ParticipantsService) {}