feat(employee): Now possible to edit employee and remove data, also changed validation-rules. (TV-631)

Squashed commit of the following: commit 082d573764be4306255d5b99f28095f96691ec43 Merge: 528b858 5846c2c Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se> Date: Wed Sep 22 07:32:17 2021 +0200 Merged develop and fixed conflict commit 528b858f17919836ce0aaa0e09e100855ad00762 Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se> Date: Wed Sep 22 07:25:08 2021 +0200 Updated validation commit 28d37a1eb95a8df2520b3e7967c91e7da9e508f6 Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se> Date: Tue Sep 21 08:20:36 2021 +0200 Updated validation functionality to support submit without tjänster or utförande verksamheter
2021-09-22 09:48:35 +02:00
parent 68c5c8d4a8
commit 1bbfd57910
6 changed files with 117 additions and 84 deletions
--- 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
@@ -15,10 +15,16 @@
      afLabel="E-post adress"
      afType="email"
      [formControlName]="emailFormControlName"
-      [afInvalidMessage]="emailFormControl?.errors?.required ? 'Du måste ange E-post' : 'E-post adressen är ogiltig'"
      [afDisableValidStyle]="true"
-      [afInvalid]="emailFormControl.invalid && emailFormControl.touched"
+      [afInvalid]="editEmployeeFormGroup.errors?.email && emailFormControl.touched"
    ></digi-ng-form-input>
+    <div aria-atomic="true" role="alert">
+      <digi-form-validation-message
+        *ngIf="editEmployeeFormGroup.errors?.email && emailFormControl.touched"
+        af-variation="error"
+        >{{editEmployeeFormGroup.errors.email}}</digi-form-validation-message
+      >
+    </div>

    <div class="edit-employee-form__contents">
      <div class="edit-employee-form__block">
@@ -35,16 +41,18 @@
          [afPlaceholder]="'Välj tjänst'"
          [afSelectItems]="selectableTjansterFormItems"
          [afDisableValidStyle]="true"
-          [afInvalid]="tjansterFormControl.invalid && tjansterFormControl.touched"
+          [afInvalid]="editEmployeeFormGroup.errors?.tjanster && tjansterFormControl.touched"
          [afId]="tjansterElementId"
          (afOnChange)="toggleTjanst()"
        ></digi-ng-form-select>
-        <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>
+        <div aria-atomic="true" role="alert">
+          <digi-form-validation-message
+            *ngIf="editEmployeeFormGroup.errors?.tjanster && tjansterFormControl.touched"
+            af-variation="error"
+          >
+            {{editEmployeeFormGroup.errors.tjanster}}
+          </digi-form-validation-message>
+        </div>
      </div>

      <div class="edit-employee-form__block">
@@ -59,6 +67,7 @@
            class="edit-employee-form__choose-all-utforande-verksamheter"
            [formControl]="selectAllUtforandeVerksamheterFormControl"
            [afLabel]="'Välj alla utförande verksamheter och alla utförande adresser'"
+            [afInvalid]="editEmployeeFormGroup.errors?.utforandeVerksamheter && (selectAllUtforandeVerksamheterFormControl.touched || utforandeVerksamheterFormControl.touched)"
          ></digi-ng-form-checkbox>

          <msfa-tree-nodes-selector
@@ -66,16 +75,16 @@
            [buttonElementId]="utforandeVerksamhetElementId"
            [headingText]="'Välj utförande verksamheter och adresser'"
            [formControlName]="utforandeVerksamheterFormControlName"
-            [isInvalid]="editEmployeeFormGroup.invalid && editEmployeeFormGroup.errors?.noUtforandeVerksamhetSelected"
-            [showValidation]="utforandeVerksamheterFormControl?.touched"
-            [validationMessages]="editEmployeeFormGroup.errors?.noUtforandeVerksamhetSelected ? [utforandeVerksamhetRequiredMessage] : []"
+            [isInvalid]="editEmployeeFormGroup.errors?.utforandeVerksamheter"
+            [showValidation]="editEmployeeFormGroup.errors?.utforandeVerksamheter && (utforandeVerksamheterFormControl?.touched || selectAllUtforandeVerksamheterFormControl.touched)"
+            [validationMessages]="[editEmployeeFormGroup.errors?.utforandeVerksamheter]"
            (selectedTreeNodesChanged)="updateToggleAllUtforandeVerksamheter()"
          ></msfa-tree-nodes-selector>
        </ng-container>
        <ng-template #loadingUtforandeVerksamheterTemplate>
          <digi-ng-loader-spinner
            *ngIf="isLoadingUtforandeVerksamheter"
