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

Squashed commit of the following:

commit 3cf3d3cc0b6e69f0264779778ccd745a39017242
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Aug 26 18:00:34 2021 +0200

    fixed broken code after merge and re-instated old breadcrumb for edit-employee-page

commit 661c51a775474eee2dececd5af18831cbf11bd16
Merge: e0cbda6 1f26e80
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Aug 26 15:46:06 2021 +0200

    merged with the new changes in develop branch - resolved some merge conflicts

commit e0cbda6ccb61dc08e2f21c9bd695b35f99d2d696
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Aug 26 09:07:08 2021 +0200

    re-used previous method to select and remove tjanster from selectedTjanster list (TV-386)

commit 005ff68d23994c62b3abb2f8a3460229f8fe2dcc
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Aug 26 08:57:46 2021 +0200

    renamed service-related variables and methods to tjanst/tjanster in edit-employee component

commit 073db3b8d8f05f33f74df1717017ed2ebfa77b1d
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Wed Aug 25 22:29:17 2021 +0200

    removed experimental code (TV-386)

commit 83628b1e972350ad29ee6471043e073aa990622d
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Wed Aug 25 22:26:29 2021 +0200

    minor change to make code shorter (TV-386)

commit 709e317b22efb10aec67341584dbdfbe096a7b87
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Wed Aug 25 13:47:41 2021 +0200

    added reset form default value after a service-tag is removed

commit 434020d7c64d7f9ab6bc1b324557c6c24ef8c519
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Wed Aug 25 13:39:11 2021 +0200

    removed unused imports and files (TV-386)

commit a09bcc90f5e800e084731a64748752a8bebeda4f
Merge: f1885dd 0661d22
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Wed Aug 25 13:34:08 2021 +0200

    Merge branch 'develop' into feature/TV-386

commit f1885dd194a0f8e39ed1654ae86e24b1a9ad8dd6
Merge: 93527ac 50a83f7
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Wed Aug 25 07:25:58 2021 +0200

    fixed conflict after mergeing in develop branch

commit 93527ac238cf4e282332abd8529b23bf4189019d
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Wed Aug 25 00:32:49 2021 +0200

    finalized re-implementation of service selection

commit f69d090a56f87f6df1849222e097b7558a1dbe39
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Tue Aug 24 17:01:25 2021 +0200

    re-writing code for editing roles some more

commit a95e01bc572b808d2a65efe4281813aba28fa340
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Tue Aug 24 16:32:22 2021 +0200

    re-writing code for editing services

commit 6a0759e551f863af507b952b09f3ace965c97903
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Tue Aug 24 14:08:54 2021 +0200

    fixed broken code and html and css to get roles-selection to work

commit cf3a75fb82c33c1081bd9645faac47bd3db1d33f
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Tue Aug 24 14:08:29 2021 +0200

    fixed broken code and html and css to get roles-selection to work

commit 3f4d8ddba0a76c3079a028042318a948c39b7fe8
Merge: c305aff 59ce393
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Tue Aug 24 12:35:20 2021 +0200

    merged in develope and added som fixes to broken code (TV-386)

commit c305aff00a0dedb7dc8988e80c85794331d58ce1
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Mon Aug 23 09:25:00 2021 +0200

    re-arranged the breadcrumbs when visiting the edit-employee card (TV-386)

commit d73b6f97001a3ae36495dfebb14a554e23d1dff4
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Mon Aug 23 08:25:40 2021 +0200

    minor corrections

commit 67f083bc31a5b7199eaf9d606e6cfb320b6a72e7
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Mon Aug 23 07:52:45 2021 +0200

    cleared unused imports (TV-386)

commit 95c59bab20f5fa088f650af83dbf7b447a141636
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Mon Aug 23 07:31:27 2021 +0200

    minor changes added (TV-386)

... and 3 more commits

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

@@ -2,7 +2,7 @@
   <section class="employee-card">
     <digi-typography *ngIf="employee$ | async as employee; else loadingRef">
       <header class="employee-card__header">
-        <a class="employee-card__edit-button" [routerLink]="['/administration/andra-konto', employee.id]">Redigera</a>
+        <a class="employee-card__edit-button" [routerLink]="['/administration/redigera-konto', employee.id]">Redigera</a>
         <h1>{{ employee.fullName }}</h1>
       </header>
       <p>Här kan du se och ändra personalkontots behörigheter. Ändra behörighet genom att klicka på redigera.</p>

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

