From c03b66c6bcd69ca8b0e01e5c5bdb4e8925506dbf Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date: Mon, 29 Mar 2021 10:17:00 +0200
Subject: [PATCH] Added some functionality and some new data to mock-api

---
 .../navigation/navigation.component.html      |   4 +-
 .../src/app/data/models/participant.model.ts  |   4 +
 .../participants-list.component.html          |  60 +-
 .../participants-list.component.scss          |  30 +
 .../participants-list.component.ts            |   9 +
 .../participants/participants.component.html  |   1 +
 .../participants/participants.component.ts    |   4 +-
 .../app/services/api/participants.service.ts  |  41 +-
 apps/dafa-web/src/styles/styles.scss          |   9 +
 mock-api/dafa-web/api.json                    | 633 ++++++++++--------
 mock-api/dafa-web/scripts/participants.js     |   3 +-
 11 files changed, 490 insertions(+), 308 deletions(-)

diff --git a/apps/dafa-web/src/app/components/navigation/navigation.component.html b/apps/dafa-web/src/app/components/navigation/navigation.component.html
index 2d6f31a..ab2d5a6 100644
--- a/apps/dafa-web/src/app/components/navigation/navigation.component.html
+++ b/apps/dafa-web/src/app/components/navigation/navigation.component.html
@@ -5,7 +5,7 @@
     </a>
   </div>
   <ul class="navigation__list dafa__hide-on-print">
-    <li class="navigation__item">
+    <!-- <li class="navigation__item">
       <a
         class="navigation__link"
         [routerLink]="['/']"
@@ -15,7 +15,7 @@
         <dafa-icon [icon]="iconType.HOME" size="l"></dafa-icon>
         <span class="navigation__text">Startsida</span>
       </a>
-    </li>
+    </li> -->
     <li class="navigation__item" *ngIf="user">
       <div class="navigation__no-link">
         <dafa-icon [icon]="iconType.USER" size="l"></dafa-icon>
diff --git a/apps/dafa-web/src/app/data/models/participant.model.ts b/apps/dafa-web/src/app/data/models/participant.model.ts
index 2712f51..45e22ca 100644
--- a/apps/dafa-web/src/app/data/models/participant.model.ts
+++ b/apps/dafa-web/src/app/data/models/participant.model.ts
@@ -6,4 +6,8 @@ export interface Participant {
   lastName: string;
   service: Service;
   errandNumber: number;
+  startDate: Date;
+  endDate: Date;
+  handleBefore: Date;
+  fullName?: string;
 }
diff --git a/apps/dafa-web/src/app/pages/participants/components/participants-list/participants-list.component.html b/apps/dafa-web/src/app/pages/participants/components/participants-list/participants-list.component.html
index 1d5f410..9dcaeff 100644
--- a/apps/dafa-web/src/app/pages/participants/components/participants-list/participants-list.component.html
+++ b/apps/dafa-web/src/app/pages/participants/components/participants-list/participants-list.component.html
@@ -2,11 +2,60 @@
   <table>
     <thead>
       <tr>
-        <th scope="col">Namn</th>
-        <th scope="col">Ärendenummer</th>
-        <th scope="col">Tjänst</th>
-        <th scope="col">Startdatum</th>
-        <th scope="col">Slutdatum</th>
+        <th scope="col" class="participants-list__column-head">
+          <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>
+            </ng-container>
+          </button>
+        </th>
+        <th scope="col" class="participants-list__column-head">
+          <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>
+            </ng-container>
+          </button>
+        </th>
+        <th scope="col" class="participants-list__column-head">
+          <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>
+            </ng-container>
+          </button>
+        </th>
+        <th scope="col" class="participants-list__column-head">
+          <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>
+            </ng-container>
+          </button>
+        </th>
+        <th scope="col" class="participants-list__column-head">
+          <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>
+            </ng-container>
+          </button>
+        </th>
+        <th scope="col" class="participants-list__column-head">
+          <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>
+            </ng-container>
+          </button>
+        </th>
       </tr>
     </thead>
     <tbody>
@@ -16,6 +65,7 @@
         <td>{{ participant.service }}</td>
         <td>{{ participant.startDate | date: 'yyyy-MM-dd' }}</td>
         <td>{{ participant.endDate | date: 'yyyy-MM-dd' }}</td>
+        <td>{{ participant.handleBefore | date: 'yyyy-MM-dd' }}</td>
       </tr>
     </tbody>
   </table>
diff --git a/apps/dafa-web/src/app/pages/participants/components/participants-list/participants-list.component.scss b/apps/dafa-web/src/app/pages/participants/components/participants-list/participants-list.component.scss
index e69de29..15a1d63 100644
--- a/apps/dafa-web/src/app/pages/participants/components/participants-list/participants-list.component.scss
+++ b/apps/dafa-web/src/app/pages/participants/components/participants-list/participants-list.component.scss
@@ -0,0 +1,30 @@
+@import 'variables/gutters';
+
+.participants-list {
+  &__column-head {
+    padding: 0;
+  }
+
+  &__sort-button {
+    position: relative;
+    background-color: transparent;
+    border-width: 0;
+    width: 100%;
+    text-align: left;
+    padding: var(--digi--layout--gutter--s) $digi--layout--gutter--l var(--digi--layout--gutter--s)
+      var(--digi--layout--gutter);
+    margin: 0;
+    font-size: inherit;
+    font-weight: inherit;
+    display: flex;
+    align-items: center;
+    gap: var(--digi--layout--gutter);
+    cursor: pointer;
+  }
+
+  &__sort-icon {
+    position: absolute;
+    display: inline-flex;
+    right: 0.5rem;
+  }
+}
diff --git a/apps/dafa-web/src/app/pages/participants/components/participants-list/participants-list.component.ts b/apps/dafa-web/src/app/pages/participants/components/participants-list/participants-list.component.ts
index 67bf5c5..44cd6a7 100644
--- a/apps/dafa-web/src/app/pages/participants/components/participants-list/participants-list.component.ts
+++ b/apps/dafa-web/src/app/pages/participants/components/participants-list/participants-list.component.ts
@@ -1,5 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } 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';
 
 @Component({
   selector: 'dafa-participants-list',
@@ -9,4 +11,11 @@ import { Participant } from '@dafa-models/participant.model';
 })
 export class ParticipantsListComponent {
   @Input() participants: Participant[];
+  @Input() sortBy: SortBy | null;
+
+  constructor(private participantsService: ParticipantsService) {}
+
+  handleSort(key: keyof Participant): void {
+    this.participantsService.setSortKey(key);
+  }
 }
