Use new Error messages in frontend dialogs

frontend/src/app/keyresult-type/keyresult-type.component.html

@@ -45,11 +45,9 @@
                   {{ "UNIT." + unit.value | translate }}
                 </option>
               </select>
-              <div *ngIf="isTouchedOrDirty('unit')">
-                <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('unit')">
-                  <span>{{ errorMessages[errorKey.toUpperCase()] }}</span>
-                </mat-error>
-              </div>
+              <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'unit')">
+                <span>{{ getErrorMessage("MUST_SELECT", "Einheit", null, null) }}</span>
+              </mat-error>
             </div>
 
             <div class="input-style gap-2">
@@ -61,11 +59,9 @@
                 formControlName="baseline"
                 id="baseline"
               />
-              <span *ngIf="isTouchedOrDirty('baseline')">
-                <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('baseline')">
-                  <span>{{ errorMessages[errorKey.toUpperCase()] }}</span>
-                </mat-error>
-              </span>
+              <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'baseline')">
+                <span>{{ getErrorMessage("MUST_BE_NUMBER", "Baseline", null, null) }}</span>
+              </mat-error>
             </div>
 
             <div class="input-style gap-2">
@@ -77,11 +73,9 @@
                 formControlName="stretchGoal"
                 id="stretchGoal"
               />
-              <span *ngIf="isTouchedOrDirty('stretchGoal')">
-                <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('stretchGoal')">
-                  <span>{{ errorMessages[errorKey.toUpperCase()] }}</span>
-                </mat-error>
-              </span>
+              <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'stretchGoal')">
+                <span>{{ getErrorMessage("MUST_BE_NUMBER", "Stretch Goal", null, null) }}</span>
+              </mat-error>
             </div>
           </div>
         </div>
@@ -105,11 +99,9 @@
                 id="commitZone"
                 [attr.data-testId]="'commitZone'"
               ></textarea>
-              <span *ngIf="isTouchedOrDirty('commitZone')">
-                <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('commitZone')">
-                  <span>{{ errorMessages[errorKey.toUpperCase()] }}</span>
-                </mat-error>
-              </span>
+              <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'commitZone')">
+                <span>{{ getErrorMessage("SIZE_BETWEEN", "Commit Zone", 1, 400) }}</span>
+              </mat-error>
             </div>
 
             <div class="input-style gap-2">
@@ -121,11 +113,9 @@
                 formControlName="targetZone"
                 id="targetZone"
               ></textarea>
-              <span *ngIf="isTouchedOrDirty('targetZone')">
-                <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('targetZone')">
-                  <span>{{ errorMessages[errorKey.toUpperCase()] }}</span>
-                </mat-error>
-              </span>
+              <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'targetZone')">
+                <span>{{ getErrorMessage("SIZE_BETWEEN", "Target Zone", 1, 400) }}</span>
+              </mat-error>
             </div>
 
             <div class="input-style gap-2">
@@ -137,11 +127,9 @@
                 formControlName="stretchZone"
                 id="stretchZone"
               ></textarea>
-              <span *ngIf="isTouchedOrDirty('stretchZone')">
-                <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('stretchZone')">
-                  <span>{{ errorMessages[errorKey.toUpperCase()] }}</span>
-                </mat-error>
-              </span>
+              <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'stretchZone')">
+                <span>{{ getErrorMessage("SIZE_BETWEEN", "Stretch Zone", 1, 400) }}</span>
+              </mat-error>
             </div>
           </div>
         </div>

frontend/src/app/keyresult-type/keyresult-type.component.ts

@@ -3,9 +3,9 @@ import { KeyResult } from '../shared/types/model/KeyResult';
 import { FormGroup, Validators } from '@angular/forms';
 import { KeyResultMetric } from '../shared/types/model/KeyResultMetric';
 import { KeyResultOrdinal } from '../shared/types/model/KeyResultOrdinal';
-import errorMessages from '../../assets/errors/error-messages.json';
 import { Unit } from '../shared/types/enums/Unit';
