From a2c5b22435ad8a689f94800a779f3a43fbcdcb50 Mon Sep 17 00:00:00 2001 From: Tristan Eisermann <19949441+Tristan2357@users.noreply.github.com> Date: Thu, 23 Jul 2020 12:25:57 +0200 Subject: [PATCH] TSK-1315: Added inputLengthValidation to Workplace/Task --- .../classification-details.component.ts | 4 +- .../workbasket-information.component.ts | 4 +- .../forms-validator.service.ts | 2 +- .../attribute.component.html | 2 +- .../custom-fields.component.html | 80 +++++++++------- .../custom-fields.component.ts | 29 +++++- .../general-fields.component.html | 91 +++++++++++++------ .../general-fields.component.ts | 28 +++++- 8 files changed, 167 insertions(+), 73 deletions(-) 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 5c87e9aea..a03757e1f 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 @@ -86,11 +86,11 @@ export class ClassificationDetailsComponent implements OnInit, OnDestroy { this.store.dispatch(new SelectClassification(this.classification.classificationId)); }); - this.formsValidatorService.inputOverflowObservable.subscribe((inputOverflowMap) => { + this.formsValidatorService.inputOverflowObservable.pipe(takeUntil(this.destroy$)).subscribe((inputOverflowMap) => { this.inputOverflowMap = inputOverflowMap; }); this.validateKeypress = (inputFieldModel, maxLength) => { - this.formsValidatorService.validateKeypress(inputFieldModel, maxLength); + this.formsValidatorService.validateInputOverflow(inputFieldModel, maxLength); }; } diff --git a/web/src/app/administration/components/workbasket-information/workbasket-information.component.ts b/web/src/app/administration/components/workbasket-information/workbasket-information.component.ts index 926801143..386308d68 100644 --- a/web/src/app/administration/components/workbasket-information/workbasket-information.component.ts +++ b/web/src/app/administration/components/workbasket-information/workbasket-information.component.ts @@ -85,11 +85,11 @@ export class WorkbasketInformationComponent implements OnInit, OnChanges, OnDest this.lookupField = workbasketsCustomization.information.owner.lookupField; } }); - this.formsValidatorService.inputOverflowObservable.subscribe((inputOverflowMap) => { + this.formsValidatorService.inputOverflowObservable.pipe(takeUntil(this.destroy$)).subscribe((inputOverflowMap) => { this.inputOverflowMap = inputOverflowMap; }); this.validateKeypress = (inputFieldModel, maxLength) => { - this.formsValidatorService.validateKeypress(inputFieldModel, maxLength); + this.formsValidatorService.validateInputOverflow(inputFieldModel, maxLength); }; } diff --git a/web/src/app/shared/services/forms-validator/forms-validator.service.ts b/web/src/app/shared/services/forms-validator/forms-validator.service.ts index cb359437c..9bf4ee26c 100644 --- a/web/src/app/shared/services/forms-validator/forms-validator.service.ts +++ b/web/src/app/shared/services/forms-validator/forms-validator.service.ts @@ -109,7 +109,7 @@ export class FormsValidatorService { ); } - validateKeypress(inputFieldModel: NgModel, maxLength: Number): void { + validateInputOverflow(inputFieldModel: NgModel, maxLength: Number): void { if (this.overflowErrorSubscriptionMap.has(inputFieldModel.name)) { this.overflowErrorSubscriptionMap.get(inputFieldModel.name).unsubscribe(); } diff --git a/web/src/app/workplace/components/taskdetails-attribute/attribute.component.html b/web/src/app/workplace/components/taskdetails-attribute/attribute.component.html index 820c637a5..79c42d195 100644 --- a/web/src/app/workplace/components/taskdetails-attribute/attribute.component.html +++ b/web/src/app/workplace/components/taskdetails-attribute/attribute.component.html @@ -27,4 +27,4 @@ add Add new {{ callbackInfo ? 'callback information' : 'custom attribute'}} - \ No newline at end of file + diff --git a/web/src/app/workplace/components/taskdetails-custom-fields/custom-fields.component.html b/web/src/app/workplace/components/taskdetails-custom-fields/custom-fields.component.html index 52863f452..03fdeaebc 100644 --- a/web/src/app/workplace/components/taskdetails-custom-fields/custom-fields.component.html +++ b/web/src/app/workplace/components/taskdetails-custom-fields/custom-fields.component.html @@ -3,100 +3,116 @@
+ [(ngModel)]="task.custom1" name="task.custom1" maxlength="255" #custom1 + (keypress)="validateKeypress(custom1, 255)"> +
{{lengthError}}
+ [(ngModel)]="task.custom2" name="task.custom2" maxlength="255" #custom2 + (keypress)="validateKeypress(custom2, 255)"> +
{{lengthError}}
+ [(ngModel)]="task.custom3" name="task.custom3" maxlength="255" #custom3 + (keypress)="validateKeypress(custom3, 255)"> +
{{lengthError}}
+ [(ngModel)]="task.custom4" name="task.custom4" maxlength="255" #custom4 + (keypress)="validateKeypress(custom4, 255)"> +
{{lengthError}}
+ [(ngModel)]="task.custom5" name="task.custom5" maxlength="255" #custom5 + (keypress)="validateKeypress(custom5, 255)"> +
{{lengthError}}
+ [(ngModel)]="task.custom6" name="task.custom6" maxlength="255" #custom6 + (keypress)="validateKeypress(custom6, 255)"> +
{{lengthError}}
+ [(ngModel)]="task.custom7" name="task.custom7" maxlength="255" #custom7 + (keypress)="validateKeypress(custom7, 255)"> +
{{lengthError}}
+ [(ngModel)]="task.custom8" name="task.custom8" maxlength="255" #custom8 + (keypress)="validateKeypress(custom8, 255)"> +
{{lengthError}}
+ [(ngModel)]="task.custom9" name="task.custom9" maxlength="255" #custom9 + (keypress)="validateKeypress(custom9, 255)"> +
{{lengthError}}
+ [(ngModel)]="task.custom10" name="task.custom10" maxlength="255" #custom10 + (keypress)="validateKeypress(custom10, 255)"> +
{{lengthError}}
+ [(ngModel)]="task.custom11" name="task.custom11" maxlength="255" #custom11 + (keypress)="validateKeypress(custom11, 255)"> +
{{lengthError}}
+ [(ngModel)]="task.custom12" name="task.custom12" maxlength="255" #custom12 + (keypress)="validateKeypress(custom12, 255)"> +
{{lengthError}}
+ [(ngModel)]="task.custom13" name="task.custom13" maxlength="255" #custom13 + (keypress)="validateKeypress(custom13, 255)"> +
{{lengthError}}
+ [(ngModel)]="task.custom14" name="task.custom14" maxlength="255" #custom14 + (keypress)="validateKeypress(custom14, 255)"> +
{{lengthError}}
+ [(ngModel)]="task.custom15" name="task.custom15" maxlength="255" #custom15 + (keypress)="validateKeypress(custom15, 255)"> +
{{lengthError}}
+ [(ngModel)]="task.custom16" name="task.custom16" maxlength="255" #custom16 + (keypress)="validateKeypress(custom16, 255)"> +
{{lengthError}}
diff --git a/web/src/app/workplace/components/taskdetails-custom-fields/custom-fields.component.ts b/web/src/app/workplace/components/taskdetails-custom-fields/custom-fields.component.ts index 785268cc5..f05a516c9 100644 --- a/web/src/app/workplace/components/taskdetails-custom-fields/custom-fields.component.ts +++ b/web/src/app/workplace/components/taskdetails-custom-fields/custom-fields.component.ts @@ -1,13 +1,36 @@ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'; import { Task } from 'app/workplace/models/task'; +import { takeUntil } from 'rxjs/operators'; +import { FormsValidatorService } from '../../../shared/services/forms-validator/forms-validator.service'; +import { Subject } from 'rxjs'; @Component({ selector: 'taskana-task-details-custom-fields', templateUrl: './custom-fields.component.html' }) -export class TaskdetailsCustomFieldsComponent implements OnInit { +export class TaskdetailsCustomFieldsComponent implements OnInit, OnDestroy { @Input() task: Task; @Output() taskChange: EventEmitter = new EventEmitter(); - ngOnInit() {} + readonly lengthError = 'You have reached the maximum length'; + inputOverflowMap = new Map(); + validateKeypress: Function; + + destroy$ = new Subject(); + + constructor(private formsValidatorService: FormsValidatorService) {} + + ngOnInit() { + this.formsValidatorService.inputOverflowObservable.pipe(takeUntil(this.destroy$)).subscribe((inputOverflowMap) => { + this.inputOverflowMap = inputOverflowMap; + }); + this.validateKeypress = (inputFieldModel, maxLength) => { + this.formsValidatorService.validateInputOverflow(inputFieldModel, maxLength); + }; + } + + ngOnDestroy(): void { + this.destroy$.next(); + this.destroy$.complete(); + } } diff --git a/web/src/app/workplace/components/taskdetails-general/general-fields.component.html b/web/src/app/workplace/components/taskdetails-general/general-fields.component.html index f89badfb0..ca9660144 100644 --- a/web/src/app/workplace/components/taskdetails-general/general-fields.component.html +++ b/web/src/app/workplace/components/taskdetails-general/general-fields.component.html @@ -4,16 +4,23 @@
- - +
{{lengthError}}
+
- - +
{{lengthError}}
+
@@ -22,18 +29,26 @@
- - +
{{lengthError}}
+
- + +
{{lengthError}}
+ [validationTrigger]="this.toggleValidationMap.get('task.primaryObjRef.systemInstance')" + errorMessage="* System instance is required">
@@ -41,16 +56,22 @@
- +
{{lengthError}}
+
- +
{{lengthError}}
+
@@ -58,15 +79,19 @@
- +
- +
- +
@@ -74,27 +99,39 @@
+ [(ngModel)]="task.parentBusinessProcessId" name="task.parentBusinessProcessId" maxlength="128" + #parentBusinessProcessId + (keypress)="validateKeypress(parentBusinessProcessId, 128)"> +
{{lengthError}}
- + +
{{lengthError}}
- - + + - + +
{{lengthError}}
- + +
{{lengthError}}
diff --git a/web/src/app/workplace/components/taskdetails-general/general-fields.component.ts b/web/src/app/workplace/components/taskdetails-general/general-fields.component.ts index 1c0460bea..4f77f283f 100644 --- a/web/src/app/workplace/components/taskdetails-general/general-fields.component.ts +++ b/web/src/app/workplace/components/taskdetails-general/general-fields.component.ts @@ -7,25 +7,27 @@ import { ViewChild, SimpleChanges, OnChanges, - HostListener + HostListener, + OnDestroy } from '@angular/core'; import { Task } from 'app/workplace/models/task'; import { FormsValidatorService } from 'app/shared/services/forms-validator/forms-validator.service'; import { NgForm } from '@angular/forms'; import { DomainService } from 'app/shared/services/domain/domain.service'; import { Select } from '@ngxs/store'; -import { Observable } from 'rxjs'; +import { Observable, Subject } from 'rxjs'; import { EngineConfigurationSelectors } from 'app/shared/store/engine-configuration-store/engine-configuration.selectors'; import { ClassificationsService } from '../../../shared/services/classifications/classifications.service'; import { Classification } from '../../../shared/models/classification'; import { TasksCustomisation } from '../../../shared/models/customisation'; +import { takeUntil } from 'rxjs/operators'; @Component({ selector: 'taskana-task-details-general-fields', templateUrl: './general-fields.component.html', styleUrls: ['./general-fields.component.scss'] }) -export class TaskdetailsGeneralFieldsComponent implements OnInit, OnChanges { +export class TaskdetailsGeneralFieldsComponent implements OnInit, OnChanges, OnDestroy { @Input() task: Task; @@ -39,11 +41,16 @@ export class TaskdetailsGeneralFieldsComponent implements OnInit, OnChanges { @ViewChild('TaskForm', { static: false }) taskForm: NgForm; - toogleValidationMap = new Map(); + toggleValidationMap = new Map(); requestInProgress = false; classifications: Classification[]; + readonly lengthError = 'You have reached the maximum length'; + inputOverflowMap = new Map(); + validateKeypress: Function; + @Select(EngineConfigurationSelectors.tasksCustomisation) tasksCustomisation$: Observable; + private destroy$ = new Subject(); constructor( private classificationService: ClassificationsService, @@ -53,6 +60,12 @@ export class TaskdetailsGeneralFieldsComponent implements OnInit, OnChanges { ngOnInit() { this.getClassificationByDomain(); + this.formsValidatorService.inputOverflowObservable.pipe(takeUntil(this.destroy$)).subscribe((inputOverflowMap) => { + this.inputOverflowMap = inputOverflowMap; + }); + this.validateKeypress = (inputFieldModel, maxLength) => { + this.formsValidatorService.validateInputOverflow(inputFieldModel, maxLength); + }; } ngOnChanges(changes: SimpleChanges): void { @@ -64,6 +77,11 @@ export class TaskdetailsGeneralFieldsComponent implements OnInit, OnChanges { } } + ngOnDestroy() { + this.destroy$.next(); + this.destroy$.complete(); + } + isFieldValid(field: string): boolean { return this.formsValidatorService.isFieldValid(this.taskForm, field); } @@ -76,7 +94,7 @@ export class TaskdetailsGeneralFieldsComponent implements OnInit, OnChanges { private validate() { this.formsValidatorService.formSubmitAttempt = true; - this.formsValidatorService.validateFormInformation(this.taskForm, this.toogleValidationMap).then((value) => { + this.formsValidatorService.validateFormInformation(this.taskForm, this.toggleValidationMap).then((value) => { if (value) { this.formValid.emit(true); }