-            [afLabel]="'Läser in utförande verksamheter för vald/a tjänster...'"
+            [afLabel]="'Läser in utförande verksamheter för valda tjänster...'"
          ></digi-ng-loader-spinner>
        </ng-template>
      </div>
--- 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
@@ -24,9 +24,7 @@ import { UtforandeVerksamheterService } from '@msfa-services/utforande-verksamhe
 import { ValidationErrorLink } from '@msfa-shared/components/error-list/error-list.component';
 import { TreeNodesSelectorService } from '@msfa-shared/components/tree-nodes-selector/services/tree-nodes-selector.service';
 import { uuid } from '@msfa-utils/uuid';
-import { EmailValidator } from '@msfa-utils/validators/email.validator';
 import { EmployeeValidator } from '@msfa-utils/validators/employee.validator';
-import { RequiredValidator } from '@msfa-utils/validators/required.validator';
 import { EmployeeFormService } from '../services/employee-form.service';

@Component({
@@ -162,27 +160,21 @@ export class EditEmployeeFormComponent implements OnInit, OnChanges {

    this.editEmployeeFormGroup = new FormGroup(
      {
-        email: new FormControl(this.employee.email, [
-          RequiredValidator('E-postadress'),
-          EmailValidator('e-postadress'),
-        ]),
-        tjanster: new FormControl(tjanstId, [RequiredValidator('Tjänst')]),
+        email: new FormControl(this.employee.email),
+        tjanster: new FormControl(tjanstId),
        roles: this.employeeFormService.getRolesFormGroup(this.availableRoles, this.employee.roles),
        utforandeVerksamheter: new FormControl(
          this.utforandeVerksamheterService.getTreeNodeDataFromUtforandeVerksamheter(
            this.availableUtforandeVerksamheter,
            this.employee?.utforandeVerksamheter
-          ),
-          []
+          )
        ),
        allaUtforandeVerksamheter: new FormControl(this.employee.allaUtforandeVerksamheter),
      },
      {
-        validators: EmployeeValidator.HasSelectedAtLeastOneUtforandeVerksamhet(
-          this.utforandeVerksamheterFormControlName,
-          this.selectAllUtforandeVerksamheterFormControlName,
-          this.utforandeVerksamheterService.hasSelectedUtforandeVerksamhet
-        ),
+        validators: [
+          EmployeeValidator.isEmployeeValid(this.utforandeVerksamheterService.hasSelectedUtforandeVerksamhet),
+        ],
      }
    );

@@ -198,11 +190,26 @@ export class EditEmployeeFormComponent implements OnInit, OnChanges {
  }

  onFormSubmitted(saveWithoutRoles = false): void {
-    this._submitted = true;
    if (!this.editEmployeeFormGroup || this.isLoadingUtforandeVerksamheter) {
      return;
    }

+    const roles = this.employeeFormService.getRolesFromFormGroup(this.rolesFormGroup, this.availableRoles);
+
+    if (!roles.length && !saveWithoutRoles) {
+      this.displayEditWithoutRolesDialog = true;
+      return;
+    }
+
+    this._submitted = true;
+
+    if (!roles.length && saveWithoutRoles) {
+      this.utforandeVerksamheterFormControl.clearValidators();
+      this.utforandeVerksamheterFormControl.updateValueAndValidity();
+      this.tjansterFormControl.clearValidators();
+      this.tjansterFormControl.updateValueAndValidity();
+    }
+
    this.editEmployeeFormGroup.markAllAsTouched();

    if (this.editEmployeeFormGroup.invalid) {
@@ -217,30 +224,21 @@ export class EditEmployeeFormComponent implements OnInit, OnChanges {
      return;
    }

-    const roles = this.employeeFormService.getRolesFromFormGroup(this.rolesFormGroup, this.availableRoles);
-
-    if (!roles.length && !saveWithoutRoles) {
-      this.displayEditWithoutRolesDialog = true;
-      return;
-    }
-
    this.formSubmitted.emit({
      email: this.emailFormControl?.value as string,
-      tjanstIds: this.employeeFormService
-        .getSelectedTjanster(this.availableTjanster, +this.tjansterFormControl?.value)
-        .map(tjanst => tjanst.tjanstId),
-      roles: [
-        ...new Set([
-          ...this.employeeFormService.getRolesFromFormGroup(this.rolesFormGroup, this.availableRoles),
-          RoleEnum.MSFA_Standard,
-        ]),
-      ],
-      adressIds: this.selectAllUtforandeVerksamheterFormControl.value
+      tjanstIds: !roles.length
        ? []
-        : this.utforandeVerksamheterService.getSelectedAdressIdsFromTreeNode(
-            this.utforandeVerksamheterFormControl?.value
-          ),
-      allaUtforandeVerksamheter: !!this.selectAllUtforandeVerksamheterFormControl.value,
+        : this.employeeFormService
+            .getSelectedTjanster(this.availableTjanster, +this.tjansterFormControl?.value)
+            .map(tjanst => tjanst.tjanstId),
+      roles: [...new Set([...roles, RoleEnum.MSFA_Standard])],
+      adressIds:
+        !roles.length || this.selectAllUtforandeVerksamheterFormControl.value
+          ? []
+          : this.utforandeVerksamheterService.getSelectedAdressIdsFromTreeNode(
+              this.utforandeVerksamheterFormControl?.value
+            ),
+      allaUtforandeVerksamheter: !roles.length ? false : !!this.selectAllUtforandeVerksamheterFormControl.value,
    });
  }

@@ -250,25 +248,26 @@ export class EditEmployeeFormComponent implements OnInit, OnChanges {
    if (!this.editEmployeeFormGroup) {
      return;
    }
+    const { email, tjanster, utforandeVerksamheter } = this.editEmployeeFormGroup.errors || {};

-    if (this.emailFormControl?.errors) {
+    if (email) {
      validationErrorLinks = validationErrorLinks.concat({
        elementId: this.emailElementId,
-        text: this.emailFormControl?.errors?.message as string,
+        text: email as string,
      });
    }

-    if (this.tjansterFormControl?.errors) {
+    if (tjanster) {
      validationErrorLinks = validationErrorLinks.concat({
        elementId: this.tjansterElementId,
-        text: this.tjansterFormControl?.errors?.message as string,
+        text: tjanster as string,
      });
    }

-    if (this.editEmployeeFormGroup.errors?.noUtforandeVerksamhetSelected) {
+    if (utforandeVerksamheter) {
      validationErrorLinks = validationErrorLinks.concat({
        elementId: this.utforandeVerksamhetElementId,
-        text: this.utforandeVerksamhetRequiredMessage,
+        text: utforandeVerksamheter as string,
      });
    }

--- a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.html
+++ b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.html
@@ -34,9 +34,12 @@
      </msfa-tree-nodes-selector-panel>
    </div>
  </div>
-  <ul class="tree-nodes-selector__validation-messages" *ngIf="showValidation && validationMessages">
-    <li *ngFor="let validationMessage of validationMessages">
-      <digi-form-validation-message af-variation="error"> {{validationMessage}} </digi-form-validation-message>
-    </li>
-  </ul>
+
+  <div aria-atomic="true" role="alert">
+    <ul class="tree-nodes-selector__validation-messages" *ngIf="showValidation && validationMessages">
+      <li *ngFor="let validationMessage of validationMessages">
+        <digi-form-validation-message af-variation="error"> {{validationMessage}} </digi-form-validation-message>
+      </li>
+    </ul>
+  </div>
 </div>
--- a/apps/mina-sidor-fa/src/app/shared/constants/regex.ts
+++ b/apps/mina-sidor-fa/src/app/shared/constants/regex.ts
@@ -0,0 +1 @@
+export const EMAIL_REGEX = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/;
--- a/apps/mina-sidor-fa/src/app/shared/utils/validators/email.validator.ts
+++ b/apps/mina-sidor-fa/src/app/shared/utils/validators/email.validator.ts
@@ -1,14 +1,17 @@
 import { AbstractControl, ValidatorFn } from '@angular/forms';
+import { EMAIL_REGEX } from '@msfa-constants/regex';
 import { ValidationError } from '@msfa-models/validation-error.model';

-const EMAIL_REGEX = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/;
+export function emailIsValid(email: string): boolean {
+  return EMAIL_REGEX.test(email.toLowerCase());
+}

 export function EmailValidator(label = 'Fältet'): ValidatorFn {
  return (control: AbstractControl): ValidationError => {
    if (control && control.value) {
      const value: string = control.value as string;

-      if (!EMAIL_REGEX.test(value.toLowerCase())) {
+      if (!emailIsValid(value)) {
        return { type: 'invalid', message: `Ogiltig ${label}` };
      }
    }
--- a/apps/mina-sidor-fa/src/app/shared/utils/validators/employee.validator.ts
+++ b/apps/mina-sidor-fa/src/app/shared/utils/validators/employee.validator.ts
@@ -1,32 +1,50 @@
-import { FormGroup, ValidatorFn } from '@angular/forms';
+import { AbstractControl, ValidatorFn } from '@angular/forms';
+import { RoleEnum } from '@msfa-enums/role.enum';
 import { TreeNode } from '@msfa-shared/components/tree-nodes-selector/services/tree-nodes-selector.service';
+import { emailIsValid } from './email.validator';

 export class EmployeeValidator {
-  static HasSelectedAtLeastOneRole(roleFormControlNames: Array<string>): ValidatorFn {
-    return (fg: FormGroup): { [key: string]: unknown } => {
-      if (!roleFormControlNames || roleFormControlNames.length === 0) {
-        return { noRoleSelected: true };
+  static isEmployeeValid(hasSelectedUtforandeVerksamhetFn: (treeNode: TreeNode) => boolean): ValidatorFn {
+    return (c: AbstractControl): { [key: string]: string } => {
+      let errors: { [key: string]: string } = null;
+      const email = c.get('email')?.value as string;
+      const roles = c.get('roles')?.value as { [key: string]: boolean };
+      const tjanster = c.get('tjanster')?.value as string;
+      const allaUtforandeVerksamheter = c.get('allaUtforandeVerksamheter')?.value as boolean;
+      const utforandeVerksamheter = c.get('utforandeVerksamheter').value as TreeNode;
+      const rolesWithObligatoryFormElements = Object.entries(roles)
+        .filter(([key, value]) => !!(value && key !== RoleEnum.MSFA_AuthAdmin))
+        .map(([key]) => key);
+
+      if (!email) {
+        errors = {
+          ...errors,
+          email: 'E-postadress är obligatoriskt',
+        };
+      }
+      if (email && !emailIsValid(email)) {
+        errors = {
+          ...errors,
+          email: 'Ogiltig e-postadress',
+        };
      }

-      return roleFormControlNames.some(roleFormControlName => fg?.controls[roleFormControlName]?.value)
-        ? null
-        : { noRoleSelected: true };
-    };
-  }
-
-  static HasSelectedAtLeastOneUtforandeVerksamhet(
-    utforandeVerksamheterFormControlName: string,
-    selectAllUtforandeVerksamheterFormControlName: string,
-    validationFn: (treeNode: TreeNode | null | undefined) => boolean
-  ): ValidatorFn {
-    return (fg: FormGroup): { [key: string]: unknown } => {
-      if (fg?.get(selectAllUtforandeVerksamheterFormControlName)?.value) {
-        return null;
+      if (rolesWithObligatoryFormElements.length) {
+        if (!tjanster) {
+          errors = {
+            ...errors,
+            tjanster: 'Minst en tjänst behöver väljas',
+          };
+        }
+        if (!allaUtforandeVerksamheter && !hasSelectedUtforandeVerksamhetFn(utforandeVerksamheter)) {
+          errors = {
+            ...errors,
+            utforandeVerksamheter: 'Minst en utförande verksamhet och adress behöver väljas',
+          };
+        }
      }

-      return validationFn(fg?.get(utforandeVerksamheterFormControlName)?.value)
-        ? null
-        : { noUtforandeVerksamhetSelected: true };
+      return errors;
    };
  }
 }
				`@@ -0,0 +1 @@`
				`export const EMAIL_REGEX = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/;`