feat(deltagare): Added deltagare list with data from api. Also adjusted mock-api to match the api. (TV-309)

Squashed commit of the following:

commit 41560491305b61ba322fa653788411de6112cc7e
Merge: a157e69 03a2c7a
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Aug 18 07:23:35 2021 +0200

    Merged develop and fixed conflicts

commit a157e69d6b4b18c9b8a806c4bbbc264b8b311b67
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Tue Aug 17 13:54:29 2021 +0200

    Removed console.log

commit 87a532eb63b9c68109a4f847cc9530a47a56b648
Merge: db2ff17 6d29baa
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Tue Aug 17 13:52:54 2021 +0200

    Merged develop and fixed conflicts

commit db2ff1758218c651cadf93de8ce0c5034d6994d3
Merge: 588adee 01dc4b3
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Mon Aug 16 13:09:33 2021 +0200

    Merged develop and fixed conflicts

commit 588adee5b17aeefcaf526aabdde02ca975c9c031
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Mon Aug 16 11:11:57 2021 +0200

    Added deltagarlist

commit a0c378a8221a5d363f56ee644b9728d873ae1ff1
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Mon Aug 16 07:19:49 2021 +0200

    Updates after PR

commit 479df238c712e2e14829d33b468ece91332f81c8
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Fri Aug 13 15:18:23 2021 +0200

    Updated tolkbehov inside deltagare-card

commit df95ae2a8afbcc78ba546472ae9c1db141d1e642
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Fri Aug 13 15:14:27 2021 +0200

    Updated deltagare-kort after discussion with UX

README.md

