Added foundation of a simple mock-api

angular.json

@@ -88,7 +88,8 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "dafa-web:build"
+            "browserTarget": "dafa-web:build",
+            "proxyConfig": "./config/proxy.conf.json"
           },
           "configurations": {
             "production": {

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

@@ -5,10 +5,8 @@
     <dafa-navigation [user]="user"></dafa-navigation>
   </header>
 
-  <main id="dafa-main-content" class="dafa__main">
-    <dafa-sidebar class="dafa__sidebar"></dafa-sidebar>
-    <div class="dafa__content">
-      <router-outlet></router-outlet>
-    </div>
+  <dafa-sidebar class="dafa__sidebar"></dafa-sidebar>
+  <main id="dafa-main-content" class="dafa__content">
+    <router-outlet></router-outlet>
   </main>
 </div>

apps/dafa-web/src/app/app.component.scss

@@ -1,24 +1,35 @@
 @import 'variables/navigation';
 @import 'variables/breakpoints';
+@import 'variables/gutters';
 
 .dafa {
-  &__main {
-    display: grid;
-    grid-template-columns: 15rem 1fr;
-    grid-template-areas: 'sidebar content';
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  display: grid;
+  grid-template-columns: 15rem 1fr;
+  grid-template-rows: $dafa__navigation-height 1fr;
+  grid-template-areas:
+    'header header'
+    'sidebar content';
+
+  @media (min-width: $digi--layout--breakpoint--m) {
+    grid-template-rows: $dafa__navigation-height-large 1fr;
+  }
+
+  &__header {
+    grid-area: header;
   }
 
   &__sidebar {
     grid-area: sidebar;
-    height: calc(100vh - #{$dafa__navigation-height} - 1px);
-
-    @media (min-width: $digi--layout--breakpoint--m) {
-      height: calc(100vh - #{$dafa__navigation-height-large} - 1px);
-    }
+    background-color: var(--digi--ui--color--background--secondary);
+    border-right: 1px solid var(--digi--ui--color--background--off);
   }
 
   &__content {
     grid-area: content;
-    padding: 1.25rem 1.5rem;
+    padding: var(--digi--layout--gutter) $digi--layout--gutter--l $digi--layout--gutter--xxl;
+    overflow-y: auto;
   }
 }

apps/dafa-web/src/app/components/sidebar/sidebar.component.scss

@@ -3,10 +3,9 @@
 
 .sidebar {
   display: flex;
-  height: 100%;
   flex-direction: column;
-  background-color: var(--digi--ui--color--background--secondary);
-  border-right: 1px solid var(--digi--ui--color--background--off);
+  position: sticky;
+  top: 0;
 
   &__list {
     @include dafa__reset-list;

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

@@ -0,0 +1,5 @@
+export enum Service {
+  KVL = 'KVL',
+  KROM = 'KROM',
+  STOM = 'STOM',
+}

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

@@ -0,0 +1,9 @@
+import { Service } from '@dafa-enums/service.enum';
+
+export interface Participant {
+  id: number;
+  firstName: string;
+  lastName: string;
+  service: Service;
+  errandNumber: number;
+}

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

@@ -0,0 +1,6 @@
+import { Participant } from './participant.model';
+
+export interface SortBy {
+  key: keyof Participant;
+  reverse: boolean;
+}

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

@@ -0,0 +1,22 @@
+<digi-ng-table>
+  <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>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let participant of participants">
+        <th scope="row">{{ participant.firstName }} {{ participant.lastName }}</th>
+        <td>{{ participant.errandNumber }}</td>
+        <td>{{ participant.service }}</td>
+        <td>{{ participant.startDate | date: 'yyyy-MM-dd' }}</td>
+        <td>{{ participant.endDate | date: 'yyyy-MM-dd' }}</td>
+      </tr>
+    </tbody>
+  </table>
+</digi-ng-table>

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

@@ -0,0 +1,26 @@
+import { DigiNgTableModule } from '@af/digi-ng/_table/table';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ParticipantsListComponent } from './participants-list.component';
+
+describe('ParticipantsListComponent', () => {
+  let component: ParticipantsListComponent;
+  let fixture: ComponentFixture<ParticipantsListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ParticipantsListComponent],
+      imports: [RouterTestingModule, DigiNgTableModule],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ParticipantsListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Participant } from '@dafa-models/participant.model';
+
+@Component({
+  selector: 'dafa-participants-list',
+  templateUrl: './participants-list.component.html',
+  styleUrls: ['./participants-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ParticipantsListComponent {
+  @Input() participants: Participant[];
+}

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

@@ -0,0 +1,11 @@
+import { DigiNgTableModule } from '@af/digi-ng/_table/table';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ParticipantsListComponent } from './participants-list.component';
+
+@NgModule({
+  declarations: [ParticipantsListComponent],
+  imports: [CommonModule, DigiNgTableModule],
+  exports: [ParticipantsListComponent],
+})
+export class ParticipantsListModule {}

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

@@ -1,18 +1,27 @@
-<digi-typography>
-  <section class="participants">
+<section class="participants">
+  <digi-typography>
     <h1>Mina deltagare</h1>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam magna neque, interdum vel massa eget, condimentum
       rutrum velit. Sed vitae ullamcorper sem. Aliquam malesuada nunc sed purus mollis scelerisque. Curabitur bibendum
       leo quis ante porttitor tincidunt. Nam tincidunt imperdiet tortor eu suscipit. Maecenas ut dui est.
     </p>
+  </digi-typography>
 
-    <form class="participants__search-wrapper" (ngSubmit)="handleSearchSubmit()">
-      <digi-form-input-search
-        af-label="Sök kunder"
-        af-label-description="Sök på namn eller ärendenummer"
-        (afOnInput)="handleSearchInput($event)"
-      ></digi-form-input-search>
-    </form>
-  </section>
-</digi-typography>
+  <form class="participants__search-wrapper" (ngSubmit)="handleSearchSubmit()">
+    <digi-form-input-search
+      af-label="Sök kunder"
+      af-label-description="Sök på namn eller ärendenummer"
+      (afOnInput)="handleSearchInput($event)"
+    ></digi-form-input-search>
+  </form>
+
+  <dafa-participants-list
+    *ngIf="participants$ | async as participants; else loadingRef"
+    [participants]="participants"
+  ></dafa-participants-list>
+
+  <ng-template #loadingRef>
+    <digi-ng-skeleton-base [afCount]="3" afText="Laddar deltagare"></digi-ng-skeleton-base>
+  </ng-template>
+</section>

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

@@ -1,5 +1,9 @@
+@import 'variables/gutters';
+
 .participants {
   &__search-wrapper {
     max-width: var(--digi--typography--text--max-width);
+    margin-top: $digi--layout--gutter--l;
+    margin-bottom: $digi--layout--gutter--xl;
   }
 }

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

@@ -1,5 +1,7 @@
+import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
+import { ParticipantsListModule } from './components/participants-list/participants-list.module';
 import { ParticipantsComponent } from './participants.component';
 
 describe('ParticipantsComponent', () => {
@@ -10,7 +12,7 @@ describe('ParticipantsComponent', () => {
     waitForAsync(() => {
       TestBed.configureTestingModule({
         declarations: [ParticipantsComponent],
-        imports: [RouterTestingModule],
+        imports: [RouterTestingModule, DigiNgSkeletonBaseModule, ParticipantsListModule],
       }).compileComponents();
     })
   );

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

@@ -1,5 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
+import { Participant } from '@dafa-models/participant.model';
+import { ParticipantsService } from '@dafa-services/api/participants.service';
+import { BehaviorSubject, Observable } from 'rxjs';
 
 @Component({
   selector: 'dafa-participants',
@@ -9,6 +11,9 @@ import { BehaviorSubject } from 'rxjs';
 })
 export class ParticipantsComponent {
   private _searchValue$ = new BehaviorSubject<string>('');
+  participants$: Observable<Participant[]> = this.participantsService.participants$;
+
+  constructor(private participantsService: ParticipantsService) {}
 
   get searchValue(): string {
     return this._searchValue$.getValue();

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

@@ -1,12 +1,20 @@
+import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
+import { ParticipantsListModule } from './components/participants-list/participants-list.module';
 import { ParticipantsComponent } from './participants.component';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [ParticipantsComponent],
-  imports: [CommonModule, RouterModule.forChild([{ path: '', component: ParticipantsComponent }]), FormsModule],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([{ path: '', component: ParticipantsComponent }]),
+    FormsModule,
+    DigiNgSkeletonBaseModule,
+    ParticipantsListModule,
+  ],
 })
 export class ParticipantsModule {}

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

@@ -0,0 +1,45 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { environment } from '@dafa-environment';
+import { Participant } from '@dafa-models/participant.model';
+import { SortBy } from '@dafa-models/sort-by.model';
+import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Injectable({
+  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 });
+  public sortBy$: Observable<SortBy> = this._sortBy$.asObservable();
+
+  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) => {
+          const first = a[sortBy.key];
+          const second = b[sortBy.key];
+          return reverse * +(first > second) - +(second > first);
+        });
+      }
+      return participants;
+    })
+  );
+
+  public setSortKey(key: keyof Participant) {
+    const currentSortBy = this._sortBy$.getValue();
+    let reverse = false;
+
+    if (currentSortBy?.key === key) {
+      reverse = !currentSortBy.reverse;
+    }
+
+    this._sortBy$.next({ key, reverse });
+  }
+
+  constructor(private httpClient: HttpClient) {}
+}

apps/dafa-web/src/environments/environment.prod.ts

@@ -1,3 +1,4 @@
 export const environment = {
   production: true,
+  apiBase: '/api',
 };

apps/dafa-web/src/environments/environment.ts

@@ -4,6 +4,7 @@
 
 export const environment = {
   production: false,
+  apiBase: '/api',
 };
 
 /*

apps/dafa-web/src/styles/functions/_rem.scss

@@ -0,0 +1 @@
+@import '~@af/digi-core/src/global/styles/base/functions/rem';

apps/dafa-web/src/styles/variables/_gutters.scss

@@ -0,0 +1,9 @@
+@import '~@af/digi-core/src/global/styles/layout/variables/layout__variables';
+@import 'functions/rem';
+
+// AF DIGI Variables
+$digi--layout--gutter--l: rem(25);
+$digi--layout--gutter--xl: rem(40);
+$digi--layout--gutter--xxl: rem(60);
+
+// Local variables

config/proxy.conf.json

@@ -0,0 +1,9 @@
+{
+  "/api": {
+    "target": "http://localhost:8000/",
+    "secure": false,
+    "pathRewrite": {
+      "^/api": "/"
+    }
+  }
+}

mock-api/dafa-web/api.json

@@ -0,0 +1,463 @@
+{
+	"participants": [
+		{
+			"id": 0,
+			"firstName": "Lue",
+			"lastName": "Johansson",
+			"service": "KROM",
+			"errandNumber": 510157,
+			"startDate": "2021-03-24T06:46:25.453Z",
+			"endDate": "2021-03-25T03:46:37.738Z"
+		},
+		{
+			"id": 1,
+			"firstName": "Jaeden",
+			"lastName": "Eriksson",
+			"service": "STOM",
+			"errandNumber": 377736,
+			"startDate": "2021-03-24T01:27:49.701Z",
+			"endDate": "2021-03-25T09:49:30.060Z"
+		},
+		{
+			"id": 2,
+			"firstName": "Stanford",
+			"lastName": "Persson",
+			"service": "STOM",
+			"errandNumber": 248457,
+			"startDate": "2021-03-23T20:24:08.131Z",
+			"endDate": "2021-03-24T18:39:44.497Z"
+		},
+		{
+			"id": 3,
+			"firstName": "Asa",
+			"lastName": "Johansson",
+			"service": "STOM",
+			"errandNumber": 610178,
+			"startDate": "2021-03-23T22:18:31.880Z",
+			"endDate": "2021-03-25T12:44:26.802Z"
+		},
+		{
+			"id": 4,
+			"firstName": "Deondre",
+			"lastName": "Persson",
+			"service": "STOM",
+			"errandNumber": 355138,
+			"startDate": "2021-03-23T20:05:52.524Z",
+			"endDate": "2021-03-25T09:54:38.084Z"
+		},
+		{
+			"id": 5,
+			"firstName": "Myrtle",
+			"lastName": "Andersson",
+			"service": "STOM",
+			"errandNumber": 883673,
+			"startDate": "2021-03-24T10:52:18.953Z",
+			"endDate": "2021-03-25T05:56:14.101Z"
+		},
+		{
+			"id": 6,
+			"firstName": "Maribel",
+			"lastName": "Karlsson",
+			"service": "KVL",
+			"errandNumber": 543298,
+			"startDate": "2021-03-23T23:04:27.274Z",
+			"endDate": "2021-03-25T04:46:18.733Z"
+		},
+		{
+			"id": 7,
+			"firstName": "Garnett",
+			"lastName": "Andersson",
+			"service": "KROM",
+			"errandNumber": 181871,
+			"startDate": "2021-03-24T01:25:13.067Z",
+			"endDate": "2021-03-24T23:28:06.677Z"
+		},
+		{
+			"id": 8,
+			"firstName": "Felix",
+			"lastName": "Persson",
+			"service": "KVL",
+			"errandNumber": 667535,
+			"startDate": "2021-03-23T23:13:09.457Z",
+			"endDate": "2021-03-24T21:48:33.918Z"
+		},
+		{
+			"id": 9,
+			"firstName": "Crystal",
+			"lastName": "Gustafsson",
+			"service": "KROM",
+			"errandNumber": 900214,
+			"startDate": "2021-03-24T10:10:24.519Z",
+			"endDate": "2021-03-24T18:54:36.626Z"
+		},
+		{
+			"id": 10,
+			"firstName": "Elyssa",
+			"lastName": "Johansson",
+			"service": "STOM",
+			"errandNumber": 622870,
+			"startDate": "2021-03-23T15:20:51.528Z",
+			"endDate": "2021-03-24T22:28:35.177Z"
+		},
+		{
+			"id": 11,
+			"firstName": "Vivienne",
+			"lastName": "Larsson",
+			"service": "STOM",
+			"errandNumber": 859592,
+			"startDate": "2021-03-24T11:33:18.907Z",
+			"endDate": "2021-03-24T18:33:13.229Z"
+		},
+		{
+			"id": 12,
+			"firstName": "Joyce",
+			"lastName": "Karlsson",
+			"service": "KVL",
+			"errandNumber": 538461,
+			"startDate": "2021-03-24T01:08:08.322Z",
+			"endDate": "2021-03-24T16:38:08.640Z"
+		},
+		{
+			"id": 13,
+			"firstName": "Tressie",
+			"lastName": "Larsson",
+			"service": "KVL",
+			"errandNumber": 898416,
+			"startDate": "2021-03-24T12:03:35.746Z",
+			"endDate": "2021-03-25T07:50:31.027Z"
+		},
+		{
+			"id": 14,
+			"firstName": "Destany",
+			"lastName": "Nilsson",
+			"service": "KROM",
+			"errandNumber": 108382,
+			"startDate": "2021-03-24T12:19:05.009Z",
+			"endDate": "2021-03-24T15:18:58.854Z"
+		},
+		{
+			"id": 15,
+			"firstName": "Amparo",
+			"lastName": "Svensson",
+			"service": "KVL",
+			"errandNumber": 575430,
+			"startDate": "2021-03-23T21:21:53.958Z",
+			"endDate": "2021-03-25T05:38:56.819Z"
+		},
+		{
+			"id": 16,
+			"firstName": "Raheem",
+			"lastName": "Andersson",
+			"service": "KVL",
+			"errandNumber": 953559,
+			"startDate": "2021-03-24T06:15:15.728Z",
+			"endDate": "2021-03-25T04:23:02.270Z"
+		},
+		{
+			"id": 17,
+			"firstName": "Alanna",
+			"lastName": "Nilsson",
+			"service": "KVL",
+			"errandNumber": 293773,
+			"startDate": "2021-03-23T16:13:40.239Z",
+			"endDate": "2021-03-25T02:56:10.174Z"
+		},
+		{
+			"id": 18,
+			"firstName": "Sebastian",
+			"lastName": "Johansson",
+			"service": "KVL",
+			"errandNumber": 284762,
+			"startDate": "2021-03-24T09:19:22.596Z",
+			"endDate": "2021-03-24T20:59:24.571Z"
+		},
+		{
+			"id": 19,
+			"firstName": "Gianni",
+			"lastName": "Andersson",
+			"service": "KVL",
+			"errandNumber": 131231,
+			"startDate": "2021-03-24T01:55:19.500Z",
+			"endDate": "2021-03-25T06:01:58.361Z"
+		},
+		{
+			"id": 20,
+			"firstName": "Jamarcus",
+			"lastName": "Nilsson",
+			"service": "KROM",
+			"errandNumber": 524071,
+			"startDate": "2021-03-24T00:12:52.690Z",
+			"endDate": "2021-03-25T04:38:04.578Z"
+		},
+		{
+			"id": 21,
+			"firstName": "Shane",
+			"lastName": "Gustafsson",
+			"service": "KROM",
+			"errandNumber": 419503,
+			"startDate": "2021-03-24T10:38:23.132Z",
+			"endDate": "2021-03-24T16:28:05.829Z"
+		},
+		{
+			"id": 22,
+			"firstName": "Quincy",
+			"lastName": "Andersson",
+			"service": "STOM",
+			"errandNumber": 980668,
+			"startDate": "2021-03-24T03:39:34.264Z",
+			"endDate": "2021-03-25T11:33:03.528Z"
+		},
+		{
+			"id": 23,
+			"firstName": "Albert",
+			"lastName": "Gustafsson",
+			"service": "KVL",
+			"errandNumber": 255681,
+			"startDate": "2021-03-24T13:16:53.973Z",
+			"endDate": "2021-03-24T16:15:13.331Z"
+		},
+		{
+			"id": 24,
+			"firstName": "Zachary",
+			"lastName": "Persson",
+			"service": "STOM",
+			"errandNumber": 235443,
+			"startDate": "2021-03-23T23:22:43.032Z",
+			"endDate": "2021-03-24T22:32:22.796Z"
+		},
+		{
+			"id": 25,
+			"firstName": "Alvah",
+			"lastName": "Nilsson",
+			"service": "KVL",
+			"errandNumber": 991483,
+			"startDate": "2021-03-24T10:53:18.979Z",
+			"endDate": "2021-03-25T13:40:56.956Z"
+		},
+		{
+			"id": 26,
+			"firstName": "Royce",
+			"lastName": "Karlsson",
+			"service": "KVL",
+			"errandNumber": 110233,
+			"startDate": "2021-03-23T14:15:49.310Z",
+			"endDate": "2021-03-24T22:10:20.264Z"
+		},
+		{
+			"id": 27,
+			"firstName": "Natasha",
+			"lastName": "Olsson",
+			"service": "STOM",
+			"errandNumber": 773071,
+			"startDate": "2021-03-24T08:10:36.267Z",
+			"endDate": "2021-03-24T16:09:08.636Z"
+		},
+		{
+			"id": 28,
+			"firstName": "Ernesto",
+			"lastName": "Persson",
+			"service": "KROM",
+			"errandNumber": 120695,
+			"startDate": "2021-03-24T00:47:04.814Z",
+			"endDate": "2021-03-24T22:59:49.253Z"
+		},
+		{
+			"id": 29,
+			"firstName": "Stefanie",
+			"lastName": "Johansson",
+			"service": "STOM",
+			"errandNumber": 413726,
+			"startDate": "2021-03-23T16:48:44.204Z",
+			"endDate": "2021-03-24T16:12:52.991Z"
+		},
+		{
+			"id": 30,
+			"firstName": "Foster",
+			"lastName": "Larsson",
+			"service": "KVL",
+			"errandNumber": 653702,
+			"startDate": "2021-03-23T17:53:17.006Z",
+			"endDate": "2021-03-24T16:05:40.969Z"
+		},
+		{
+			"id": 31,
+			"firstName": "Seth",
+			"lastName": "Johansson",
+			"service": "KVL",
+			"errandNumber": 123533,
+			"startDate": "2021-03-23T22:14:12.564Z",
+			"endDate": "2021-03-24T20:21:11.527Z"
+		},
+		{
+			"id": 32,
+			"firstName": "Jo",
+			"lastName": "Svensson",
+			"service": "KVL",
+			"errandNumber": 804437,
+			"startDate": "2021-03-24T08:10:37.878Z",
+			"endDate": "2021-03-25T10:11:45.765Z"
+		},
+		{
+			"id": 33,
+			"firstName": "Ariane",
+			"lastName": "Eriksson",
+			"service": "KROM",
+			"errandNumber": 406681,
+			"startDate": "2021-03-24T01:55:15.813Z",
+			"endDate": "2021-03-25T00:33:13.044Z"
+		},
+		{
+			"id": 34,
+			"firstName": "Ephraim",
+			"lastName": "Johansson",
+			"service": "STOM",
+			"errandNumber": 248741,
+			"startDate": "2021-03-24T02:16:10.768Z",
+			"endDate": "2021-03-25T07:01:40.677Z"
+		},
+		{
+			"id": 35,
+			"firstName": "Dee",
+			"lastName": "Olsson",
+			"service": "STOM",
+			"errandNumber": 357775,
+			"startDate": "2021-03-24T10:15:56.279Z",
+			"endDate": "2021-03-25T13:00:01.488Z"
+		},
+		{
+			"id": 36,
+			"firstName": "Aron",
+			"lastName": "Eriksson",
+			"service": "STOM",
+			"errandNumber": 860839,
+			"startDate": "2021-03-23T20:54:20.294Z",
+			"endDate": "2021-03-24T16:10:01.281Z"
+		},
+		{
+			"id": 37,
+			"firstName": "Reynold",
+			"lastName": "Svensson",
+			"service": "STOM",
+			"errandNumber": 862554,
+			"startDate": "2021-03-23T18:02:14.687Z",
+			"endDate": "2021-03-25T08:22:51.045Z"
+		},
+		{
+			"id": 38,
+			"firstName": "Emanuel",
+			"lastName": "Olsson",
+			"service": "KVL",
+			"errandNumber": 765311,
+			"startDate": "2021-03-24T04:01:26.883Z",
+			"endDate": "2021-03-24T18:01:10.758Z"
+		},
+		{
+			"id": 39,
+			"firstName": "Marco",
+			"lastName": "Eriksson",
+			"service": "KROM",
+			"errandNumber": 760265,
+			"startDate": "2021-03-24T08:27:30.962Z",
+			"endDate": "2021-03-25T05:04:10.669Z"
+		},
+		{
+			"id": 40,
+			"firstName": "Deanna",
+			"lastName": "Larsson",
+			"service": "STOM",
+			"errandNumber": 769850,
+			"startDate": "2021-03-24T09:21:33.805Z",
+			"endDate": "2021-03-25T07:50:32.169Z"
+		},
+		{
+			"id": 41,
+			"firstName": "Jeffry",
+			"lastName": "Svensson",
+			"service": "STOM",
+			"errandNumber": 864535,
+			"startDate": "2021-03-23T18:34:56.980Z",
+			"endDate": "2021-03-25T04:20:36.484Z"
+		},
+		{
+			"id": 42,
+			"firstName": "Rosa",
+			"lastName": "Persson",
+			"service": "KROM",
+			"errandNumber": 605416,
+			"startDate": "2021-03-24T05:31:06.285Z",
+			"endDate": "2021-03-25T08:32:14.905Z"
+		},
+		{
+			"id": 43,
+			"firstName": "Gail",
+			"lastName": "Larsson",
+			"service": "KROM",
+			"errandNumber": 683500,
+			"startDate": "2021-03-24T02:42:36.756Z",
+			"endDate": "2021-03-25T07:10:42.685Z"
+		},
+		{
+			"id": 44,
+			"firstName": "Scot",
+			"lastName": "Karlsson",
+			"service": "STOM",
+			"errandNumber": 123534,
+			"startDate": "2021-03-23T15:51:54.993Z",
+			"endDate": "2021-03-25T13:53:14.385Z"
+		},
+		{
+			"id": 45,
+			"firstName": "Kylee",
+			"lastName": "Karlsson",
+			"service": "KROM",
+			"errandNumber": 506523,
+			"startDate": "2021-03-24T01:35:28.281Z",
+			"endDate": "2021-03-24T14:30:57.283Z"
+		},
+		{
+			"id": 46,
+			"firstName": "Trystan",
+			"lastName": "Olsson",
+			"service": "KVL",
+			"errandNumber": 172236,
+			"startDate": "2021-03-23T15:08:14.955Z",
+			"endDate": "2021-03-25T12:28:55.169Z"
+		},
+		{
+			"id": 47,
+			"firstName": "Lilian",
+			"lastName": "Persson",
+			"service": "STOM",
+			"errandNumber": 353928,
+			"startDate": "2021-03-24T04:51:58.678Z",
+			"endDate": "2021-03-25T00:08:42.488Z"
+		},
+		{
+			"id": 48,
+			"firstName": "Carolyne",
+			"lastName": "Eriksson",
+			"service": "STOM",
+			"errandNumber": 311376,
+			"startDate": "2021-03-24T13:20:52.046Z",
+			"endDate": "2021-03-25T10:48:58.199Z"
+		},
+		{
+			"id": 49,
+			"firstName": "Aniya",
+			"lastName": "Persson",
+			"service": "KROM",
+			"errandNumber": 817121,
+			"startDate": "2021-03-23T15:57:10.245Z",
+			"endDate": "2021-03-24T21:08:49.518Z"
+		},
+		{
+			"id": 50,
+			"firstName": "Kristina",
+			"lastName": "Gustafsson",
+			"service": "KVL",
+			"errandNumber": 941697,
+			"startDate": "2021-03-23T20:22:25.326Z",
+			"endDate": "2021-03-25T05:32:47.175Z"
+		}
+	]
+}

mock-api/dafa-web/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "dafa-web-mock-api",
+  "version": "0.0.1",
+  "description": "A mock api implementing all needed endpoints for dafa-web",
+  "scripts": {
+    "generate-api": "node ./scripts/generate-api.js",
+    "start": "npm run generate-api && json-server --watch api.json --port 8000"
+  },
+  "author": "Erik Tiekstra (erik.tiekstra@arbetsformedlingen.se)",
+  "license": "MIT",
+  "type": "module",
+  "dependencies": {
+    "faker": "^5.4.0",
+    "json-server": "^0.16.3"
+  }
+}

mock-api/dafa-web/scripts/generate-api.js

@@ -0,0 +1,8 @@
+import fs from 'fs';
+import participants from './participants.js';
+
+const apiData = {
+  participants: participants.generate(50),
+};
+
+fs.writeFileSync('api.json', JSON.stringify(apiData, null, '\t'));

mock-api/dafa-web/scripts/participants.js

@@ -0,0 +1,27 @@
+import faker from 'faker';
+
+faker.locale = 'sv';
+
+const AVAILABLE_SERVICES = ['KROM', 'STOM', 'KVL'];
+
+function generateParticipants(amount = 10) {
+  const participants = [];
+
+  for (let id = 0; id <= amount; ++id) {
+    participants.push({
+      id,
+      firstName: faker.name.firstName(),
+      lastName: faker.name.lastName(),
+      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(),
+    });
+  }
+
+  return participants;
+}
+
+export default {
+  generate: generateParticipants,
+};