-import { formInputCheck } from '../shared/common';
+import { formInputCheck, hasFormFieldErrors } from '../shared/common';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-keyresult-type',
@@ -18,9 +18,11 @@ export class KeyresultTypeComponent implements OnInit {
   @Output() formValidityEmitter = new EventEmitter<boolean>();
   isMetric: boolean = true;
   typeChangeAllowed: boolean = true;
-  protected readonly errorMessages: any = errorMessages;
   protected readonly Unit = Unit;
   protected readonly formInputCheck = formInputCheck;
+  protected readonly hasFormFieldErrors = hasFormFieldErrors;
+
+  constructor(private translate: TranslateService) {}
 
   ngOnInit(): void {
     if (this.keyresult) {
@@ -98,12 +100,7 @@ export class KeyresultTypeComponent implements OnInit {
     }
   }
 
-  isTouchedOrDirty(name: string) {
-    return this.keyResultForm.get(name)?.dirty || this.keyResultForm.get(name)?.touched;
-  }
-
-  getErrorKeysOfFormField(name: string) {
-    const errors = this.keyResultForm.get(name)?.errors;
-    return errors == null ? [] : Object.keys(errors);
+  getErrorMessage(error: string, field: string, firstNumber: number | null, secondNumber: number | null): string {
+    return field + this.translate.instant('DIALOG_ERRORS.' + error).format(firstNumber, secondNumber);
   }
 }

frontend/src/app/shared/common.ts

@@ -94,3 +94,11 @@ export function getQuarterLabel(quarter: any, index: number): string {
 export function isMobileDevice() {
   return window.navigator.userAgent.toLowerCase().includes('mobile');
 }
+
+export function hasFormFieldErrors(formGroup: FormGroup, field: string) {
+  if (formGroup.get(field)?.dirty || formGroup.get(field)?.touched) {
+    return formGroup.get(field)?.errors;
+  } else {
+    return false;
+  }
+}

frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.html

@@ -12,9 +12,7 @@
     </form>
     <span class="text-black unit-label">{{ generateUnitLabel() }}</span>
   </div>
-  <span *ngIf="isTouchedOrDirty('value')">
-    <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('value')">
-      <span>{{ errorMessages[errorKey.toUpperCase()] }}</span>
-    </mat-error>
-  </span>
+  <mat-error *ngIf="hasFormFieldErrors(dialogForm, 'value')">
+    <span>{{ getErrorMessage("MUST_BE_NUMBER", "Neuer Wert") }}</span>
+  </mat-error>
 </div>

frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.ts

@@ -1,9 +1,9 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { FormGroup, Validators } from '@angular/forms';
-import errorMessages from '../../../../../assets/errors/error-messages.json';
 import { KeyResultMetric } from '../../../types/model/KeyResultMetric';
 import { CheckInMin } from '../../../types/model/CheckInMin';
-import { formInputCheck } from '../../../common';
+import { formInputCheck, hasFormFieldErrors } from '../../../common';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-check-in-form-metric',
@@ -18,8 +18,10 @@ export class CheckInFormMetricComponent implements OnInit {
   checkIn!: CheckInMin;
   @Input()
   dialogForm!: FormGroup;
-  protected readonly errorMessages: any = errorMessages;
   protected readonly formInputCheck = formInputCheck;
+  protected readonly hasFormFieldErrors = hasFormFieldErrors;
+
+  constructor(private translate: TranslateService) {}
 
   ngOnInit() {
     this.dialogForm.controls['value'].setValidators([Validators.required, Validators.pattern('^-?\\d+\\.?\\d*$')]);
@@ -38,12 +40,7 @@ export class CheckInFormMetricComponent implements OnInit {
     }
   }
 
-  isTouchedOrDirty(name: string) {
-    return this.dialogForm.get(name)?.dirty || this.dialogForm.get(name)?.touched;
-  }
-
-  getErrorKeysOfFormField(name: string) {
-    const errors = this.dialogForm.get(name)?.errors;
-    return errors === null ? [] : Object.keys(errors!);
+  getErrorMessage(error: string, field: string): string {
+    return field + this.translate.instant('DIALOG_ERRORS.' + error);
   }
 }

frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html

@@ -28,11 +28,9 @@
           class="big-dialog-form-field"
           formControlName="changeInfo"
         ></textarea>
-        <div *ngIf="isTouchedOrDirty('changeInfo')">
-          <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('changeInfo')">
-            <span>{{ errorMessages[errorKey.toUpperCase()] }}</span>
-          </mat-error>
-        </div>
+        <mat-error *ngIf="hasFormFieldErrors(dialogForm, 'changeInfo')">
+          <span>{{ getErrorMessage("MAX_VALUE", "Kommentar / Veränderung", 4096, null) }}</span>
+        </mat-error>
       </div>
 
       <app-check-in-form-metric
@@ -56,11 +54,9 @@
           class="w-100 big-dialog-form-field"
           formControlName="initiatives"
         ></textarea>
-        <div *ngIf="isTouchedOrDirty('initiatives')">
-          <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('initiatives')">
-            <span>{{ errorMessages[errorKey.toUpperCase()] }}</span>
-          </mat-error>
-        </div>
+        <mat-error *ngIf="hasFormFieldErrors(dialogForm, 'initiatives')">
+          <span>{{ getErrorMessage("MAX_VALUE", "Massnahmen", 4096, null) }}</span>
+        </mat-error>
       </div>
 
       <div class="d-flex flex-column justify-content-start gap-2 col-12">

frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.ts

@@ -9,8 +9,8 @@ import { ParseUnitValuePipe } from '../../../pipes/parse-unit-value/parse-unit-v
 import { CheckInService } from '../../../services/check-in.service';
 import { Action } from '../../../types/model/Action';
 import { ActionService } from '../../../services/action.service';
-import { formInputCheck } from '../../../common';
-import errorMessages from '../../../../../assets/errors/error-messages.json';
+import { formInputCheck, hasFormFieldErrors } from '../../../common';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-check-in-form',
@@ -31,14 +31,15 @@ export class CheckInFormComponent implements OnInit {
     actionList: new FormControl<Action[]>([]),
   });
   protected readonly formInputCheck = formInputCheck;
-  protected readonly errorMessages: { [key: string]: string } = errorMessages;
+  protected readonly hasFormFieldErrors = hasFormFieldErrors;
 
   constructor(
     public dialogRef: MatDialogRef<CheckInFormComponent>,
     @Inject(MAT_DIALOG_DATA) public data: any,
     public parserPipe: ParseUnitValuePipe,
     private checkInService: CheckInService,
     private actionService: ActionService,
+    private translate: TranslateService,
   ) {
     this.currentDate = new Date();
     this.keyResult = data.keyResult;
@@ -49,13 +50,8 @@ export class CheckInFormComponent implements OnInit {
     this.dialogForm.patchValue({ actionList: this.keyResult.actionList });
   }
 
-  isTouchedOrDirty(name: string) {
-    return this.dialogForm.get(name)?.dirty || this.dialogForm.get(name)?.touched;
-  }
-
-  getErrorKeysOfFormField(name: string): string[] {
-    const errors = this.dialogForm.get(name)?.errors;
-    return errors == null ? [] : Object.keys(errors);
+  getErrorMessage(error: string, field: string, firstNumber: number | null, secondNumber: number | null): string {
+    return field + this.translate.instant('DIALOG_ERRORS.' + error).format(firstNumber, secondNumber);
   }
 
   setDefaultValues() {

frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.html

@@ -48,11 +48,9 @@
         [ngClass]="formInputCheck(completeForm, 'comment')"
         id="comment"
       ></textarea>
-      <span *ngIf="isTouchedOrDirty('comment')">
-        <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('comment')">
-          <span>{{ errorMessages[errorKey.toUpperCase()] }}</span>
-        </mat-error>
-      </span>
+      <mat-error *ngIf="hasFormFieldErrors(completeForm, 'comment')">
+        <span>{{ getErrorMessage("MAX_VALUE", "Kommentar", 4096) }}</span>
+      </mat-error>
     </div>
   </form>
 </mat-dialog-content>

frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.ts

@@ -1,8 +1,8 @@
 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { formInputCheck } from '../../common';
-import errorMessages from '../../../../assets/errors/error-messages.json';
+import { formInputCheck, hasFormFieldErrors } from '../../common';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-complete-dialog',
@@ -15,10 +15,12 @@ export class CompleteDialogComponent {
     comment: new FormControl<string | null>(null, [Validators.maxLength(4096)]),
   });
   protected readonly formInputCheck = formInputCheck;
+  protected readonly hasFormFieldErrors = hasFormFieldErrors;
 
   constructor(
     public dialogRef: MatDialogRef<CompleteDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public data: { objectiveTitle: string },
+    private translate: TranslateService,
   ) {}
 
   switchSuccessState(input: string) {
@@ -48,14 +50,7 @@ export class CompleteDialogComponent {
     });
   }
 
-  isTouchedOrDirty(name: string) {
-    return this.completeForm.get(name)?.dirty || this.completeForm.get(name)?.touched;
+  getErrorMessage(error: string, field: string, maxLength: number | null): string {
+    return field + this.translate.instant('DIALOG_ERRORS.' + error).format(maxLength);
   }
-
-  getErrorKeysOfFormField(name: string) {
-    const errors = this.completeForm.get(name)?.errors;
-    return errors == null ? [] : Object.keys(errors);
-  }
-
-  protected readonly errorMessages: any = errorMessages;
 }

frontend/src/app/shared/dialog/key-result-form/key-result-form.component.html

@@ -9,11 +9,9 @@
         formControlName="title"
         id="title"
       ></textarea>
-      <span *ngIf="isTouchedOrDirty('title')">
-        <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('title')">
-          <span>{{ errorMessages[errorKey.toUpperCase()] }}</span>
-        </mat-error>
-      </span>
+      <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'title')">
+        <span>{{ getErrorMessage("SIZE_BETWEEN", "Titel", 2, 250) }}</span>
+      </mat-error>
     </div>
 
     <div class="mb-3">
@@ -40,9 +38,9 @@
           {{ user.firstname + " " + user.lastname }}
         </mat-option>
       </mat-autocomplete>
-      <div *ngIf="invalidOwner()">
-        <mat-error>Du musst einen Owner auswählen</mat-error>
-      </div>
+      <mat-error *ngIf="invalidOwner()">
+        <span>{{ getErrorMessage("MUST_SELECT", "Owner", null, null) }}</span>
+      </mat-error>
     </div>
 
     <div class="input-style gap-2 col-12">
@@ -54,11 +52,9 @@
         formControlName="description"
         id="description"
       ></textarea>
-      <span *ngIf="isTouchedOrDirty('description')">
-        <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('description')">
-          <span>{{ errorMessages[errorKey.toUpperCase()] }}</span>
-        </mat-error>
-      </span>
+      <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'description')">
+        <span>{{ getErrorMessage("MAX_VALUE", "Beschreibung", 4096, null) }}</span>
+      </mat-error>
     </div>
     <app-action-plan [control]="actionList$" [keyResultId]="getKeyResultId()"></app-action-plan>
   </form>