fix(layout): Implemented loader in multiple places and added organization picker to default layout. (TV-758)

Squashed commit of the following:

commit bf4f3ea3ce6a612b03be078917203cc7f7c4f2f7
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Tue Oct 12 20:42:05 2021 +0200

    Implemented loader in mulitple places and added organization-picker to default layout

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

@@ -1,7 +1,7 @@
 <msfa-layout>
   <digi-typography>
     <section class="deltagare-card" *ngIf="activeTab$ | async as activeTab">
-      <ng-container *ngIf="contactInformation$ | async as contactInformation">
+      <ng-container *ngIf="contactInformation$ | async as contactInformation; else skeletonRef">
         <header class="deltagare-card__header">
           <msfa-back-link [route]="['/deltagare']">Tillbaka till deltagarlistan</msfa-back-link>
           <h1>{{contactInformation.fullName }}</h1>
@@ -79,6 +79,10 @@
   </digi-typography>
 </msfa-layout>
 
+<ng-template #skeletonRef>
+  <digi-ng-skeleton-base [afCount]="3" afText="Laddar deltagarinformation"></digi-ng-skeleton-base>
+</ng-template>
+
 <ng-template #loadingRef>
   <msfa-loader type="padded"></msfa-loader>
 </ng-template>

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

@@ -2,6 +2,7 @@ import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
 import { DigiNgLayoutExpansionPanelModule } from '@af/digi-ng/_layout/layout-expansion-panel';
 import { DigiNgLinkButtonModule } from '@af/digi-ng/_link/link-button';
 import { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover';
+import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
@@ -13,9 +14,9 @@ import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
 import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
 import { DeltagareTabExperiencesComponent } from './components/deltagare-tab-experiences/deltagare-tab-experiences.component';
 import { DeltagareTabPersonalInformationComponent } from './components/deltagare-tab-personal-information/deltagare-tab-personal-information.component';
+import { ReportsListModule } from './components/deltagare-tab-reports/components/reports-list/reports-list.module';
 import { DeltagareTabReportsComponent } from './components/deltagare-tab-reports/deltagare-tab-reports.component';
 import { DeltagareTabSensitiveInformationComponent } from './components/deltagare-tab-sensitive-information/deltagare-tab-sensitive-information.component';
-import { ReportsListModule } from './components/deltagare-tab-reports/components/reports-list/reports-list.module';
 import { DeltagareCardComponent } from './deltagare-card.component';
 import { DeltagareCardService } from './deltagare-card.service';
 
@@ -42,6 +43,7 @@ import { DeltagareCardService } from './deltagare-card.service';
     DigiNgPopoverModule,
     DigiNgLinkButtonModule,
     DigiNgFormSelectModule,
+    DigiNgSkeletonBaseModule,
   ],
   providers: [DeltagareCardService],
   exports: [DeltagareCardComponent],

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

@@ -32,7 +32,7 @@
 </msfa-layout>
 
 <ng-template #loadingRef>
-  <digi-ng-skeleton-base [afCount]="3" afText="Laddar deltagare"></digi-ng-skeleton-base>
+  <digi-ng-skeleton-base [afCount]="3" afText="Laddar deltagarlista"></digi-ng-skeleton-base>
 </ng-template>
 
 <ng-template #noDeltagare>

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

@@ -1,14 +1,20 @@
-<div class="organization-picker">
-  <digi-typography>
-    <h1>Välj organisation</h1>
-    <p>Du tillhör flera organisationer. Välj vilken organisation du vill arbeta med idag.</p>
-  </digi-typography>
-  <ng-container *ngIf="organizations$ | async as organizations">
-    <msfa-organization-picker-form
-      class="organization-picker__form"
-      *ngIf="organizations.length !== 1"
-      [organizations]="organizations"
-      (selectedOrganizationChanged)="loginWithOrganization($event)"
-    ></msfa-organization-picker-form>
+<msfa-layout>
+  <ng-container *ngIf="organizations$ | async as organizations; else loadingRef">
+    <digi-typography>
+      <section class="organization-picker" *ngIf="organizations.length !== 1">
+        <header>
+          <h1>Välj organisation</h1>
+          <p>Du tillhör flera organisationer. Välj vilken organisation du vill arbeta med idag.</p>
+        </header>
+        <msfa-organization-picker-form
+          [organizations]="organizations"
+          (selectedOrganizationChanged)="loginWithOrganization($event)"
+        ></msfa-organization-picker-form>
+      </section>
+    </digi-typography>
   </ng-container>
-</div>
+</msfa-layout>
+
+<ng-template #loadingRef>
+  <msfa-loader type="full-blank-screen"></msfa-loader>
+</ng-template>

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

@@ -1,11 +1,8 @@
 @import 'variables/gutters';
 
 .organization-picker {
-  margin: 6rem 6rem;
-  max-width: 560px;
-
-  &__form {
-    display: block;
-    margin-top: $digi--layout--gutter--xl;
-  }
+  max-width: var(--digi--typography--text--max-width);
+  display: flex;
+  flex-direction: column;
+  gap: $digi--layout--gutter--xl;
 }

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

