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>
-    Genomförandereferens: <strong>{{deltagare?.genomforandeReferens}}</strong>
-  </p>
+  <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
-      *ngIf="deltagareHandelser.length > 0; else noEvents"
-    >
+    <ng-container *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>
-          <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">Effekt</th>
-        </tr>
+          <tr>
+            <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">Effekt</th>
+          </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>
-  Inga händelser har inkommit.
-</ng-template>
+<ng-template #noEvents> 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 { DeltagareHandelserApiService } from '@msfa-services/api/deltagare-handelser-api.service';
+import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@angular/core';
 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.deltagare.genomforandeReferens
+      this.deltagareHandelserService.setGenomforandeReferens$(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);
   }
 }