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/pages/administration/pages/employee-card/employee-card.component.html

@@ -103,6 +103,12 @@
         </div>
         <div class="employee-card__block">
           <h3>Roller</h3>
+          <p>
+            Här ser du användarens specifika roller i systemet. Tänk på att rollen i systemet är begränsad till de
+            utförande verksamheter och adresser som användaren hör till. Användaren kan därför endast utföra uppgifter
+            och se information inom den/de utförande adresser som tilldelats användaren.
+            <msfa-roles-dialog></msfa-roles-dialog>.
+          </p>
           <ul class="employee-card__list">
             <li *ngFor="let role of allRoles">
               <digi-icon-check-circle

apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.module.ts

@@ -3,10 +3,11 @@ import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { HideTextModule } from '@msfa-shared/components/hide-text/hide-text.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { RolesDialogModule } from '@msfa-shared/components/roles-dialog/roles-dialog.module';
 import { LocalDatePipeModule } from '@msfa-shared/pipes/local-date/local-date.module';
-import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { EmployeeCardComponent } from './employee-card.component';
 
 @NgModule({
@@ -20,7 +21,8 @@ import { EmployeeCardComponent } from './employee-card.component';
     DigiNgLayoutExpansionPanelModule,
     LocalDatePipeModule,
     HideTextModule,
-    BackLinkModule
+    BackLinkModule,
+    RolesDialogModule,
   ],
 })
 export class EmployeeCardModule {}

apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.html

@@ -71,19 +71,8 @@
         <p>
           Här tilldelar du specifika roller i systemet. Välj nedan vilka arbetsuppgifter som användaren ska kunna
           utföra. Tänk på att rollen i systemet är begränsad till de utförande verksamheter och adresser som användaren
-          hör till. Användaren kan därför endast utföra uppgifter och se information inom den/ de utförande adresser som
-          tilldelats användaren.
-          <digi-ng-button
-            class="edit-employee-form__roles-dialog-button"
-            [afVariation]="ButtonVariation.TERTIARY"
-            [afType]="ButtonType.BUTTON"
-            [afSize]="ButtonSize.S"
-            afAriaControls="roles-dialog"
-            [afAriaLabel]="'Öppnar en dialog med information om behörigheter'"
-            (afOnClick)="openRolesDialog()"
-          >
-            Läs mer om roller här
-          </digi-ng-button>
+          hör till. Användaren kan därför endast utföra uppgifter och se information inom den/de utförande adresser som
+          tilldelats användaren. <msfa-roles-dialog></msfa-roles-dialog>.
         </p>
 
         <fieldset class="edit-employee-form__fieldset">

apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.module.ts

@@ -12,6 +12,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { HideTextModule } from '@msfa-shared/components/hide-text/hide-text.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { RolesDialogModule } from '@msfa-shared/components/roles-dialog/roles-dialog.module';
 import { TreeNodesSelectorModule } from '@msfa-shared/components/tree-nodes-selector/tree-nodes-selector.module';
 import { LocalDatePipeModule } from '@msfa-shared/pipes/local-date/local-date.module';
 import { EmployeeDeleteModule } from '../../components/employee-delete/employee-delete.module';
@@ -38,6 +39,7 @@ import { EmployeeFormComponent } from './employee-form.component';
     DigiNgDialogModule,
     HideTextModule,
     TreeNodesSelectorModule,
+    RolesDialogModule,
   ],
 })
 export class EmployeeFormModule {}

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 {}

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

@@ -2,6 +2,8 @@
   display: inline-flex;
   align-items: center;
   text-decoration: none;
+  color: var(--digi--typography--color--link);
+  font-size: var(--digi--typography--font-size);
   font-weight: var(--digi--typography--font-weight--semibold);
   gap: var(--digi--layout--gutter--xs);
 
@@ -19,3 +21,10 @@
     }
   }
 }
+
+@mixin msfa__button-as-link($ignore-visited: false) {
+  @include msfa__link($ignore-visited);
+  background-color: transparent;
+  border-width: 0;
+  padding: 0;
+}