From 91d7e93feac202841c4f9544f5b5516a127266bd Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date: Wed, 1 Sep 2021 15:02:57 +0200
Subject: [PATCH] feat(personal): Added information regarding roles inside the
 dialog. (TV-498)

---
 .../edit-employee-form.component.html         | 184 +++++++++++-------
 apps/mina-sidor-fa/src/styles/styles.scss     |   6 +
 2 files changed, 115 insertions(+), 75 deletions(-)

diff --git a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.html b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.html
index efa4a2d..3d644e2 100644
--- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.html
@@ -18,42 +18,38 @@
 
     <fieldset *ngIf="rolesFormGroup && availableRoles" [formGroup]="rolesFormGroup">
       <legend>Tjänster</legend>
-      <p>
-        Välj de tjänster du vill ge personalen tillgång till.
-      </p>
+      <p>Välj de tjänster du vill ge personalen tillgång till.</p>
       <digi-ng-form-select
-            [formControl]="tjansterFormControl"
-            afLabel="Välj tjänster"
-            [afPlaceholder]="'Välj tjänst'"
-            [afSelectItems]="availableTjanster"
-            [afDescription]="description"
-            [afDisableValidStyle]="true"
-            [afDisableValidation]="disableValidation"
-            [afValidMessage]="validMessage"
-            [afDisabled]="disabled"
-            [afInvalidMessage]="invalidMessage"
-            [afInvalid]="invalid"
-            (afOnChange)="toggleTjanst()"
-          ></digi-ng-form-select>
-          <div class="edit-employee-form__service-tag">
-            <ng-container *ngFor="let employeeTjanst of selectedTjanster">
-              <digi-tag
-                class="edit-employee-form__service-tag--item"
-                [attr.af-text]="employeeTjanst?.name"
-                af-no-icon="false"
-                af-size="s"
-                (click)="unselectTjanstTag(employeeTjanst)"
-              >
-              </digi-tag>
-            </ng-container>
-          </div>
+        [formControl]="tjansterFormControl"
+        afLabel="Välj tjänster"
+        [afPlaceholder]="'Välj tjänst'"
+        [afSelectItems]="availableTjanster"
+        [afDescription]="description"
+        [afDisableValidStyle]="true"
+        [afDisableValidation]="disableValidation"
+        [afValidMessage]="validMessage"
+        [afDisabled]="disabled"
+        [afInvalidMessage]="invalidMessage"
+        [afInvalid]="invalid"
+        (afOnChange)="toggleTjanst()"
+      ></digi-ng-form-select>
+      <div class="edit-employee-form__service-tag">
+        <ng-container *ngFor="let employeeTjanst of selectedTjanster">
+          <digi-tag
+            class="edit-employee-form__service-tag--item"
+            [attr.af-text]="employeeTjanst?.name"
+            af-no-icon="false"
+            af-size="s"
+            (click)="unselectTjanstTag(employeeTjanst)"
+          >
+          </digi-tag>
+        </ng-container>
+      </div>
     </fieldset>
 
     <fieldset *ngIf="rolesFormGroup && availableRoles" [formGroup]="rolesFormGroup">
       <legend>Utförande verksamheter och adresser</legend>
-      <p>
-        Välj de utförandeverksamheter och utförande adresser du vill ge personalen behörighet till.
-      </p>
+      <p>Välj de utförandeverksamheter och utförande adresser du vill ge personalen behörighet till.</p>
       <div class="edit-employee-form__choose_all-utforande-verksamh">
         <digi-form-checkbox
           af-variation="primary"
@@ -63,13 +59,7 @@
         ></digi-form-checkbox>
       </div>
       <div
-        style="
-          display: flex;
-          border: 1px solid;
-          background-color: #eee;
-          padding: 5px;
-          justify-content: space-between;
-        "
+        style="display: flex; border: 1px solid; background-color: #eee; padding: 5px; justify-content: space-between"
       >
         Plats för digi-select-form-item för utförande verksamheter
         <digi-icon-arrow-down></digi-icon-arrow-down>
@@ -77,40 +67,6 @@
     </fieldset>
 
     <fieldset *ngIf="rolesFormGroup && availableRoles" [formGroup]="rolesFormGroup">
