From 33845db6478645200c2dd8da09ba8d4f24372a36 Mon Sep 17 00:00:00 2001
From: Tristan Eisermann <19949441+Tristan2357@users.noreply.github.com>
Date: Tue, 21 Jul 2020 15:39:31 +0200
Subject: [PATCH] TSK-1315: Now uses maxlength for validation in classification

---
 .../classification-details.component.html     | 114 ++++++++++++------
 .../classification-details.component.scss     |  10 ++
 .../classification-details.component.ts       |  20 ++-
 3 files changed, 103 insertions(+), 41 deletions(-)

diff --git a/web/src/app/administration/components/classification-details/classification-details.component.html b/web/src/app/administration/components/classification-details/classification-details.component.html
index f11d2afad..8177c76d5 100644
--- a/web/src/app/administration/components/classification-details/classification-details.component.html
+++ b/web/src/app/administration/components/classification-details/classification-details.component.html
@@ -1,21 +1,26 @@
 <div class="container-scrollable">
-  <taskana-shared-spinner [isRunning]="requestInProgress" class="floating" (spinnerIsRunning)="spinnerRunning($event)"></taskana-shared-spinner>
+  <taskana-shared-spinner [isRunning]="requestInProgress" class="floating"
+                          (spinnerIsRunning)="spinnerRunning($event)"></taskana-shared-spinner>
   <div id="classification-details" *ngIf="classification && !spinnerIsRunning">
     <div id="classification" class="panel panel-default classification">
 
       <!-- TITLE + ACTION BUTTONS -->
       <div class="panel-heading">
         <div class="pull-right btn-group">
-          <button type="button" (click)="onSubmit()" class="btn btn-default btn-primary" data-toggle="tooltip" title="Save">
+          <button type="button" (click)="onSubmit()" class="btn btn-default btn-primary"
+                  data-toggle="tooltip" title="Save">
             <span class="material-icons md-20">save</span>
           </button>
-          <button type="button" (click)="onRestore()" class="btn btn-default" data-toggle="tooltip" title="Restore Previous Version">
+          <button type="button" (click)="onRestore()" class="btn btn-default" data-toggle="tooltip"
+                  title="Restore Previous Version">
             <span class="material-icons md-20 blue">restore</span>
           </button>
-          <button type="button" (click)="onCopy()" data-toggle="tooltip" title="Copy" class="btn btn-default" id="copyButton">
+          <button type="button" (click)="onCopy()" data-toggle="tooltip" title="Copy"
+                  class="btn btn-default" id="copyButton">
             <span class="material-icons md-20 green-blue">content_copy</span>
           </button>
-          <button type="button" (click)="removeClassification()" data-toggle="tooltip" title="Delete" class="btn btn-default">
+          <button type="button" (click)="removeClassification()" data-toggle="tooltip"
+                  title="Delete" class="btn btn-default">
             <span class="material-icons md-20 red">delete</span>
           </button>
         </div>
@@ -34,19 +39,23 @@
               <!-- KEY -->
               <div class="form-group required">
                 <label for="classification-key" class="control-label">Key</label>
-                <input type="text" required #key="ngModel" [disabled]="!isCreatingNewClassification" class="form-control"
-                       id="classification-key" placeholder="Key" [(ngModel)]="classification.key" name="classification.key">
-                <taskana-shared-field-error-display [displayError]="key.invalid"
-                                                    [validationTrigger]="this.toggleValidationMap.get('classification.key')" errorMessage="* Key is required">
+                <input type="text" required maxlength="32" #key="ngModel" [disabled]="!isCreatingNewClassification" class="form-control"
+                       id="classification-key" placeholder="Key" [(ngModel)]="classification.key" name="classification.key" (keypress)="onKeyPressed($event, key, 32)">
+                <div *ngIf="tooLongMap.get(key.name)" class="error">{{lengthError}}</div>
+                <taskana-shared-field-error-display [displayError]="key.invalid && key.dirty"
+                                                    errorMessage="* Key is required">
                 </taskana-shared-field-error-display>
               </div>
 
               <!-- NAME -->
               <div class="form-group required">
                 <label for="classification-name" class="control-label">Name</label>
