chore(policies): 832 implemented feedback

frontend/src/app/modules/page/admin/presentation/policy-management/policy-editor/policy-editor.component.html

@@ -25,6 +25,7 @@
           matTooltipPosition="above"
           [class.mdc-tooltip--multiline]="true"
           [matTooltipShowDelay]="500"
+          (mouseenter)="validateAllFields()"
           *ngIf="viewMode === ViewMode.EDIT || viewMode === ViewMode.CREATE"
         >
           <app-button
@@ -174,14 +175,14 @@ <h4 class="pb-2">{{ 'pageAdmin.policyManagement.constraints' | i18n }} {{ '(' +
               </div>
               <div class="constraints--header--label flex-1">
                 {{ "pageAdmin.policyManagement.operator" | i18n }}
-              </div>
-              <div class="constraints--header--label flex-1">
-                {{ "pageAdmin.policyManagement.rightOperand" | i18n }}
                 <div class="constraints--header--sub-label">
                   {{ "pageAdmin.policyManagement.rightOperandHint" | i18n }}
 
                 </div>
               </div>
+              <div class="constraints--header--label flex-1">
+                {{ "pageAdmin.policyManagement.rightOperand" | i18n }}
+              </div>
             </div>
             <div *ngFor="let constraint of constraints.controls; let i=index;" [formGroupName]="i"
                  class="flex w-full gap-2">

frontend/src/app/modules/page/admin/presentation/policy-management/policy-editor/policy-editor.component.spec.ts

@@ -1,5 +1,5 @@
 import { APP_INITIALIZER } from '@angular/core';
-import { FormBuilder } from '@angular/forms';
+import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, convertToParamMap, Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { PoliciesFacade } from '@page/admin/presentation/policy-management/policies/policies.facade';
@@ -253,4 +253,76 @@ describe('PolicyEditorComponent', () => {
 
   });
 
+  it('should mark all form controls and form array elements as touched', async () => {
+    const { fixture } = await renderPolicyEditorComponent();
+    const { componentInstance } = fixture;
+    componentInstance.policyForm = componentInstance.fb.group({
+      policyName: [ '', Validators.required ],
+      constraints: componentInstance.fb.array([
+        componentInstance.fb.group({
+          leftOperand: [ '', Validators.required ],
+          operator: [ '', Validators.required ],
+          rightOperand: [ '', Validators.required ],
+        }),
+      ]),
+    });
+
+    spyOn(componentInstance.policyForm.get('policyName'), 'markAsTouched');
+    spyOn(componentInstance.constraints.at(0).get('leftOperand'), 'markAsTouched');
+
+    componentInstance.validateAllFields();
+
+    expect(componentInstance.policyForm.get('policyName').markAsTouched).toHaveBeenCalled();
+    expect(componentInstance.constraints.at(0).get('leftOperand').markAsTouched).toHaveBeenCalled();
+  });
+
+  it('should mark all elements in a FormArray as touched', async () => {
+    const { fixture } = await renderPolicyEditorComponent();
+    const { componentInstance } = fixture;
+    componentInstance.policyForm = componentInstance.fb.group({
+      constraints: componentInstance.fb.array([
+        componentInstance.fb.group({
+          leftOperand: [ '', Validators.required ],
+          operator: [ '', Validators.required ],
+          rightOperand: [ '', Validators.required ],
+        }),
+        componentInstance.fb.control(''),
+      ]),
+    });
+
+    const formArray = componentInstance.policyForm.get('constraints') as FormArray;
+    spyOn(formArray.at(0).get('leftOperand'), 'markAsTouched');
+    spyOn(formArray.at(1), 'markAsTouched');
+
+    componentInstance.validateFormArray(formArray);
+
+    expect(formArray.at(0).get('leftOperand').markAsTouched).toHaveBeenCalled();
+    expect(formArray.at(1).markAsTouched).toHaveBeenCalled();
+  });
+
+  it('should mark all fields in a FormGroup within a FormArray as touched', async () => {
+    const { fixture } = await renderPolicyEditorComponent();
+    const { componentInstance } = fixture;
+    componentInstance.policyForm = componentInstance.fb.group({
+      constraints: componentInstance.fb.array([
+        componentInstance.fb.group({
+          leftOperand: [ '', Validators.required ],
+          operator: [ '', Validators.required ],
+          rightOperand: [ '', Validators.required ],
+        }),
+      ]),
+    });
+
+    const formGroup = componentInstance.constraints.at(0) as FormGroup;
+    spyOn(formGroup.get('leftOperand'), 'markAsTouched');
+    spyOn(formGroup.get('operator'), 'markAsTouched');
+    spyOn(formGroup.get('rightOperand'), 'markAsTouched');
+
+    componentInstance.validateAllFieldsInFormGroup(formGroup);
+
+    expect(formGroup.get('leftOperand').markAsTouched).toHaveBeenCalled();
+    expect(formGroup.get('operator').markAsTouched).toHaveBeenCalled();
+    expect(formGroup.get('rightOperand').markAsTouched).toHaveBeenCalled();
+  });
+
 });

