feat(deltagare): Added functionality to filter on only "My deltagare". (TV-405)

Squashed commit of the following:

commit f67c9cd63e51bdc84a7c9da4c66b413213c33117
Merge: 84f00ea 0753d39
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Sep 1 12:00:15 2021 +0200

    Merge branch 'feature/TV-405' of ssh://bitbucket.arbetsformedlingen.se:7999/tea/dafa-web-monorepo into feature/TV-405

commit 84f00eab3e211a5102d7abc9902be523f2e5b450
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Sep 1 11:58:37 2021 +0200

    Updated mock-api and removed some unused code

commit 0753d39b7bd51163ddf1d2cf91f39a84321e8bb2
Merge: 47c363f a4bc9aa
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Wed Sep 1 11:46:37 2021 +0200

    Merge branch 'develop' into feature/TV-405

commit 14164ca7b01c0954d6f3efd441fef124a564edec
Merge: 47c363f a4bc9aa
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Sep 1 10:33:10 2021 +0200

    Merge branch 'develop' into feature/TV-405

commit 47c363f6b984d1c46ed2f2bb054b3e541aa01cc3
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Sun Aug 29 19:14:43 2021 +0200

    TV-405 cleanup

commit 241d67de57ffc5d83b1dfd8e00de9cad7a6b985a
Merge: 40f30ff eee20a3
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Sun Aug 29 18:54:55 2021 +0200

    Merge branch 'develop' into feature/TV-405

    # Conflicts:
    #	apps/mina-sidor-fa/src/app/shared/services/api/deltagare.service.ts
    #	mock-api/mina-sidor-fa/server.js

commit 40f30ff385022dcac88a8cd3046d01bcd92760bf
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Sun Aug 29 18:45:37 2021 +0200

    TV-405 temporary empty 'mina deltagare' in mockapi until assign handledare is implemented

commit 9bdeefc57dcb7d409abb1d7fe88865392a1b7516
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Wed Aug 25 16:24:08 2021 +0200

    TV-405 filter mina deltagare

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

@@ -3,16 +3,17 @@
     <section class="deltagare">
       <h1>Deltagarlista</h1>
       <p>
-        Här ser du en lista på de deltagare du är tilldelad. Klicka på deltagarens namn för att öppna och se mer
+        Här ser du en lista på de deltagare som tillhör din organisation. Klicka på deltagarens namn för att öppna och
-        information om deltagarna.
+        se mer information om deltagarna.
       </p>
-      <!-- 
+      <div class="deltagare__filter">
-      <ul>
+        <digi-form-checkbox
-        <li><a routerLink="1">Klicka för att gå till sokandeId 1</a></li>
+          class="deltagare__only-my-deltagare"
-        <li><a routerLink="2">Klicka för att gå till sokandeId 2</a></li>
+          af-label="Visa endast mina deltagare"
-        <li><a routerLink="3">Klicka för att gå till sokandeId 3</a></li>
+          [afChecked]="onlyMyDeltagare$ | async"
-        <li><a routerLink="1000">Klicka för att gå till sokandeId 1000</a></li>
+          (afOnChange)="setOnlyMyDeltagare($event.detail.target.checked)"
-      </ul> -->
+        ></digi-form-checkbox>
+      </div>
 
       <msfa-deltagare-list
         *ngIf="allDeltagareData$ | async as allDeltagareData; else loadingRef"

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

@@ -1,2 +1,7 @@
+@import 'variables/gutters';
+
 .deltagare {
+  &__filter {
+    margin: $digi--layout--gutter--l 0;
+  }
 }

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