@@ -1,12 +1,14 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
 import { OrganizationPickerFormModule } from '@msfa-shared/components/organization-picker-form/organization-picker-form.module';
 import { OrganizationPickerRoutingModule } from './organization-picker-routing.module';
 import { OrganizationPickerComponent } from './organization-picker.component';
 
 @NgModule({
   declarations: [OrganizationPickerComponent],
-  imports: [CommonModule, OrganizationPickerRoutingModule, OrganizationPickerFormModule],
+  imports: [CommonModule, LayoutModule, OrganizationPickerRoutingModule, OrganizationPickerFormModule, LoaderModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class OrganizationPickerModule {}

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

@@ -1,38 +1,40 @@
-<msfa-layout [showBreadCrumbs]="false" *ngIf="userRoles$ | async as userRoles; else loadingRef">
-  <digi-typography>
-    <section class="start">
-      <header class="start__header">
-        <div class="start__image-wrapper">
-          <digi-media-image
-            af-src="/assets/images/start_1280w.jpg"
-            af-srcset="
-              assets/images/start_600w.jpg  800w,
-              assets/images/start_800w.jpg  1050w,
-              assets/images/start_1000w.jpg 1200w
-              "
-            af-alt="En kvinna som tittar i kameran"
-            af-width="1000"
-            af-height="465"
-          ></digi-media-image>
-          <h1 class="start__heading">Välkommen {{ userFullName$ | async }}</h1>
-        </div>
-        <ng-container *ngIf="isAuthorizedUser(userRoles); else unauthorizedRef">
-          <p>
-            Detta är Arbetsförmedlingens nya plattform för fristående aktörer. Här kommer du bland annat kunna sköta den
-            dagliga kontakten med arbetssökande och Arbetsförmedlingen. Vi kommer successivt att implementera nytt
-            innehåll, förbättringar och uppdateringar.
-          </p>
-          <p>Målet är helt enkelt att underlätta ditt dagliga arbete!</p>
-        </ng-container>
-        <ng-template #unauthorizedRef>
-          <p>
-            Det verkar som att du inte har fått din behörighet ännu, kontakta din administratör för att få tillgång till
-            tjänsten.
-          </p>
-        </ng-template>
-      </header>
-    </section>
-  </digi-typography>
+<msfa-layout [showBreadCrumbs]="false">
+  <ng-container *ngIf="userRoles$ | async as userRoles; else loadingRef">
+    <digi-typography>
+      <section class="start">
+        <header class="start__header">
+          <div class="start__image-wrapper">
+            <digi-media-image
+              af-src="/assets/images/start_1280w.jpg"
+              af-srcset="
+                assets/images/start_600w.jpg  800w,
+                assets/images/start_800w.jpg  1050w,
+                assets/images/start_1000w.jpg 1200w
+                "
+              af-alt="En kvinna som tittar i kameran"
+              af-width="1000"
+              af-height="465"
+            ></digi-media-image>
+            <h1 class="start__heading">Välkommen {{ userFullName$ | async }}</h1>
+          </div>
+          <ng-container *ngIf="isAuthorizedUser(userRoles); else unauthorizedRef">
+            <p>
+              Detta är Arbetsförmedlingens nya plattform för fristående aktörer. Här kommer du bland annat kunna sköta
+              den dagliga kontakten med arbetssökande och Arbetsförmedlingen. Vi kommer successivt att implementera nytt
+              innehåll, förbättringar och uppdateringar.
+            </p>
+            <p>Målet är helt enkelt att underlätta ditt dagliga arbete!</p>
+          </ng-container>
+          <ng-template #unauthorizedRef>
+            <p>
+              Det verkar som att du inte har fått din behörighet ännu, kontakta din administratör för att få tillgång
+              till tjänsten.
+            </p>
+          </ng-template>
+        </header>
+      </section>
+    </digi-typography>
+  </ng-container>
 </msfa-layout>
 
 <ng-template #loadingRef>

apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.scss

@@ -25,6 +25,10 @@
     @include msfa__backdrop($msfa__z-index-backdrop);
   }
 
+  &--full-blank-screen {
+    @include msfa__backdrop($msfa__z-index-backdrop, true, true);
+  }
+
   &__spinner {
     display: inline-flex;
     animation: spinning 1s linear infinite;

apps/mina-sidor-fa/src/app/shared/enums/loader-type.enum.ts

@@ -1,5 +1,6 @@
 export enum LoaderType {
   FULL_SCREEN = 'fullscreen',
+  FULL_BLANK_SCREEN = 'full-blank-screen',
   ABSOLUTE = 'absolute',
   PADDED = 'padded',
 }

apps/mina-sidor-fa/src/styles/mixins/_backdrop.scss

@@ -1,12 +1,17 @@
 @import 'variables/z-index';
 
-@mixin msfa__backdrop($zIndex: $msfa__z-index-default, $fullScreen: true) {
+@mixin msfa__backdrop($zIndex: $msfa__z-index-default, $fullScreen: true, $opaqueBackground: false) {
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: $zIndex;
-  background-color: rgba(255, 255, 255, 0.4);
+
+  @if $opaqueBackground {
+    background-color: var(--digi--ui--color--background);
+  } @else {
+    background-color: rgba(255, 255, 255, 0.4);
+  }
 
   @if $fullScreen {
     position: fixed;