-                <input type="text" required ="255" #name="ngModel" class="form-control" id="classification-name" placeholder="Name"
-                  [(ngModel)]="classification.name" name="classification.name">
-                <taskana-shared-field-error-display [displayError]="name.invalid"
+                <input type="text" required maxlength="255" #name="ngModel"
+                       class="form-control"
+                       id="classification-name" placeholder="Name"
+                       [(ngModel)]="classification.name" name="classification.name" (keypress)="onKeyPressed($event, name, 255)">
+                <div *ngIf="tooLongMap.get(name.name)" class="error">{{lengthError}}</div>
+                <taskana-shared-field-error-display [displayError]="name.invalid && name.dirty"
                                                     errorMessage="* Name is required">
                 </taskana-shared-field-error-display>
               </div>
@@ -55,12 +64,14 @@
               <div class="form-group">
                 <label for="classification-domain" class="control-label">Domain</label>
                 <input type="text" disabled #domain class="form-control" id="classification-domain"
-                  placeholder="Domain" [(ngModel)]="classification.domain" name="classification.domain">
+                       placeholder="Domain" [(ngModel)]="classification.domain"
+                       name="classification.domain">
                 <a *ngIf="!masterDomainSelected()" (click)="validChanged()">
                   <label>
                     <b>Valid in Domain:</b>
-                    <span class="material-icons md-20 blue ">{{classification.isValidInDomain ? 'check_box':
-                      'check_box_outline_blank'}}</span>
+                    <span class="material-icons md-20 blue ">{{classification.isValidInDomain
+                        ? 'check_box' :
+                        'check_box_outline_blank'}}</span>
                   </label>
                 </a>
               </div>
@@ -69,29 +80,40 @@
               <div class="row">
                 <div class="form-group required col-xs-6">
                   <label for="classification-priority" class="control-label">Priority</label>
-                  <taskana-shared-number-picker [(ngModel)]="classification.priority" name="classification.priority" id="classification-priority" [required]="true"></taskana-shared-number-picker>
-                  <taskana-shared-field-error-display [displayError]="!isFieldValid('classification.priority')" [validationTrigger]="this.toggleValidationMap.get('classification.priority')"
-                                                      errorMessage="* Priority is required">
+                  <taskana-shared-number-picker [(ngModel)]="classification.priority"
+                                                name="classification.priority"
+                                                id="classification-priority"
+                                                [required]="true"></taskana-shared-number-picker>
+                  <taskana-shared-field-error-display
+                      [displayError]="!isFieldValid('classification.priority')"
+                      [validationTrigger]="this.toggleValidationMap.get('classification.priority.name')"
+                      errorMessage="* Priority is required">
                   </taskana-shared-field-error-display>
                 </div>
                 <div class="form-group required btn-group col-xs-6">
                   <label for="classification-category" class="control-label">Category</label>
-                  <div class="dropdown clearfix ">
-                    <button class="btn btn-default" type="button" data-toggle="dropdown" aria-haspopup="true"
-                      aria-expanded="true" id="classification-category">
+                  <div class="dropdown clearfix">
+                    <button class="btn btn-default" type="button" data-toggle="dropdown"
+                            aria-haspopup="true"
+                            aria-expanded="true" id="classification-category">
                       <span class="text-top">
-                        <svg-icon class="blue fa-fw" src="{{(getCategoryIcon(classification.category) | async)?.name}}"
-                          data-toggle="tooltip" [title]="(getCategoryIcon(classification.category) | async)?.text"></svg-icon>
+                        <svg-icon class="blue fa-fw"
+                                  src="{{(getCategoryIcon(classification.category) | async)?.name}}"
+                                  data-toggle="tooltip"
+                                  [title]="(getCategoryIcon(classification.category) | async)?.text"></svg-icon>
                       </span>
                       {{classification.category}}
                       <span class="caret"></span>
                     </button>
                     <ul class="dropdown-menu dropdown-menu" aria-labelledby="dropdownMenu">
                       <li>
