feat(deltagare-handelser): implemented pagination for the list of handelser

Squashed commit of the following:

commit 7fbfcae5b57f7c8b499f3298eade192f6651217d
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Oct 28 15:56:24 2021 +0200

    removed unused import

commit e8c4f1e6d5400b668f58994f839de0a9cdcf18a2
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Oct 28 15:12:34 2021 +0200

    corrected some typo

commit 148e734ef7362e9cf677c186a5ddc7ecdef46e09
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Oct 28 15:10:33 2021 +0200

    moved some methods from api-service to their own service

commit c052f3e99425f47e8f86341734ed163b77bce784
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Oct 28 14:38:19 2021 +0200

    added loader to show when data is being fetched from server

commit 9d1003a9ce6046f2f51916bb09bf71539df4a211
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Oct 28 14:20:47 2021 +0200

    updated css variable import

commit b941806cbe5532b9e72d4ecac95487bcba94c98f
Merge: 5a548ac1 f857b1ae
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Oct 28 13:53:38 2021 +0200

    Merge branch 'develop' into feature/TV-843-paginering-deltager-handelser

commit 5a548ac17a339f480ba53aca421fea3931497c9d
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Oct 28 12:59:19 2021 +0200

    deltagare-handelser: implemented onDestroy method to reset the params when the dialog window is closed

commit af7c624e52085d72b9de1fef921bfebaafa712d9
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Oct 28 12:50:04 2021 +0200

    implemented pagination to deltagare handelser

commit 4f77302fed3957addfb4aff0597473b0580f5d94
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Oct 28 09:09:44 2021 +0200

    deltagare händelse - implement pagination

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.html

@@ -1,23 +1,21 @@
 <div class="deltagare-list-handelser">
-  <p>
+  <p>Genomförandereferens: <strong>{{deltagare?.genomforandeReferens}}</strong></p>
-    Genomförandereferens: <strong>{{deltagare?.genomforandeReferens}}</strong>
-  </p>
 
+  <ui-loader *ngIf="handelserLoading$ | async" uiType="absolute"></ui-loader>
   <digi-table af-size="s" *ngIf="deltagareHandelser$ | async; let deltagareHandelser">
-    <ng-container
+    <ng-container *ngIf="deltagareHandelser.length > 0; else noEvents">
-      *ngIf="deltagareHandelser.length > 0; else noEvents"
-    >
       <table>
-        <caption class="msfa__a11y-sr-only">Lista med alla händelser för {{deltagare?.fullName}}</caption>
+        <caption class="msfa__a11y-sr-only">
+          Lista med alla händelser för {{deltagare?.fullName}}
+        </caption>
         <thead>
-        <tr>
+          <tr>
-          <th scope="col" class="deltagare-list-handelser__heading-row">Inkom</th>
+            <th scope="col" class="deltagare-list-handelser__heading-row">Inkom</th>
-          <th scope="col" class="deltagare-list-handelser__heading-row">Händelse</th>
+            <th scope="col" class="deltagare-list-handelser__heading-row">Händelse</th>
-          <th scope="col" class="deltagare-list-handelser__heading-row">Effekt</th>
+            <th scope="col" class="deltagare-list-handelser__heading-row">Effekt</th>
-        </tr>
+          </tr>
         </thead>
         <tbody>
-
           <tr *ngFor="let handelse of deltagareHandelser;">
             <td class="deltagare-list-handelser__table-cell">
               <digi-typography-time [afDateTime]="getHandelseDate(handelse, 'receivedDate')"></digi-typography-time>
@@ -38,14 +36,25 @@
               </td>
             </ng-template>
           </tr>
-
-
         </tbody>
       </table>
     </ng-container>
   </digi-table>
+
+  <ng-container *ngIf="paginationMeta$ | async as paginationMeta">
+    <digi-navigation-pagination
+      *ngIf="paginationMeta?.totalPage > 1"
+      class="deltagare-list-handelser__pagination"
+      [afTotalPages]="paginationMeta?.totalPage"
+      [afInitActivePage]="paginationMeta?.page"
+      [afCurrentResultStart]="currentResultStart(paginationMeta)"
+      [afCurrentResultEnd]="currentResultEnd(paginationMeta)"
+      [afTotalResults]="paginationMeta?.count"
+      (afOnPageChange)="setNewPage($event.detail)"
+      af-result-name="händelser"
+    >
+    </digi-navigation-pagination>
+  </ng-container>
 </div>
 