diff --git a/apps/dafa-web/src/app/pages/participants/participants.component.html b/apps/dafa-web/src/app/pages/participants/participants.component.html
index fbd7329..6c0ac12 100644
--- a/apps/dafa-web/src/app/pages/participants/participants.component.html
+++ b/apps/dafa-web/src/app/pages/participants/participants.component.html
@@ -19,6 +19,7 @@
   <dafa-participants-list
     *ngIf="participants$ | async as participants; else loadingRef"
     [participants]="participants"
+    [sortBy]="sortBy$ | async"
   ></dafa-participants-list>
 
   <ng-template #loadingRef>
diff --git a/apps/dafa-web/src/app/pages/participants/participants.component.ts b/apps/dafa-web/src/app/pages/participants/participants.component.ts
index ed49221..c495a54 100644
--- a/apps/dafa-web/src/app/pages/participants/participants.component.ts
+++ b/apps/dafa-web/src/app/pages/participants/participants.component.ts
@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component } 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, Observable } from 'rxjs';
 
@@ -12,6 +13,7 @@ import { BehaviorSubject, Observable } from 'rxjs';
 export class ParticipantsComponent {
   private _searchValue$ = new BehaviorSubject<string>('');
   participants$: Observable<Participant[]> = this.participantsService.participants$;
+  sortBy$: Observable<SortBy | null> = this.participantsService.sortBy$;
 
   constructor(private participantsService: ParticipantsService) {}
 
@@ -20,7 +22,7 @@ export class ParticipantsComponent {
   }
 
   handleSearchSubmit(): void {
-    console.log(this.searchValue);
+    this.participantsService.setSearchFilter(this.searchValue);
   }
 
   handleSearchInput($event: CustomEvent): void {
diff --git a/apps/dafa-web/src/app/services/api/participants.service.ts b/apps/dafa-web/src/app/services/api/participants.service.ts
index 6a5a11d..5626aa9 100644
--- a/apps/dafa-web/src/app/services/api/participants.service.ts
+++ b/apps/dafa-web/src/app/services/api/participants.service.ts
@@ -10,26 +10,51 @@ import { map } from 'rxjs/operators';
   providedIn: 'root',
 })
 export class ParticipantsService {
-  private _participants$: Observable<Participant[]> = this.httpClient.get<Participant[]>(
-    `${environment.apiBase}/participants`
-  );
-  private _sortBy$ = new BehaviorSubject<SortBy | null>({ key: 'service', reverse: false });
+  private _participants$: Observable<Participant[]> = this.httpClient
+    .get<Participant[]>(`${environment.apiBase}/participants`)
+    .pipe(
+      map(participants =>
+        participants.map(participant => ({
+          ...participant,
+          fullName: `${participant.firstName} ${participant.lastName}`,
+        }))
+      )
+    );
+  private _sortBy$ = new BehaviorSubject<SortBy | null>({ key: 'handleBefore', reverse: false });
   public sortBy$: Observable<SortBy> = this._sortBy$.asObservable();
+  private _searchFilter$ = new BehaviorSubject<string>('');
+  public searchFilter$: Observable<string> = this._searchFilter$.asObservable();
+
+  public participants$: Observable<Participant[]> = combineLatest([
+    this._sortBy$,
+    this._participants$,
+    this._searchFilter$,
+  ]).pipe(
+    map(([sortBy, participants, searchFilter]) => {
+      const filteredParticipants = participants.filter(participant => {
+        const searchValueExistsInName = participant.fullName.toLowerCase().includes(searchFilter.toLowerCase());
+        const searchValueExistsInErrandNumber = participant.errandNumber.toString().includes(searchFilter);
+
+        return searchValueExistsInName || searchValueExistsInErrandNumber;
+      });
 
-  public participants$: Observable<Participant[]> = combineLatest([this._sortBy$, this._participants$]).pipe(
-    map(([sortBy, participants]) => {
       if (sortBy) {
         const reverse = sortBy.reverse ? -1 : 1;
-        return [...participants].sort((a, b) => {
+        return [...filteredParticipants].sort((a, b) => {
           const first = a[sortBy.key];
           const second = b[sortBy.key];
-          return reverse * +(first > second) - +(second > first);
+
+          return reverse * (+(first > second) - +(second > first));
         });
       }
       return participants;
     })
   );
 
+  public setSearchFilter(value: string) {
+    this._searchFilter$.next(value);
+  }
+
   public setSortKey(key: keyof Participant) {
     const currentSortBy = this._sortBy$.getValue();
     let reverse = false;
diff --git a/apps/dafa-web/src/styles/styles.scss b/apps/dafa-web/src/styles/styles.scss
index 0ae98cb..1ea459d 100644
--- a/apps/dafa-web/src/styles/styles.scss
+++ b/apps/dafa-web/src/styles/styles.scss
@@ -17,10 +17,19 @@ body {
   font-weight: var(--digi--typography--font-weight);
 }
 
+button {
+  font-family: var(--digi--typography--font-family);
+}
+
 strong {
   font-weight: var(--digi--typography--font-weight--semibold);
 }
 
+// Make all digi icons display inline-flex to make them get the correct height.
+[class^='sc-digi-icon'] {
+  display: inline-flex;
+}
+
 .dafa {
   &__a11y-sr-only {
     @include dafa__a11y-sr-only;
diff --git a/mock-api/dafa-web/api.json b/mock-api/dafa-web/api.json
index 1a29761..5194f39 100644
--- a/mock-api/dafa-web/api.json
+++ b/mock-api/dafa-web/api.json
@@ -2,462 +2,513 @@
 	"participants": [
 		{
 			"id": 0,
-			"firstName": "Lue",
-			"lastName": "Johansson",
+			"firstName": "Zachariah",
+			"lastName": "Gustafsson",
 			"service": "KROM",
-			"errandNumber": 510157,
-			"startDate": "2021-03-24T06:46:25.453Z",
-			"endDate": "2021-03-25T03:46:37.738Z"
+			"errandNumber": 536849,
+			"startDate": "2021-03-29T03:35:58.817Z",
+			"endDate": "2021-12-30T13:16:57.069Z",
+			"handleBefore": "2021-03-30T04:28:41.898Z"
 		},
 		{
 			"id": 1,
-			"firstName": "Jaeden",
-			"lastName": "Eriksson",
-			"service": "STOM",
-			"errandNumber": 377736,
-			"startDate": "2021-03-24T01:27:49.701Z",
-			"endDate": "2021-03-25T09:49:30.060Z"
+			"firstName": "Lane",
+			"lastName": "Olsson",
+			"service": "KVL",
+			"errandNumber": 567126,
+			"startDate": "2021-03-28T09:59:48.777Z",
+			"endDate": "2022-03-18T16:18:38.242Z",
+			"handleBefore": "2021-03-29T09:45:03.024Z"
 		},
 		{
 			"id": 2,
-			"firstName": "Stanford",
-			"lastName": "Persson",
+			"firstName": "Desmond",
+			"lastName": "Nilsson",
 			"service": "STOM",
-			"errandNumber": 248457,
-			"startDate": "2021-03-23T20:24:08.131Z",
-			"endDate": "2021-03-24T18:39:44.497Z"
+			"errandNumber": 438670,
+			"startDate": "2021-03-28T20:16:58.352Z",
+			"endDate": "2021-08-14T12:52:17.152Z",
+			"handleBefore": "2021-03-29T15:16:38.831Z"
 		},
 		{
 			"id": 3,
-			"firstName": "Asa",
-			"lastName": "Johansson",
+			"firstName": "Joyce",
+			"lastName": "Persson",
 			"service": "STOM",
-			"errandNumber": 610178,
-			"startDate": "2021-03-23T22:18:31.880Z",
-			"endDate": "2021-03-25T12:44:26.802Z"
+			"errandNumber": 487945,
+			"startDate": "2021-03-29T01:45:42.364Z",
+			"endDate": "2021-04-28T05:27:50.553Z",
+			"handleBefore": "2021-03-29T12:28:42.680Z"
 		},
 		{
 			"id": 4,
-			"firstName": "Deondre",
-			"lastName": "Persson",
-			"service": "STOM",
-			"errandNumber": 355138,
-			"startDate": "2021-03-23T20:05:52.524Z",
-			"endDate": "2021-03-25T09:54:38.084Z"
+			"firstName": "Kasandra",
+			"lastName": "Karlsson",
+			"service": "KVL",
+			"errandNumber": 803191,
+			"startDate": "2021-03-28T22:58:56.665Z",
+			"endDate": "2021-07-20T12:24:55.428Z",
+			"handleBefore": "2021-03-29T19:19:09.039Z"
 		},
 		{
 			"id": 5,
-			"firstName": "Myrtle",
-			"lastName": "Andersson",
+			"firstName": "Crystal",
+			"lastName": "Gustafsson",
 			"service": "STOM",
-			"errandNumber": 883673,
-			"startDate": "2021-03-24T10:52:18.953Z",
-			"endDate": "2021-03-25T05:56:14.101Z"
+			"errandNumber": 618306,
+			"startDate": "2021-03-29T04:36:23.159Z",
+			"endDate": "2022-02-05T20:19:50.325Z",
+			"handleBefore": "2021-03-29T20:46:28.338Z"
 		},
 		{
 			"id": 6,
-			"firstName": "Maribel",
-			"lastName": "Karlsson",
-			"service": "KVL",
-			"errandNumber": 543298,
-			"startDate": "2021-03-23T23:04:27.274Z",
-			"endDate": "2021-03-25T04:46:18.733Z"
+			"firstName": "Dino",
+			"lastName": "Persson",
+			"service": "KROM",
+			"errandNumber": 747042,
+			"startDate": "2021-03-28T23:31:14.203Z",
+			"endDate": "2021-11-05T04:37:14.244Z",
+			"handleBefore": "2021-03-30T06:46:18.982Z"
 		},
 		{
 			"id": 7,
-			"firstName": "Garnett",
-			"lastName": "Andersson",
-			"service": "KROM",
-			"errandNumber": 181871,
-			"startDate": "2021-03-24T01:25:13.067Z",
-			"endDate": "2021-03-24T23:28:06.677Z"
+			"firstName": "Clarabelle",
+			"lastName": "Persson",
+			"service": "KVL",
+			"errandNumber": 840619,
+			"startDate": "2021-03-28T12:41:19.758Z",
+			"endDate": "2021-12-12T10:47:21.005Z",
+			"handleBefore": "2021-03-29T17:58:23.043Z"
 		},
 		{
 			"id": 8,
-			"firstName": "Felix",
-			"lastName": "Persson",
-			"service": "KVL",
-			"errandNumber": 667535,
-			"startDate": "2021-03-23T23:13:09.457Z",
-			"endDate": "2021-03-24T21:48:33.918Z"
+			"firstName": "Kelley",
+			"lastName": "Larsson",
+			"service": "KROM",
+			"errandNumber": 759971,
+			"startDate": "2021-03-29T01:35:07.331Z",
+			"endDate": "2021-05-11T05:56:37.947Z",
+			"handleBefore": "2021-03-29T22:56:29.566Z"
 		},
 		{
 			"id": 9,
-			"firstName": "Crystal",
-			"lastName": "Gustafsson",
-			"service": "KROM",
-			"errandNumber": 900214,
-			"startDate": "2021-03-24T10:10:24.519Z",
-			"endDate": "2021-03-24T18:54:36.626Z"
+			"firstName": "Noemy",
+			"lastName": "Eriksson",
+			"service": "STOM",
+			"errandNumber": 733022,
+			"startDate": "2021-03-28T17:33:07.590Z",
+			"endDate": "2022-03-28T11:57:02.399Z",
+			"handleBefore": "2021-03-29T18:40:48.693Z"
 		},
 		{
 			"id": 10,
-			"firstName": "Elyssa",
-			"lastName": "Johansson",
-			"service": "STOM",
-			"errandNumber": 622870,
-			"startDate": "2021-03-23T15:20:51.528Z",
-			"endDate": "2021-03-24T22:28:35.177Z"
+			"firstName": "Camryn",
+			"lastName": "Larsson",
+			"service": "KVL",
+			"errandNumber": 975949,
+			"startDate": "2021-03-29T05:44:22.261Z",
+			"endDate": "2021-07-01T07:11:45.448Z",
+			"handleBefore": "2021-03-29T08:34:21.991Z"
 		},
 		{
 			"id": 11,
-			"firstName": "Vivienne",
-			"lastName": "Larsson",
-			"service": "STOM",
-			"errandNumber": 859592,
-			"startDate": "2021-03-24T11:33:18.907Z",
-			"endDate": "2021-03-24T18:33:13.229Z"
+			"firstName": "Susanna",
+			"lastName": "Gustafsson",
+			"service": "KVL",
+			"errandNumber": 633058,
+			"startDate": "2021-03-28T09:55:34.767Z",
+			"endDate": "2021-12-24T16:16:54.023Z",
+			"handleBefore": "2021-03-29T22:46:14.021Z"
 		},
 		{
 			"id": 12,
-			"firstName": "Joyce",
-			"lastName": "Karlsson",
-			"service": "KVL",
-			"errandNumber": 538461,
-			"startDate": "2021-03-24T01:08:08.322Z",
-			"endDate": "2021-03-24T16:38:08.640Z"
+			"firstName": "Charlotte",
+			"lastName": "Eriksson",
+			"service": "KROM",
+			"errandNumber": 274938,
+			"startDate": "2021-03-29T07:24:08.879Z",
+			"endDate": "2022-03-12T12:50:47.862Z",
+			"handleBefore": "2021-03-29T19:07:36.447Z"
 		},
 		{
 			"id": 13,
-			"firstName": "Tressie",
-			"lastName": "Larsson",
-			"service": "KVL",
-			"errandNumber": 898416,
-			"startDate": "2021-03-24T12:03:35.746Z",
-			"endDate": "2021-03-25T07:50:31.027Z"
+			"firstName": "Malcolm",
+			"lastName": "Persson",
+			"service": "KROM",
+			"errandNumber": 700835,
+			"startDate": "2021-03-28T12:21:10.957Z",
+			"endDate": "2021-08-09T00:09:38.945Z",
+			"handleBefore": "2021-03-29T16:50:18.821Z"
 		},
 		{
 			"id": 14,
-			"firstName": "Destany",
+			"firstName": "Marisa",
 			"lastName": "Nilsson",
-			"service": "KROM",
-			"errandNumber": 108382,
-			"startDate": "2021-03-24T12:19:05.009Z",
-			"endDate": "2021-03-24T15:18:58.854Z"
+			"service": "KVL",
+			"errandNumber": 720806,
+			"startDate": "2021-03-28T14:52:48.860Z",
+			"endDate": "2021-10-22T18:06:19.433Z",
+			"handleBefore": "2021-03-29T12:48:49.611Z"
 		},
 		{
 			"id": 15,
-			"firstName": "Amparo",
-			"lastName": "Svensson",
-			"service": "KVL",
-			"errandNumber": 575430,
-			"startDate": "2021-03-23T21:21:53.958Z",
-			"endDate": "2021-03-25T05:38:56.819Z"
+			"firstName": "Naomi",
+			"lastName": "Andersson",
+			"service": "KROM",
+			"errandNumber": 117130,
+			"startDate": "2021-03-28T08:43:04.765Z",
+			"endDate": "2022-03-24T09:03:55.824Z",
+			"handleBefore": "2021-03-29T20:18:05.130Z"
 		},
 		{
 			"id": 16,
-			"firstName": "Raheem",
-			"lastName": "Andersson",
-			"service": "KVL",
-			"errandNumber": 953559,
-			"startDate": "2021-03-24T06:15:15.728Z",
-			"endDate": "2021-03-25T04:23:02.270Z"
+			"firstName": "Dion",
+			"lastName": "Eriksson",
+			"service": "STOM",
+			"errandNumber": 345480,
+			"startDate": "2021-03-28T12:17:25.708Z",
+			"endDate": "2021-09-28T12:10:52.671Z",
+			"handleBefore": "2021-03-29T17:42:58.460Z"
 		},
 		{
 			"id": 17,
-			"firstName": "Alanna",
-			"lastName": "Nilsson",
-			"service": "KVL",
-			"errandNumber": 293773,
-			"startDate": "2021-03-23T16:13:40.239Z",
-			"endDate": "2021-03-25T02:56:10.174Z"
+			"firstName": "Brody",
+			"lastName": "Johansson",
+			"service": "STOM",
+			"errandNumber": 733022,
+			"startDate": "2021-03-28T18:35:38.651Z",
+			"endDate": "2021-05-17T12:34:03.549Z",
+			"handleBefore": "2021-03-29T12:31:34.183Z"
 		},
 		{
 			"id": 18,
-			"firstName": "Sebastian",
-			"lastName": "Johansson",
-			"service": "KVL",
-			"errandNumber": 284762,
-			"startDate": "2021-03-24T09:19:22.596Z",
-			"endDate": "2021-03-24T20:59:24.571Z"
+			"firstName": "Luisa",
+			"lastName": "Svensson",
+			"service": "KROM",
+			"errandNumber": 824872,
+			"startDate": "2021-03-28T08:31:02.690Z",
+			"endDate": "2022-03-05T15:55:07.194Z",
+			"handleBefore": "2021-03-30T06:12:51.675Z"
 		},
 		{
 			"id": 19,
-			"firstName": "Gianni",
-			"lastName": "Andersson",
+			"firstName": "Adrian",
+			"lastName": "Johansson",
 			"service": "KVL",
-			"errandNumber": 131231,
-			"startDate": "2021-03-24T01:55:19.500Z",
-			"endDate": "2021-03-25T06:01:58.361Z"
+			"errandNumber": 525875,
+			"startDate": "2021-03-28T15:00:30.790Z",
+			"endDate": "2021-12-16T21:06:46.317Z",
+			"handleBefore": "2021-03-29T11:53:52.678Z"
 		},
 		{
 			"id": 20,
-			"firstName": "Jamarcus",
-			"lastName": "Nilsson",
-			"service": "KROM",
-			"errandNumber": 524071,
-			"startDate": "2021-03-24T00:12:52.690Z",
-			"endDate": "2021-03-25T04:38:04.578Z"
+			"firstName": "Eric",
+			"lastName": "Andersson",
+			"service": "KVL",
+			"errandNumber": 197879,
+			"startDate": "2021-03-28T18:38:22.793Z",
+			"endDate": "2021-09-20T17:47:21.243Z",
+			"handleBefore": "2021-03-29T11:24:02.884Z"
 		},
 		{
 			"id": 21,
-			"firstName": "Shane",
-			"lastName": "Gustafsson",
-			"service": "KROM",
-			"errandNumber": 419503,
-			"startDate": "2021-03-24T10:38:23.132Z",
-			"endDate": "2021-03-24T16:28:05.829Z"
+			"firstName": "Imelda",
+			"lastName": "Nilsson",
+			"service": "STOM",
+			"errandNumber": 889134,
+			"startDate": "2021-03-29T06:25:32.344Z",
+			"endDate": "2021-08-24T18:30:44.496Z",
+			"handleBefore": "2021-03-29T12:53:13.009Z"
 		},
 		{
 			"id": 22,
-			"firstName": "Quincy",
-			"lastName": "Andersson",
-			"service": "STOM",
-			"errandNumber": 980668,
-			"startDate": "2021-03-24T03:39:34.264Z",
-			"endDate": "2021-03-25T11:33:03.528Z"
+			"firstName": "Domenick",
+			"lastName": "Johansson",
+			"service": "KROM",
+			"errandNumber": 907567,
+			"startDate": "2021-03-29T05:55:01.203Z",
+			"endDate": "2021-12-13T04:53:58.357Z",
+			"handleBefore": "2021-03-29T08:08:40.717Z"
 		},
 		{
 			"id": 23,
-			"firstName": "Albert",
-			"lastName": "Gustafsson",
+			"firstName": "Connor",
+			"lastName": "Olsson",
 			"service": "KVL",
-			"errandNumber": 255681,
-			"startDate": "2021-03-24T13:16:53.973Z",
-			"endDate": "2021-03-24T16:15:13.331Z"
+			"errandNumber": 119431,
+			"startDate": "2021-03-29T06:27:18.505Z",
+			"endDate": "2021-12-23T09:46:40.014Z",
+			"handleBefore": "2021-03-29T19:50:17.445Z"
 		},
 		{
 			"id": 24,
-			"firstName": "Zachary",
-			"lastName": "Persson",
+			"firstName": "Ceasar",
+			"lastName": "Eriksson",
 			"service": "STOM",
-			"errandNumber": 235443,
-			"startDate": "2021-03-23T23:22:43.032Z",
-			"endDate": "2021-03-24T22:32:22.796Z"
+			"errandNumber": 461247,
+			"startDate": "2021-03-28T17:57:54.869Z",
+			"endDate": "2022-03-12T03:31:12.605Z",
+			"handleBefore": "2021-03-30T03:13:10.115Z"
 		},
 		{
 			"id": 25,
-			"firstName": "Alvah",
-			"lastName": "Nilsson",
-			"service": "KVL",
-			"errandNumber": 991483,
-			"startDate": "2021-03-24T10:53:18.979Z",
-			"endDate": "2021-03-25T13:40:56.956Z"
+			"firstName": "Kacey",
+			"lastName": "Svensson",
+			"service": "STOM",
+			"errandNumber": 447832,
+			"startDate": "2021-03-28T10:07:40.693Z",
+			"endDate": "2022-01-15T15:16:33.983Z",
+			"handleBefore": "2021-03-29T22:47:15.698Z"
 		},
 		{
 			"id": 26,
-			"firstName": "Royce",
-			"lastName": "Karlsson",
-			"service": "KVL",
-			"errandNumber": 110233,
-			"startDate": "2021-03-23T14:15:49.310Z",
-			"endDate": "2021-03-24T22:10:20.264Z"
+			"firstName": "Moshe",
+			"lastName": "Svensson",
+			"service": "KROM",
+			"errandNumber": 183189,
+			"startDate": "2021-03-28T12:07:57.729Z",
+			"endDate": "2022-02-12T01:22:42.084Z",
+			"handleBefore": "2021-03-30T06:53:20.641Z"
 		},
 		{
 			"id": 27,
-			"firstName": "Natasha",
-			"lastName": "Olsson",
-			"service": "STOM",
-			"errandNumber": 773071,
-			"startDate": "2021-03-24T08:10:36.267Z",
-			"endDate": "2021-03-24T16:09:08.636Z"
+			"firstName": "Dexter",
+			"lastName": "Larsson",
+			"service": "KROM",
+			"errandNumber": 936851,
+			"startDate": "2021-03-28T20:51:25.418Z",
+			"endDate": "2021-08-02T23:04:59.337Z",
+			"handleBefore": "2021-03-29T17:56:43.768Z"
 		},
 		{
 			"id": 28,
-			"firstName": "Ernesto",
-			"lastName": "Persson",
+			"firstName": "Waino",
+			"lastName": "Andersson",
 			"service": "KROM",
-			"errandNumber": 120695,
-			"startDate": "2021-03-24T00:47:04.814Z",
-			"endDate": "2021-03-24T22:59:49.253Z"
+			"errandNumber": 321404,
+			"startDate": "2021-03-28T15:23:11.190Z",
+			"endDate": "2021-09-05T17:48:33.661Z",
+			"handleBefore": "2021-03-30T05:13:00.841Z"
 		},
 		{
 			"id": 29,
-			"firstName": "Stefanie",
-			"lastName": "Johansson",
-			"service": "STOM",
-			"errandNumber": 413726,
-			"startDate": "2021-03-23T16:48:44.204Z",
-			"endDate": "2021-03-24T16:12:52.991Z"
+			"firstName": "Hilma",
+			"lastName": "Olsson",
+			"service": "KROM",
+			"errandNumber": 587769,
+			"startDate": "2021-03-28T23:09:30.690Z",
+			"endDate": "2021-05-29T07:29:27.511Z",
+			"handleBefore": "2021-03-30T05:26:06.647Z"
 		},
 		{
 			"id": 30,
-			"firstName": "Foster",
-			"lastName": "Larsson",
+			"firstName": "Kian",
+			"lastName": "Gustafsson",
 			"service": "KVL",
-			"errandNumber": 653702,
-			"startDate": "2021-03-23T17:53:17.006Z",
-			"endDate": "2021-03-24T16:05:40.969Z"
+			"errandNumber": 383043,
+			"startDate": "2021-03-29T00:48:54.562Z",
+			"endDate": "2021-04-05T02:54:00.526Z",
+			"handleBefore": "2021-03-29T15:27:12.367Z"
 		},
 		{
 			"id": 31,
-			"firstName": "Seth",
-			"lastName": "Johansson",
-			"service": "KVL",
-			"errandNumber": 123533,
-			"startDate": "2021-03-23T22:14:12.564Z",
-			"endDate": "2021-03-24T20:21:11.527Z"
+			"firstName": "Noemie",
+			"lastName": "Olsson",
+			"service": "STOM",
+			"errandNumber": 724307,
+			"startDate": "2021-03-28T19:36:43.720Z",
+			"endDate": "2022-01-01T22:02:32.595Z",
+			"handleBefore": "2021-03-29T15:54:14.762Z"
 		},
 		{
 			"id": 32,
-			"firstName": "Jo",
-			"lastName": "Svensson",
-			"service": "KVL",
-			"errandNumber": 804437,
-			"startDate": "2021-03-24T08:10:37.878Z",
-			"endDate": "2021-03-25T10:11:45.765Z"
+			"firstName": "Orion",
+			"lastName": "Karlsson",
+			"service": "STOM",
+			"errandNumber": 769355,
+			"startDate": "2021-03-28T22:47:10.414Z",
+			"endDate": "2021-12-08T11:25:16.821Z",
+			"handleBefore": "2021-03-30T03:33:35.963Z"
 		},
 		{
 			"id": 33,
-			"firstName": "Ariane",
-			"lastName": "Eriksson",
-			"service": "KROM",
-			"errandNumber": 406681,
-			"startDate": "2021-03-24T01:55:15.813Z",
-			"endDate": "2021-03-25T00:33:13.044Z"
+			"firstName": "Darien",
+			"lastName": "Gustafsson",
+			"service": "KVL",
+			"errandNumber": 795437,
+			"startDate": "2021-03-28T14:25:41.788Z",
+			"endDate": "2021-12-06T17:25:40.528Z",
+			"handleBefore": "2021-03-29T22:52:14.772Z"
 		},
 		{
 			"id": 34,
-			"firstName": "Ephraim",
-			"lastName": "Johansson",
+			"firstName": "Bailee",
+			"lastName": "Nilsson",
 			"service": "STOM",
-			"errandNumber": 248741,
-			"startDate": "2021-03-24T02:16:10.768Z",
-			"endDate": "2021-03-25T07:01:40.677Z"
+			"errandNumber": 917438,
+			"startDate": "2021-03-29T02:16:23.343Z",
+			"endDate": "2021-07-13T20:37:09.622Z",
+			"handleBefore": "2021-03-29T15:38:25.945Z"
 		},
 		{
 			"id": 35,
-			"firstName": "Dee",
-			"lastName": "Olsson",
-			"service": "STOM",
-			"errandNumber": 357775,
-			"startDate": "2021-03-24T10:15:56.279Z",
-			"endDate": "2021-03-25T13:00:01.488Z"
+			"firstName": "Hulda",
+			"lastName": "Nilsson",
+			"service": "KROM",
+			"errandNumber": 283560,
+			"startDate": "2021-03-29T03:24:53.913Z",
+			"endDate": "2021-04-01T09:23:16.957Z",
+			"handleBefore": "2021-03-30T00:49:08.645Z"
 		},
 		{
 			"id": 36,
-			"firstName": "Aron",
-			"lastName": "Eriksson",
-			"service": "STOM",
-			"errandNumber": 860839,
-			"startDate": "2021-03-23T20:54:20.294Z",
-			"endDate": "2021-03-24T16:10:01.281Z"
+			"firstName": "Callie",
+			"lastName": "Andersson",
+			"service": "KROM",
+			"errandNumber": 432061,
+			"startDate": "2021-03-28T13:49:03.976Z",
+			"endDate": "2021-12-04T13:55:16.348Z",
+			"handleBefore": "2021-03-30T04:13:17.975Z"
 		},
 		{
 			"id": 37,
-			"firstName": "Reynold",
-			"lastName": "Svensson",
-			"service": "STOM",
-			"errandNumber": 862554,
-			"startDate": "2021-03-23T18:02:14.687Z",
-			"endDate": "2021-03-25T08:22:51.045Z"
+			"firstName": "Alejandra",
+			"lastName": "Johansson",
+			"service": "KVL",
+			"errandNumber": 362300,
+			"startDate": "2021-03-28T09:03:17.100Z",
+			"endDate": "2021-04-23T15:28:05.292Z",
+			"handleBefore": "2021-03-29T19:41:07.119Z"
 		},
 		{
 			"id": 38,
-			"firstName": "Emanuel",
-			"lastName": "Olsson",
-			"service": "KVL",
-			"errandNumber": 765311,
-			"startDate": "2021-03-24T04:01:26.883Z",
-			"endDate": "2021-03-24T18:01:10.758Z"
+			"firstName": "Jovanny",
+			"lastName": "Persson",
+			"service": "KROM",
+			"errandNumber": 886469,
+			"startDate": "2021-03-28T16:25:50.440Z",
+			"endDate": "2021-10-19T13:14:28.723Z",
+			"handleBefore": "2021-03-29T21:16:42.820Z"
 		},
 		{
 			"id": 39,
-			"firstName": "Marco",
+			"firstName": "Josiah",
 			"lastName": "Eriksson",
-			"service": "KROM",
-			"errandNumber": 760265,
-			"startDate": "2021-03-24T08:27:30.962Z",
-			"endDate": "2021-03-25T05:04:10.669Z"
+			"service": "STOM",
+			"errandNumber": 699471,
+			"startDate": "2021-03-28T18:14:02.241Z",
+			"endDate": "2022-01-19T14:09:03.796Z",
+			"handleBefore": "2021-03-29T13:24:02.164Z"
 		},
 		{
 			"id": 40,
-			"firstName": "Deanna",
-			"lastName": "Larsson",
-			"service": "STOM",
-			"errandNumber": 769850,
-			"startDate": "2021-03-24T09:21:33.805Z",
-			"endDate": "2021-03-25T07:50:32.169Z"
+			"firstName": "Demond",
+			"lastName": "Olsson",
+			"service": "KVL",
+			"errandNumber": 758645,
+			"startDate": "2021-03-28T11:11:49.947Z",
+			"endDate": "2021-04-25T15:44:07.973Z",
+			"handleBefore": "2021-03-30T05:52:23.896Z"
 		},
 		{
 			"id": 41,
-			"firstName": "Jeffry",
-			"lastName": "Svensson",
-			"service": "STOM",
-			"errandNumber": 864535,
-			"startDate": "2021-03-23T18:34:56.980Z",
-			"endDate": "2021-03-25T04:20:36.484Z"
+			"firstName": "Rachael",
+			"lastName": "Larsson",
+			"service": "KVL",
+			"errandNumber": 213883,
+			"startDate": "2021-03-28T13:48:26.872Z",
+			"endDate": "2021-08-11T14:50:26.845Z",
+			"handleBefore": "2021-03-30T06:14:28.062Z"
 		},
 		{
 			"id": 42,
-			"firstName": "Rosa",
-			"lastName": "Persson",
-			"service": "KROM",
-			"errandNumber": 605416,
-			"startDate": "2021-03-24T05:31:06.285Z",
-			"endDate": "2021-03-25T08:32:14.905Z"
+			"firstName": "Hank",
+			"lastName": "Gustafsson",
+			"service": "STOM",
+			"errandNumber": 317122,
+			"startDate": "2021-03-29T02:03:12.368Z",
+			"endDate": "2021-04-06T13:41:00.314Z",
+			"handleBefore": "2021-03-30T06:04:08.036Z"
 		},
 		{
 			"id": 43,
-			"firstName": "Gail",
-			"lastName": "Larsson",
+			"firstName": "Jamaal",
+			"lastName": "Persson",
 			"service": "KROM",
-			"errandNumber": 683500,
-			"startDate": "2021-03-24T02:42:36.756Z",
-			"endDate": "2021-03-25T07:10:42.685Z"
+			"errandNumber": 254985,
+			"startDate": "2021-03-28T22:09:50.067Z",
+			"endDate": "2021-08-14T16:06:06.014Z",
+			"handleBefore": "2021-03-30T03:20:43.517Z"
 		},
 		{
 			"id": 44,
-			"firstName": "Scot",
-			"lastName": "Karlsson",
-			"service": "STOM",
-			"errandNumber": 123534,
-			"startDate": "2021-03-23T15:51:54.993Z",
-			"endDate": "2021-03-25T13:53:14.385Z"
+			"firstName": "Lulu",
+			"lastName": "Andersson",
+			"service": "KVL",
+			"errandNumber": 698835,
+			"startDate": "2021-03-29T05:26:47.608Z",
+			"endDate": "2021-08-07T06:49:21.202Z",
+			"handleBefore": "2021-03-30T04:42:36.097Z"
 		},
 		{
 			"id": 45,
-			"firstName": "Kylee",
-			"lastName": "Karlsson",
+			"firstName": "Brianne",
+			"lastName": "Nilsson",
 			"service": "KROM",
-			"errandNumber": 506523,
-			"startDate": "2021-03-24T01:35:28.281Z",
-			"endDate": "2021-03-24T14:30:57.283Z"
+			"errandNumber": 410723,
+			"startDate": "2021-03-28T23:58:34.372Z",
+			"endDate": "2021-09-18T19:31:33.334Z",
+			"handleBefore": "2021-03-29T16:21:08.880Z"
 		},
 		{
 			"id": 46,
-			"firstName": "Trystan",
-			"lastName": "Olsson",
-			"service": "KVL",
-			"errandNumber": 172236,
-			"startDate": "2021-03-23T15:08:14.955Z",
-			"endDate": "2021-03-25T12:28:55.169Z"
+			"firstName": "Rhoda",
+			"lastName": "Gustafsson",
+			"service": "STOM",
+			"errandNumber": 249730,
+			"startDate": "2021-03-28T09:56:22.796Z",
+			"endDate": "2021-11-08T09:52:39.151Z",
+			"handleBefore": "2021-03-30T03:57:05.253Z"
 		},
 		{
 			"id": 47,
-			"firstName": "Lilian",
-			"lastName": "Persson",
+			"firstName": "Irwin",
+			"lastName": "Eriksson",
 			"service": "STOM",
-			"errandNumber": 353928,
-			"startDate": "2021-03-24T04:51:58.678Z",
-			"endDate": "2021-03-25T00:08:42.488Z"
+			"errandNumber": 395606,
+			"startDate": "2021-03-28T10:58:36.254Z",
+			"endDate": "2021-09-26T01:53:29.905Z",
+			"handleBefore": "2021-03-30T07:13:37.504Z"
 		},
 		{
 			"id": 48,
-			"firstName": "Carolyne",
-			"lastName": "Eriksson",
-			"service": "STOM",
-			"errandNumber": 311376,
-			"startDate": "2021-03-24T13:20:52.046Z",
-			"endDate": "2021-03-25T10:48:58.199Z"
+			"firstName": "Candido",
+			"lastName": "Larsson",
+			"service": "KROM",
+			"errandNumber": 805048,
+			"startDate": "2021-03-29T03:00:50.863Z",
+			"endDate": "2021-06-08T23:53:39.404Z",
+			"handleBefore": "2021-03-29T20:01:49.405Z"
 		},
 		{
 			"id": 49,
-			"firstName": "Aniya",
-			"lastName": "Persson",
-			"service": "KROM",
-			"errandNumber": 817121,
-			"startDate": "2021-03-23T15:57:10.245Z",
-			"endDate": "2021-03-24T21:08:49.518Z"
+			"firstName": "Tyshawn",
+			"lastName": "Karlsson",
+			"service": "STOM",
+			"errandNumber": 220243,
+			"startDate": "2021-03-28T17:38:49.230Z",
+			"endDate": "2021-05-01T21:05:19.336Z",
+			"handleBefore": "2021-03-29T23:20:30.570Z"
 		},
 		{
 			"id": 50,
-			"firstName": "Kristina",
-			"lastName": "Gustafsson",
-			"service": "KVL",
-			"errandNumber": 941697,
-			"startDate": "2021-03-23T20:22:25.326Z",
-			"endDate": "2021-03-25T05:32:47.175Z"
+			"firstName": "Gudrun",
+			"lastName": "Eriksson",
+			"service": "STOM",
+			"errandNumber": 227839,
+			"startDate": "2021-03-28T23:01:57.736Z",
+			"endDate": "2021-07-19T04:13:07.539Z",
+			"handleBefore": "2021-03-29T23:36:23.397Z"
 		}
 	]
 }
\ No newline at end of file
diff --git a/mock-api/dafa-web/scripts/participants.js b/mock-api/dafa-web/scripts/participants.js
index 3317774..3b8136b 100644
--- a/mock-api/dafa-web/scripts/participants.js
+++ b/mock-api/dafa-web/scripts/participants.js
@@ -15,7 +15,8 @@ function generateParticipants(amount = 10) {
       service: AVAILABLE_SERVICES[Math.floor(Math.random() * AVAILABLE_SERVICES.length)],
       errandNumber: faker.random.number({ min: 100000, max: 999999 }),
       startDate: faker.date.recent(),
-      endDate: faker.date.soon(),
+      endDate: faker.date.future(),
+      handleBefore: faker.date.soon(),
     });
   }