-                        <a *ngFor="let category of getAvailableCategories(classification.type) | async" (click)="selectCategory(category)">
+                        <a *ngFor="let category of getAvailableCategories(classification.type) | async"
+                           (click)="selectCategory(category)">
                           <span class="text-top">
-                            <svg-icon class="blue fa-fw" src="{{(getCategoryIcon(category) | async)?.name}}" data-toggle="tooltip"
-                              [title]="(getCategoryIcon(category) | async)?.text"></svg-icon>
+                            <svg-icon class="blue fa-fw"
+                                      src="{{(getCategoryIcon(category) | async)?.name}}"
+                                      data-toggle="tooltip"
+                                      [title]="(getCategoryIcon(category) | async)?.text"></svg-icon>
                             {{category}}
                           </span>
                         </a>
@@ -105,35 +127,51 @@
 
               <!-- SERVICE LEVEL -->
               <div class="form-group">
-                <label for="classification-service-level" class="control-label">Service Level</label>
-                <input type="text" maxlength="255" class="form-control" id="classification-service-level" placeholder="Service Level"
-                  [(ngModel)]="classification.serviceLevel" name="classification.serviceLevel">
+                <label for="classification-service-level" class="control-label">Service
+                  Level</label>
+                <input type="text" maxlength="255" class="form-control"
+                       id="classification-service-level" placeholder="Service Level"
+                       [(ngModel)]="classification.serviceLevel" name="classification.serviceLevel" #serviceLevel="ngModel" (keypress)="onKeyPressed($event, serviceLevel, 255)">
+                <div *ngIf="tooLongMap.get(serviceLevel.name)" class="error">{{lengthError}}</div>
               </div>
 
               <!-- APPLICATION ENTRY POINT -->
               <div class="form-group">
-                <label for="classification-application-entry-point" class="control-label">Application entry point</label>
-                <input type="text" maxlength="255" class="form-control" id="classification-application-entry-point" placeholder="Application entry point"
-                  [(ngModel)]="classification.applicationEntryPoint" name="classification.applicationEntryPoint">
+                <label for="classification-application-entry-point" class="control-label">
+                  Application entry point</label>
+                <input type="text"  maxlength="255" class="form-control"
+                       id="classification-application-entry-point"
+                       placeholder="Application entry point"
+                       [(ngModel)]="classification.applicationEntryPoint"
+                       name="classification.applicationEntryPoint" #appEntryPoint="ngModel" (keypress)="onKeyPressed($event, appEntryPoint, 255)">
+                <div *ngIf="tooLongMap.get(appEntryPoint.name)" class="error">{{lengthError}}</div>
               </div>
 
               <!-- DESCRIPTION -->
               <div class="form-group">
                 <label for="classification-description" class="control-label">Description</label>
-                <textarea class="form-control" maxlength="255" rows="5" id="classification-description" placeholder="Description"
-                  [(ngModel)]="classification.description" name="classification.description"></textarea>
+                <textarea class="form-control" maxlength="255" rows="5"
+                          id="classification-description" placeholder="Description"
+                          [(ngModel)]="classification.description"
+                          name="classification.description" #description="ngModel" (keypress)="onKeyPressed($event, description, 255)"></textarea>
+                <div *ngIf="tooLongMap.get(description.name)" class="error">{{lengthError}}</div>
               </div>
             </div>
           </div>
 
           <!-- CUSTOM FIELDS -->
           <div class="row custom-field-row">
-            <div class="custom-classification-form" *ngFor="let customField of (customFields$ | async), let i = index"
+            <div class="custom-classification-form"
+                 *ngFor="let customField of (customFields$ | async), let i = index"
                  style="width: 50%;">
               <div *ngIf="customField.visible" class="form-group custom-field-wrapper">
