From c70e1cf39ec31780183ebc08cc82193c185a7f01 Mon Sep 17 00:00:00 2001
From: Julien Schneider <julien.schneider.1991@gmail.com>
Date: Tue, 13 Feb 2024 17:25:54 +0100
Subject: [PATCH] fix: improve multi language input touched behavior, add
 validators (#1463)

---
 .../reusable-project-form.component.ts        |  4 ++--
 .../src/lib/multi-language-form.service.ts    |  2 +-
 .../src/lib/multi-language-input.component.ts |  1 +
 .../lib/multi-language-textarea.component.ts  | 21 +++++++++++--------
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/apps/dsp-app/src/app/project/reusable-project-form/reusable-project-form.component.ts b/apps/dsp-app/src/app/project/reusable-project-form/reusable-project-form.component.ts
index d386232c3e..1735e784d0 100644
--- a/apps/dsp-app/src/app/project/reusable-project-form/reusable-project-form.component.ts
+++ b/apps/dsp-app/src/app/project/reusable-project-form/reusable-project-form.component.ts
@@ -64,7 +64,7 @@ export class ReusableProjectFormComponent implements OnInit, OnDestroy {
   shortcodePatternError = { errorKey: 'pattern', message: 'This field must contains letters from A to F and 0 to 9' };
   shortCodeExistsError = { errorKey: 'shortcodeExists', message: 'This shortcode already exists' };
   readonly keywordsValidators = [Validators.minLength(3), Validators.maxLength(64)];
-  readonly descriptionValidators = [Validators.maxLength(2000)];
+  readonly descriptionValidators = [Validators.minLength(3), Validators.maxLength(40960)];
   subscription: Subscription;
 
   constructor(
@@ -98,7 +98,7 @@ export class ReusableProjectFormComponent implements OnInit, OnDestroy {
         { value: this.formData.shortname, disabled: this.formData.shortname !== '' },
         [Validators.required, Validators.minLength(3), Validators.maxLength(20), Validators.pattern(/^[a-zA-Z]+\S*$/)],
       ],
-      longname: [this.formData.longname, [Validators.required]],
+      longname: [this.formData.longname, [Validators.required, Validators.minLength(3), Validators.maxLength(256)]],
       description: this._fb.array(
         this.formData.description.map(({ language, value }) =>
           this._fb.group({
diff --git a/libs/vre/shared/app-string-literal/src/lib/multi-language-form.service.ts b/libs/vre/shared/app-string-literal/src/lib/multi-language-form.service.ts
index fe719c5eb5..c5354abbc6 100644
--- a/libs/vre/shared/app-string-literal/src/lib/multi-language-form.service.ts
+++ b/libs/vre/shared/app-string-literal/src/lib/multi-language-form.service.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, ElementRef, Injectable } from '@angular/core';
+import { ChangeDetectorRef, Injectable } from '@angular/core';
 import { FormArray, FormBuilder, FormControl, FormGroup, ValidatorFn } from '@angular/forms';
 import { UserSelectors } from '@dasch-swiss/vre/shared/app-state';
 import { Store } from '@ngxs/store';
diff --git a/libs/vre/shared/app-string-literal/src/lib/multi-language-input.component.ts b/libs/vre/shared/app-string-literal/src/lib/multi-language-input.component.ts
index cae06291bf..9687c3c8c1 100644
--- a/libs/vre/shared/app-string-literal/src/lib/multi-language-input.component.ts
+++ b/libs/vre/shared/app-string-literal/src/lib/multi-language-input.component.ts
@@ -51,6 +51,7 @@ import { MultiLanguageFormService } from './multi-language-form.service';
         #textInput
         [ngModel]="formService.inputValue"
         (ngModelChange)="formService.onInputChange($event)"
+        (blur)="formService.formArray.markAsTouched()"
         [readonly]="!editable" />
     </mat-form-field>
     <mat-error *ngIf="formService.formArray.invalid && formService.formArray.touched">
diff --git a/libs/vre/shared/app-string-literal/src/lib/multi-language-textarea.component.ts b/libs/vre/shared/app-string-literal/src/lib/multi-language-textarea.component.ts
index 5787f6f7a9..a88f3160ee 100644
--- a/libs/vre/shared/app-string-literal/src/lib/multi-language-textarea.component.ts
+++ b/libs/vre/shared/app-string-literal/src/lib/multi-language-textarea.component.ts
@@ -36,6 +36,7 @@ import { MultiLanguageFormService } from './multi-language-form.service';
           #textInput
           [readonly]="!editable"
           [ngModel]="formService.inputValue"
+          (blur)="formService.formArray.markAsTouched()"
           (ngModelChange)="formService.onInputChange($event)"></textarea>
       </mat-form-field>
       <mat-button-toggle-group matPrefix #group="matButtonToggleGroup" vertical>
@@ -48,15 +49,17 @@ import { MultiLanguageFormService } from './multi-language-form.service';
         </mat-button-toggle>
       </mat-button-toggle-group>
     </div>
-    <mat-error *ngIf="formService.formArray.invalid && formService.formArray.touched">
-      <ng-container *ngIf="formService.invalidErrors?.language"
-        >Language {{ formService.invalidErrors.language }}:
-        {{ formService.invalidErrors.error | humanReadableError }}
-      </ng-container>
-      <ng-container *ngIf="!formService.invalidErrors?.language"
-        >{{ formService.invalidErrors.error | humanReadableError }}
-      </ng-container>
-    </mat-error>
+    <div class="mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align ng-tns-c1205077789-8">
+      <mat-error *ngIf="formService.formArray.invalid && formService.formArray.touched">
+        <ng-container *ngIf="formService.invalidErrors?.language"
+          >Language {{ formService.invalidErrors.language }}:
+          {{ formService.invalidErrors.error | humanReadableError }}
+        </ng-container>
+        <ng-container *ngIf="!formService.invalidErrors?.language"
+          >{{ formService.invalidErrors.error | humanReadableError }}
+        </ng-container>
+      </mat-error>
+    </div>
   `,
   styles: [
     `