@@ -13,6 +13,7 @@ import { Observable } from 'rxjs';
 export class DeltagareComponent {
   allDeltagareData$: Observable<DeltagareCompactData> = this.deltagareService.allDeltagareData$;
   sort$: Observable<Sort<keyof DeltagareCompact>> = this.deltagareService.sort$;
+  onlyMyDeltagare$: Observable<boolean> = this.deltagareService.onlyMyDeltagare$;
 
   constructor(private deltagareService: DeltagareService) {}
 
@@ -20,6 +21,10 @@ export class DeltagareComponent {
     this.deltagareService.setSort(key);
   }
 
+  setOnlyMyDeltagare(checked: boolean): void {
+    this.deltagareService.setOnlyMyDeltagare(checked);
+  }
+
   setNewPage(page: number): void {
     this.deltagareService.setPage(page);
   }

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

@@ -44,6 +44,8 @@ export class DeltagareService extends UnsubscribeDirective {
   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();
+  private _onlyMyDeltagare$ = new BehaviorSubject<boolean>(false);
+  public onlyMyDeltagare$: Observable<boolean> = this._onlyMyDeltagare$.asObservable();
 
   constructor(private httpClient: HttpClient, private errorService: ErrorService) {
     super();
@@ -66,7 +68,10 @@ export class DeltagareService extends UnsubscribeDirective {
     this._limit$,
     this._page$,
     this._sort$,
-  ]).pipe(switchMap(([limit, page, sort]) => this._fetchAllDeltagare$(limit, page, sort)));
+    this._onlyMyDeltagare$,
+  ]).pipe(
+    switchMap(([limit, page, sort, onlyMyDeltagare]) => this._fetchAllDeltagare$(limit, page, sort, onlyMyDeltagare))
+  );
 
   public setSort(newSortKey: keyof DeltagareCompact): void {
     const currentSort = this._sort$.getValue();
@@ -83,7 +88,8 @@ export class DeltagareService extends UnsubscribeDirective {
   private _fetchAllDeltagare$(
     limit: number,
     page: number,
-    sort: Sort<keyof DeltagareCompact>
+    sort: Sort<keyof DeltagareCompact>,
+    onlyMyDeltagare?: boolean
   ): Observable<DeltagareCompactData> {
     const params: Params = {
       sort: sort.key as string,
@@ -92,6 +98,9 @@ export class DeltagareService extends UnsubscribeDirective {
       page: page.toString(),
     };
 
+    if (onlyMyDeltagare) {
+      params.onlyMyDeltagare = onlyMyDeltagare.toString();
+    }
     return this.httpClient
       .get<DeltagareCompactApiResponse>(this._apiBaseUrl, {
         params,
@@ -108,6 +117,10 @@ export class DeltagareService extends UnsubscribeDirective {
     this._currentDeltagareId$.next(currentDeltagareId);
   }
 
+  public setOnlyMyDeltagare(value: boolean): void {
+    this._onlyMyDeltagare$.next(value);
+  }
+
   private _fetchContactInformation$(id: string): Observable<ContactInformation | Partial<ContactInformation>> {
     return this.httpClient.get<{ data: ContactInformationResponse }>(`${this._apiBaseUrl}/${id}/contact`).pipe(
       map(({ data }) => mapResponseToContactInformation(data)),

mock-api/mina-sidor-fa/scripts/avrop.js

@@ -45,7 +45,7 @@ function generateAvrop(amount = 10, deltagare, handledare) {
       ordernummer: `AKTTEST-${faker.datatype.number({ min: 10000, max: 99999 })}`,
       bokningsId: faker.datatype.number({ min: 100000, max: 999999 }),
       personnummer: currentDeltagare.personnummer,
-      sokandeId: currentDeltagare.id,
+      sokandeId: currentDeltagare.sokandeId,
       tjanstekod: tjanst.id,
       tjansteNamn: tjanst.label,
       deltagandeGrad: FREKVENSER[Math.floor(Math.random() * FREKVENSER.length)],

mock-api/mina-sidor-fa/scripts/deltagare.js

@@ -46,6 +46,7 @@ function generateDeltagare(amount = 10) {
 
     const deltagare = {
       id,
+      sokandeId: id,
       contact: {
         fornamn,
         efternamn,

mock-api/mina-sidor-fa/scripts/generate-api.js

@@ -8,11 +8,12 @@ import handledare from './handledare.js';
 import languages from './languages.js';
 import participants from './participants.js';
 import tjanster from './tjanster.js';
+import chooseRandom from './utils/choose-random.util.js';
 
 const generatedEmployees = employees.generate(50);
 const generatedDeltagare = deltagare.generate(50);
 const generatedHandledare = handledare.generate(generatedEmployees.slice(0, 6));
-const generatedAvrop = avrop.generate(10, generatedDeltagare.slice(0, 10), generatedHandledare);
+const generatedAvrop = avrop.generate(10, generatedDeltagare.slice(0, 25), generatedHandledare);
 const generatedTjanster = tjanster.generate();
 const avropTjanster = [];
 const utforandeVerksamheter = [];
@@ -98,6 +99,7 @@ const apiData = {
   currentUser: currentUser.generate(),
   getTokenFullAccess: authTokens.auth_code_from_CIAM_with_all_permissions,
   invites: [],
+  minaDeltagare: chooseRandom(generatedAvrop, 3),
 };
 
 fs.writeFileSync('api.json', JSON.stringify(apiData, null, '\t'));

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

@@ -28,10 +28,12 @@ server.use(
     '/avrop/utforandeverksamheter*': '/utforandeVerksamheter$1',
     '/avrop/kommuner*': '/kommuner$1',
     '/avrop*utforandeverksamhetId*': '/avrop$1utforandeVerksamhetId$2',
+    '/deltagare*onlyMyDeltagare=*': '/minaDeltagare',
     '/avrop*tjanstKod*': '/avrop$1tjanstekod$2',
     '/deltagare?*': '/avrop?$1',
     '/deltagare/:sokandeId/avrop': '/avrop?sokandeId=:sokandeId',
     '/deltagare/:sokandeId/*': '/deltagare/:sokandeId',
+    '/employees/invite': '/invites',
     '*page=*': '$1_page=$2',
     '*limit=*': '$1_limit=$2',
     '*sort=*': '$1_sort=$2',