feature/Refactor report tabs into smart components

Squashed commit of the following:

commit c06e423c1df39d653150d58439d0fabb268f1ff7
Merge: 4395b97f cc22c5cd
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Fri Oct 29 08:28:47 2021 +0200

    Merged develop and fixed conflicts

commit 4395b97fdc50f6f5c4bb2e20444031cde230ca5b
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Fri Oct 29 08:15:53 2021 +0200

    Updated loading inside deltagare-tabs

commit 84e9bf4730d1f996e9acf8c624de775e12889c18
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Thu Oct 28 21:45:50 2021 +0200

    cleanup

commit c3044cc7f6701e4cf35f9efdb39c310a6a49aa97
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Thu Oct 28 21:41:27 2021 +0200

    cleanup

commit f56b2827bf3df9d372e5141442153de70e13a6e4
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Thu Oct 28 16:56:39 2021 +0200

    reformat

commit f41dda3445dc6489374f882ef7845078f365836a
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Thu Oct 28 16:53:13 2021 +0200

    make report tabs into smart components

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-experiences/deltagare-tab-experiences.component.html

@@ -1,8 +1,9 @@
-<div class="deltagare-tab-experiences">
+<div class="deltagare-tab-experiences" *ngIf="(dataIsLoading$ | async) === false; else loadingRef">
-  <div class="deltagare-tab-experiences__tab-column">
+  <div class="deltagare-tab-experiences__tab-column" *ngIf="workExperiences$ | async as workExperiences">
     <h2>Arbetslivserfarenhet</h2>
-    <ul class="deltagare-tab-experiences__experience-list" *ngIf="firstVisibleWorkExperiences?.length; else emptyText;">
+
-      <li *ngFor="let workExperience of firstVisibleWorkExperiences">
+    <ul class="deltagare-tab-experiences__experience-list" *ngIf="workExperiences?.length; else emptyText;">
+      <li *ngFor="let workExperience of firstVisibleWorkExperiences(workExperiences)">
         <h3 class="deltagare-tab-experiences__subheading">{{ workExperience.employer }}</h3>
         <digi-typography-time [afDateTime]="workExperience.dateFrom"></digi-typography-time> -
         <digi-typography-time [afDateTime]="workExperience.dateTo"></digi-typography-time><br />
@@ -14,13 +15,13 @@
       class="deltagare-tab-experiences__accordion"
       [afExpanded]="accordionExpanded"
       (click)="toggleAccordionExpanded()"
-      *ngIf="hiddenWorkExperiences?.length"
+      *ngIf="hiddenWorkExperiences(workExperiences)?.length"
     >
       <span class="deltagare-tab-experiences__accordion-trigger" data-slot-trigger
         >{{ accordionExpanded ? 'Dölj' : 'Visa' }} fler arbetsgivare</span
       >
       <ul class="deltagare-tab-experiences__experience-list">
-        <li *ngFor="let workExperience of hiddenWorkExperiences">
+        <li *ngFor="let workExperience of hiddenWorkExperiences(workExperiences)">
           <h3 class="deltagare-tab-experiences__subheading">{{ workExperience.employer }}</h3>
           <digi-typography-time [afDateTime]="workExperience.dateFrom"></digi-typography-time> -
           <digi-typography-time [afDateTime]="workExperience.dateTo"></digi-typography-time><br />
@@ -34,13 +35,13 @@
     <h2>Utbildning</h2>
     <dl>
       <dt>Högsta utbildningsnivå:</dt>
-      <dd>
+      <dd *ngIf="highestEducation$ | async as highestEducation">
         <ng-container *ngIf="highestEducation?.level; else emptyText">
           {{ highestEducation.level.description }}: {{ highestEducation.sunKod.description }}
         </ng-container>
       </dd>
 
-      <ng-container>
+      <ng-container *ngIf="educations$ | async as educations">
         <h3 class="deltagare-tab-experiences__subheading deltagare-tab-experiences__subheading--with-margin">
           Utbildningar:
         </h3>
@@ -56,7 +57,7 @@
       </ng-container>
     </dl>
   </div>
-  <div class="deltagare-tab-experiences__tab-column" *ngIf="driversLicense">
+  <div class="deltagare-tab-experiences__tab-column" *ngIf="driversLicense$ | async as driversLicense">
     <h2>Körkort</h2>
     <dl>
       <dt>Har körkort</dt>
@@ -74,3 +75,6 @@
 <ng-template #emptyText>
   <span>Info saknas</span>
 </ng-template>
+<ng-template #loadingRef>
+  <ui-loader class="deltagare-tab-experiences__loader" uiType="padded"></ui-loader>
+</ng-template>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-experiences/deltagare-tab-experiences.component.scss

@@ -8,6 +8,10 @@
     flex-basis: 0;
   }
 
