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
2021-09-01 12:10:16 +02:00
parent a4bc9aa37c
commit 70ab2c3ee4
8 changed files with 42 additions and 13 deletions
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/deltagare.component.html
+++ b/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
-        information om deltagarna.
+        Här ser du en lista på de deltagare som tillhör din organisation. 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> -->
+      <div class="deltagare__filter">
+        <digi-form-checkbox
+          class="deltagare__only-my-deltagare"
+          af-label="Visa endast mina deltagare"
+          [afChecked]="onlyMyDeltagare$ | async"
+          (afOnChange)="setOnlyMyDeltagare($event.detail.target.checked)"
+        ></digi-form-checkbox>
+      </div>

      <msfa-deltagare-list
        *ngIf="allDeltagareData$ | async as allDeltagareData; else loadingRef"
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/deltagare.component.scss
+++ b/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;
+  }
 }
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/deltagare.component.ts
+++ b/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);
  }
--- a/apps/mina-sidor-fa/src/app/shared/services/api/deltagare.service.ts
+++ b/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)),
--- a/mock-api/mina-sidor-fa/scripts/avrop.js
+++ b/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)],
--- a/mock-api/mina-sidor-fa/scripts/deltagare.js
+++ b/mock-api/mina-sidor-fa/scripts/deltagare.js
@@ -46,6 +46,7 @@ function generateDeltagare(amount = 10) {

    const deltagare = {
      id,
+      sokandeId: id,
      contact: {
        fornamn,
        efternamn,
--- a/mock-api/mina-sidor-fa/scripts/generate-api.js
+++ b/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'));
--- a/mock-api/mina-sidor-fa/server.js
+++ b/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',