frontend/src/app/modules/page/admin/presentation/policy-management/policy-editor/policy-editor.component.ts

@@ -61,7 +61,7 @@ export class PolicyEditorComponent {
 
 
     this.policyForm = this.fb.group({
-      policyName: new FormControl('', [ Validators.required, Validators.minLength(8), Validators.maxLength(40), this.noSpacesValidator() ]),
+      policyName: new FormControl('', [ Validators.required, Validators.maxLength(40), this.noSpacesValidator() ]),
       validUntil: new FormControl('', [ Validators.required, this.futureDateValidator ]),
       bpns: new FormControl('', [ Validators.required, this.viewMode === ViewMode.CREATE ? BaseInputHelper.getCustomPatternValidator(bpnRegex, 'bpn') : BaseInputHelper.getCustomPatternValidator(bpnListRegex, 'bpn') ]),
       accessType: new FormControl<string>(PolicyAction.ACCESS),
@@ -333,9 +333,38 @@ export class PolicyEditorComponent {
     };
   }
 
+  validateAllFields() {
+    Object.keys(this.policyForm.controls).forEach(field => {
+      const control = this.policyForm.get(field);
+      if (control instanceof FormArray) {
+        this.validateFormArray(control);
+      } else {
+        control.markAsTouched({ onlySelf: true });
+      }
+    });
+  }
+
+  validateFormArray(formArray: FormArray) {
+    formArray.controls.forEach(control => {
+      control.markAsTouched();
+      if (control instanceof FormGroup) {
+        this.validateAllFieldsInFormGroup(control);
+      }
+    });
+  }
+
+  validateAllFieldsInFormGroup(formGroup: FormGroup) {
+    Object.keys(formGroup.controls).forEach(field => {
+      const control = formGroup.get(field);
+      control.markAsTouched({ onlySelf: true });
+    });
+  }
+
 
   protected readonly ViewMode = ViewMode;
   protected readonly OperatorTypesAsSelectOptionsList = OperatorTypesAsSelectOptionsList;
   protected readonly ConstraintLogicTypeAsSelectOptionsList = ConstraintLogicTypeAsSelectOptionsList;
+
+
 }
 

frontend/src/assets/locales/de/common.json

@@ -219,7 +219,7 @@
     "maxLength": "Bitte geben Sie maximal {{maxLength}} Zeichen ein. Momentan: {{current}}",
     "pattern": "Bitte geben Sie die Daten in folgendem Format ein: {{- pattern}}.",
     "url": "Bitte geben Sie eine valide URL ein.",
-    "bpn" : "Bitte geben Sie eine valide BPN ein.",
+    "bpn" : "Bitte geben Sie eine valide BPN ein (Beispiel: BPNL00000001ABC2).",
     "maxDate": "Bitte wählen Sie ein Datum vor dem {{- maxDate}}.",
     "minDate": "Bitte wählen Sie ein Datum nach dem {{- minDate}}.",
     "currentDate": "Bitte wählen Sie ein Datum nach dem {{- currentDate}}.",

frontend/src/assets/locales/en/common.json

@@ -215,14 +215,14 @@
     "maxLength": "Please enter a text that is smaller than: {{maxLength}}. Current: {{current}}",
     "pattern": "Please enter data that matches this pattern: {{- pattern}}.",
     "url": "Please enter a valid URL.",
-    "bpn": "Please enter a valid BPN.",
+    "bpn" : "Please enter a valid BPN (example: BPNL00000001ABC2).",
     "maxDate": "Please select a date that is before {{- maxDate}}.",
     "minDate": "Please select a date that is after {{- minDate}}.",
     "currentDate": "Please select a date that is after {{- currentDate}}.",
     "generic": "Please enter valid data.",
     "invalidBpn" : "Must not be own BPN.",
     "pastDate" : "Please select a date in the future.",
-    "minimumOneConstraint" : "Please add atleast one valid constraint to the policy"
+    "minimumOneConstraint" : "Please add at least one valid constraint to the policy"
   },
   "unitTest": {
     "test01": "This is for unit tests purposes.",