+  &__loader {
+    flex-grow: 1;
+  }
+
   &__subheading {
     font-size: var(--digi--typography--font-size--desktop);
     font-weight: var(--digi--typography--font-weight--semibold);

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-experiences/deltagare-tab-experiences.component.ts

@@ -1,8 +1,14 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import { DriversLicense } from '@msfa-models/drivers-license.model';
 import { Education } from '@msfa-models/education.model';
 import { HighestEducation } from '@msfa-models/highest-education.model';
 import { WorkExperience } from '@msfa-models/work-experience.model';
+import { DeltagareApiService } from '@msfa-services/api/deltagare.api.service';
+import { HandledareService } from '@msfa-services/handledare.service';
+import { combineLatest, Observable } from 'rxjs';
+import { map, shareReplay, startWith, switchMap } from 'rxjs/operators';
+import { DeltagareCardService } from '../../deltagare-card.service';
 
 @Component({
   selector: 'msfa-deltagare-tab-experiences',
@@ -11,22 +17,64 @@ import { WorkExperience } from '@msfa-models/work-experience.model';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DeltagareTabExperiencesComponent {
-  @Input() workExperiences: WorkExperience[];
-  @Input() highestEducation: HighestEducation;
-  @Input() educations: Education[];
-  @Input() driversLicense: DriversLicense;
-
   accordionExpanded = false;
+  genomforandereferens$: Observable<number> = this.activatedRoute.params.pipe(
+    map(({ genomforandeReferens }) => +genomforandeReferens)
+  );
+  workExperiences$: Observable<WorkExperience[]> = this.genomforandereferens$.pipe(
+    switchMap(genomforandeReferens =>
+      genomforandeReferens ? this.deltagareApiService.fetchWorkExperiences$(genomforandeReferens) : null
+    ),
+    shareReplay(1)
+  );
+  highestEducation$: Observable<HighestEducation> = this.genomforandereferens$.pipe(
+    switchMap(genomforandeReferens =>
+      genomforandeReferens ? this.deltagareApiService.fetchHighestEducation$(genomforandeReferens) : null
+    ),
+    shareReplay(1)
+  );
+  educations$: Observable<Education[]> = this.genomforandereferens$.pipe(
+    switchMap(genomforandeReferens =>
+      genomforandeReferens ? this.deltagareApiService.fetchEducations$(genomforandeReferens) : null
+    ),
+    shareReplay(1)
+  );
+  driversLicense$: Observable<DriversLicense> = this.genomforandereferens$.pipe(
+    switchMap(genomforandeReferens =>
+      genomforandeReferens ? this.deltagareApiService.fetchDriversLicense$(genomforandeReferens) : null
+    ),
+    shareReplay(1)
+  );
 
-  get firstVisibleWorkExperiences(): WorkExperience[] {
+  dataIsLoading$: Observable<boolean> = combineLatest([
-    return this.workExperiences?.slice(0, 2);
+    this.workExperiences$,
+    this.highestEducation$,
+    this.educations$,
+    this.driversLicense$,
+  ]).pipe(
+    map(
+      ([workExperiences, highestEducation, educations, driversLicense]) =>
+        !(workExperiences && highestEducation && educations && driversLicense)
+    ),
+    startWith(true)
+  );
+
+  firstVisibleWorkExperiences(workExperiences: WorkExperience[]): WorkExperience[] {
+    return workExperiences?.slice(0, 2);
   }
 
-  get hiddenWorkExperiences(): WorkExperience[] {
+  hiddenWorkExperiences(workExperiences: WorkExperience[]): WorkExperience[] {
-    return this.workExperiences?.slice(2);
+    return workExperiences?.slice(2);
   }
 
   toggleAccordionExpanded(): void {
     this.accordionExpanded = !this.accordionExpanded;
   }
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private deltagareCardService: DeltagareCardService,
+    private handledareService: HandledareService,
+    private deltagareApiService: DeltagareApiService
+  ) {}
 }

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-personal-information/deltagare-tab-personal-information.component.html

@@ -1,5 +1,5 @@
-<div class="deltagare-tab-personal-information">
+<div class="deltagare-tab-personal-information" *ngIf="(dataIsLoading$ | async) === false; else loadingRef">
-  <div *ngIf="contactInformation" class="deltagare-tab-personal-information__tab-column">
+  <div *ngIf="contactInformation$ | async as contactInformation" class="deltagare-tab-personal-information__tab-column">
     <h2>Personuppgifter</h2>
     <dl>
       <dt>Namn:</dt>
@@ -36,7 +36,7 @@
       <dd *ngIf="contactInformation.email; else emptyDD">
         <a href="mailto:{{contactInformation.email}}">{{ contactInformation.email }}</a>
       </dd>
-      <ng-container *ngIf="avropInformation">
+      <ng-container *ngIf="avropInformation$ | async as avropInformation">
         <dt>Behov av tolk:</dt>
         <dd>{{avropInformation.tolkbehov ? 'Ja (' + avropInformation.tolkbehov + ')' : 'Nej'}}</dd>
         <dt>Behov av språkstöd:</dt>
@@ -44,7 +44,7 @@
       </ng-container>
     </dl>
   </div>
-  <ng-container *ngIf="avropInformation">
+  <ng-container *ngIf="avropInformation$ | async as avropInformation">
     <div class="deltagare-tab-personal-information__tab-column">
       <h2>Om tjänsten</h2>
       <dl>
@@ -80,7 +80,7 @@
       </dl>
       <ng-container *ngIf="handledarePickerVisible">
         <msfa-handledare-picker-form
-          *ngIf="availableHandledare; else loadingRef"
+          *ngIf=" availableHandledare$ | async as availableHandledare; else loadingRef"
           [selectedHandledareId]="avropInformation.handledareCiamUserId"
           [handledare]="availableHandledare"
           [avropIds]="[avropInformation.id]"
@@ -95,5 +95,5 @@
   <dd>Info saknas</dd>
 </ng-template>
 <ng-template #loadingRef>
-  <ui-loader uiType="padded"></ui-loader>
+  <ui-loader class="deltagare-tab-personal-information__loader" uiType="padded"></ui-loader>
 </ng-template>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-personal-information/deltagare-tab-personal-information.component.scss

@@ -5,4 +5,8 @@
     flex-grow: 1;
     flex-basis: 0;
   }
+
+  &__loader {
+    flex-grow: 1;
+  }
 }

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-personal-information/deltagare-tab-personal-information.component.ts

@@ -3,6 +3,10 @@ import { Avrop } from '@msfa-models/avrop.model';
 import { ContactInformation } from '@msfa-models/contact-information.model';
 import { Handledare } from '@msfa-models/handledare.model';
 import { Role } from '@msfa-models/role.model';
+import { HandledareService } from '@msfa-services/handledare.service';
+import { combineLatest, Observable } from 'rxjs';
+import { distinctUntilChanged, filter, map, startWith, switchMap } from 'rxjs/operators';
+import { DeltagareCardService } from '../../deltagare-card.service';
 
 @Component({
   selector: 'msfa-deltagare-tab-personal-information',
@@ -11,9 +15,21 @@ import { Role } from '@msfa-models/role.model';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DeltagareTabPersonalInformationComponent {
-  @Input() contactInformation: ContactInformation;
-  @Input() avropInformation: Avrop;
-  @Input() availableHandledare: Handledare[];
   @Input() userRoles: Role[];
   @Input() handledarePickerVisible: boolean;
+
+  avropInformation$: Observable<Avrop> = this.deltagareCardService.avropInformation$;
+  contactInformation$: Observable<ContactInformation> = this.deltagareCardService.contactInformation$;
+  availableHandledare$: Observable<Handledare[]> = this.avropInformation$.pipe(
+    distinctUntilChanged((prevAvrop, currAvrop) => prevAvrop.id === currAvrop.id),
+    filter(() => !!this.handledarePickerVisible),
+    switchMap(avropInformation => this.handledareService.fetchAvailableHandledare$([avropInformation.id]))
+  );
+
+  dataIsLoading$: Observable<boolean> = combineLatest([this.avropInformation$, this.contactInformation$]).pipe(
+    map(([avropInformation, contactInformation]) => !(contactInformation && avropInformation)),
+    startWith(true)
+  );
+
+  constructor(private deltagareCardService: DeltagareCardService, private handledareService: HandledareService) {}
 }

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/deltagare-tab-reports.component.html

@@ -47,13 +47,13 @@
     </li>
   </ul>
 
-  <ng-container *ngIf="reportsData; else loadingRef">
+  <ng-container *ngIf="reportsData$ | async as reportsData; else loadingRef">
     <h3>Inskickade rapporter</h3>
     <msfa-reports-list
       *ngIf="reportsData.data.length; else noReports"
       [reports]="reportsData.data"
       [paginationMeta]="reportsData.meta"
-      (paginated)="emitNewPage($event)"
+      (paginated)="setNewPage($event)"
     ></msfa-reports-list>
   </ng-container>
 </div>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/deltagare-tab-reports.component.ts

@@ -1,7 +1,12 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { Feature } from '@msfa-enums/feature.enum';
 import { environment } from '@msfa-environment';
 import { ReportsData } from '@msfa-models/report.model';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { map, shareReplay, switchMap } from 'rxjs/operators';
+import { ActivatedRoute } from '@angular/router';
+import { DeltagareApiService } from '@msfa-services/api/deltagare.api.service';
+import { PaginationParams } from '@msfa-models/api/params.model';
 
 @Component({
   selector: 'msfa-deltagare-tab-reports',
@@ -10,8 +15,15 @@ import { ReportsData } from '@msfa-models/report.model';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DeltagareTabReportsComponent {
-  @Input() reportsData: ReportsData;
+  genomforandereferens$: Observable<number> = this.activatedRoute.params.pipe(
-  @Output() reportsPaginated = new EventEmitter<number>();
+    map(({ genomforandeReferens }) => +genomforandeReferens)
+  );
+
+  private _reportsParams$ = new BehaviorSubject<PaginationParams>({ page: 1, limit: 20 });
+  reportsData$: Observable<ReportsData> = this._reportsParams$.pipe(
+    switchMap(params => this.fetchReports$(params)),
+    shareReplay(1)
+  );
 
   _activeFeatures: Feature[] = environment.activeFeatures;
 
@@ -25,7 +37,15 @@ export class DeltagareTabReportsComponent {
     return this._activeFeatures.includes(Feature.REPORTING_INFORMATIV_RAPPORT);
   }
 
-  emitNewPage(page: number): void {
+  constructor(private activatedRoute: ActivatedRoute, private deltagareApiService: DeltagareApiService) {}
-    this.reportsPaginated.emit(page);
+
+  private fetchReports$(params: PaginationParams): Observable<ReportsData> {
+    return this.genomforandereferens$.pipe(
+      switchMap(genomforandeReferens => this.deltagareApiService.fetchReports$(genomforandeReferens, params))
+    );
+  }
+
+  setNewPage(page: number): void {
+    this._reportsParams$.next({ ...this._reportsParams$.getValue(), page });
   }
 }

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-sensitive-information/deltagare-tab-sensitive-information.component.html

@@ -1,5 +1,5 @@
-<div class="deltagare-tab-sensitive-information">
+<div class="deltagare-tab-sensitive-information" *ngIf="(dataIsLoading$ | async) === false; else loadingRef">
-  <div class="deltagare-tab-sensitive-information__tab-column" *ngIf="disabilities">
+  <div class="deltagare-tab-sensitive-information__tab-column" *ngIf="disabilities$ | async as disabilities">
     <h2>Funktionsnedsättningar</h2>
 
     <dl *ngIf="disabilities.length; else noDisabilities">
@@ -20,17 +20,20 @@
       <p>Deltagaren har inga funktionsnedsättningar registrerad.</p>
     </ng-template>
   </div>
-  <div class="deltagare-tab-sensitive-information__tab-column" *ngIf="avropInformation">
+  <div class="deltagare-tab-sensitive-information__tab-column" *ngIf="avropInformation$ | async as avropInformation">
     <h2>Språk</h2>
     <dl>
       <dt>Behov av tolk:</dt>
       <dd>{{avropInformation.tolkbehov ? 'Ja (' + avropInformation.tolkbehov + ')' : 'Nej'}}</dd>
       <dt>Behov av språkstöd:</dt>
       <dd>{{avropInformation.sprakstod ? 'Ja (' + avropInformation.sprakstod + ')' : 'Nej'}}</dd>
-      <ng-container *ngIf="workLanguages">
+      <ng-container *ngIf="workLanguages$ | async as workLanguages">
         <dt>Språk som kan användas på jobbet:</dt>
         <dd>{{ workLanguages.length ? workLanguages.join(', ') : 'Info saknas'}}</dd>
       </ng-container>
     </dl>
   </div>
 </div>
+<ng-template #loadingRef>
+  <ui-loader class="deltagare-tab-sensitive-information__loader" uiType="padded"></ui-loader>
+</ng-template>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-sensitive-information/deltagare-tab-sensitive-information.component.scss

@@ -8,6 +8,10 @@
     flex-basis: 0;
   }
 
+  &__loader {
+    flex-grow: 1;
+  }
+
   &__popover {
     display: inline-block;
     margin-left: var(--digi--layout--gutter--s);

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-sensitive-information/deltagare-tab-sensitive-information.component.ts

@@ -1,6 +1,11 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import { Avrop } from '@msfa-models/avrop.model';
 import { Disability } from '@msfa-models/disability.model';
+import { DeltagareApiService } from '@msfa-services/api/deltagare.api.service';
+import { combineLatest, Observable } from 'rxjs';
+import { map, shareReplay, startWith, switchMap } from 'rxjs/operators';
+import { DeltagareCardService } from '../../deltagare-card.service';
 
 @Component({
   selector: 'msfa-deltagare-tab-sensitive-information',
@@ -9,7 +14,34 @@ import { Disability } from '@msfa-models/disability.model';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DeltagareTabSensitiveInformationComponent {
-  @Input() avropInformation: Avrop;
+  genomforandereferens$: Observable<number> = this.activatedRoute.params.pipe(
-  @Input() workLanguages: string[];
+    map(({ genomforandeReferens }) => +genomforandeReferens)
-  @Input() disabilities: Disability[];
+  );
+  avropInformation$: Observable<Avrop> = this.deltagareCardService.avropInformation$;
+  workLanguages$: Observable<string[]> = this.genomforandereferens$.pipe(
+    switchMap(genomforandeReferens =>
+      genomforandeReferens ? this.deltagareApiService.fetchWorkLanguages$(genomforandeReferens) : null
+    ),
+    shareReplay(1)
+  );
+  disabilities$: Observable<Disability[]> = this.genomforandereferens$.pipe(
+    switchMap(genomforandeReferens =>
+      genomforandeReferens ? this.deltagareApiService.fetchDisabilities$(genomforandeReferens) : null
+    ),
+    shareReplay(1)
+  );
+  dataIsLoading$: Observable<boolean> = combineLatest([
+    this.avropInformation$,
+    this.workLanguages$,
+    this.disabilities$,
+  ]).pipe(
+    map(([avropInformation, workLanguages, disabilities]) => !(avropInformation && workLanguages && disabilities)),
+    startWith(true)
+  );
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private deltagareCardService: DeltagareCardService,
+    private deltagareApiService: DeltagareApiService
+  ) {}
 }

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

@@ -16,16 +16,11 @@
             af-id="deltagare-card-personal-information"
             *ngIf="deltagareTjanstVisible"
           >
-            <ng-container *ngIf="activeTab === '0'">
+            <msfa-deltagare-tab-personal-information
-              <msfa-deltagare-tab-personal-information
+              *ngIf="activeTab === '0'"
-                *ngIf="(tab0Loading$ | async) === false; else loadingRef"
+              class="deltagare-card__tab-contents"
-                class="deltagare-card__tab-contents"
+              [handledarePickerVisible]="handledarePickerVisible"
-                [contactInformation]="contactInformation"
+            ></msfa-deltagare-tab-personal-information>
-                [avropInformation]="avropInformation$ | async"
-                [availableHandledare]="availableHandledare$ | async"
-                [handledarePickerVisible]="handledarePickerVisible"
-              ></msfa-deltagare-tab-personal-information>
-            </ng-container>
           </digi-navigation-tab>
 
           <digi-navigation-tab
@@ -34,12 +29,7 @@
             af-id="deltagare-card-reports"
             *ngIf="reportingTabVisible"
           >
-            <ng-container *ngIf="activeTab === '1'">
+            <msfa-deltagare-tab-reports *ngIf="activeTab === '1'"></msfa-deltagare-tab-reports>
-              <msfa-deltagare-tab-reports
-                [reportsData]="reportsData$ | async"
-                (reportsPaginated)="setNewPage($event)"
-              ></msfa-deltagare-tab-reports>
-            </ng-container>
           </digi-navigation-tab>
 
           <digi-navigation-tab
@@ -48,16 +38,10 @@
             af-id="deltagare-card-experiences"
             *ngIf="experiencesVisible"
           >
-            <ng-container *ngIf="activeTab === '2'">
+            <msfa-deltagare-tab-experiences
-              <msfa-deltagare-tab-experiences
+              *ngIf="activeTab === '2'"
-                *ngIf="(tab2Loading$ | async) === false; else loadingRef"
+              class="deltagare-card__tab-contents"
-                class="deltagare-card__tab-contents"
+            ></msfa-deltagare-tab-experiences>
-                [workExperiences]="workExperiences$ | async"
-                [educations]="educations$ | async"
-                [highestEducation]="highestEducation$ | async"
-                [driversLicense]="driversLicense$ | async"
-              ></msfa-deltagare-tab-experiences>
-            </ng-container>
           </digi-navigation-tab>
 
           <digi-navigation-tab
@@ -66,15 +50,10 @@
             af-id="deltagare-card-sensitive-information"
             *ngIf="sensitiveDataVisible"
           >
-            <ng-container *ngIf="activeTab === '3'">
+            <msfa-deltagare-tab-sensitive-information
-              <msfa-deltagare-tab-sensitive-information
+              *ngIf="activeTab === '3'"
-                *ngIf="(tab3Loading$ | async) === false; else loadingRef"
+              class="deltagare-card__tab-contents"
-                class="deltagare-card__tab-contents"
+            ></msfa-deltagare-tab-sensitive-information>
-                [avropInformation]="avropInformation$ | async"
-                [workLanguages]="workLanguages$ | async"
-                [disabilities]="disabilities$ | async"
-              ></msfa-deltagare-tab-sensitive-information>
-            </ng-container>
           </digi-navigation-tab>
         </digi-navigation-tabs>
       </ng-container>
@@ -85,7 +64,3 @@
 <ng-template #skeletonRef>
   <ui-skeleton [uiCount]="3" uiText="Laddar deltagarinformation"></ui-skeleton>
 </ng-template>
-
-<ng-template #loadingRef>
-  <ui-loader uiType="padded"></ui-loader>
-</ng-template>

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

@@ -4,21 +4,11 @@ import { UnsubscribeDirective } from '@msfa-directives/unsubscribe.directive';
 import { Feature } from '@msfa-enums/feature.enum';
 import { RoleEnum } from '@msfa-enums/role.enum';
 import { environment } from '@msfa-environment';
-import { PaginationParams } from '@msfa-models/api/params.model';
-import { Avrop } from '@msfa-models/avrop.model';
 import { ContactInformation } from '@msfa-models/contact-information.model';
-import { Disability } from '@msfa-models/disability.model';
-import { DriversLicense } from '@msfa-models/drivers-license.model';
-import { Education } from '@msfa-models/education.model';
-import { Handledare } from '@msfa-models/handledare.model';
-import { HighestEducation } from '@msfa-models/highest-education.model';
-import { ReportsData } from '@msfa-models/report.model';
 import { Role } from '@msfa-models/role.model';
-import { WorkExperience } from '@msfa-models/work-experience.model';
 import { UserService } from '@msfa-services/api/user.service';
-import { HandledareService } from '@msfa-services/handledare.service';
+import { Observable } from 'rxjs';
-import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
-import { distinctUntilChanged, filter, map, shareReplay, startWith, switchMap } from 'rxjs/operators';
 import { DeltagareCardService } from './deltagare-card.service';
 
 @Component({
@@ -29,57 +19,18 @@ import { DeltagareCardService } from './deltagare-card.service';
 })
 export class DeltagareCardComponent extends UnsubscribeDirective implements OnDestroy {
   activeTab$: Observable<string> = this.deltagareCardService.activeTab$;
+  genomforandereferens$: Observable<number> = this.activatedRoute.params.pipe(
+    map(({ genomforandeReferens }) => +genomforandeReferens)
+  );
 
-  private _reportsParams$ = new BehaviorSubject<PaginationParams>({ page: 1, limit: 20 });
   private _activeFeatures: Feature[] = environment.activeFeatures;
   private _userRoles: Role[] = this.userService.userRolesSnapshot;
 
   contactInformation$: Observable<ContactInformation> = this.deltagareCardService.contactInformation$;
-  avropInformation$: Observable<Avrop> = this.deltagareCardService.avropInformation$;
-  workExperiences$: Observable<WorkExperience[]> = this.deltagareCardService.workExperiences$;
-  highestEducation$: Observable<HighestEducation> = this.deltagareCardService.highestEducation$;
-  educations$: Observable<Education[]> = this.deltagareCardService.educations$;
-  driversLicense$: Observable<DriversLicense> = this.deltagareCardService.driversLicense$;
-  workLanguages$: Observable<string[]> = this.deltagareCardService.workLanguages$;
-  disabilities$: Observable<Disability[]> = this.deltagareCardService.disabilities$;
-  availableHandledare$: Observable<Handledare[]> = this.avropInformation$.pipe(
-    distinctUntilChanged((prevAvrop, currAvrop) => prevAvrop.id === currAvrop.id),
-    filter(() => !!this.handledarePickerVisible),
-    switchMap(avropInformation => this.handledareService.fetchAvailableHandledare$([avropInformation.id]))
-  );
-  reportsData$: Observable<ReportsData> = this._reportsParams$.pipe(
-    switchMap(params => this.deltagareCardService.fetchReports$(params)),
-    shareReplay(1)
-  );
-  tab0Loading$: Observable<boolean> = combineLatest([this.contactInformation$, this.avropInformation$]).pipe(
-    map(([contactInformation, avropInformation]) => !(contactInformation && avropInformation)),
-    startWith(true)
-  );
-  tab2Loading$: Observable<boolean> = combineLatest([
-    this.workExperiences$,
-    this.highestEducation$,
-    this.educations$,
-    this.driversLicense$,
-  ]).pipe(
-    map(
-      ([workExperiences, highestEducation, educations, driversLicense]) =>
-        !(workExperiences && highestEducation && educations && driversLicense)
-    ),
-    startWith(true)
-  );
-  tab3Loading$: Observable<boolean> = combineLatest([
-    this.disabilities$,
-    this.avropInformation$,
-    this.workLanguages$,
-  ]).pipe(
-    map(([disabilities, avropInformation, workLanguages]) => !(disabilities && avropInformation && workLanguages)),
-    startWith(true)
-  );
 
   constructor(
     private activatedRoute: ActivatedRoute,
     private deltagareCardService: DeltagareCardService,
-    private handledareService: HandledareService,
     private userService: UserService
   ) {
     super();
@@ -90,10 +41,6 @@ export class DeltagareCardComponent extends UnsubscribeDirective implements OnDe
     );
   }
 
-  ngOnDestroy(): void {
-    this.deltagareCardService.setGenomforandereferens(null);
-  }
-
   get deltagareTjanstVisible(): boolean {
     return this._userRoles?.some(
       role => role.type === RoleEnum.MSFA_ReportAndPlanning || role.type === RoleEnum.MSFA_ReceiveDeltagare
@@ -125,8 +72,4 @@ export class DeltagareCardComponent extends UnsubscribeDirective implements OnDe
   setActiveTab(tabId: string): void {
     this.deltagareCardService.setActiveTab(tabId);
   }
-
-  setNewPage(page: number): void {
-    this._reportsParams$.next({ ...this._reportsParams$.getValue(), page });
-  }
 }

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.service.ts

@@ -1,16 +1,9 @@
 import { Injectable } from '@angular/core';
-import { PaginationParams } from '@msfa-models/api/params.model';
 import { Avrop } from '@msfa-models/avrop.model';
 import { ContactInformation } from '@msfa-models/contact-information.model';
-import { Disability } from '@msfa-models/disability.model';
-import { DriversLicense } from '@msfa-models/drivers-license.model';
-import { Education } from '@msfa-models/education.model';
-import { HighestEducation } from '@msfa-models/highest-education.model';
-import { ReportsData } from '@msfa-models/report.model';
-import { WorkExperience } from '@msfa-models/work-experience.model';
 import { DeltagareApiService } from '@msfa-services/api/deltagare.api.service';
 import { HandledareService } from '@msfa-services/handledare.service';
-import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
+import { BehaviorSubject, combineLatest, merge, Observable, of } from 'rxjs';
 import { map, mapTo, shareReplay, switchMap } from 'rxjs/operators';
 
 @Injectable()
@@ -27,7 +20,12 @@ export class DeltagareCardService {
 
   contactInformation$: Observable<ContactInformation> = this.currentGenomforandeReferens$.pipe(
     switchMap(genomforandeReferens =>
-      genomforandeReferens ? this.deltagareApiService.fetchContactInformation$(genomforandeReferens) : null
+      genomforandeReferens
+        ? merge<ContactInformation | null>(
+            of(null),
+            this.deltagareApiService.fetchContactInformation$(genomforandeReferens)
+          )
+        : null
     ),
     shareReplay(1)
   );
@@ -42,63 +40,15 @@ export class DeltagareCardService {
     shareReplay(1)
   );
 
-  workExperiences$: Observable<WorkExperience[]> = this.currentGenomforandeReferens$.pipe(
-    switchMap(genomforandeReferens =>
-      genomforandeReferens ? this.deltagareApiService.fetchWorkExperiences$(genomforandeReferens) : null
-    ),
-    shareReplay(1)
-  );
-
-  highestEducation$: Observable<HighestEducation> = this.currentGenomforandeReferens$.pipe(
-    switchMap(genomforandeReferens =>
-      genomforandeReferens ? this.deltagareApiService.fetchHighestEducation$(genomforandeReferens) : null
-    ),
-    shareReplay(1)
-  );
-
-  educations$: Observable<Education[]> = this.currentGenomforandeReferens$.pipe(
-    switchMap(genomforandeReferens =>
-      genomforandeReferens ? this.deltagareApiService.fetchEducations$(genomforandeReferens) : null
-    ),
-    shareReplay(1)
-  );
-
-  driversLicense$: Observable<DriversLicense> = this.currentGenomforandeReferens$.pipe(
-    switchMap(genomforandeReferens =>
-      genomforandeReferens ? this.deltagareApiService.fetchDriversLicense$(genomforandeReferens) : null
-    ),
-    shareReplay(1)
-  );
-
-  workLanguages$: Observable<string[]> = this.currentGenomforandeReferens$.pipe(
-    switchMap(genomforandeReferens =>
-      genomforandeReferens ? this.deltagareApiService.fetchWorkLanguages$(genomforandeReferens) : null
-    ),
-    shareReplay(1)
-  );
-
-  disabilities$: Observable<Disability[]> = this.currentGenomforandeReferens$.pipe(
-    switchMap(genomforandeReferens =>
-      genomforandeReferens ? this.deltagareApiService.fetchDisabilities$(genomforandeReferens) : null
-    ),
-    shareReplay(1)
-  );
-
   constructor(private deltagareApiService: DeltagareApiService, private handledareService: HandledareService) {}
 
-  setGenomforandereferens(genomforandeReferens: string) {
+  setGenomforandereferens(genomforandeReferens: string): void {
     if (genomforandeReferens !== this._genomforandeReferensFromParams$.value) {
       this._genomforandeReferensFromParams$.next(genomforandeReferens);
       this.setActiveTab('0');
     }
   }
 
-  fetchReports$(params: PaginationParams): Observable<ReportsData> {
-    return this.currentGenomforandeReferens$.pipe(
-      switchMap(genomforandeReferens => this.deltagareApiService.fetchReports$(genomforandeReferens, params))
-    );
-  }
-
   setActiveTab(tabId: string): void {
     this._activeTab$.next(tabId);
   }

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/avvikelse-report-form/avvikelse-report-form.component.html

@@ -36,7 +36,7 @@
           <form class="avvikelse-report-form__form" [formGroup]="avvikelseFormGroup" (ngSubmit)="openConfirmDialog()">
             <div class="avvikelse-report-form__form-item">
               <digi-ng-form-select
-                *ngIf="reasonsAsNgDigiFormSelectItems$ | async; let reason; else loadingRef"
+                *ngIf="reasonsAsNgDigiFormSelectItems$ | async as reason; else loadingRef"
                 [formControlName]="reasonFormName"
                 afLabel="Orsak till avvikelse"
                 afPlaceholder="Välj orsak till avvikelse"
@@ -52,7 +52,7 @@
             <div
               class="avvikelse-report-form__form-item avvikelse-report-form__textareas"
               [formArrayName]="questionsFormName"
-              *ngIf="questionsForChosenReason$ | async; let questions"
+              *ngIf="questionsForChosenReason$ | async as questions"
             >
               <div
                 class="avvikelse-report-form__form-item"
@@ -109,7 +109,7 @@
             <msfa-report-description-list [avrop]="avrop">
               <dt>Orsak till avvikelse:</dt>
               <dd>{{(chosenReason$ | async)?.name }}</dd>
-              <ng-container *ngIf="avvikelseSubmitData$ | async; let avvikelseSubmitData; else loadingRef">
+              <ng-container *ngIf="avvikelseSubmitData$ | async as avvikelseSubmitData; else loadingRef">
                 <ng-container *ngFor="let question of avvikelseSubmitData.avvikelseAlternativ.frageformular">
                   <dt>{{getCurrentQuestionFromId(question.fraga).name}}</dt>
                   <dd>{{question.svar.length === 0 ? 'Inget svar' : question.svar }}</dd>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/informativ-rapport-form/informativ-rapport-form.component.html

@@ -98,7 +98,7 @@
           >
             <ui-loader *ngIf="submitLoading$ | async" uiType="absolute"></ui-loader>
             <msfa-report-description-list [avrop]="avrop">
-              <ng-container *ngIf="submitData$ | async; let submitData; else loadingRef">
+              <ng-container *ngIf="submitData$ | async as submitData; else loadingRef">
                 <dt>Vad gäller ärendet</dt>
                 <dd>{{getInformativRapportCategory(submitData.category)}}</dd>
                 <dt>Kompletterande information</dt>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.html

@@ -191,7 +191,7 @@
           >
             <ui-loader *ngIf="submitIsLoading$ | async" uiType="absolute"></ui-loader>
             <msfa-report-description-list [avrop]="avrop">
-              <ng-container *ngIf="submitData$ | async; let submitData; else loadingRef">
+              <ng-container *ngIf="submitData$ | async as submitData; else loadingRef">
                 <dt>Har ni under perioden tillhandahållit språkstöd till deltagaren:</dt>
                 <dd>{{submitData.hasOfferedLanguageSupport ? 'Ja' : 'Nej' }}</dd>
 

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

@@ -1,8 +1,7 @@
 <div class="deltagare-list-handelser">
   <p>Genomförandereferens: <strong>{{deltagare?.genomforandeReferens}}</strong></p>
 
-  <ui-loader *ngIf="handelserLoading$ | async" uiType="absolute"></ui-loader>
+  <digi-table af-size="s" *ngIf="deltagareHandelserData$ | async as deltagareHandelserData; else loadingRef">
-  <digi-table af-size="s" *ngIf="deltagareHandelserData$ | async as deltagareHandelserData">
     <ng-container *ngIf="deltagareHandelserData.data.length > 0; else noEvents">
       <table>
         <caption class="msfa__a11y-sr-only">
@@ -56,4 +55,9 @@
   </digi-table>
 </div>
 
-<ng-template #noEvents> Inga händelser har inkommit. </ng-template>
+<ng-template #noEvents>
+  <p>Inga händelser har inkommit.</p>
+</ng-template>
+<ng-template #loadingRef>
+  <ui-loader></ui-loader>
+</ng-template>

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

@@ -1,11 +1,10 @@
 import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { DeltagareHandelse, DeltagareHandelseData } from '@msfa-models/deltagare-handelse.model';
-import { Observable } from 'rxjs';
 import { IconType } from '@msfa-enums/icon-type.enum';
+import { DeltagareHandelse, DeltagareHandelseData } from '@msfa-models/deltagare-handelse.model';
 import { DeltagareCompact } from '@msfa-models/deltagare.model';
 import { PaginationMeta } from '@msfa-models/pagination-meta.model';
-import { map } from 'rxjs/operators';
 import { DeltagareHandelserService } from '@msfa-services/deltagare-handelser.service';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'msfa-deltagare-list-handelser-dialog',
@@ -17,7 +16,6 @@ export class DeltagareListHandelserDialogComponent implements OnInit, OnDestroy
   @Input() deltagare: DeltagareCompact;
   iconType = IconType;
   deltagareHandelserData$: Observable<DeltagareHandelseData>;
-  handelserLoading$ = this.deltagareHandelserService.handelserLoading$;
 
   constructor(private deltagareHandelserService: DeltagareHandelserService) {}
 

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

@@ -85,10 +85,10 @@
 </div>
 
 <digi-ng-dialog
+  *ngIf="handelserDialogDeltagare$ | async as deltagare"
   [afActive]="handelserDialogIsOpen$ | async"
   (afOnPrimaryClick)="closeHandelser()"
   (afOnInactive)="closeHandelser()"
-  *ngIf="handelserDialogDeltagare$ | async; let deltagare"
   [afHeading]="'Händelser för ' + deltagare.fullName"
   afHeadingLevel="h2"
   [afPrimaryButtonText]="'Stäng'"

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

@@ -1,11 +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';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
-import { DeltagareListTableModule } from './components/deltagare-list-table/deltagare-list-table.module';
-import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { UnauthorizedAlertModule } from '@msfa-shared/components/unauthorized-alert/unauthorized-alert.module';
+import { UiLoaderModule } from '@ui/loader/loader.module';
+import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
+import { DeltagareListTableModule } from './components/deltagare-list-table/deltagare-list-table.module';
+import { DeltagareListComponent } from './deltagare-list.component';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -22,6 +23,7 @@ import { UnauthorizedAlertModule } from '@msfa-shared/components/unauthorized-al
     DeltagareListTableModule,
     UiSkeletonModule,
     UnauthorizedAlertModule,
+    UiLoaderModule,
   ],
 })
 export class DeltagareListModule {}

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

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { PaginationParams } from '@msfa-models/api/params.model';
 import { BehaviorSubject, combineLatest } from 'rxjs';
-import { switchMap, tap } from 'rxjs/operators';
+import { switchMap } from 'rxjs/operators';
 import { DeltagareHandelserApiService } from './api/deltagare-handelser-api.service';
 
 const DEFAULT_PARAMS: PaginationParams = {
@@ -15,15 +15,10 @@ const DEFAULT_PARAMS: PaginationParams = {
 export class DeltagareHandelserService {
   private _params$ = new BehaviorSubject<PaginationParams>(DEFAULT_PARAMS);
   private _genomforandeReferens$ = new BehaviorSubject<number>(null);
-  private _handelserLoading$ = new BehaviorSubject<boolean>(false);
-  handelserLoading$ = this._handelserLoading$.asObservable();
 
   deltagareHandelserData$ = combineLatest([this._genomforandeReferens$, this._params$]).pipe(
     switchMap(([genomforandeReferens, params]) => {
-      this._handelserLoading$.next(true);
+      return this.deltagareHandelserApiService.fetchDeltagareHandelser$(genomforandeReferens, params);
-      return this.deltagareHandelserApiService
-        .fetchDeltagareHandelser$(genomforandeReferens, params)
-        .pipe(tap(() => this._handelserLoading$.next(false)));
     })
   );