feat(start): Added role-based content on startpage. (TV-517)

Squashed commit of the following:

commit 583b54ba97f0e0c02bd6665c76e95aabbb4c0bf1
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Fri Sep 10 07:37:32 2021 +0200

    Updated role-check and added loader

commit 78cd4047b3ad1180c818adeaa29c5a2d567b386e
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Sep 9 16:55:53 2021 +0200

    merged in develope, fixed template conflict (TV-517)

commit c5d295126f2e9826e95456e28deb276609cb56e3
Merge: 014fdb4 5f81d6f
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Sep 9 16:54:26 2021 +0200

    merged in develope (TV-517)

commit 014fdb4af7df3c8bd8502ee617fce2bf2f0a49cd
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Sep 9 16:49:59 2021 +0200

    simplified the code, mapped instead of subscribe (TV-517)

commit dbec3796596b6d3e5c483c68e1ffd628a872b1ca
Merge: 6ed17c3 2bca57c
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Sep 9 15:13:44 2021 +0200

    Merge branch 'develop' into feature/TV-517

commit 6ed17c3a01b2261529a793413f455eecd3194fd2
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Sep 9 15:13:07 2021 +0200

    fixed error after merge with develop (TV-517)

commit e7cd48905bcbff4df24676fd2f2ed5ba214f6e86
Merge: d283385 1938b94
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Sep 9 14:53:46 2021 +0200

    Merge branch 'develop' into feature/TV-517

commit d283385408bc189bdb4884e397acf9653f54c6d4
Merge: 3ff31c9 7774477
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Sep 9 14:22:09 2021 +0200

    Merge branch 'develop' into feature/TV-517

commit 3ff31c9596a45a32b28a01015d455fc97acd9cf7
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Sep 9 14:19:51 2021 +0200

    added specific view for standard user (TV-517)

commit 9302f56f7cd9dfe66d70947ac62c8e1fde3cac86
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Sep 9 12:01:08 2021 +0200

    added getters for user roles (TV-517)

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

@@ -1,42 +1,31 @@
-<msfa-layout>
+<msfa-layout *ngIf="userRoles$ | async as userRoles; else loadingRef">
-  <section class="start">
+  <digi-typography>
-    <!-- User not logged in -->
+    <section class="start">
-    <ng-container *ngIf="isStandardUser">
+      <header class="start__header">
-      <digi-typography>
+        <h1>Välkommen {{ userFullName$ | async }}</h1>
-        <h1>Välkommen {{ userFullName }}</h1>
+        <ng-container *ngIf="isAuthorizedUser(userRoles); else 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>
+          <p>
-      </digi-typography>
+            Detta är Arbetsförmedlingens nya plattform för våra fristående aktörer, här kommer du bland annat kunna
-    </ng-container>
+            sköta den dagliga kontakten med arbetssökande och arbetsförmedlingen.
-
+          </p>
-    <!-- User logged in -->
+          <p>
-    <ng-container *ngIf="!isStandardUser">
+            Vi kommer successivt att implementera nytt innehåll, förbättringar och uppdateringar. Målet är helt enkelt
-      <digi-typography>
+            att underlätta ditt dagliga arbete!
-        <h1>Välkommen {{ userFullName }}</h1>
+          </p>
-        <p>
+        </ng-container>
-          Detta är Arbetsförmedlingens nya plattform för våra fristående aktörer, 
+        <ng-template #unauthorizedRef>
-          här kommer du bland annat kunna sköta den dagliga kontakten med 
+          <p>
-          arbetssökande och arbetsförmedlingen. 
+            Det verkar som att du inte har fått din behörighet ännu, kontakta din administratör för att få tillgång till
-          <br/><br/>
+            tjänsten.
-          Vi kommer successivt att 
+          </p>
-          implementera nytt innehåll, förbättringar och uppdateringar.
+        </ng-template>
-          Målet är helt enkelt att underlätta ditt dagliga arbete!
+      </header>
-        </p>
+    </section>
-      </digi-typography>
+  </digi-typography>
-      <div class="start__wrapper">
-        <div class="start__notifications">
-          <digi-info-card af-heading="Nya deltagare" af-heading-level="h2" af-type="info">
-            <p>
-              Det har kommit in nya avrop med deltagare, länken nedan tar dig till fliken Nya deltagare. Du finner den
-              också i vänster menyn på sidan
-            </p>
-  
-            <digi-ng-link-internal afText="Till nya deltagare" afRoute="/nya-deltagare"></digi-ng-link-internal>
-          </digi-info-card>
-        </div>
-  
-        <div class="start__alerts"></div>
-        <div class="start__statistics"></div>
-      </div>
-    </ng-container>
-  </section>
 </msfa-layout>
