Merge pull request #17 in TEA/dafa-web-monorepo from feature/TV-227 to develop

Squashed commit of the following:

commit 1337b528d8234dd218805ecc75901755b20ed374
Merge: 92437fe 5a97ebf
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Tue Jun 15 12:56:40 2021 +0200

    fix: merged with latest from develp branch and resolved conflicts

commit 92437fe3ce83582d4a0c662f8dd4399795e8123d
Merge: 97b0089 48801a9
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Mon Jun 14 08:28:42 2021 +0200

    Merge branch 'develop' into feature/TV-227

commit 97b0089d4910c47bde0d06e1df739affcf82b29f
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Fri Jun 4 17:01:36 2021 +0200

    fix: minor css changes

commit c4f7088c652821f42685783227a5f794b606f3b8
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Fri Jun 4 16:58:46 2021 +0200

    fix: placed auth-checkbox and read-more button inside a grid

commit dadc9abfde15890d7b5625f67cc51d6784b2fa72
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Fri Jun 4 13:59:14 2021 +0200

    fix: removed an unused variable

commit 81861428174b63016026e95e55a5c7742e31d860
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Fri Jun 4 13:52:31 2021 +0200

    fix: minor changes plus added aria-label to read-more button

commit be9b4edfadaefbc9728ce991e1361375c6acc238
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Fri Jun 4 13:42:21 2021 +0200

    fix: minor changes to improve functionality

commit 3d2ac66bed2183ddc1346f0fb88d629de48ebe02
Merge: 86b0598 d91b3e6
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Fri Jun 4 12:56:32 2021 +0200

    incoming changes through merge with develop-branch

commit 86b0598d00406ee3d65504f452a03235a59f4580
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Jun 3 12:01:29 2021 +0200

    fix: removed unnecessary variable

commit 81887c0e8b1ce4b25bc326e362909a200983898f
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Jun 3 11:43:02 2021 +0200

    Added modal-functionality to display authorization info when creating employee account

commit 9d37e01a3aea83a00f126647495292b558d5883b
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Jun 3 10:57:23 2021 +0200

    fix: changed name in autorizations.js in mock-api to go along with the current info

apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.component.html

@@ -87,8 +87,10 @@
         </digi-typography>
 
         <ul class="employee-form__authorizations">
-          <li *ngFor="let authorization of authorizations; let first = first" class="employee-form__authorization-item">
+          <li *ngFor="let authorization of authorizations; let first = first" 
+              class="employee-form__authorization-item">
             <digi-form-checkbox
+              class="employee-form__digi-checkbox"
               [afId]="(first && 'employee-form-authorizations') || undefined"
               af-variation="primary"
               [afValidation]="authorizationsControl.invalid && authorizationsControl.dirty && 'error'"
@@ -97,9 +99,11 @@
               [afChecked]="authorizationsControl.value.includes(authorization)"
               (afOnChange)="toggleAuthorization(authorization, $event.detail.target.checked)"
             ></digi-form-checkbox>
-            <digi-ng-popover class="employee-form__popover">
-              <p>Info om behörighet</p>
-            </digi-ng-popover>
+            <digi-button af-variation="secondary" [afAriaLabel]="'Läs mer om ' + authorization.name"
+                          af-size="s" class="employee-form__read-more"
+                          (afOnClick)="openDialog(true, authorization.name)">
+              Läs mer
+            </digi-button>
           </li>
         </ul>
         <digi-form-validation-message
@@ -116,6 +120,39 @@
       <digi-button af-type="reset" af-variation="secondary" (afOnClick)="resetForm($event.detail)">Avbryt</digi-button>
       <digi-button af-type="submit">Registrera konto</digi-button>
     </div>
+
+    <!-- Modal/ Dialog window -->
+    <digi-ng-dialog 
+            [afActive]="toggleDialog"
+            (afOnInactive)="openDialog(false)"
+            (afOnPrimaryClick)="openDialog(false)"
+            [afHeading]="modalAuthInfo.name"
+            afHeadingLevel="h3"
+            afPrimaryButtonText="Stäng">
+      <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>
   </form>
 </section>
 </dafa-logged-in-shell>

apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.component.scss

@@ -38,7 +38,13 @@
     margin-bottom: var(--digi--layout--gutter);
   }
 
-  &__authorization-item,
+  &__authorization-item {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-areas:"auth-checkbox read-more";
+  }
+
+
   &__service-item {
     display: flex;
     align-items: center;
@@ -59,11 +65,14 @@
     gap: var(--digi--layout--gutter);
   }
 
-  &__popover {
-    margin-left: var(--digi--layout--gutter);
+  &__digi-checkbox {
+    grid-area: auth-checkbox;   
+    align-self: center;
+    padding: 0.5rem 0;
+  }
 
-    ::ng-deep .digi-ng-popover__container {
-      z-index: 1;
-    }
+  &__read-more {
+    grid-area: read-more;
+    align-self: center;
   }
 }

apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.component.ts

@@ -9,7 +9,7 @@ import { EmployeeService } from '@dafa-services/api/employee.service';
 import { ServiceService } from '@dafa-services/api/service.service';
 import { SocialSecurityNumberValidator } from '@dafa-utils/validators/social-security-number.validator';
 import { RequiredValidator } from '@dafa-validators/required.validator';
-import { Observable } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 @Component({
@@ -24,6 +24,8 @@ export class EmployeeFormComponent {
   servicesSelectItems$: Observable<FormSelectBaseItem[]> = this.services$.pipe(
     map(services => services.map(({ name, id }) => ({ name, value: id })))
   );
+  toggleDialog: boolean = false;
+  modalAuthInfo: any = {'name': 'Test Behörighetsnamn'};
 
   formGroup: FormGroup = this.formBuilder.group({
     firstName: this.formBuilder.control('', [RequiredValidator('Förnamn')]),
@@ -99,6 +101,13 @@ export class EmployeeFormComponent {
     }
   }
 
+  openDialog(val: boolean, authName?:any) {
+    if(authName) {
+      this.modalAuthInfo.name = authName;
+    }
+    this.toggleDialog = val;
+  }
+
   setFocusOnInvalidInput(event: CustomEvent): void {
     console.log(event.target);
   }

apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.module.ts

@@ -10,6 +10,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { LocalDatePipeModule } from '@dafa-shared/pipes/local-date/local-date.module';
 import { EmployeeFormComponent } from './employee-form.component';
+import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
 import { LoggedInShellModule } from '../../../../components/logged-in-shell/logged-in-shell.module';
 
 @NgModule({
@@ -26,6 +27,7 @@ import { LoggedInShellModule } from '../../../../components/logged-in-shell/logg
     DigiNgFormSelectModule,
     DigiNgPopoverModule,
     DigiNgFormCheckboxModule,
+    DigiNgDialogModule,
     LoggedInShellModule
   ]
 })

mock-api/dafa-web/scripts/authorizations.js

@@ -6,19 +6,19 @@ function generateAuthorizations() {
   return [
     {
       id: faker.datatype.uuid(),
-      name: 'Hantera behörigheter',
+      name: "Administrera behörigheter"
     },
     {
       id: faker.datatype.uuid(),
-      name: 'Hantera användare',
+      name: "Ta emot deltagare"
     },
     {
       id: faker.datatype.uuid(),
-      name: 'Hantera organisation',
+      name: "Rapportering, planering och information om deltagare"
     },
     {
       id: faker.datatype.uuid(),
-      name: 'Hantera ekonomi',
+      name: "Administrera ordrar och fakturor",
     },
   ];
 }