-      <!-- Dialog-fönsteret -->
-      <digi-ng-dialog
-        id="authorization-dialog"
-        [afActive]="displayRolesDialog"
-        (afOnInactive)="closeRolesDialog()"
-        (afOnPrimaryClick)="closeRolesDialog()"
-        [afHeading]="'Behörighet'"
-        afHeadingLevel="h1"
-        afPrimaryButtonText="Stäng"
-        afSecondaryButtonText=""
-      >
-        <p>
-          Behörigheten passar personer som arbetar nära deltagare. Behörigheten kan användas av exempelvis handledare,
-          coacher, studie- och yrkesvägledare, lärare eller annan roll som behöver kunna se information om deltager, kontakta
-          deltagare, planera aktiviteter med deltagre och hantera rapporter för deltagre.
-        </p>
-      
-        <p>Behörigheten ger tillgång till och utföra aktiviteter i följande funktioner i systemet:</p>
-      
-        <p>
-          - Deltagarlista <br />
-          - Information om deltagare <br />
-          - Resultatrapporter <br />
-          - Slutredovisning <br />
-          - Informativ rapport <br />
-          - Skicka välkomstbrev * <br />
-          - Planera deltagares aktiviteter <br />
-          - Deltagares schema <br />
-          - Avvikelserapporter <br />
-          - Närvaro- och frånvarorapporter <br /><br />
-        </p>
-      </digi-ng-dialog>
-      
-      <!-- Beskrivning om behörighetsdelen -->
       <legend>Behörigheter</legend>
       <p>
         Här tilldelar du specifika behörigheter i systemet. Välj nedan vilka arbetsuppgifter som användaren ska kunna
@@ -122,7 +78,7 @@
           [afVariation]="ButtonVariation.TERTIARY"
           [afType]="ButtonType.BUTTON"
           [afSize]="ButtonSize.S"
-          [afAriaControls]="'roles-dialog'"
+          afAriaControls="roles-dialog"
           [afAriaLabel]="'Öppnar en dialog med information om behörigheter'"
           (afOnClick)="openRolesDialog()"
         >
@@ -130,7 +86,6 @@
         </digi-ng-button>
       </p>
 
-      
       <ul class="edit-employee-form__roles">
         <li class="edit-employee-form__roles-item" *ngFor="let role of availableRoles">
           <digi-ng-form-checkbox
@@ -148,4 +103,83 @@
       <digi-button af-type="submit">Spara ändringar</digi-button>
     </div>
   </form>
-</digi-typography>
\ No newline at end of file
+</digi-typography>
+
+<digi-ng-dialog
+  id="roles-dialog"
+  [afActive]="displayRolesDialog"
+  (afOnInactive)="closeRolesDialog()"
+  (afOnPrimaryClick)="closeRolesDialog()"
+  afHeading="Om behörigheterna i systemet"
+  afHeadingLevel="h2"
+  afPrimaryButtonText="Stäng"
+  afSecondaryButtonText=""
+>
+  <p>
+    Läs beskrivningarna nedan för att lära dig mer om de olika behörigheterna. Personalen kan tilldelas en behörighet,
+    eller flera behörigheter, beroende på vad de arbetar med. Tänk på att behörigheten 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 behörigheter och utförande
+    verksamheter och adresser som tilldelats dem i systemet. De kommer även att se startsidan.
+  </p>
+
+  <h3>Basanvändare</h3>
+  <p>
+    All personal som är tillagd i systemet har en basanvändarroll. Den innebär endast att personalen kan logga in i
+    systemet. Behörigheten går inte att välja bort.
+  </p>
+  <p>Behörigheten ger tillgång till följande funktioner:</p>
+  <ul>
+    <li>Inloggning</li>
+  </ul>
+
+  <h3>Administrera behörigheter</h3>
+  <p>
+    Behörigheten passar personal som ska administrera behörigheter i systemet. Behörigheten 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. Behörigheten gäller endast inom de utförande verksamheter och adresser som
+    getts behörighet till.
+  </p>
+  <p>Behörigheten 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>
+    Behörigheten passar personal som ska se nya deltagare som inkommit i systemet och som ska tilldela handledare till
+    nya deltagare. Behörigheten kan exempelvis användas av samordnande roller, handledare, administratörer, eller annan
+    personal som ska kunna utföra dessa arbetsuppgifter. Behörigheten gäller endast inom de utförande verksamheter och
+    adresser som getts behörighet till.
+  </p>
+  <p>Behörigheten 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>
+    Behörigheten passar personal som arbetar nära deltagare. Behörigheten 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. Behörigheten gäller endast inom de utförande
+    verksamheter och adresser som getts behörighet till.
+  </p>
+  <p>Behörigheten 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>
diff --git a/apps/mina-sidor-fa/src/styles/styles.scss b/apps/mina-sidor-fa/src/styles/styles.scss
index 550ebbe..c2b5762 100644
--- a/apps/mina-sidor-fa/src/styles/styles.scss
+++ b/apps/mina-sidor-fa/src/styles/styles.scss
@@ -57,6 +57,12 @@ dl {
   display: inline-flex;
 }
 
+// Fix issue with too long modal-content. This makes it scrollable.
+.digi-ng-dialog-base__content {
+  max-height: 90vh;
+  overflow-x: auto;
+}
+
 .msfa {
   &__a11y-sr-only {
     @include msfa__a11y-sr-only;