+
+<ng-template #loadingRef>
+  <div class="msfa__loading-wrapper msfa__loading-wrapper--full-screen">
+    <digi-icon-spinner class="msfa__spinner"></digi-icon-spinner>
+  </div>
+</ng-template>

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

@@ -1,28 +1,2 @@
-@import 'variables/gutters';
 .start {
-  &__wrapper {
-    margin-top: $digi--layout--gutter--l;
-    display: grid;
-    grid-template-rows: auto;
-    grid-template-areas:
-      'header header'
-      'notifications alerts'
-      'statistics statistics ';
-    gap: $digi--layout--gutter--l;
-  }
-
-  &__notifications {
-    grid-area: notifications;
-  }
-
-  &__alerts {
-    grid-area: alerts;
-    display: flex;
-    flex-direction: column;
-    gap: var(--digi--layout--gutter);
-  }
-
-  &__statistics {
-    grid-area: statistics;
-  }
 }

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

@@ -1,8 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { UnsubscribeDirective } from '@msfa-directives/unsubscribe.directive';
+import { Role } from '@msfa-models/role.model';
-import { RoleEnum } from '@msfa-enums/role.enum';
-import { mapResponseToRoles, Role } from '@msfa-models/role.model';
 import { UserService } from '@msfa-services/api/user.service';
+import { Observable } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
 
 @Component({
@@ -11,27 +10,16 @@ import { filter, map } from 'rxjs/operators';
   styleUrls: ['./start.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class StartComponent extends UnsubscribeDirective {
+export class StartComponent {
-  private _userName: string;
+  userFullName$: Observable<string> = this.userService.user$.pipe(
-  private _userRoles: Role[];
+    filter(user => !!user),
+    map(userName => userName.fullName)
+  );
+  userRoles$: Observable<Role[]> = this.userService.userRoles$;
 
-  constructor(private userService: UserService) {
+  constructor(private userService: UserService) {}
-    super();
-    super.unsubscribeOnDestroy(
-      this.userService.user$.pipe(
-        filter(user => !!user),
-        map(user => user)
-      ).subscribe(user => {
-        this._userName = user.fullName;
-        this._userRoles = mapResponseToRoles(user.roles);
-      }));
-  }
 
-  get isStandardUser(): boolean {
+  isAuthorizedUser(userRoles: Role[]): boolean {
-    return this._userRoles?.some(role => role.type === RoleEnum.MSFA_Standard);
+    return !!userRoles.length;
   }
-  get userFullName(): string {
-    return this._userName;
-  }
-
 }

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

@@ -1,6 +1,4 @@
 import { DigiNgCardModule } from '@af/digi-ng/_card/card';
-import { DigiNgLinkInternalModule } from '@af/digi-ng/_link/link-internal';
-import { DigiNgNotificationAlertModule } from '@af/digi-ng/_notification/notification-alert';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
@@ -15,8 +13,6 @@ import { StartComponent } from './start.component';
     RouterModule.forChild([{ path: '', component: StartComponent }]),
     LayoutModule,
     DigiNgCardModule,
-    DigiNgNotificationAlertModule,
-    DigiNgLinkInternalModule,
   ],
 })
 export class StartModule {}

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

@@ -4,10 +4,6 @@
 @import 'mixins/link';
 
 @keyframes spinning {
-  from {
-    transform: rotate(0deg);
-  }
-
   to {
     transform: rotate(360deg);
   }
@@ -73,9 +69,24 @@ dl {
     font-size: 0.875rem !important;
   }
 
+  &__loading-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+
+    &--full-screen {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: rgba(255, 255, 255, 0.5);
+    }
+  }
   &__spinner {
     display: inline-flex;
-    animation: spinning infinite 0.6s linear;
+    animation: spinning 1s linear infinite;
   }
 
   &__digi-icon {