@@ -16,15 +16,16 @@
       [afInvalid]="emailFormControl.invalid && emailFormControl.touched"
     ></digi-ng-form-input>
 
-    <fieldset *ngIf="authorizationsFormGroup && selectableAuthorizations" [formGroup]="authorizationsFormGroup">
+    <fieldset *ngIf="rolesFormGroup && availableRoles" [formGroup]="rolesFormGroup">
       <legend>Tjänster</legend>
       <p>
         Välj de tjänster du vill ge personalen tillgång till.
       </p>
       <digi-ng-form-select
-            [formControl]=""
+            [formControl]="tjansterFormControl"
             afLabel="Välj tjänster"
-            [afSelectItems]="[{'name': 'Välj tjänst', 'value': ''}]"
+            [afPlaceholder]="'Välj tjänst'"
+            [afSelectItems]="availableTjanster"
             [afDescription]="description"
             [afDisableValidStyle]="true"
             [afDisableValidation]="disableValidation"
@@ -32,23 +33,23 @@
             [afDisabled]="disabled"
             [afInvalidMessage]="invalidMessage"
             [afInvalid]="invalid"
-            (afOnChange)="toggleService(selectableServices, $event)"
+            (afOnChange)="toggleTjanst()"
           ></digi-ng-form-select>
-          <div class="employee-form__service-tag">
-            <ng-container *ngFor="let employeeService of currentEmployeeServices">
+          <div class="edit-employee-form__service-tag">
+            <ng-container *ngFor="let employeeTjanst of selectedTjanster">
               <digi-tag
-                class="employee-form__service-tag--item"
-                [attr.af-text]="employeeService.name"
+                class="edit-employee-form__service-tag--item"
+                [attr.af-text]="employeeTjanst?.name"
                 af-no-icon="false"
                 af-size="s"
-                (click)="unselectEmployeeService()"
+                (click)="unselectTjanstTag(employeeTjanst)"
               >
               </digi-tag>
             </ng-container>
           </div>
     </fieldset>
 
-    <fieldset *ngIf="authorizationsFormGroup && selectableAuthorizations" [formGroup]="authorizationsFormGroup">
+    <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.
@@ -75,7 +76,7 @@
       </div>
     </fieldset>
 
-    <fieldset *ngIf="authorizationsFormGroup && selectableAuthorizations" [formGroup]="authorizationsFormGroup">
+    <fieldset *ngIf="rolesFormGroup && availableRoles" [formGroup]="rolesFormGroup">
       <legend>Behörigheter</legend>
       <p>
         Här tilldelar du specifika behörigheter i systemet. Välj nedan vilka arbetsuppgifter som användaren ska kunna
@@ -83,22 +84,22 @@
         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__open-authorization-dialog-btn"
+          class="edit-employee-form__open-roles-dialog-btn"
           [afVariation]="ButtonVariation.TERTIARY"
           [afType]="ButtonType.BUTTON"
           [afSize]="ButtonSize.S"
-          [afAriaControls]="'authorization-dialog'"
+          [afAriaControls]="'roles-dialog'"
           [afAriaLabel]="'Öppnar en dialog med information om behörigheter'"
-          (afOnClick)="openAuthorizationDialog()"
+          (afOnClick)="openRolesDialog()"
         >
           Läs mer om behörigheter här
         </digi-ng-button>
       </p>
-      <ul class="edit-employee-form__authorizations">
-        <li class="edit-employee-form__authorization-item" *ngFor="let authorization of selectableAuthorizations">
+      <ul class="edit-employee-form__roles">
+        <li class="edit-employee-form__roles-item" *ngFor="let role of availableRoles">
           <digi-ng-form-checkbox
-            [afLabel]="authorization.name"
-            [formControlName]="getFormControlName(authorization)"
+            [afLabel]="role.name"
+            [formControlName]="getFormControlName(role)"
           ></digi-ng-form-checkbox>
         </li>
       </ul>
@@ -114,9 +115,9 @@
 </digi-typography>
 <digi-ng-dialog
   id="authorization-dialog"
-  [afActive]="displayAuthorizationDialog"
-  (afOnInactive)="closeAuthorizationDialog()"
-  (afOnPrimaryClick)="closeAuthorizationDialog()"
+  [afActive]="displayRolesDialog"
+  (afOnInactive)="closeRolesDialog()"
+  (afOnPrimaryClick)="closeRolesDialog()"
   [afHeading]="'Behörighet'"
   afHeadingLevel="h1"
   afPrimaryButtonText="Stäng"

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

