Merge pull request #74 in TEA/mina-sidor-fa-web from feature/TV-389 to develop

Squashed commit of the following: commit a865f5452ae9cb5eab0b55080dd7e7ec43d9ed61 Merge: b4e5a9e d9938cc Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se> Date: Fri Sep 3 10:25:38 2021 +0200 Merge branch 'develop-remote' into feature/TV-389 # Conflicts: # apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.component.ts # apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.module.ts commit b4e5a9ef26f99d0e0e8b2f8104f5e432da4bc82e Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se> Date: Fri Sep 3 02:43:51 2021 +0200 TV-389 removed some references to inputs that are no longer existing. commit 04c1527a994d9c5479ebcd523261dd331beb093e Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se> Date: Thu Sep 2 15:17:24 2021 +0200 TV-389 adjusted spelling error commit 3ea3faf1b13fafc16d4a97a6fc748dc790d1bc41 Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se> Date: Thu Sep 2 15:13:57 2021 +0200 TV-389 have adjusted a bunch of issues after feedback in PR commit 9ced585dd830c19006ead3bfe5a52ae1467189ef Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se> Date: Thu Sep 2 10:55:55 2021 +0200 Merge branch 'develop-remote' into feature/TV-389 # Conflicts: # apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.html # apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.component.ts commit eb873ecb2125574c624523818f0441acd0a1bb61 Merge: 8f896cb b80bf22 Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se> Date: Thu Sep 2 10:35:44 2021 +0200 Merge branch 'develop-remote' into feature/TV-389 commit 8f896cbf156ea65fed95a19d17ef485d06046ed0 Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se> Date: Wed Sep 1 18:19:16 2021 +0200 TV-389 making sure we're getting data of the right format commit 801e0298781815c9b4ca78f900cda17fbf33ffb5 Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se> Date: Wed Sep 1 09:09:51 2021 +0200 TV-389 fixed old function name commit 145e312d68e9a067377b228a718386dcf419ef49 Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se> Date: Wed Sep 1 08:52:54 2021 +0200 TV-389 restored file commit b1cf3b44bae548979fd090fca4e2194ae9c586c1 Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se> Date: Wed Sep 1 08:47:30 2021 +0200 TV-389 cleaned up some console logs for testing and renamed a function commit e9d79205902771eafeaf0fbe3bdb63e7cceeb0d5 Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se> Date: Wed Sep 1 08:30:08 2021 +0200 TV-389 have added a bunch of tests and refactored some stuff on the edit employee forms into a service. commit 185b4597c303ff20ae079efdf9247a53615b627e Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se> Date: Tue Aug 31 15:00:50 2021 +0200 TV-389 made a first working version of the tree node selector commit ddff1ed3a05434a42a81d4dabfd8b2f2ff3c468e Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se> Date: Tue Aug 31 13:01:49 2021 +0200 TV-389 adjustments after checking out integration against API. commit 92117d54b248f00a8b0619c3200d20a06510d9ba Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se> Date: Tue Aug 31 12:21:05 2021 +0200 TV-389 made various changes in prepertion for integration against the api.. commit 2f15741eb47335cfe4e8c47dc779642a8ab9893b Merge: 062f42b 02cf0f6 Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se> Date: Tue Aug 31 08:13:21 2021 +0200 Merge branch 'develop-remote' into feature/TV-389 commit 062f42b4d89976685fce463eec4f8deff399fd75 Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se> Date: Tue Aug 31 08:12:37 2021 +0200 TV-389 preparing for integration with api.. commit 674b636e4b32aa391e1e14763c5781fa25bc31fb Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se> Date: Tue Aug 31 07:51:12 2021 +0200 TV-389 fixed some custom validators for utforandeverksamheter.. commit 07256654273e499b41cbb6b06e26b9ca4f7627c5 Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se> Date: Tue Aug 31 05:39:27 2021 +0200 TV-389 removed useless z-index commit 36b6ac2f6f846f5e88b393650c6d66821b600933 Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se> Date: Tue Aug 31 05:32:16 2021 +0200 TV-389 added styling to button for opening the panel. commit 75ea6b7196e6ab69b0ec4ce103214dc742ea5252 Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se> Date: Tue Aug 31 03:23:10 2021 +0200 TV-389 minor adjustments of panel. ... and 13 more commits
2021-09-03 10:36:34 +02:00
parent d9938cc770
commit 773d8f33ab
36 changed files with 2701 additions and 201 deletions
--- a/apps/mina-sidor-fa/src/app/pages/administration/components/employee-delete/employee-delete.component.spec.ts
+++ b/apps/mina-sidor-fa/src/app/pages/administration/components/employee-delete/employee-delete.component.spec.ts
@@ -1,3 +1,4 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
@@ -11,7 +12,7 @@ describe('EmployeeDeleteComponent', () => {
    await TestBed.configureTestingModule({
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      declarations: [EmployeeDeleteComponent],
-      imports: [RouterTestingModule],
+      imports: [RouterTestingModule, HttpClientTestingModule],
    }).compileComponents();

    fixture = TestBed.createComponent(EmployeeDeleteComponent);
--- 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
@@ -16,54 +16,50 @@
      [afInvalid]="emailFormControl.invalid && emailFormControl.touched"
    ></digi-ng-form-input>

-    <fieldset *ngIf="rolesFormGroup && availableRoles" [formGroup]="rolesFormGroup">
+    <fieldset>
      <legend>Tjänster</legend>
      <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"
+        [afSelectItems]="selectableTjansterFormItems"
        [afDisableValidStyle]="true"
-        [afDisableValidation]="disableValidation"
-        [afValidMessage]="validMessage"
-        [afDisabled]="disabled"
-        [afInvalidMessage]="invalidMessage"
-        [afInvalid]="invalid"
+        [afInvalid]="tjansterFormControl.invalid && tjansterFormControl.touched"
        (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>
+      <digi-form-validation-message
+        *ngIf="tjansterFormControl.invalid && tjansterFormControl.touched"
+        af-variation="error"
+      >
+        Du måste välja minst en tjänst
+      </digi-form-validation-message>
+      <!-- Vi får se till att bygga en kontrol för att kunna välja flera tjänster här istället, en digi-ng-select får vara en temporär lösning.. -->
    </fieldset>

-    <fieldset *ngIf="rolesFormGroup && availableRoles" [formGroup]="rolesFormGroup">
+    <fieldset>
      <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 *ngIf="!availableUtforandeVerksamheter || availableUtforandeVerksamheter.length === 0">
+        <strong>Du måste välja en eller flera tjänster för att kunna välja utförande verksamheter.</strong>
+      </p>
      <div class="edit-employee-form__choose_all-utforande-verksamh">
-        <digi-form-checkbox
-          af-variation="primary"
+        <digi-ng-form-checkbox
+          [formControlName]="toggleAllUtforandeVerksamhetFormControlName"
          [afLabel]="'Välj alla utförade verksamheter och alla utförande adresser'"
-          [afValue]=""
-          (afOnChange)="selectAllUtforandeVerksamheter($event.detail.target.checked)"
-        ></digi-form-checkbox>
+          (afOnChange)="toggleAllUtforandeVerksamheter($event)"
+        >
+        </digi-ng-form-checkbox>
      </div>
-      <div
-        style="display: flex; border: 1px solid; background-color: #eee; padding: 5px; justify-content: space-between"
+      <msfa-tree-nodes-selector
+        [headingText]="'Välj utförande verksamheter och adresser'"
+        [formControlName]="utforandeVerksamhetFormControlName"
+        [isInvalid]="utforandeVerksamhetFormControl?.invalid"
+        [showValidation]="utforandeVerksamhetFormControl?.touched"
+        [validationMessages]="utforandeVerksamhetFormControl.errors?.required ? ['Välj minst en utförande verksamhet'] : []"
+        (selectedTreeNodesChanged)="updateToggleAllUtforandeVerksamheter()"
      >
-        Plats för digi-select-form-item för utförande verksamheter
-        <digi-icon-arrow-down></digi-icon-arrow-down>
-      </div>
+      </msfa-tree-nodes-selector>
    </fieldset>

    <fieldset *ngIf="rolesFormGroup && availableRoles" [formGroup]="rolesFormGroup">
--- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.spec.ts
+++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.spec.ts
@@ -4,9 +4,11 @@ import { DigiNgFormInputModule } from '@af/digi-ng/_form/form-input';
 import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group';
 import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
 import { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
+import { TreeNodesSelectorModule } from '@msfa-shared/components/tree-nodes-selector/tree-nodes-selector.module';

 import { EditEmployeeFormComponent } from './edit-employee-form.component';

@@ -25,6 +27,8 @@ describe('EditEmployeeFormComponent', () => {
        DigiNgFormSelectModule,
        DigiNgPopoverModule,
        DigiNgFormCheckboxModule,
+        HttpClientTestingModule,
+        TreeNodesSelectorModule,
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    }).compileComponents();
--- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.ts
+++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.ts
@@ -1,5 +1,4 @@
 import { ButtonSize, ButtonType, ButtonVariation } from '@af/digi-ng/_button/button';
-import { FormSelectItem } from '@af/digi-ng/_form/form-select';
 import {
  Component,
  OnInit,
@@ -12,14 +11,24 @@ import {
 } from '@angular/core';
 import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
 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';
+import { FormSelectItem } from '@af/digi-ng/_form/form-select';
+import { TreeNodeValidator } from '@msfa-utils/validators/tree-node.validator';
+import {
+  UtforandeVerksamhet,
+  UtforandeVerksamheterService,
+} from '@msfa-services/utforande-verksamheter/utforande-verksamheter.service';
+import {
+  TreeNode,
+  TreeNodesSelectorService,
+} from '@msfa-shared/components/tree-nodes-selector/services/tree-nodes-selector.service';
+import { EmployeeFormService } from '../services/employee-form.service';

 export interface EditEmployeeFormData {
  email: string;
-  tjanster: FormTagData[],
-  roles: Array<Role>;
+  tjanster: Tjanst[];
+  roles: Role[];
+  utforandeVerksamheter: UtforandeVerksamhet[];
 }

@Component({
@@ -29,14 +38,14 @@ export interface EditEmployeeFormData {
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class EditEmployeeFormComponent implements OnInit, OnChanges {
-  @Input() currentEmail: string | 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;
+  @Input() currentEmail: string;
+  @Input() availableRoles: Role[];
+  @Input() currentEmployeeRoles: string[];
+  @Input() availableTjanster: Tjanst[];
+  @Input() currentEmployeeTjanster: Tjanst[];
+  @Input() availableUtforandeVerksamheter: UtforandeVerksamhet[];

+  @Output() tjansterSelected = new EventEmitter<Tjanst[]>();
  @Output() formSubmitted = new EventEmitter<EditEmployeeFormData>();

  readonly ButtonVariation = ButtonVariation;
@@ -45,28 +54,55 @@ export class EditEmployeeFormComponent implements OnInit, OnChanges {

  readonly emailFormControlName = 'email';
  readonly tjansterFormControlName = 'tjanster';
+  readonly utforandeVerksamhetFormControlName = 'utforandeVerksamheter';
+  readonly toggleAllUtforandeVerksamhetFormControlName = 'toggleAllUtforandeVerksamhet';

  editEmployeeFormGroup: FormGroup | null = null;
  rolesFormGroup: FormGroup | null = null;

  displayRolesDialog = false;

-  constructor() {}
+  selectableTjansterFormItems: Array<FormSelectItem> | null = null;
+
+  constructor(
+    private employeeFormService: EmployeeFormService,
+    private utforandeVerksamheterService: UtforandeVerksamheterService,
+    private treeNodesSelectorService: TreeNodesSelectorService
+  ) {}

  ngOnInit(): void {
    this.initializeEditEmployeeFormGroup();
-
-    if(this.currentEmployeeTjanster) {
-      this.selectedTjanster = this.currentEmployeeTjanster
-        .map(tjanst => ({tjanstekod: tjanst.code, name: tjanst.name} as FormTagData));
-    }
+    this.updateSelectableTjansterFormItems();
  }

  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.availableRoles || changes.availableTjanster) {
+    if (changes.availableRoles) {
      this.initializeEditEmployeeFormGroup();
    }

+    if (changes.availableTjanster) {
+      this.updateSelectableTjansterFormItems();
+    }
+
+    if (changes.availableUtforandeVerksamheter) {
+      this.editEmployeeFormGroup.patchValue(
+        Object.fromEntries([
+          [
+            this.utforandeVerksamhetFormControlName,
+            this.utforandeVerksamheterService.getTreeNodeDataFromUtforandeVerksamheter(
+              this.availableUtforandeVerksamheter
+            ),
+          ],
+        ])
+      );
+
+      this.editEmployeeFormGroup.patchValue(
+        Object.fromEntries([[this.toggleAllUtforandeVerksamhetFormControlName, false]])
+      );
+
+      this.updateUtforandeVerksamhetStatus();
+    }
+
    if (changes.currentEmployeeRoles) {
      this.updateRolesFormGroup();
    }
@@ -75,19 +111,88 @@ export class EditEmployeeFormComponent implements OnInit, OnChanges {
      this.editEmployeeFormGroup.patchValue(Object.fromEntries([[this.emailFormControlName, this.currentEmail]]));
    }

-    if(changes.currentEmployeeTjanster) {
+    if (changes.currentEmployeeTjanster) {
      this.editEmployeeFormGroup.patchValue(Object.fromEntries([[this.tjansterFormControlName, '']]));
    }
  }

-  get emailFormControl(): AbstractControl | null {
+  get emailFormControl(): AbstractControl | undefined {
    return this.editEmployeeFormGroup?.get(this.emailFormControlName);
  }

-  get tjansterFormControl(): AbstractControl | null {
+  get tjansterFormControl(): AbstractControl | undefined {
    return this.editEmployeeFormGroup?.get(this.tjansterFormControlName);
  }

+  get utforandeVerksamhetFormControl(): AbstractControl | undefined {
+    return this.editEmployeeFormGroup?.get(this.utforandeVerksamhetFormControlName);
+  }
+
+  get toggleAllUtforandeVerksamhetFormControl(): AbstractControl | undefined {
+    return this.editEmployeeFormGroup?.get(this.toggleAllUtforandeVerksamhetFormControlName);
+  }
+
+  private updateUtforandeVerksamhetStatus(): void {
+    if (this.availableUtforandeVerksamheter && this.availableUtforandeVerksamheter.length > 0) {
+      this.utforandeVerksamhetFormControl.enable();
+      this.toggleAllUtforandeVerksamhetFormControl.enable();
+      return;
+    }
+
+    this.utforandeVerksamhetFormControl.disable();
+    this.toggleAllUtforandeVerksamhetFormControl.disable();
+  }
+
+  private updateSelectableTjansterFormItems(): void {
+    this.selectableTjansterFormItems = this.availableTjanster?.map(tjanst => {
+      return { name: tjanst.name, value: `${tjanst.tjanstId}` };
+    });
+  }
+
+  private initializeEditEmployeeFormGroup(): void {
+    this.rolesFormGroup = this.employeeFormService.getRolesFormGroup(this.availableRoles, this.currentEmployeeRoles);
+
+    this.editEmployeeFormGroup = new FormGroup({
+      // eslint-disable-next-line
+      email: new FormControl(this.currentEmail, [Validators.required, Validators.email]),
+      // eslint-disable-next-line
+      tjanster: new FormControl('', [Validators.required]),
+      roles: this.rolesFormGroup,
+      utforandeVerksamheter: new FormControl(
+        this.utforandeVerksamheterService.getTreeNodeDataFromUtforandeVerksamheter(this.availableUtforandeVerksamheter),
+        [
+          // eslint-disable-next-line
+          TreeNodeValidator.IsValidTreeNode(
+            this.utforandeVerksamheterService.hasSelectedUtforandeVerksamhet,
+            'required'
+          ),
+        ]
+      ),
+      toggleAllUtforandeVerksamhet: new FormControl(false, []),
+    });
+
+    this.updateUtforandeVerksamhetStatus();
+  }
+
+  private updateRolesFormGroup(): void {
+    if (!this.rolesFormGroup || !this.availableRoles) {
+      return;
+    }
+
+    this.rolesFormGroup.patchValue(
+      Object.fromEntries(
+        this.availableRoles.map(role => [
+          this.employeeFormService.getFormControlName(role),
+          this.employeeFormService.isSelectedRole(role, this.currentEmployeeRoles),
+        ])
+      )
+    );
+  }
+
+  getFormControlName(role: Role): string {
+    return this.employeeFormService.getFormControlName(role);
+  }
+
  onFormSubmitted(): void {
    if (!this.editEmployeeFormGroup) {
      return;
@@ -98,14 +203,22 @@ export class EditEmployeeFormComponent implements OnInit, OnChanges {
    }

    this.formSubmitted.emit({
-      email: this.emailFormControl?.value,
-      tjanster: this.selectedTjanster,
-      roles: this.getRolesFromFormGroup(this.rolesFormGroup, this.availableRoles),
+      email: this.emailFormControl?.value as string,
+      tjanster: this.employeeFormService.getSelectedTjanster(
+        this.availableTjanster,
+        parseInt(this.tjansterFormControl?.value, 10)
+      ),
+      roles: this.employeeFormService.getRolesFromFormGroup(this.rolesFormGroup, this.availableRoles),
+      utforandeVerksamheter: this.utforandeVerksamheterService.getSelectedUtforandeVerksamheterFromTreeNode(
+        this.utforandeVerksamhetFormControl?.value
+      ),
    });
  }

-  getFormControlName(role: Role): string {
-    return RoleEnum[role?.type];
+  toggleTjanst(): void {
+    this.tjansterSelected.emit(
+      this.employeeFormService.getSelectedTjanster(this.availableTjanster, parseInt(this.tjansterFormControl.value, 10))
+    );
  }

  openRolesDialog(): void {
@@ -116,99 +229,23 @@ export class EditEmployeeFormComponent implements OnInit, OnChanges {
    this.displayRolesDialog = false;
  }

-  private initializeEditEmployeeFormGroup(): void {
-    this.rolesFormGroup = this.getRolesFormGroup(
-      this.availableRoles,
-      this.currentEmployeeRoles
+  toggleAllUtforandeVerksamheter(selectAll: boolean): void {
+    let treeNode: TreeNode = this.utforandeVerksamhetFormControl.value as TreeNode;
+
+    treeNode = selectAll
+      ? this.treeNodesSelectorService.getTreeNodeWithAllNodesSelected(treeNode)
+      : this.treeNodesSelectorService.getTreeNodeWithNoNodesSelected(treeNode);
+
+    this.editEmployeeFormGroup.patchValue(Object.fromEntries([[this.utforandeVerksamhetFormControlName, treeNode]]));
+  }
+
+  updateToggleAllUtforandeVerksamheter(): void {
+    const hasSelectedAllLeafNodes = this.treeNodesSelectorService.hasSelectedAllLeafNodes(
+      this.utforandeVerksamhetFormControl.value
    );

-    this.editEmployeeFormGroup = new FormGroup({
-      email: new FormControl(this.currentEmail, [Validators.required, Validators.email]),
-      tjanster: new FormControl('', []),
-      roles: this.rolesFormGroup,
-    });
-  }
-
-  private updateRolesFormGroup(): void {
-    if (!this.rolesFormGroup || !this.availableRoles) {
-      return;
-    }
-
-    this.rolesFormGroup.patchValue(
-      Object.fromEntries(
-        this.availableRoles.map(role => [
-          this.getFormControlName(role),
-          this.isSelectedRole(role, this.currentEmployeeRoles),
-        ])
-      )
+    this.editEmployeeFormGroup.patchValue(
+      Object.fromEntries([[this.toggleAllUtforandeVerksamhetFormControlName, hasSelectedAllLeafNodes]])
    );
  }
-
-  private getRolesFromFormGroup(
-    formGroup: FormGroup | null,
-    roles: Array<Role> | null
-  ): Array<Role> {
-    if (!formGroup || !roles) {
-      return;
-    }
-
-    return roles.filter(
-      role => formGroup.get(this.getFormControlName(role))?.value === true
-    );
-  }
-
-  private getRolesFormGroup(
-    roles: Array<Role> | null,
-    selectedRoles: Array<string> | null
-  ): FormGroup {
-    if (!roles) {
-      return new FormGroup({});
-    }
-
-    return new FormGroup(
-      Object.fromEntries(
-        roles.map(role => [
-          this.getFormControlName(role),
-          new FormControl(this.isSelectedRole(role, selectedRoles), []),
-        ])
-      )
-    );
-  }
-
-  private isSelectedRole(
-    role: Role,
-    selectedRoles: Array<string> | null
-  ): boolean {
-    if (!selectedRoles || !role) {
-      return false;
-    }
-
-    return selectedRoles.some(selectedRole => selectedRole === role.type);
-  }
-
-  // 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);
-  }
 }
--- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.component.html
@@ -41,14 +41,18 @@
      </ng-container>
    </div>
    <!-- Component för att hantera formuläret -->
-    <msfa-edit-employee-form
-      [currentEmail]="employee?.email"
-      [availableRoles]="selectableRoles"
-      [currentEmployeeRoles]="employee?.roles"
-      [availableTjanster]="availableTjanster"
-      [currentEmployeeTjanster]="employee.tjanster"
-      [selectedTjanster]="selectedServices$ | async"
-      (formSubmitted)="updateEmployee($event)"
-    ></msfa-edit-employee-form>
+    <ng-container>
+      <msfa-edit-employee-form
+        [currentEmail]="employee?.email"
+        [availableRoles]="selectableRoles"
+        [currentEmployeeRoles]="currentEmployeeRoles$ | async"
+        [availableTjanster]="tjanster$ | async"
+        [currentEmployeeTjanster]="employee.tjanster"
+        [selectedTjanster]="selectedServices$ | async"
+        [availableUtforandeVerksamheter]="availableUtforandeVerksamheter$ | async"
+        (tjansterSelected)="setupAvailableUtforandeVerksamheter($event)"
+        (formSubmitted)="updateEmployee($event)"
+      ></msfa-edit-employee-form>
+    </ng-container>
  </section>
 </msfa-layout>
--- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.component.ts
+++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.component.ts
@@ -1,13 +1,16 @@
-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 { mapRoleResponseToRoleObject, Role } from '@msfa-models/role.model';
 import { Tjanst } from '@msfa-models/tjanst.model';
 import { EmployeeService } from '@msfa-services/api/employee.service';
 import { TjanstService } from '@msfa-services/api/tjanst.service';
+import {
+  UtforandeVerksamhet,
+  UtforandeVerksamheterService,
+} from '@msfa-services/utforande-verksamheter/utforande-verksamheter.service';
 import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 import { EditEmployeeFormData } from './edit-employee-form/edit-employee-form.component';

@Component({
@@ -16,48 +19,42 @@ import { EditEmployeeFormData } from './edit-employee-form/edit-employee-form.co
  styleUrls: ['./employee-form.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class EmployeeFormComponent extends UnsubscribeDirective implements OnInit {
-  subscriptionsList = [];
+export class EmployeeFormComponent implements OnInit {
  employee$ = this.employeeService.employee$;
-  employee: Employee;
-
  tjanster$: Observable<Tjanst[]> = this.tjanstService.tjanster$;
-  availableTjanster: FormSelectItem[] | null = null;
+  currentEmployeeRoles$: Observable<Role[] | undefined | null> = null;
+  availableUtforandeVerksamheter$: Observable<Array<UtforandeVerksamhet>> | null = null;

  selectableRoles: Role[] = this.employeeService.allRoles;
-  currentEmployeeRoles: Role[] | undefined | null = null;

  constructor(
    private employeeService: EmployeeService,
    private tjanstService: TjanstService,
+    private utforandeVerksamheterService: UtforandeVerksamheterService,
    private activatedRoute: ActivatedRoute
-  ) {
-    super();
-    super.unsubscribeOnDestroy(...this.subscriptionsList);
-  }
+  ) {}

  ngOnInit(): void {
    this.employeeService.setCurrentEmployeeId(this.activatedRoute.snapshot.params['employeeId']);
-    const employeeDataSub = this.employee$.subscribe(employee => {
-      this.employee = employee;
-      this.currentEmployeeRoles = employee?.roles.map(role => mapRoleResponseToRoleObject(role));
-    });

-    const tjanstRelatedDataSub = this.tjanster$.subscribe(tjanster => {
-      const tjanstOptions: FormSelectItem[] = [];
-      tjanster?.forEach(tjanst => {
-        tjanstOptions.push({ name: tjanst?.name, value: tjanst?.code });
-      });
-      this.availableTjanster = tjanstOptions;
-    });
-
-    this.subscriptionsList.push(employeeDataSub, tjanstRelatedDataSub);
+    this.currentEmployeeRoles$ = this.employee$.pipe(
+      map(employee => employee?.roles?.map(role => mapRoleResponseToRoleObject(role)))
+    );
  }

  updateEmployee(editEmployeeFormData: EditEmployeeFormData): void {
    console.log(editEmployeeFormData);
  }

+  setupAvailableUtforandeVerksamheter(selectedTjanster: Array<Tjanst>): void {
+    if (!selectedTjanster) {
+      return;
+    }
+
+    this.availableUtforandeVerksamheter$ = this.utforandeVerksamheterService.getUtforandeVerksamheter(
+      selectedTjanster.map(tjanst => tjanst.tjanstId)
+    );
+  }
  setEmployeeToDelete(employee: Employee): void {
    this.employeeService.setEmployeeToDelete(employee);
  }
--- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.module.ts
@@ -9,12 +9,13 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 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 { LocalDatePipeModule } from '@msfa-shared/pipes/local-date/local-date.module';
 import { EmployeeDeleteModule } from '../../components/employee-delete/employee-delete.module';
 import { EditEmployeeFormComponent } from './edit-employee-form/edit-employee-form.component';
+import { HideTextModule } from '@msfa-shared/components/hide-text/hide-text.module';
 import { EmployeeFormComponent } from './employee-form.component';
+import { TreeNodesSelectorModule } from '@msfa-shared/components/tree-nodes-selector/tree-nodes-selector.module';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -34,6 +35,7 @@ import { EmployeeFormComponent } from './employee-form.component';
    LayoutModule,
    EmployeeDeleteModule,
    HideTextModule,
+    TreeNodesSelectorModule,
  ],
 })
 export class EmployeeFormModule {}
--- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/services/employee-form.service.spec.ts
+++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/services/employee-form.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { EmployeeFormService } from './employee-form.service';
+
+describe('EmployeeFormService', () => {
+  let service: EmployeeFormService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(EmployeeFormService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
--- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/services/employee-form.service.ts
+++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/services/employee-form.service.ts
@@ -0,0 +1,57 @@
+import { Injectable } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { RoleEnum } from '@msfa-enums/role.enum';
+import { Role } from '@msfa-models/role.model';
+import { Tjanst } from '@msfa-models/tjanst.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class EmployeeFormService {
+  isSelectedRole(role: Role, selectedRoles: Array<string> | null): boolean {
+    if (!selectedRoles || !role) {
+      return false;
+    }
+
+    return selectedRoles.some(selectedRole => selectedRole === role.type);
+  }
+
+  getSelectedTjanster(tjanster: Array<Tjanst>, tjanstId: number): Array<Tjanst> {
+    let selectedTjanst: Tjanst | null = null;
+
+    if (!tjanster) {
+      return [];
+    }
+
+    selectedTjanst = tjanster.find(tjanst => tjanst.tjanstId === tjanstId);
+
+    return selectedTjanst ? [selectedTjanst] : [];
+  }
+
+  getRolesFromFormGroup(formGroup: FormGroup | null, roles: Array<Role> | null): Array<Role> {
+    if (!formGroup || !roles) {
+      return;
+    }
+
+    return roles.filter(role => formGroup.get(this.getFormControlName(role))?.value === true);
+  }
+
+  getRolesFormGroup(roles: Array<Role> | null, selectedRoles: Array<string> | null): FormGroup {
+    if (!roles) {
+      return new FormGroup({});
+    }
+
+    return new FormGroup(
+      Object.fromEntries(
+        roles.map(role => [
+          this.getFormControlName(role),
+          new FormControl(this.isSelectedRole(role, selectedRoles), []),
+        ])
+      )
+    );
+  }
+
+  getFormControlName(role: Role): string {
+    return RoleEnum[role?.type];
+  }
+}
--- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.component.spec.ts
+++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.component.spec.ts
@@ -1,4 +1,5 @@
 import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
@@ -18,7 +19,7 @@ describe('EmployeesListComponent', () => {
    await TestBed.configureTestingModule({
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      declarations: [EmployeesListComponent, LayoutComponent],
-      imports: [RouterTestingModule, DigiNgSkeletonBaseModule],
+      imports: [RouterTestingModule, DigiNgSkeletonBaseModule, HttpClientTestingModule],
    }).compileComponents();

    fixture = TestBed.createComponent(EmployeesListComponent);
--- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.mock.ts
+++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.mock.ts
@@ -1,4 +1,3 @@
-import { Service } from '@msfa-enums/service.enum';
 import { EmployeeCompact } from '@msfa-models/employee.model';

 export const employeesMock: EmployeeCompact[] = [
@@ -7,5 +6,6 @@ export const employeesMock: EmployeeCompact[] = [
    fullName: 'Jayson Karlsson',
    tjanster: ['KROM'],
    utforandeVerksamheter: [],
+    allaUtforandeVerksamheter: true,
  },
 ];