@@ -1,4 +1,4 @@
-# DAFA-web
+# mina-sidor-fa
 
 The project was generated using [Nx](https://nx.dev).
 
@@ -8,7 +8,7 @@ For all commands we will refer to the `npm scripts` located inside [package.json
 
 To get started, clone the repository and run `npm install` in the root of the project, this will install all dependencies.
 
-### Development server DAFA-web
+### Development server mina-sidor-fa
 
 Run `npm start` for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
 
@@ -28,7 +28,7 @@ Run `npm run new-lib my-lib` to generate a library. Libraries are shareable acro
 
 Run `npm run new-component my-component --project=my-app` to generate a new component.
 
-### Build DAFA-web
+### Build mina-sidor-fa
 
 Run `npm run build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
 
@@ -36,13 +36,13 @@ Run `npm run build` to build the project. The build artifacts will be stored in
 
 Run `npm run build:api` to build the project using the Dotnet API.
 
-### Running unit tests on DAFA-web
+### Running unit tests on mina-sidor-fa
 
 Run `npm run test` to execute the unit tests via [Jest](https://jestjs.io).
 
 Run `npm run nx affected:test` to execute the unit tests affected by a change.
 
-### Running end-to-end tests on DAFA-web
+### Running end-to-end tests on mina-sidor-fa
 
 Run `npm run e2e` to execute the end-to-end tests via [Cypress](https://www.cypress.io).
 

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

@@ -0,0 +1,50 @@
+<div class="deltagare-list">
+  <digi-table af-variation="secondary">
+    <table>
+      <thead>
+        <tr>
+          <th scope="col" class="deltagare-list__column-head" *ngFor="let column of columnHeaders">
+            <button
+              class="deltagare-list__sort-button"
+              [attr.id]="'sort-button-' + column.key"
+              (click)="handleSort(column.key)"
+            >
+              {{column.label}}
+              <ng-container *ngIf="sort.key === column.key">
+                <digi-icon-caret-up
+                  class="deltagare-list__sort-icon"
+                  *ngIf="sort.order === orderType.ASC"
+                ></digi-icon-caret-up>
+                <digi-icon-caret-down
+                  class="deltagare-list__sort-icon"
+                  *ngIf="sort.order === orderType.DESC"
+                ></digi-icon-caret-down>
+              </ng-container>
+            </button>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr class="deltagare-list__row" *ngFor="let singleDeltagare of deltagare">
+          <th scope="row">
+            <a [routerLink]="singleDeltagare.id" class="deltagare-list__link">{{ singleDeltagare.fullName }}</a>
+          </th>
+          <td>{{ singleDeltagare.tjanst }}</td>
+          <td>{{ singleDeltagare.utforandeVerksamhet }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </digi-table>
+
+  <digi-navigation-pagination
+    *ngIf="totalPages > 1"
+    class="deltagare-list__pagination"
+    [afTotalPages]="totalPages"
+    [afCurrentResultStart]="currentResultStart"
+    [afCurrentResultEnd]="currentResultEnd"
+    [afTotalResults]="count"
+    (afOnPageChange)="setNewPage($event.detail)"
+    af-result-name="deltagare"
+  >
+  </digi-navigation-pagination>
+</div>

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

@@ -0,0 +1,35 @@
+@import 'variables/gutters';
+
+.deltagare-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;
+  }
+
+  &__pagination {
+    display: block;
+    margin-top: var(--digi--layout--gutter);
+  }
+}

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

@@ -0,0 +1,24 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { DeltagareListComponent } from './deltagare-list.component';
+
+describe('DeltagareListComponent', () => {
+  let component: DeltagareListComponent;
+  let fixture: ComponentFixture<DeltagareListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      declarations: [DeltagareListComponent],
+      imports: [RouterTestingModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DeltagareListComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,62 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { SortOrder } from '@msfa-enums/sort-order.enum';
+import { DeltagareCompact } from '@msfa-models/deltagare.model';
+import { PaginationMeta } from '@msfa-models/pagination-meta.model';
+import { Sort } from '@msfa-models/sort.model';
+
+@Component({
+  selector: 'msfa-deltagare-list',
+  templateUrl: './deltagare-list.component.html',
+  styleUrls: ['./deltagare-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DeltagareListComponent {
+  @Input() deltagare: DeltagareCompact[];
+  @Input() paginationMeta: PaginationMeta;
+  @Input() sort: Sort<keyof DeltagareCompact>;
+  @Output() sorted = new EventEmitter<keyof DeltagareCompact>();
+  @Output() paginated = new EventEmitter<number>();
+
+  columnHeaders: { label: string; key: keyof DeltagareCompact }[] = [
+    { label: 'Namn', key: 'fullName' },
+    {
+      label: 'Tjänst',
+      key: 'tjanst',
+    },
+    {
+      label: 'Utförandeverksamhet',
+      key: 'utforandeVerksamhet',
+    },
+  ];
+
+  orderType = SortOrder;
+
+  get currentPage(): number {
+    return this.paginationMeta.page;
+  }
+
+  get totalPages(): number {
+    return this.paginationMeta?.totalPages;
+  }
+
+  get count(): number {
+    return this.paginationMeta.count;
+  }
+
+  get currentResultStart(): number {
+    return (this.currentPage - 1) * this.paginationMeta.limit + 1;
+  }
+
+  get currentResultEnd(): number {
+    const end = this.currentResultStart + this.paginationMeta.limit - 1;
+    return end < this.count ? end : this.count;
+  }
+
+  handleSort(key: keyof DeltagareCompact): void {
+    this.sorted.emit(key);
+  }
+
+  setNewPage(page: number): void {
+    this.paginated.emit(page);
+  }
+}

apps/mina-sidor-fa/src/app/pages/deltagare/components/deltagare-list/deltagare-list.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { DeltagareListComponent } from './deltagare-list.component';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [DeltagareListComponent],
+  imports: [CommonModule, RouterModule],
+  exports: [DeltagareListComponent],
+})
+export class DeltagareListModule {}

apps/mina-sidor-fa/src/app/pages/deltagare/deltagare.component.html

@@ -6,17 +6,26 @@
         Här ser du en lista på de deltagare du är tilldelad. Klicka på deltagarens namn för att öppna och se mer
         information om deltagarna.
       </p>
-
+      <!-- 
       <ul>
         <li><a routerLink="1">Klicka för att gå till sokandeId 1</a></li>
         <li><a routerLink="2">Klicka för att gå till sokandeId 2</a></li>
         <li><a routerLink="3">Klicka för att gå till sokandeId 3</a></li>
         <li><a routerLink="1000">Klicka för att gå till sokandeId 1000</a></li>
-      </ul>
+      </ul> -->
 
-      <ul *ngIf="allDeltagare$ | async as allDeltagare">
+      <msfa-deltagare-list
-        <li *ngFor="let deltagare of allDeltagare"><a [routerLink]="deltagare.id">{{deltagare.fullName}}</a></li>
+        *ngIf="allDeltagareData$ | async as allDeltagareData; else loadingRef"
-      </ul>
+        [deltagare]="allDeltagareData.data"
+        [paginationMeta]="allDeltagareData.meta"
+        [sort]="sort$ | async"
+        (sorted)="handleDeltagareSort($event)"
+        (paginated)="setNewPage($event)"
+      ></msfa-deltagare-list>
+
+      <ng-template #loadingRef>
+        <digi-ng-skeleton-base [afCount]="3" afText="Laddar deltagare"></digi-ng-skeleton-base>
+      </ng-template>
     </section>
   </digi-typography>
 </msfa-layout>

apps/mina-sidor-fa/src/app/pages/deltagare/deltagare.component.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { DeltagareCompact } from '@msfa-models/deltagare.model';
+import { DeltagareCompact, DeltagareCompactData } from '@msfa-models/deltagare.model';
+import { Sort } from '@msfa-models/sort.model';
 import { DeltagareService } from '@msfa-services/api/deltagare.service';
 import { Observable } from 'rxjs';
 
@@ -10,7 +11,16 @@ import { Observable } from 'rxjs';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DeltagareComponent {
-  allDeltagare$: Observable<DeltagareCompact[]> = this.deltagareService.allDeltagare$;
+  allDeltagareData$: Observable<DeltagareCompactData> = this.deltagareService.allDeltagareData$;
+  sort$: Observable<Sort<keyof DeltagareCompact>> = this.deltagareService.sort$;
 
   constructor(private deltagareService: DeltagareService) {}
+
+  handleDeltagareSort(key: keyof DeltagareCompact): void {
+    this.deltagareService.setSort(key);
+  }
+
+  setNewPage(page: number): void {
+    this.deltagareService.setPage(page);
+  }
 }

apps/mina-sidor-fa/src/app/pages/deltagare/deltagare.module.ts

@@ -1,12 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { DeltagareListModule } from './components/deltagare-list/deltagare-list.module';
 import { DeltagareRoutingModule } from './deltagare-routing.module';
 import { DeltagareComponent } from './deltagare.component';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [DeltagareComponent],
-  imports: [CommonModule, DeltagareRoutingModule, LayoutModule],
+  imports: [CommonModule, DeltagareRoutingModule, LayoutModule, DeltagareListModule],
 })
 export class DeltagareModule {}

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

@@ -1,3 +1,4 @@
+import { PaginationMeta } from '@msfa-models/pagination-meta.model';
 import { AvropResponse } from './avrop.response.model';
 import { ContactInformationResponse } from './contact-information.response.model';
 import { DisabilitiesResponse } from './disabilities.response.model';
@@ -26,3 +27,8 @@ export interface DeltagareResponse {
   workExperiences: WorkExperiencesResponse;
   avropInformation: AvropResponse;
 }
+
+export interface DeltagareCompactApiResponse {
+  data: AvropResponse[];
+  meta: PaginationMeta;
+}

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

@@ -7,6 +7,7 @@ import { Disability, mapResponseToDisability } from './disability.model';
 import { DriversLicense, mapResponseToDriversLicense } from './drivers-license.model';
 import { Education, mapResponseToEducation } from './education.model';
 import { HighestEducation, mapResponseToHighestEducation } from './highest-education.model';
+import { PaginationMeta } from './pagination-meta.model';
 import { PhoneNumber } from './phonenumber.model';
 import { mapResponseToWorkExperience, WorkExperience } from './work-experience.model';
 
@@ -15,6 +16,7 @@ export interface DeltagareCompact {
   fullName: string;
   utforandeVerksamhet: string;
   utforandeAdress: string;
+  tjanst: string;
 }
 
 export interface Deltagare {
@@ -36,13 +38,19 @@ export interface Deltagare {
   avropInformation: Avrop;
 }
 
+export interface DeltagareCompactData {
+  data: DeltagareCompact[];
+  meta: PaginationMeta;
+}
+
 export function mapResponseToDeltagareCompact(data: AvropResponse): DeltagareCompact {
-  const { sokandeId, deltagare, adress, utforandeverksamhet } = data;
+  const { sokandeId, deltagare, adress, utforandeverksamhet, tjansteNamn } = data;
   return {
     id: sokandeId.toString(),
     fullName: deltagare,
     utforandeVerksamhet: utforandeverksamhet,
     utforandeAdress: adress,
+    tjanst: tjansteNamn,
   };
 }
 

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

@@ -1,9 +1,11 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { UnsubscribeDirective } from '@msfa-directives/unsubscribe.directive';
+import { SortOrder } from '@msfa-enums/sort-order.enum';
 import { environment } from '@msfa-environment';
 import { AvropResponse } from '@msfa-models/api/avrop.response.model';
 import { ContactInformationResponse } from '@msfa-models/api/contact-information.response.model';
+import { DeltagareCompactApiResponse } from '@msfa-models/api/deltagare.response.model';
 import { DisabilityResponse } from '@msfa-models/api/disability.response.model';
 import { DriversLicenseResponse } from '@msfa-models/api/drivers-license.response.model';
 import { EducationsResponse } from '@msfa-models/api/educations.response.model';
@@ -13,12 +15,18 @@ import { WorkExperiencesResponse } from '@msfa-models/api/work-experiences.respo
 import { WorkLanguagesResponse } from '@msfa-models/api/work-languages.response.model';
 import { Avrop, mapAvropResponseToAvrop } from '@msfa-models/avrop.model';
 import { ContactInformation, mapResponseToContactInformation } from '@msfa-models/contact-information.model';
-import { Deltagare, DeltagareCompact, mapResponseToDeltagareCompact } from '@msfa-models/deltagare.model';
+import {
+  Deltagare,
+  DeltagareCompact,
+  DeltagareCompactData,
+  mapResponseToDeltagareCompact,
+} from '@msfa-models/deltagare.model';
 import { Disability, mapResponseToDisability } from '@msfa-models/disability.model';
 import { DriversLicense, mapResponseToDriversLicense } from '@msfa-models/drivers-license.model';
 import { Education, mapResponseToEducation } from '@msfa-models/education.model';
 import { errorToCustomError } from '@msfa-models/error/custom-error';
 import { HighestEducation, mapResponseToHighestEducation } from '@msfa-models/highest-education.model';
+import { Sort } from '@msfa-models/sort.model';
 import { mapResponseToWorkExperience, WorkExperience } from '@msfa-models/work-experience.model';
 import { ErrorService } from '@msfa-services/error.service';
 import { sortFromToDates } from '@msfa-utils/sort.util';
@@ -33,6 +41,10 @@ const API_HEADERS = { headers: environment.api.headers };
 export class DeltagareService extends UnsubscribeDirective {
   private _apiBaseUrl = `${environment.api.url}/deltagare`;
   private _currentDeltagareId$ = new BehaviorSubject<string>(null);
+  private _limit$ = new BehaviorSubject<number>(20);
+  private _page$ = new BehaviorSubject<number>(1);
+  private _sort$ = new BehaviorSubject<Sort<keyof DeltagareCompact>>({ key: 'fullName', order: SortOrder.ASC });
+  public sort$: Observable<Sort<keyof DeltagareCompact>> = this._sort$.asObservable();
 
   constructor(private httpClient: HttpClient, private errorService: ErrorService) {
     super();
@@ -40,7 +52,7 @@ export class DeltagareService extends UnsubscribeDirective {
       this._currentDeltagareId$
         .pipe(
           filter(currentDeltagareId => !!currentDeltagareId),
-          switchMap(currentDeltagareId => this.fetchDeltagare$(currentDeltagareId))
+          switchMap(currentDeltagareId => this._fetchDeltagare$(currentDeltagareId))
         )
         .subscribe(deltagare => {
           this._deltagare$.next(deltagare);
@@ -51,9 +63,47 @@ export class DeltagareService extends UnsubscribeDirective {
   private _deltagare$ = new BehaviorSubject<Deltagare>(null);
   public deltagare$: Observable<Deltagare> = this._deltagare$.asObservable();
 
-  public allDeltagare$: Observable<DeltagareCompact[]> = this.httpClient
+  public allDeltagareData$: Observable<DeltagareCompactData> = combineLatest([
-    .get<{ data: AvropResponse[] }>(`${this._apiBaseUrl}`, { ...API_HEADERS })
+    this._limit$,
-    .pipe(map(({ data }) => data.map(deltagare => mapResponseToDeltagareCompact(deltagare))));
+    this._page$,
+    this._sort$,
+  ]).pipe(switchMap(([limit, page, sort]) => this._fetchAllDeltagare$(limit, page, sort)));
+
+  public setSort(newSortKey: keyof DeltagareCompact): void {
+    const currentSort = this._sort$.getValue();
+    const order =
+      currentSort.key === newSortKey && currentSort.order === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
+
+    this._sort$.next({ key: newSortKey, order });
+  }
+
+  public setPage(page: number): void {
+    this._page$.next(page);
+  }
+
+  private _fetchAllDeltagare$(
+    limit: number,
+    page: number,
+    sort: Sort<keyof DeltagareCompact>
+  ): Observable<DeltagareCompactData> {
+    const params: { [param: string]: string | string[] } = {
+      sort: sort.key as string,
+      order: sort.order as string,
+      limit: limit.toString(),
+      page: page.toString(),
+    };
+
+    return this.httpClient
+      .get<DeltagareCompactApiResponse>(this._apiBaseUrl, {
+        ...API_HEADERS,
+        params,
+      })
+      .pipe(
+        map(({ data, meta }) => {
+          return { data: data.map(deltagare => mapResponseToDeltagareCompact(deltagare)), meta };
+        })
+      );
+  }
 
   public setCurrentDeltagareId(currentDeltagareId: string): void {
     this._deltagare$.next(null);
@@ -184,7 +234,7 @@ export class DeltagareService extends UnsubscribeDirective {
   // As TypeScript has some limitations regarding combining Observables this way,
   // we need to type it manually when exceeding 6 Observables inside a combineLatest.
   // Read: https://github.com/ReactiveX/rxjs/issues/3601#issuecomment-384711601
-  public fetchDeltagare$(id: string): Observable<Deltagare> {
+  private _fetchDeltagare$(id: string): Observable<Deltagare> {
     return combineLatest([
       this._fetchContactInformation$(id),
       this._fetchDriversLicense$(id),

mock-api/mina-sidor-fa/server.js

@@ -11,6 +11,8 @@ server.use(
     '/api/*': '/$1',
     '*sort=services*': '$1sort=services[0].name$2',
     '*sort=organizations*': '$1sort=organizations[0].address.city$2',
+    '*sort=utforandeVerksamhet*': '$1sort=utforandeverksamhet$2',
+    '*sort=tjanst*': '$1sort=tjansteNamn$2',
     '/employee*search=*': '/employee$1fullName_like=$2',
     '/employee*onlyEmployeesWithoutAuthorization=*': '/employee$1authorizations.length_gte=1',
     '/employee*': '/employees$1',
@@ -21,7 +23,7 @@ server.use(
     '/avrop/tjanster*': '/tjanster$1',
     '/avrop/utforandeverksamheter*': '/organizations$1',
     '/avrop/kommuner*': '/kommuner$1',
-    '/deltagare': '/avrop',
+    '/deltagare?*': '/avrop?$1',
     '/deltagare/:sokandeId/avrop': '/avrop?sokandeId=:sokandeId',
     '/deltagare/:sokandeId/*': '/deltagare/:sokandeId',
     '*page=*': '$1_page=$2',