feat(employee): Added roles dialog to employee-card and employee-form. (TV-413)

Squashed commit of the following:

commit f9d4b6297a93e499944698f02f355d647c343113
Merge: 3c481d4 c984912
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Sep 9 06:14:37 2021 +0200

    Merge branch 'develop' into feature/TV-413-role-dialog

commit 3c481d4c566f9d53edf7e4078a50cff0f51f99aa
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Sep 9 06:14:19 2021 +0200

    Added role-dialog component and implmeneted it inside employee-card and employee-form

commit 86aa3af3f54be4ef5bfb99baece6654a7fba204f
Merge: f3258e8 1e45fb5
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Sep 9 05:42:46 2021 +0200

    Merge branch 'develop' into feature/TV-515-authorization-flow

commit f3258e8c6e3d51f21ec619e09c82b2d0f581bde9
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Sep 8 16:43:44 2021 +0200

    Fixed tests

commit 91bfea1baa297f34769a33972fd61481dfa31197
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Sep 8 15:55:13 2021 +0200

    Removed unused pages

commit d4a92fbde9d6255d8406abc23fe1479658035787
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Sep 8 15:51:25 2021 +0200

    Updated some styling

commit dc75656ff96ff0358a2dd0a8b090b4b4938b8323
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Sep 8 15:35:04 2021 +0200

    Refactured guards by separating organizations into its own guard

commit 24f3a0a2d821930bd682b854f98e1c9816ece08c
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Sep 8 15:33:53 2021 +0200

    Readded search on employees

commit f1890b104c48d6dd6e263b730dbdafbc2a6fbf0f
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Sep 8 14:59:24 2021 +0200

    Added RoleGuard to pages needing a guard

commit ef4b37e3dcc8fe26eef1bb813cfb35727ba691be
Merge: 07bca2a b06436a
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Sep 8 14:06:34 2021 +0200

    Merge branch 'develop' into feature/TV-515-authorization-flow

commit 07bca2a84d0ec970188c284ba4b950312cec57cb
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Sep 8 13:26:50 2021 +0200

    Added check for navigation

apps/mina-sidor-fa/src/app/shared/components/roles-dialog/roles-dialog.component.html

@@ -0,0 +1,79 @@
+<button
+  class="roles-dialog-button"
+  type="button"
+  (click)="openRolesDialog()"
+  aria-controls="roles-dialog"
+  aria-label="Öppnar en dialog med information om behörigheter"
+>
+  {{buttonText}}
+</button>
+
+<digi-ng-dialog
+  id="roles-dialog"
+  class="roles-dialog"
+  [afActive]="displayRolesDialog"
+  (afOnInactive)="closeRolesDialog()"
+  (afOnPrimaryClick)="closeRolesDialog()"
+  afHeading="Om rollerna i systemet"
+  afHeadingLevel="h2"
+  afPrimaryButtonText="Stäng"
+  afSecondaryButtonText=""
+>
+  <p>
+    Läs beskrivningarna nedan för att lära dig mer om de olika rollerna. Personalen kan tilldelas en roll, eller flera
+    roller, beroende på vad de arbetar med. Tänk på att rollen endast gäller inom de utförande verksamheter och adresser
+    som personalen fått behörighet till.
+  </p>
+  <p>
+    All personal kommer att kunna se sitt eget personalkonto, där de kan se vilka roller och utförande verksamheter och
+    adresser som tilldelats dem i systemet. De kommer även att se startsidan.
+  </p>
+
+  <h3>Administrera behörigheter</h3>
+  <p>
+    Rollen passar personal som ska administrera behörigheter i systemet. Rollen bör begränsas till ett fåtal personer
+    och kan användas av exempelvis firmatecknare, behörighetsadministratör, eller annan person som ska kunna
+    administrera personalens behörigheter. Rollen gäller endast inom de utförande verksamheter och adresser som getts
+    behörighet till.
+  </p>
+  <p>Rollen ger tillgång till följande funktioner:</p>
+  <ul>
+    <li>Skapa nya personalkonton</li>
+    <li>Se personallista</li>
+    <li>Se och ändra personalkonto och dess behörigheter</li>
+    <li>Ta bort personalkonton</li>
+  </ul>
+
+  <h3>Ta emot nya deltagare</h3>
+  <p>
+    Rollen passar personal som ska se nya deltagare som inkommit i systemet och som ska tilldela handledare till nya
+    deltagare. Rollen kan exempelvis användas av samordnande roller, handledare, administratörer, eller annan personal
+    som ska kunna utföra dessa arbetsuppgifter. Rollen gäller endast inom de utförande verksamheter och adresser som
+    getts behörighet till.
+  </p>
+  <p>Rollen ger tillgång till följande funktioner:</p>
+  <ul>
+    <li>Se lista över nya deltagare som inkommit</li>
+    <li>Tilldela handledare till nya deltagare</li>
+    <li>Ta bort nya deltagare där beslut om avbrott skett innan tjänsten startat</li>
+  </ul>
+
+  <h3>Rapportering, planering och information om deltagare</h3>
+  <p>
+    Rollen passar personal som arbetar nära deltagare. Rollen kan användas av exempelvis handledare, coacher, studie-
+    och yrkesvägledare, lärare eller andra roller som behöver se information om deltagare, planera aktiviteter med
+    deltagare eller hantera deltagares rapporter. Rollen gäller endast inom de utförande verksamheter och adresser som
+    getts behörighet till.
+  </p>
+  <p>Rollen ger tillgång till följande funktioner:</p>
+
+  <ul>
+    <li>Se lista över deltagare</li>
+    <li>Se information om deltagare</li>
+    <li>Planera aktiviteter i en gemensam planering</li>
+    <li>Skicka och se avvikelserapporter</li>
+    <li>Skicka och se resultatrapporter</li>
+    <li>Skicka och se slutredovisningar</li>
+    <li>Skicka och se informativa rapporter</li>
+  </ul>
+</digi-ng-dialog>

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

@@ -0,0 +1,9 @@
+@import 'mixins/link';
+
+.roles-dialog {
+  position: absolute;
+}
+
+.roles-dialog-button {
+  @include msfa__button-as-link(true);
+}

apps/mina-sidor-fa/src/app/shared/components/roles-dialog/roles-dialog.component.spec.ts

@@ -0,0 +1,26 @@
+/* tslint:disable:no-unused-variable */
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { RolesDialogComponent } from './roles-dialog.component';
+
+describe('RolesDialogComponent', () => {
+  let component: RolesDialogComponent;
+  let fixture: ComponentFixture<RolesDialogComponent>;
+
+  beforeEach(async(() => {
+    void TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      declarations: [RolesDialogComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RolesDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/mina-sidor-fa/src/app/shared/components/roles-dialog/roles-dialog.component.ts

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'msfa-roles-dialog',
+  templateUrl: './roles-dialog.component.html',
+  styleUrls: ['./roles-dialog.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RolesDialogComponent {
+  @Input() buttonText = 'Läs mer om roller här';
+
+  displayRolesDialog = false;
+
+  openRolesDialog(): void {
+    this.displayRolesDialog = true;
+  }
+
+  closeRolesDialog(): void {
+    this.displayRolesDialog = false;
+  }
+}

apps/mina-sidor-fa/src/app/shared/components/roles-dialog/roles-dialog.module.ts

@@ -0,0 +1,12 @@
+import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RolesDialogComponent } from './roles-dialog.component';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [RolesDialogComponent],
+  imports: [CommonModule, DigiNgDialogModule],
+  exports: [RolesDialogComponent],
+})
+export class RolesDialogModule {}