-                <label for="classification-custom-{{i + 1}}" class="control-label">{{customField.field}}</label>
-                <input type="text" maxlength="255" class="form-control" id="classification-custom-{{i + 1}}" placeholder="{{customField.field}}"
-                  [(ngModel)]="classification[getClassificationCustom(i + 1)]" name="classification.custom{{i + 1}}">
+                <label for="classification-custom-{{i + 1}}"
+                       class="control-label">{{customField.field}}</label>
+                <input type="text" maxlength="255" class="form-control"
+                       id="classification-custom-{{i + 1}}" placeholder="{{customField.field}}"
+                       [(ngModel)]="classification[getClassificationCustom(i + 1)]"
+                       name="classification.custom{{i + 1}}" #custom="ngModel" (keypress)="onKeyPressed($event, custom, 255)">
+                <div *ngIf="tooLongMap.get(custom.name)" class="error">{{lengthError}}</div>
               </div>
             </div>
           </div>
diff --git a/web/src/app/administration/components/classification-details/classification-details.component.scss b/web/src/app/administration/components/classification-details/classification-details.component.scss
index b38d91e91..94afd2dc9 100644
--- a/web/src/app/administration/components/classification-details/classification-details.component.scss
+++ b/web/src/app/administration/components/classification-details/classification-details.component.scss
@@ -1,3 +1,5 @@
+@import "src/theme/_colors.scss";
+
 .custom-field-row {
   display: flex;
   flex-wrap: wrap;
@@ -14,3 +16,11 @@
 .dropdown-menu > li {
   cursor: pointer;
 }
+
+input:invalid.dirty {
+  border-color: $invalid;
+}
+
+div.error {
+  color: $invalid;
+}
diff --git a/web/src/app/administration/components/classification-details/classification-details.component.ts b/web/src/app/administration/components/classification-details/classification-details.component.ts
index 7c6d5e8ee..5f02fe98b 100644
--- a/web/src/app/administration/components/classification-details/classification-details.component.ts
+++ b/web/src/app/administration/components/classification-details/classification-details.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { Select, Store } from '@ngxs/store';
-import { Observable, Subject } from 'rxjs';
+import { combineLatest, Observable, Subject, Subscription, timer } from 'rxjs';
 
 import { highlight } from 'theme/animations/validation.animation';
 
@@ -8,7 +8,7 @@ import { RequestInProgressService } from 'app/shared/services/request-in-progres
 
 import { DomainService } from 'app/shared/services/domain/domain.service';
 import { Pair } from 'app/shared/models/pair';
-import { NgForm } from '@angular/forms';
+import { NgForm, NgModel } from '@angular/forms';
 import { FormsValidatorService } from 'app/shared/services/forms-validator/forms-validator.service';
 import { ImportExportService } from 'app/administration/services/import-export.service';
 import { map, take, takeUntil } from 'rxjs/operators';
@@ -52,9 +52,13 @@ export class ClassificationDetailsComponent implements OnInit, OnDestroy {
   isCreatingNewClassification: boolean = false;
 
   @ViewChild('ClassificationForm', { static: false }) classificationForm: NgForm;
-  toogleValidationMap = new Map<string, boolean>();
+  toggleValidationMap = new Map<string, boolean>();
   destroy$ = new Subject<void>();
 
+  private timeout = new Map<string, Subscription>();
+  readonly lengthError = 'You have reached the maximal length';
+  tooLongMap = new Map<string, boolean>();
+
   constructor(
     private location: Location,
     private requestInProgressService: RequestInProgressService,
@@ -233,4 +237,14 @@ export class ClassificationDetailsComponent implements OnInit, OnDestroy {
       });
     this.location.go(this.location.path().replace(/(classifications).*/g, 'classifications'));
   }
+
+  onKeyPressed(event: KeyboardEvent, model: NgModel, max: Number): void {
+    if (this.timeout.has(model.name)) {
+      this.timeout.get(model.name).unsubscribe();
+    }
+    if (model.value.length >= max && !event.altKey && !event.ctrlKey) {
+      this.tooLongMap.set(model.name, true);
+      this.timeout.set(model.name, timer(3000).subscribe(() => this.tooLongMap.set(model.name, false)));
+    }
+  }
 }