@@ -21,18 +21,26 @@
     margin-bottom: var(--digi-typography--margin--h2);
   }
 
+  &__service-tag {
+    padding-top: .5rem;
+  }
+
+  &__service-tag--item {
+    margin-right: 1rem;
+  }
+
   &__input {
     display: block;
     width: 100%;
     margin-bottom: var(--digi--layout--gutter);
   }
 
-  &__authorizations {
+  &__roles {
     @include msfa__reset-list;
     margin-bottom: var(--digi--layout--gutter);
   }
 
-  &__authorization-item {
+  &__roles-item {
     margin-top: var(--digi--layout--gutter);
 
     ::ng-deep label {
@@ -40,7 +48,7 @@
     }
   }
 
-  &__open-authorization-dialog-btn {
+  &__open-roles-dialog-btn {
     ::ng-deep button {
       padding: 0 !important;
     }

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

@@ -11,12 +11,15 @@ import {
   Output,
 } from '@angular/core';
 import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
-import { Authorization } from '@msfa-models/authorization.model';
-import { Service } from '@msfa-models/service.model';
+import { Role } from '@msfa-models/role.model';
+import { RoleEnum } from '@msfa-enums/role.enum';
+import { Tjanst } from '@msfa-models/tjanst.model';
+import { FormTagData } from '@msfa-models/form-tag.model';
 
 export interface EditEmployeeFormData {
   email: string;
-  authorizations: Array<Authorization>;
+  tjanster: FormTagData[],
+  roles: Array<Role>;
 }
 
 @Component({
@@ -27,149 +30,185 @@ export interface EditEmployeeFormData {
 })
 export class EditEmployeeFormComponent implements OnInit, OnChanges {
   @Input() currentEmail: string | null = null;
-  @Input() selectableAuthorizations: Array<Authorization> | null = null;
-  @Input() currentEmployeeAuthorizations: Array<Authorization> | null = null;
+  @Input() availableRoles: Array<Role> | null = null;
+  @Input() currentEmployeeRoles: Array<string> | null = null;
+
+  @Input() availableTjanster: Array<FormSelectItem> | null = null;
+  @Input() currentEmployeeTjanster: Array<Tjanst> | null = null;
+  selectedTjanster: Array<FormTagData> | null = null;
+
   @Output() formSubmitted = new EventEmitter<EditEmployeeFormData>();
-  @Input() selectableServices: Array<Service> | null = null;
-  @Input() currentEmployeeServices: Array<Service> | null = null;
 
   readonly ButtonVariation = ButtonVariation;
   readonly ButtonType = ButtonType;
   readonly ButtonSize = ButtonSize;
 
   readonly emailFormControlName = 'email';
+  readonly tjansterFormControlName = 'tjanster';
 
   editEmployeeFormGroup: FormGroup | null = null;
-  authorizationsFormGroup: FormGroup | null = null;
+  rolesFormGroup: FormGroup | null = null;
 
-  displayAuthorizationDialog = false;
+  displayRolesDialog = false;
 
   constructor() {}
 
   ngOnInit(): void {
-    console.log(':::::::', this.selectableServices);
-    console.log('!!!!!!!', this.currentEmployeeServices);
     this.initializeEditEmployeeFormGroup();
+
+    if(this.currentEmployeeTjanster) {
+      this.selectedTjanster = this.currentEmployeeTjanster
+        .map(tjanst => ({tjanstekod: tjanst.code, name: tjanst.name} as FormTagData));
+    }
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes.selectableAuthorizations) {
+    if (changes.availableRoles || changes.availableTjanster) {
       this.initializeEditEmployeeFormGroup();
     }
 
-    if (changes.currentEmployeeAuthorizations) {
-      this.updateAuthorizationFormGroup();
+    if (changes.currentEmployeeRoles) {
+      this.updateRolesFormGroup();
     }
 
     if (changes.currentEmail) {
       this.editEmployeeFormGroup.patchValue(Object.fromEntries([[this.emailFormControlName, this.currentEmail]]));
     }
+
+    if(changes.currentEmployeeTjanster) {
+      this.editEmployeeFormGroup.patchValue(Object.fromEntries([[this.tjansterFormControlName, '']]));
+    }
   }
 
   get emailFormControl(): AbstractControl | null {
     return this.editEmployeeFormGroup?.get(this.emailFormControlName);
   }
 
+  get tjansterFormControl(): AbstractControl | null {
+    return this.editEmployeeFormGroup?.get(this.tjansterFormControlName);
+  }
+
   onFormSubmitted(): void {
     if (!this.editEmployeeFormGroup) {
       return;
     }
 
-    this.editEmployeeFormGroup.markAllAsTouched();
-
-    if (this.editEmployeeFormGroup.invalid) {
+    if (this.editEmployeeFormGroup.invalid || this.editEmployeeFormGroup.pristine) {
       return;
     }
 
     this.formSubmitted.emit({
       email: this.emailFormControl?.value,
-      authorizations: this.getAuthorizationsFromFormGroup(this.authorizationsFormGroup, this.selectableAuthorizations),
+      tjanster: this.selectedTjanster,
+      roles: this.getRolesFromFormGroup(this.rolesFormGroup, this.availableRoles),
     });
   }
 
-  getFormControlName(authorization: Authorization): string {
-    return authorization?.id?.replace(/[^a-zA-Z0-9]/g, '');
+  getFormControlName(role: Role): string {
+    return RoleEnum[role?.type];
   }
 
-  openAuthorizationDialog(): void {
-    this.displayAuthorizationDialog = true;
+  openRolesDialog(): void {
+    this.displayRolesDialog = true;
   }
 
-  closeAuthorizationDialog(): void {
-    this.displayAuthorizationDialog = false;
+  closeRolesDialog(): void {
+    this.displayRolesDialog = false;
   }
 
   private initializeEditEmployeeFormGroup(): void {
-    this.authorizationsFormGroup = this.getAuthorizationFormGroup(
-      this.selectableAuthorizations,
-      this.currentEmployeeAuthorizations
+    this.rolesFormGroup = this.getRolesFormGroup(
+      this.availableRoles,
+      this.currentEmployeeRoles
     );
 
     this.editEmployeeFormGroup = new FormGroup({
       email: new FormControl(this.currentEmail, [Validators.required, Validators.email]),
-      authorizations: this.authorizationsFormGroup,
+      tjanster: new FormControl('', []),
+      roles: this.rolesFormGroup,
     });
   }
 
-  private updateAuthorizationFormGroup(): void {
-    if (!this.authorizationsFormGroup || !this.selectableAuthorizations) {
+  private updateRolesFormGroup(): void {
+    if (!this.rolesFormGroup || !this.availableRoles) {
       return;
     }
 
-    this.authorizationsFormGroup.patchValue(
+    this.rolesFormGroup.patchValue(
       Object.fromEntries(
-        this.selectableAuthorizations.map(authorization => [
-          this.getFormControlName(authorization),
-          this.isSelectedAuthorization(authorization, this.currentEmployeeAuthorizations),
+        this.availableRoles.map(role => [
+          this.getFormControlName(role),
+          this.isSelectedRole(role, this.currentEmployeeRoles),
         ])
       )
     );
   }
 
-  private getAuthorizationsFromFormGroup(
+  private getRolesFromFormGroup(
     formGroup: FormGroup | null,
-    authorizations: Array<Authorization> | null
-  ): Array<Authorization> {
-    if (!formGroup || !authorizations) {
+    roles: Array<Role> | null
+  ): Array<Role> {
+    if (!formGroup || !roles) {
       return;
     }
 
-    return authorizations.filter(
-      authorization => formGroup.get(this.getFormControlName(authorization))?.value === true
+    return roles.filter(
+      role => formGroup.get(this.getFormControlName(role))?.value === true
     );
   }
 
-  private getAuthorizationFormGroup(
-    authorizations: Array<Authorization> | null,
-    selectedAuthorizations: Array<Authorization> | null
+  private getRolesFormGroup(
+    roles: Array<Role> | null,
+    selectedRoles: Array<string> | null
   ): FormGroup {
-    if (!authorizations) {
+    if (!roles) {
       return new FormGroup({});
     }
 
     return new FormGroup(
       Object.fromEntries(
-        authorizations.map(authorization => [
-          this.getFormControlName(authorization),
-          new FormControl(this.isSelectedAuthorization(authorization, selectedAuthorizations), []),
+        roles.map(role => [
+          this.getFormControlName(role),
+          new FormControl(this.isSelectedRole(role, selectedRoles), []),
         ])
       )
     );
   }
 
-  private isSelectedAuthorization(
-    authorization: Authorization,
-    selectedAuthorizations: Array<Authorization> | null
+  private isSelectedRole(
+    role: Role,
+    selectedRoles: Array<string> | null
   ): boolean {
-    if (!selectedAuthorizations || !authorization) {
+    if (!selectedRoles || !role) {
       return false;
     }
 
-    return selectedAuthorizations.some(selectedAuthorization => selectedAuthorization.id === authorization.id);
+    return selectedRoles.some(selectedRole => selectedRole === role.type);
   }
 
-  // Services helper methods
-  unselectEmployeeService() {
-    console.log('Unselect the service from list and tag will get removed');
+  // Tjanster helper methods
+  toggleTjanst(): void {
+    const tjanstExistsInList: boolean = this.selectedTjanster
+        .some(tag => tag.tjanstekod === this.tjansterFormControl.value);
+
+    const selectedTjanst: FormTagData[] = this.availableTjanster
+        .filter(tjanst => tjanst.value === this.tjansterFormControl.value)
+          .map(tjanst => ({tjanstekod: tjanst.value, name: tjanst.name}));
+    if(this.tjansterFormControl.value && !tjanstExistsInList) {
+      this.selectedTjanster.push(...selectedTjanst);
+    }
+  }
+
+
+  unselectTjanstTag(tjanst: FormTagData): void {
+    const tagExistsInList = this.selectedTjanster.some(tag => tag.tjanstekod === tjanst.tjanstekod);
+    if(tjanst.tjanstekod && tagExistsInList) {
+      this.selectedTjanster.splice(this.selectedTjanster.indexOf(tjanst), 1);
+    }
+    this.tjansterFormControl.setValue('');
+}
+
+  selectAllUtforandeVerksamheter(checked: boolean):void {
+    console.log('selectAllUtforandeVerksamheter', checked);
   }
 }

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

@@ -1,7 +1,7 @@
 <msfa-layout>
   <section class="employee-form" *ngIf="employee$ | async as employee">
     <!--### Errormeddelanden ###-->
-    <digi-form-error-list
+    <!-- <digi-form-error-list
       class="employee-form__error-list"
       *ngIf="formGroup.invalid && submitted && formErrors.length"
       af-heading="Felmeddelanden"
@@ -9,7 +9,7 @@
       <a *ngFor="let error of formErrors" [routerLink]="" [fragment]="'employee-form-' + error.id"
         >{{ error.message }}</a
       >
-    </digi-form-error-list>
+    </digi-form-error-list> -->
 
     <digi-typography>
       <h1>{{ employee.fullName }}</h1>
@@ -40,14 +40,14 @@
         </digi-typography>
       </ng-container>
     </div>
-
     <!-- Component för att hantera formuläret -->
     <msfa-edit-employee-form
       [currentEmail]="employee?.email"
-      [selectableAuthorizations]="authorizations$ | async"
-      [currentEmployeeAuthorizations]="employee?.authorizations"
-      [selectableServices]="services$ | async"
-      [currentEmployeeServices]="employee.services"
+      [availableRoles]="selectableRoles"
+      [currentEmployeeRoles]="employee?.roles"
+      [availableTjanster]="availableTjanster"
+      [currentEmployeeTjanster]="employee.tjanster"
+      [selectedTjanster]="selectedServices$ | async"
       (formSubmitted)="updateEmployee($event)"
     ></msfa-edit-employee-form>
   </section>

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

@@ -1,17 +1,14 @@
-import { FormSelectBaseItem } from '@af/digi-ng/_form/form-select-base';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { AbstractControl, FormBuilder, FormGroup } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
-import { Authorization } from '@msfa-models/authorization.model';
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+import { FormSelectItem } from '@af/digi-ng/_form/form-select';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { UnsubscribeDirective } from '@msfa-directives/unsubscribe.directive';
 import { Employee } from '@msfa-models/employee.model';
-import { Service } from '@msfa-models/service.model';
-import { AuthorizationService } from '@msfa-services/api/authorizations.service';
+import { mapRoleResponseToRoleObject, Role } from '@msfa-models/role.model';
+import { Tjanst } from '@msfa-models/tjanst.model';
 import { EmployeeService } from '@msfa-services/api/employee.service';
-import { ServiceService } from '@msfa-services/api/service.service';
-import { EmailValidator } from '@msfa-utils/validators/email.validator';
-import { RequiredValidator } from '@msfa-validators/required.validator';
+import { TjanstService } from '@msfa-services/api/tjanst.service';
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
 import { EditEmployeeFormData } from './edit-employee-form/edit-employee-form.component';
 
 @Component({
@@ -20,127 +17,52 @@ import { EditEmployeeFormData } from './edit-employee-form/edit-employee-form.co
   styleUrls: ['./employee-form.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class EmployeeFormComponent {
-  employee$: Observable<Employee> = this.employeeService.employee$;
-  services$: Observable<Service[]> = this.serviceService.services$;
-  authorizations$: Observable<Authorization[]> = this.authorizationService.authorizations$;
-  employeeCurrentServices: Service[] | null | undefined;
+export class EmployeeFormComponent extends UnsubscribeDirective implements OnInit {
+  subscriptionsList = [];
+  employee$ = this.employeeService.employee$;
+  employee: Employee;
 
-  servicesSelectItems$: Observable<FormSelectBaseItem[]> = this.services$.pipe(
-    map(services => services.map(({ name, id }) => ({ name, value: id })))
-  );
-  toggleDialog = false;
-  modalAuthInfo: { name: string } = { name: 'Test Behörighetsnamn' };
+  tjanster$: Observable<Tjanst[]> = this.tjanstService.tjanster$;
+  availableTjanster: FormSelectItem[] | null = null;
 
-  formGroup: FormGroup = this.formBuilder.group({
-    email: this.formBuilder.control('', [RequiredValidator('E-postadress'), EmailValidator('E-postadress')]),
-    services: this.formBuilder.control([], [RequiredValidator('en tjänst')]),
-    authorizations: new FormGroup({}),
-  });
-  todaysDate = new Date();
-  submitted = false;
+  selectableRoles: Role[] | null = this.employeeService.getAllRoles();
+  currentEmployeeRoles: Role[] | undefined | null = null;
 
   constructor(
-    private formBuilder: FormBuilder,
     private employeeService: EmployeeService,
-    private serviceService: ServiceService,
-    private authorizationService: AuthorizationService,
-    private router: Router,
+    private tjanstService: TjanstService,
     private activatedRoute: ActivatedRoute
   ) {
-    this.employeeService.setCurrentEmployeeId(this.activatedRoute.snapshot.params.employeeId);
+    super();
+    super.unsubscribeOnDestroy(...this.subscriptionsList);
+  }
+
+  ngOnInit(): void {
+    this.employeeService.setCurrentEmployeeId(this.activatedRoute.snapshot.params['employeeId']);
+    const employeeDataSub = this.employee$.subscribe(employee => {
+      this.employee = employee;
+      console.log('Detailed Employee Data:::', employee);
+      this.currentEmployeeRoles = employee?.roles
+      .map(role => mapRoleResponseToRoleObject(role));
+    });
+
+    const tjanstRelatedDataSub = this.tjanster$.subscribe(tjanster => {
+      const tjanstOptions: FormSelectItem[] = [];
+      tjanster?.forEach(tjanst => {
+        console.log('each tjanst', tjanst);
+        tjanstOptions.push({name: tjanst?.name, value: tjanst?.code});
+      });
+      this.availableTjanster = tjanstOptions;
+      console.log('availableTjanster', this.availableTjanster);
+    });
+
+    this.subscriptionsList.push(
+      employeeDataSub, 
+      tjanstRelatedDataSub
+    );
   }
 
   updateEmployee(editEmployeeFormData: EditEmployeeFormData): void {
     console.log(editEmployeeFormData);
   }
-
-  get servicesControl(): AbstractControl {
-    return this.formGroup.get('services');
-  }
-
-  get formErrors(): { id: string; message: string }[] {
-    const controlsWithErrors = Object.keys(this.formGroup.controls).filter(
-      key => !!this.formGroup.controls[key].errors
-    );
-
-    return controlsWithErrors.map(key => ({
-      id: key,
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      message: this.formGroup.controls[key].errors.message,
-    }));
-  }
-
-  private _markFormAsDirty(): void {
-    Object.keys(this.formGroup.controls).forEach(control => {
-      this.formGroup.get(control).markAsDirty();
-      this.formGroup.get(control).markAsTouched();
-    });
-  }
-
-  toggleService(service: Service, id: string): void {
-    /* //const currentServices = this.servicesControl.value as { id: unknown }[];
-    const selectedServiceObject = this.employeeCurrentServices.find(obj => obj.id === id);
-    const serviceObjectExists = selectedServiceObject
-      ? this.employeeCurrentServices.some(obj => obj.id === selectedServiceObject.id)
-      : false;
-
-    if (!serviceObjectExists && selectedServiceObject !== undefined) {
-      this.employeeCurrentServices.push(selectedServiceObject);
-    } */
-  }
-
-  unselectService(id: string, service: Service) {
-    /* const selectedServiceObject = this.employeeCurrentServices.find(obj => obj.id === id);
-    const serviceObjectExists = this.employeeCurrentServices?.some(x => (x.id = id));
-    console.log('employeeCurrentServices', this.employeeCurrentServices);
-    if (serviceObjectExists && selectedServiceObject !== undefined) {
-      this.employeeCurrentServices.splice(this.employeeCurrentServices.indexOf(selectedServiceObject), 1);
-    } */
-  }
-
-  openDialog(val: boolean, authName?: string): void {
-    if (authName) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-      this.modalAuthInfo.name = authName;
-    }
-    this.toggleDialog = val;
-  }
-
-  setFocusOnInvalidInput(event: CustomEvent): void {
-    console.log(event.target);
-  }
-
-  resetForm(event: Event): void {
-    event.preventDefault();
-    this.formGroup.reset({
-      firstName: '',
-      lastName: '',
-      ssn: '',
-      services: [],
-      authorizations: [],
-    });
-    // Object.keys(this.formGroup.controls).forEach(controlKey => this.formGroup.controls[controlKey].markAsPristine());
-  }
-
-  submitForm(): void {
-    this.submitted = true;
-    if (this.formGroup.valid) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      const submittableValues = {
-        ...this.formGroup.value,
-      };
-      const post = this.employeeService.postNewEmployee(submittableValues).subscribe({
-        next: id => {
-          void this.router.navigate(['/administration', 'personal', id]);
-        },
-        complete: () => {
-          post.unsubscribe();
-        },
-      });
-    } else {
-      console.error('Form is invalid, do something...');
-      this._markFormAsDirty();
-    }
-  }
 }

apps/mina-sidor-fa/src/app/shared/enums/service.enum.ts

@@ -1,5 +1,5 @@
-export enum Service {
-  KVL = 'KVL',
-  KROM = 'KROM',
-  STOM = 'STOM',
+export enum ServiceEnum {
+  KVL,
+  KROM,
+  STOM
 }

apps/mina-sidor-fa/src/app/shared/models/form-tag.model.ts

@@ -0,0 +1,12 @@
+import { Tjanst } from "./tjanst.model";
+
+export interface FormTagData {
+    tjanstekod: string,
+    name: string;
+}
+
+
+export function mapTjanstToFormTag(tjanstData: Tjanst): FormTagData {
+    const { name, code } = tjanstData;
+    return { tjanstekod: code, name}
+}

apps/mina-sidor-fa/src/app/shared/models/participant.model.ts

@@ -1,5 +1,5 @@
 import { ParticipantStatus } from '@msfa-enums/participant-status.enum';
-import { Service } from '@msfa-enums/service.enum';
+import { ServiceEnum } from '@msfa-enums/service.enum';
 import { PaginationMeta } from './pagination-meta.model';
 
 export interface Participant {
@@ -10,7 +10,7 @@ export interface Participant {
   ssn: string;
   status: ParticipantStatus;
   nextStep: string;
-  service: Service;
+  service: ServiceEnum;
   errandNumber: number;
   startDate: Date;
   endDate: Date;
@@ -33,7 +33,7 @@ export interface ParticipantApiResponseData {
   ssn: string;
   status: ParticipantStatus;
   nextStep: string;
-  service: Service;
+  service: ServiceEnum;
   errandNumber: number;
   startDate: Date;
   endDate: Date;

apps/mina-sidor-fa/src/app/shared/models/role.model.ts

@@ -4,3 +4,35 @@ export interface Role {
   name: string;
   type: RoleEnum;
 }
+
+export function mapRoleResponseToRoleObject(type: string): Role {
+  switch(type) {
+    case 'OrganizationUser':
+      return {
+        name: 'Basanvändare', 
+        type: RoleEnum[type]
+      };
+    case 'ReportAndPlanning':
+      return {
+        name: 'Rapportering, planering och information om deltagare', 
+        type: RoleEnum[type]
+      };
+    case 'ReceiveDeltagare':
+      return {
+        name: 'Ta emot deltagare',
+        type: RoleEnum[RoleEnum[type]]
+      };
+    case 'AuthAdmin':
+      return {
+        name: 'Administrera behörigheter', 
+        type: RoleEnum[RoleEnum[type]]
+      };
+    case 'ContactPerson':
+      return {
+        name: 'Kontaktperson', 
+        type: RoleEnum[type]
+      };
+    default:
+      return;
+  }
+}

apps/mina-sidor-fa/src/app/shared/models/service.model.ts

@@ -1,8 +1,11 @@
-import { Service as ServiceEnum } from '@msfa-enums/service.enum';
+import { ServiceEnum } from '@msfa-enums/service.enum';
 
 export interface Service {
   id: string;
-  name: ServiceEnum;
+  name: string;
+  tjanstekod: string;
+  tjanstId: number;
+  type: ServiceEnum;
 }
 
 export interface ServiceApiResponse {
@@ -11,13 +14,32 @@ export interface ServiceApiResponse {
 
 export interface ServiceApiResponseData {
   id: string;
-  name: ServiceEnum;
+  name: string;
+  tjanstekod: string;
+  tjanstId: number;
+  type: ServiceEnum;
 }
 
 export function mapServiceApiResponseToService(data: ServiceApiResponseData): Service {
-  const { id, name } = data;
+  const { id, name, tjanstekod, tjanstId } = data;
   return {
     id,
     name,
+    tjanstekod,
+    tjanstId,
+    type: getServiceEnumType(name),
   };
 }
+
+export function getServiceEnumType(name: string):ServiceEnum {
+  switch (name) {
+    case 'Kundval Rusta och matcha':
+      return ServiceEnum.KROM;
+    case 'Karriärvägledning':
+      return ServiceEnum.KVL;
+    case 'Stöd och Matchning':
+      return ServiceEnum.STOM;
+    default:
+      break;
+  }
+}

apps/mina-sidor-fa/src/app/shared/services/api/employee.service.ts

@@ -2,6 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { UnsubscribeDirective } from '@msfa-directives/unsubscribe.directive';
 import { ErrorType } from '@msfa-enums/error-type.enum';
+import { RoleEnum } from '@msfa-enums/role.enum';
 import { SortOrder } from '@msfa-enums/sort-order.enum';
 import { environment } from '@msfa-environment';
 import { DeleteEmployeeMockApiResponse } from '@msfa-models/api/delete-employee.response.model';
@@ -20,6 +21,7 @@ import {
   mapResponseToEmployeeCompact,
 } from '@msfa-models/employee.model';
 import { errorToCustomError } from '@msfa-models/error/custom-error';
+import { mapRoleResponseToRoleObject, Role } from '@msfa-models/role.model';
 import { Sort } from '@msfa-models/sort.model';
 import { ErrorService } from '@msfa-services/error.service';
 import { BehaviorSubject, combineLatest, Observable, of, throwError } from 'rxjs';
@@ -41,7 +43,6 @@ export class EmployeeService extends UnsubscribeDirective {
   private _employee$ = new BehaviorSubject<Employee>(null);
 
   public employee$: Observable<Employee> = this._employee$.asObservable();
-
   constructor(
     private httpClient: HttpClient,
     private errorService: ErrorService,
@@ -187,4 +188,17 @@ export class EmployeeService extends UnsubscribeDirective {
         catchError(error => throwError({ message: error as string, type: ErrorType.API }))
       );
   }
+
+  public updateEmployeeData(employeeData: Employee): Observable<string> {
+    return /* this.httpClient.put<{ id: string }>(`${this._apiBaseUrl}/${employeeData.id}`, 
+        mapEmployeeToRequestData(employeeData), API_HEADERS).pipe(
+      map(({ id }) => id),
+      catchError(error => throwError({ message: error as string, type: ErrorType.API }))
+    ); */
+  }
+
+  public getAllRoles(): Role[] {
+    const allAuths: string[] = Object.keys(RoleEnum).filter((item) => {return isNaN(Number(item))});
+      return allAuths.map(key => mapRoleResponseToRoleObject(key));
+  }
 }

apps/mina-sidor-fa/src/app/shared/utils/map-paths-to-breadcrumbs.util.ts

@@ -18,7 +18,6 @@ export function mapPathsToBreadcrumbs(
   } else if (isParticipantCardRoute(paths)) {
     breadcrumbs[breadcrumbs.length - 1].text = 'Deltagarinformation';
   } 
-
   return breadcrumbs;
 }
 

mock-api/mina-sidor-fa/scripts/tjanster.js

@@ -5,8 +5,12 @@ faker.locale = 'sv';
 function generateTjanster() {
   const tjanster = [
     {
-      id: 'A012',
-      label: 'Kundval Rusta och matcha',
+      id: 'KROM',
+      name: 'Kundval Rusta och Matcha',
+      tjanstekod: 'KROM',
+      tjanstId: 33,
+      count: 8, // Behövs för avrop-tjanst
+      label: 'Kundval Rusta och Matcha', // Behövs för avrop-tjanst
     },
     // {
     //   id: 'KVL',