Added simple pagination to participants-list

apps/dafa-web/src/app/data/enums/participant-status.enum.ts

@@ -0,0 +1,4 @@
+export enum ParticipantStatus {
+  ACTIVE = 'active',
+  FOLLOW_UP = 'follow-up',
+}

apps/dafa-web/src/app/data/models/participant.model.ts

@@ -1,9 +1,12 @@
+import { ParticipantStatus } from '@dafa-enums/participant-status.enum';
 import { Service } from '@dafa-enums/service.enum';
 
 export interface Participant {
   id: number;
   firstName: string;
   lastName: string;
+  status: ParticipantStatus;
+  nextStep: string;
   service: Service;
   errandNumber: number;
   startDate: Date;

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

@@ -59,7 +59,7 @@
       </tr>
     </thead>
     <tbody>
-      <tr *ngFor="let participant of participants">
+      <tr *ngFor="let participant of pagedParticipants">
         <th scope="row">{{ participant.firstName }} {{ participant.lastName }}</th>
         <td>{{ participant.errandNumber }}</td>
         <td>{{ participant.service }}</td>
@@ -70,3 +70,14 @@
     </tbody>
   </table>
 </digi-ng-table>
+
+<digi-navigation-pagination
+  *ngIf="participants.length > pagedParticipants.length"
+  class="participants-list__pagination"
+  [afTotalPages]="totalPages"
+  [afCurrentResultStart]="currentResultStart"
+  [afCurrentResultEnd]="currentResultEnd"
+  [afTotalResults]="participants.length"
+  (afOnPageChange)="handlePagination($event.detail)"
+  af-result-name="deltagare"
+></digi-navigation-pagination>

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

@@ -27,4 +27,9 @@
     display: inline-flex;
     right: 0.5rem;
   }
+
+  &__pagination {
+    display: block;
+    margin-top: var(--digi--layout--gutter);
+  }
 }

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

@@ -1,7 +1,7 @@
 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 { ParticipantsService } from '@dafa-services/api/participants.service';
+import { BehaviorSubject } from 'rxjs';
 
 @Component({
   selector: 'dafa-participants-list',
@@ -14,9 +14,34 @@ export class ParticipantsListComponent {
   @Input() sortBy: SortBy | null;
   @Output() sorted = new EventEmitter<keyof Participant>();
 
-  constructor(private participantsService: ParticipantsService) {}
+  private _currentPage$ = new BehaviorSubject<number>(1);
+  private _participantsPerPage = 10;
+
+  get currentPage(): number {
+    return this._currentPage$.getValue();
+  }
+
+  get totalPages(): number {
+    return Math.ceil(this.participants.length / this._participantsPerPage);
+  }
+
+  get pagedParticipants(): Participant[] {
+    return [...this.participants].slice(this.currentResultStart - 1, this.currentResultEnd - 1);
+  }
+
+  get currentResultStart(): number {
+    return (this.currentPage - 1) * this._participantsPerPage + 1;
+  }
+
+  get currentResultEnd(): number {
+    return this.currentResultStart + this._participantsPerPage;
+  }
 
   handleSort(key: keyof Participant): void {
     this.sorted.emit(key);
   }
+
+  handlePagination(page: number): void {
+    this._currentPage$.next(page);
+  }
 }

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

@@ -1,9 +1,10 @@
 import { DigiNgTableModule } from '@af/digi-ng/_table/table';
 import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ParticipantsListComponent } from './participants-list.component';
 
 @NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [ParticipantsListComponent],
   imports: [CommonModule, DigiNgTableModule],
   exports: [ParticipantsListComponent],

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

@@ -16,19 +16,25 @@
     ></digi-form-input-search>
   </form>
 
-  <dafa-participants-list
+  <section class="participants__list">
-    *ngIf="activeParticipants$ | async as participants; else loadingRef"
+    <h2>Pågående tjänst</h2>
-    [participants]="participants"
+    <dafa-participants-list
-    [sortBy]="activeParticipantsSortBy$ | async"
+      *ngIf="activeParticipants$ | async as participants; else loadingRef"
-    (sorted)="handleActiveParticipantsSort($event)"
+      [participants]="participants"
-  ></dafa-participants-list>
+      [sortBy]="activeParticipantsSortBy$ | async"
+      (sorted)="handleActiveParticipantsSort($event)"
+    ></dafa-participants-list>
+  </section>
 
-  <dafa-participants-list
+  <section class="participants__list">
-    *ngIf="followUpParticipants$ | async as participants; else loadingRef"
+    <h2>För uppföljning</h2>
-    [participants]="participants"
+    <dafa-participants-list
-    [sortBy]="followUpParticipantsSortBy$ | async"
+      *ngIf="followUpParticipants$ | async as participants; else loadingRef"
-    (sorted)="handleFollowUpParticipantsSort($event)"
+      [participants]="participants"
-  ></dafa-participants-list>
+      [sortBy]="followUpParticipantsSortBy$ | async"
+      (sorted)="handleFollowUpParticipantsSort($event)"
+    ></dafa-participants-list>
+  </section>
 
   <ng-template #loadingRef>
     <digi-ng-skeleton-base [afCount]="3" afText="Laddar deltagare"></digi-ng-skeleton-base>

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

@@ -1,5 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { ParticipantStatus } from '@dafa-enums/participant-status.enum';
 import { environment } from '@dafa-environment';
 import { Participant } from '@dafa-models/participant.model';
 import { SortBy } from '@dafa-models/sort-by.model';
@@ -47,7 +48,8 @@ export class ParticipantsService {
     this._activeParticipantsSortBy$,
   ]).pipe(
     map(([participants, sortBy]) => {
-      return sortBy ? sort(participants, sortBy) : participants;
+      const activeParticipants = participants.filter(participant => participant.status === ParticipantStatus.ACTIVE);
+      return sortBy ? sort(activeParticipants, sortBy) : activeParticipants;
     })
   );
 
@@ -56,7 +58,10 @@ export class ParticipantsService {
     this._followUpParticipantsSortBy$,
   ]).pipe(
     map(([participants, sortBy]) => {
-      return sortBy ? sort(participants, sortBy) : participants;
+      const followUpParticipants = participants.filter(
+        participant => participant.status === ParticipantStatus.FOLLOW_UP
+      );
+      return sortBy ? sort(followUpParticipants, sortBy) : followUpParticipants;
     })
   );