Merge pull request #160 in TEA/mina-sidor-fa-web from feature/TV-715 to develop

Squashed commit of the following:

commit 8095333c506ad52573834e4a2f130ab0871ef7bc
Merge: 21e3e7ff 44f8197c
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Thu Sep 30 13:42:27 2021 +0200

    Merge branch 'develop' into feature/TV-715

commit 21e3e7ffcfab49786173d0c35f312dd395f387a3
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Thu Sep 30 13:39:26 2021 +0200

    TV-715 loader

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

@@ -1,39 +1,43 @@
 <form class="orsaks-form" [formGroup]="orsakerFormGroup" *ngIf="orsakerFormGroup">
-  <ng-container *ngIf="selectedAlternative">
-    <div class="orsaks-form__content">
-      <digi-ng-form-select
-        [formControlName]="'orsaker'"
-        [afLabel]="selectedAlternative === 'franvaro' ? 'Frånvaroorsak' : 'Avvikelseorsak'"
-        [afPlaceholder]="'Välj orsak till ' + (selectedAlternative === 'franvaro' ? 'frånvaro' : 'avvikelse')"
-        [afSelectItems]="selectedAlternative === 'franvaro' ? franvaroOrsaker : avvikelseOrsaker"
-        [afDisableValidStyle]="true"
-        [afInvalid]="avvikelseFormGroup.errors?.orsakerIsRequired && orsakerFormGroup.touched"
-      ></digi-ng-form-select>
-      <digi-form-validation-message
-        af-variation="error"
-        *ngIf="avvikelseFormGroup.errors?.orsakerIsRequired && orsakerFormGroup.touched"
-      >
-        Orsak är obligatoriskt
-      </digi-form-validation-message>
-    </div>
-  </ng-container>
+  <div *ngIf="selectedAlternative" class="orsaks-form__content">
+    <digi-ng-form-select
+      *ngIf="franvaroOrsaker || avvikelseOrsaker; else loadingRef"
+      [formControlName]="'orsaker'"
+      [afLabel]="selectedAlternative === 'franvaro' ? 'Frånvaroorsak' : 'Avvikelseorsak'"
+      [afPlaceholder]="'Välj orsak till ' + (selectedAlternative === 'franvaro' ? 'frånvaro' : 'avvikelse')"
+      [afSelectItems]="selectedAlternative === 'franvaro' ? franvaroOrsaker : avvikelseOrsaker"
+      [afDisableValidStyle]="true"
+      [afInvalid]="avvikelseFormGroup.errors?.orsakerIsRequired && orsakerFormGroup.touched"
+    ></digi-ng-form-select>
+    <digi-form-validation-message
+      af-variation="error"
+      *ngIf="avvikelseFormGroup.errors?.orsakerIsRequired && orsakerFormGroup.touched"
+    >
+      Orsak är obligatoriskt
+    </digi-form-validation-message>
+  </div>
+  <ng-template #loadingRef>
+    <msfa-loader type="padded"></msfa-loader>
+  </ng-template>
 
-  <ng-container *ngIf="showAndraKandaOrsaker">
-    <div class="orsaks-form__content">
-      <digi-ng-form-select
-        [formControlName]="'andraKandaOrsaker'"
-        [afLabel]="'Välj känd orsak'"
-        [afPlaceholder]="'Känd orsak'"
-        [afSelectItems]="andraKandaOrsaker"
-        [afDisableValidStyle]="true"
-        [afInvalid]="avvikelseFormGroup.errors?.annanKandorsakIsRequired && orsakerFormGroup.touched"
-      ></digi-ng-form-select>
-      <digi-form-validation-message
-        af-variation="error"
-        *ngIf="avvikelseFormGroup.errors?.annanKandorsakIsRequired && orsakerFormGroup.touched"
-      >
-        Orsak är obligatoriskt
-      </digi-form-validation-message>
-    </div>
-  </ng-container>
+  <div *ngIf="showAndraKandaOrsaker" class="orsaks-form__content">
+    <digi-ng-form-select
+      *ngIf="andraKandaOrsaker"
+      [formControlName]="'andraKandaOrsaker'"
+      [afLabel]="'Välj känd orsak'"
+      [afPlaceholder]="'Känd orsak'"
+      [afSelectItems]="andraKandaOrsaker"
+      [afDisableValidStyle]="true"
+      [afInvalid]="avvikelseFormGroup.errors?.annanKandorsakIsRequired && orsakerFormGroup.touched"
+    ></digi-ng-form-select>
+    <digi-form-validation-message
+      af-variation="error"
+      *ngIf="avvikelseFormGroup.errors?.annanKandorsakIsRequired && orsakerFormGroup.touched"
+    >
+      Orsak är obligatoriskt
+    </digi-form-validation-message>
+  </div>
+  <ng-template #loadingRef>
+    <msfa-loader type="padded"></msfa-loader>
+  </ng-template>
 </form>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-report/pages/deltagare-avvikelse/components/deltagare-orsaks-form/deltagare-orsaks-form.module.ts

@@ -2,6 +2,7 @@ import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
+import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
 import { DeltagareOrsaksFormComponent } from './deltagare-orsaks-form.component';
 
 
@@ -12,7 +13,8 @@ import { DeltagareOrsaksFormComponent } from './deltagare-orsaks-form.component'
   imports: [
     CommonModule,
     ReactiveFormsModule,
-    DigiNgFormSelectModule
+    DigiNgFormSelectModule,
+    LoaderModule
   ],
   exports: [DeltagareOrsaksFormComponent]
 })

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

@@ -1,4 +1,4 @@
-<section class="report-layout" *ngIf="contactInformation$ | async as contactInformation">
+<section class="report-layout" *ngIf="contactInformation$ | async as contactInformation; else skeletonRef">
   <digi-typography>
     <h1>{{ reportTitle }}</h1>
     <p class="report-layout__description">{{description}}</p>
@@ -51,3 +51,7 @@
     </div>
   </digi-typography>
 </section>
+
+<ng-template #skeletonRef>
+  <digi-ng-skeleton-base [afCount]="3" afText="Laddar skapa rapportsida"></digi-ng-skeleton-base>
+</ng-template>

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

@@ -5,11 +5,18 @@ import { ReportLayoutComponent } from './report-layout.component';
 import { DigiNgProgressProgressbarModule } from '@af/digi-ng/_progress/progressbar';
 import { HideTextModule } from '@msfa-shared/components/hide-text/hide-text.module';
 import { RouterModule } from '@angular/router';
+import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [ReportLayoutComponent],
-  imports: [CommonModule, RouterModule, LayoutModule, DigiNgProgressProgressbarModule, HideTextModule],
+  imports: [
+    CommonModule,
+    RouterModule,
+    LayoutModule,
+    DigiNgProgressProgressbarModule,
+    DigiNgSkeletonBaseModule,
+    HideTextModule],
   exports: [ReportLayoutComponent],
 })
 export class ReportLayoutModule {}