-<ng-template #noEvents>
+<ng-template #noEvents> Inga händelser har inkommit. </ng-template>
-  Inga händelser har inkommit.
-</ng-template>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.scss

@@ -1,10 +1,9 @@
+@import 'variables/gutters';
 .deltagare-list-handelser {
-
   &__heading-row {
     white-space: nowrap;
   }
 
-
   &__table-cell {
     white-space: nowrap;
   }
@@ -12,6 +11,11 @@
   &__avbrott-cell {
     color: var(--digi--ui--color--danger);
   }
+
+  &__pagination {
+    display: block;
+    margin-top: $digi--layout--gutter--l;
+  }
 }
 
 // DA: Digins maxbredd är hårt satt till 540px (!?) Bör vara auto tycker jag.

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.ts

@@ -1,9 +1,11 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { DeltagareHandelserApiService } from '@msfa-services/api/deltagare-handelser-api.service';
 import { DeltagareHandelse } from '@msfa-models/deltagare-handelse.model';
 import { Observable } from 'rxjs';
 import { IconType } from '@msfa-enums/icon-type.enum';
 import { DeltagareCompact } from '@msfa-models/deltagare.model';
+import { PaginationMeta } from '@msfa-models/pagination-meta.model';
+import { map } from 'rxjs/operators';
+import { DeltagareHandelserService } from '@msfa-services/deltagare-handelser.service';
 
 @Component({
   selector: 'msfa-deltagare-list-handelser-dialog',
@@ -11,22 +13,46 @@ import { DeltagareCompact } from '@msfa-models/deltagare.model';
   styleUrls: ['./deltagare-list-handelser-dialog.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DeltagareListHandelserDialogComponent implements OnInit {
+export class DeltagareListHandelserDialogComponent implements OnInit, OnDestroy {
   @Input() deltagare: DeltagareCompact;
   iconType = IconType;
   deltagareHandelser$: Observable<DeltagareHandelse[]>;
+  paginationMeta$: Observable<PaginationMeta>;
+  handelserLoading$ = this.deltagareHandelserService.handelserLoading$;
 
-  constructor(private deltagareHandelserApiService: DeltagareHandelserApiService) { }
+  constructor(private deltagareHandelserService: DeltagareHandelserService) {}
+
+  ngOnDestroy(): void {
+    this.deltagareHandelserService.resetParams();
+  }
 
   ngOnInit(): void {
     if (this.deltagare) {
-      this.deltagareHandelser$ = this.deltagareHandelserApiService.fetchDeltagareHandelser$(
+      this.deltagareHandelserService.setGenomforandeReferens$(this.deltagare.genomforandeReferens);
-        this.deltagare.genomforandeReferens
+      this.deltagareHandelser$ = this.deltagareHandelserService.deltagareHandelserData$.pipe(
+        map(handelse => handelse.data)
+      );
+
+      this.paginationMeta$ = this.deltagareHandelserService.deltagareHandelserData$.pipe(
+        map(handelse => handelse.meta)
       );
     }
   }
 
   getHandelseDate(handelse: DeltagareHandelse, handelseDate?: string): Date {
-    return handelseDate ===  'receivedDate' ? new Date(handelse.receivedDate) : new Date(handelse.effectDate);
+    return handelseDate === 'receivedDate' ? new Date(handelse.receivedDate) : new Date(handelse.effectDate);
+  }
+
+  currentResultStart(paginationMeta: PaginationMeta): number {
+    return (paginationMeta?.page - 1) * paginationMeta?.limit + 1;
+  }
+
+  currentResultEnd(paginationMeta: PaginationMeta): number {
+    const end = this.currentResultStart(paginationMeta) + paginationMeta?.limit - 1;
+    return end < paginationMeta?.count ? end : paginationMeta?.count;
+  }
+
+  setNewPage(page: number): void {
+    this.deltagareHandelserService.setPage(page);
   }
 }

apps/mina-sidor-fa/src/app/shared/models/deltagare-handelse.model.ts

@@ -1,3 +1,5 @@
+import { PaginationMeta } from './pagination-meta.model';
+
 const GENOMFORANDEHANDELSE_EFFECT_MAP = {
   Inrapporteringsdatum_GP: 'Inskickad datum',
   Godkannandedatum_GP: 'Godkänd datum',
@@ -21,6 +23,11 @@ export interface DeltagareHandelse {
   effectDescription: string;
 }
 
+export interface DeltagareHandelseData {
+  data: DeltagareHandelse[];
+  meta: PaginationMeta;
+}
+
 interface DeltagareHandelseApiResponse {
   description: string;
   receivedDate: Date;
@@ -31,6 +38,7 @@ interface DeltagareHandelseApiResponse {
 
 export interface DeltagareHandelserApiResponse {
   data: DeltagareHandelseApiResponse[];
+  meta: PaginationMeta;
 }
 
 export function mapDeltagareHandelseApiResponse(

apps/mina-sidor-fa/src/app/shared/services/api/deltagare-handelser-api.service.ts

@@ -1,8 +1,9 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { environment } from '@msfa-environment';
+import { PaginationParams, Params } from '@msfa-models/api/params.model';
 import {
-  DeltagareHandelse,
+  DeltagareHandelseData,
   DeltagareHandelserApiResponse,
   mapDeltagareHandelseApiResponse,
 } from '@msfa-models/deltagare-handelse.model';
@@ -14,19 +15,29 @@ import { map } from 'rxjs/operators';
 })
 export class DeltagareHandelserApiService {
   private _apiBaseUrl = `${environment.api.url}`;
+
   constructor(private httpClient: HttpClient) {}
 
-  fetchDeltagareHandelser$(genomforandeReferens: number): Observable<DeltagareHandelse[]> {
+  fetchDeltagareHandelser$(
+    genomforandeReferens: number,
+    handelserParams: PaginationParams
+  ): Observable<DeltagareHandelseData> {
     if (!genomforandeReferens) {
       throw new Error('Genomförandereferens kunde inte hittas.');
     }
 
+    const params: Params = { page: handelserParams.page.toString() };
+
     return this.httpClient
-      .get<DeltagareHandelserApiResponse>(`${this._apiBaseUrl}/deltagare/${genomforandeReferens}/handelser`)
+      .get<DeltagareHandelserApiResponse>(`${this._apiBaseUrl}/deltagare/${genomforandeReferens}/handelser`, { params })
       .pipe(
-        map(({ data }) => {
+        map(({ data, meta }) => {
           if (data) {
-            return data.map(genomforandeHandelse => mapDeltagareHandelseApiResponse(genomforandeHandelse));
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            return {
+              data: data.map(genomforandeHandelse => mapDeltagareHandelseApiResponse(genomforandeHandelse)),
+              meta,
+            };
           }
         })
       );

apps/mina-sidor-fa/src/app/shared/services/deltagare-handelser.service.ts

@@ -0,0 +1,43 @@
+import { Injectable } from '@angular/core';
+import { PaginationParams } from '@msfa-models/api/params.model';
+import { BehaviorSubject, combineLatest } from 'rxjs';
+import { switchMap, tap } from 'rxjs/operators';
+import { DeltagareHandelserApiService } from './api/deltagare-handelser-api.service';
+
+const DEFAULT_PARAMS: PaginationParams = {
+  page: 1,
+  limit: 10,
+};
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DeltagareHandelserService {
+  private _params$ = new BehaviorSubject<PaginationParams>(DEFAULT_PARAMS);
+  private _genomforandeReferens$ = new BehaviorSubject<number>(null);
+  private _handelserLoading$ = new BehaviorSubject<boolean>(false);
+  handelserLoading$ = this._handelserLoading$.asObservable();
+
+  deltagareHandelserData$ = combineLatest([this._genomforandeReferens$, this._params$]).pipe(
+    switchMap(([genomforandeReferens, params]) => {
+      this._handelserLoading$.next(true);
+      return this.deltagareHandelserApiService
+        .fetchDeltagareHandelser$(genomforandeReferens, params)
+        .pipe(tap(() => this._handelserLoading$.next(false)));
+    })
+  );
+
+  constructor(private deltagareHandelserApiService: DeltagareHandelserApiService) {}
+
+  public setPage(page: number): void {
+    this._params$.next({ ...this._params$.getValue(), page });
+  }
+
+  public setGenomforandeReferens$(genomforandeReferens: number): void {
+    this._genomforandeReferens$.next(genomforandeReferens);
+  }
+
+  public resetParams(): void {
+    this._params$.next(DEFAULT_PARAMS);
+  }
+}