From 42197bee6c0e4014ba828f15d13d81b08161b324 Mon Sep 17 00:00:00 2001 From: Martin Rojas Miguel Angel Date: Mon, 9 Jul 2018 14:44:12 +0200 Subject: [PATCH] TSK-611 Add validation form errors on save - Add custom form validation on save with highlighting animation and snack bar warning - Added validation for classifications, workbaskets information and access items. - Enable save button always - Refactored animations - Test configuration cleanup --- .../classification-details.component.html | 6 +- .../classification-details.component.ts | 20 ++++++- .../access-items/access-items.component.html | 52 +++++++++--------- .../access-items.component.spec.ts | 39 ++----------- .../access-items/access-items.component.ts | 50 +++++++++++------ .../dual-list/dual-list.component.html | 2 +- .../dual-list/dual-list.component.ts | 18 +----- .../workbasket-information.component.html | 13 ++--- .../workbasket-information.component.scss | 2 +- .../workbasket-information.component.spec.ts | 55 +++++-------------- .../workbasket-information.component.ts | 21 ++++++- .../workbasket-details.component.spec.ts | 46 ++++------------ .../workbasket-list-toolbar.component.html | 2 +- .../workbasket-list-toolbar.component.ts | 19 +------ web/src/app/app.test.configuration.ts | 5 +- web/src/app/app.test.module.ts | 17 ++++++ .../components/nav-bar/nav-bar.component.html | 2 +- .../components/nav-bar/nav-bar.component.ts | 15 +---- .../taskana-engine.mock.service.ts | 4 -- web/src/app/shared/alert/alert.component.html | 2 +- web/src/app/shared/alert/alert.component.ts | 15 +---- .../app/shared/animations/expand.animation.ts | 51 +++++++++++++++++ .../shared/animations/validation.animation.ts | 12 ++++ .../services/forms/forms-validator.service.ts | 25 +++++++++ web/src/app/shared/shared.module.ts | 6 +- .../type-ahead/type-ahead.component.html | 3 +- .../type-ahead/type-ahead.component.scss | 18 ++++++ .../shared/type-ahead/type-ahead.component.ts | 10 ++-- .../type-ahead/type-ahead.mock.component.ts | 34 ++++++++++++ .../components/code/code.component.ts | 16 +----- web/src/assets/_forms.scss | 2 +- 31 files changed, 322 insertions(+), 260 deletions(-) create mode 100644 web/src/app/app.test.module.ts create mode 100644 web/src/app/shared/animations/expand.animation.ts create mode 100644 web/src/app/shared/animations/validation.animation.ts create mode 100644 web/src/app/shared/services/forms/forms-validator.service.ts create mode 100644 web/src/app/shared/type-ahead/type-ahead.mock.component.ts diff --git a/web/src/app/administration/classification/details/classification-details.component.html b/web/src/app/administration/classification/details/classification-details.component.html index 49be99ba5..c4706337b 100644 --- a/web/src/app/administration/classification/details/classification-details.component.html +++ b/web/src/app/administration/classification/details/classification-details.component.html @@ -11,7 +11,7 @@
- @@ -33,7 +33,7 @@ -
+
* Key is required
@@ -41,7 +41,7 @@ -
+
* Name is required
diff --git a/web/src/app/administration/classification/details/classification-details.component.ts b/web/src/app/administration/classification/details/classification-details.component.ts index 9dba45301..7b416b1d4 100644 --- a/web/src/app/administration/classification/details/classification-details.component.ts +++ b/web/src/app/administration/classification/details/classification-details.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, OnDestroy } from '@angular/core'; +import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { Subscription } from 'rxjs/Subscription'; @@ -7,6 +7,7 @@ import { ACTION } from 'app/models/action'; import { ErrorModel } from 'app/models/modal-error'; import { AlertModel, AlertType } from 'app/models/alert'; +import { highlight } from 'app/shared/animations/validation.animation'; import { TaskanaDate } from 'app/shared/util/taskana.date'; import { ClassificationsService } from 'app/administration/services/classifications/classifications.service'; @@ -24,10 +25,13 @@ import { ClassificationCategoriesService } from 'app/administration/services/cla import { DomainService } from 'app/services/domain/domain.service'; import { CustomFieldsService } from '../../../services/custom-fields/custom-fields.service'; import { Pair } from 'app/models/pair'; +import { NgForm } from '@angular/forms'; +import { FormsValidatorService } from 'app/shared/services/forms/forms-validator.service'; @Component({ selector: 'taskana-classification-details', templateUrl: './classification-details.component.html', + animations: [highlight], styleUrls: ['./classification-details.component.scss'] }) export class ClassificationDetailsComponent implements OnInit, OnDestroy { @@ -62,6 +66,9 @@ export class ClassificationDetailsComponent implements OnInit, OnDestroy { private categoriesSubscription: Subscription; private domainSubscription: Subscription; + @ViewChild('ClassificationForm') classificationForm: NgForm; + toogleValidationMap = new Map(); + constructor(private classificationsService: ClassificationsService, private route: ActivatedRoute, private router: Router, @@ -74,7 +81,8 @@ export class ClassificationDetailsComponent implements OnInit, OnDestroy { private categoryService: ClassificationCategoriesService, private domainService: DomainService, private customFieldsService: CustomFieldsService, - private removeConfirmationService: RemoveConfirmationService) { } + private removeConfirmationService: RemoveConfirmationService, + private formsValidatorService: FormsValidatorService) { } ngOnInit() { this.classificationTypeService.getClassificationTypes().subscribe((classificationTypes: Array) => { @@ -133,7 +141,13 @@ export class ClassificationDetailsComponent implements OnInit, OnDestroy { `You are going to delete classification: ${this.classification.key}. Can you confirm this action?`); } - onSave() { + onSubmit() { + if (this.formsValidatorService.validate(this.classificationForm, this.toogleValidationMap)) { + this.onSave(); + } + } + + private onSave() { this.requestInProgressService.setRequestInProgress(true); if (this.action === ACTION.CREATE) { this.classificationSavingSubscription = this.classificationsService.postClassification(this.classification) diff --git a/web/src/app/administration/workbasket/details/access-items/access-items.component.html b/web/src/app/administration/workbasket/details/access-items/access-items.component.html index e1001c9d2..05b0fa29b 100644 --- a/web/src/app/administration/workbasket/details/access-items/access-items.component.html +++ b/web/src/app/administration/workbasket/details/access-items/access-items.component.html @@ -1,8 +1,8 @@
-
-
+
diff --git a/web/src/app/administration/workbasket/details/distribution-targets/dual-list/dual-list.component.ts b/web/src/app/administration/workbasket/details/distribution-targets/dual-list/dual-list.component.ts index 768ebbb3e..206cb9939 100644 --- a/web/src/app/administration/workbasket/details/distribution-targets/dual-list/dual-list.component.ts +++ b/web/src/app/administration/workbasket/details/distribution-targets/dual-list/dual-list.component.ts @@ -1,28 +1,14 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import { WorkbasketSummary } from 'app/models/workbasket-summary'; -import { trigger, state, style, transition, animate, keyframes } from '@angular/animations'; import { FilterModel } from 'app/models/filter'; -import { filter } from 'rxjs/operators'; import { Side } from '../distribution-targets.component'; +import { expandDown } from 'app/shared/animations/expand.animation'; @Component({ selector: 'taskana-dual-list', templateUrl: './dual-list.component.html', styleUrls: ['./dual-list.component.scss'], - animations: [ - trigger('toggle', [ - state('*', style({ opacity: '1' })), - state('void', style({ opacity: '0' })), - transition('void => *', animate('300ms ease-in', keyframes([ - style({ opacity: 0, height: '0px' }), - style({ opacity: 0.5, height: '50px' }), - style({ opacity: 1, height: '*' })]))), - transition('* => void', animate('300ms ease-out', keyframes([ - style({ opacity: 1, height: '*' }), - style({ opacity: 0.5, height: '50px' }), - style({ opacity: 0, height: '0px' })]))) - ] - )], + animations: [expandDown] }) export class DualListComponent implements OnInit { diff --git a/web/src/app/administration/workbasket/details/information/workbasket-information.component.html b/web/src/app/administration/workbasket/details/information/workbasket-information.component.html index 41539375b..f56a65979 100644 --- a/web/src/app/administration/workbasket/details/information/workbasket-information.component.html +++ b/web/src/app/administration/workbasket/details/information/workbasket-information.component.html @@ -2,8 +2,7 @@
-
-
    diff --git a/web/src/app/components/nav-bar/nav-bar.component.ts b/web/src/app/components/nav-bar/nav-bar.component.ts index 632ebf763..da5f32911 100644 --- a/web/src/app/components/nav-bar/nav-bar.component.ts +++ b/web/src/app/components/nav-bar/nav-bar.component.ts @@ -2,29 +2,18 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; import { environment } from 'environments/environment'; import { SelectedRouteService } from 'app/services/selected-route/selected-route'; import { Subscription } from 'rxjs/Subscription'; -import { trigger, state, style, transition, keyframes, animate } from '@angular/animations'; import { DomainService } from 'app/services/domain/domain.service'; import { BusinessAdminGuard } from 'app/guards/business-admin-guard'; import { MonitorGuard } from 'app/guards/monitor-guard'; import { WindowRefService } from 'app/services/window/window.service'; import { UserGuard } from 'app/guards/user-guard'; import { TaskanaEngineService } from '../../services/taskana-engine/taskana-engine.service'; +import { expandRight } from 'app/shared/animations/expand.animation'; @Component({ selector: 'taskana-nav-bar', templateUrl: './nav-bar.component.html', styleUrls: ['./nav-bar.component.scss'], - animations: [ - trigger('toggle', [ - transition('void => *', animate('300ms ease-in', keyframes([ - style({ opacity: 0, width: '0px' }), - style({ opacity: 1, width: '150px' }), - style({ opacity: 1, width: '*' })]))), - transition('* => void', animate('300ms ease-out', keyframes([ - style({ opacity: 1, width: '*' }), - style({ opacity: 0, width: '150px' }), - style({ opacity: 0, width: '0px' })]))) - ] - )], + animations: [expandRight], }) export class NavBarComponent implements OnInit, OnDestroy { diff --git a/web/src/app/services/taskana-engine/taskana-engine.mock.service.ts b/web/src/app/services/taskana-engine/taskana-engine.mock.service.ts index 69af26c8a..70323ba14 100644 --- a/web/src/app/services/taskana-engine/taskana-engine.mock.service.ts +++ b/web/src/app/services/taskana-engine/taskana-engine.mock.service.ts @@ -1,10 +1,6 @@ import { Injectable } from '@angular/core'; -import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Observable } from 'rxjs/Observable'; -import { environment } from 'environments/environment'; import { UserInfoModel } from 'app/models/user-info'; -import { ReplaySubject } from 'rxjs/ReplaySubject'; - @Injectable() export class TaskanaEngineServiceMock { diff --git a/web/src/app/shared/alert/alert.component.html b/web/src/app/shared/alert/alert.component.html index 324493a7b..0fb00067b 100644 --- a/web/src/app/shared/alert/alert.component.html +++ b/web/src/app/shared/alert/alert.component.html @@ -1,4 +1,4 @@ -
\ No newline at end of file diff --git a/web/src/app/shared/type-ahead/type-ahead.component.scss b/web/src/app/shared/type-ahead/type-ahead.component.scss index f7795175c..9a04c22a2 100644 --- a/web/src/app/shared/type-ahead/type-ahead.component.scss +++ b/web/src/app/shared/type-ahead/type-ahead.component.scss @@ -1,20 +1,25 @@ $blue: #2e9eca; $grey: #ddd; +$invalid: #a94442; .wrapper-text { height: 47px; & label { width: 100%; margin-bottom: 0px; + padding-left: 12px; + font-style: italic; } & div { width: 100%; border-bottom: 1px solid $grey; margin-top:6px; + padding-left: 12px; } > div{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; + padding-left: 12px; } } @@ -30,6 +35,7 @@ $grey: #ddd; &:focus{ border-bottom: 1px solid $blue; } + padding-left: 12px; } @@ -50,3 +56,15 @@ $grey: #ddd; position: absolute; right: 0; } + +::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ + color: $invalid; + opacity: 1; /* Firefox */ +} +:-ms-input-placeholder { /* Internet Explorer 10-11 */ + color: $invalid; +} + +::-ms-input-placeholder { /* Microsoft Edge */ + color: $invalid; +} \ No newline at end of file diff --git a/web/src/app/shared/type-ahead/type-ahead.component.ts b/web/src/app/shared/type-ahead/type-ahead.component.ts index 55f3f8c3b..4d9a35f49 100644 --- a/web/src/app/shared/type-ahead/type-ahead.component.ts +++ b/web/src/app/shared/type-ahead/type-ahead.component.ts @@ -1,18 +1,17 @@ -import { Component, OnInit, Input, EventEmitter, Output, ViewChild, ElementRef, forwardRef } from '@angular/core'; +import { Component, OnInit, Input, ViewChild, forwardRef } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import { TypeaheadMatch } from 'ngx-bootstrap/typeahead'; import { AccessIdsService } from 'app/shared/services/access-ids/access-ids.service'; -import { AccessItemsComponent } from 'app/administration/workbasket/details/access-items/access-items.component'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { highlight } from 'app/shared/animations/validation.animation'; -const noop = () => { -}; @Component({ selector: 'taskana-type-ahead', templateUrl: './type-ahead.component.html', styleUrls: ['./type-ahead.component.scss'], + animations: [highlight], providers: [ { provide: NG_VALUE_ACCESSOR, @@ -29,6 +28,9 @@ export class TypeAheadComponent implements OnInit, ControlValueAccessor { @Input() placeHolderMessage; + @Input() + validationValue; + @ViewChild('inputTypeAhead') private inputTypeAhead; diff --git a/web/src/app/shared/type-ahead/type-ahead.mock.component.ts b/web/src/app/shared/type-ahead/type-ahead.mock.component.ts new file mode 100644 index 000000000..fc663b177 --- /dev/null +++ b/web/src/app/shared/type-ahead/type-ahead.mock.component.ts @@ -0,0 +1,34 @@ +import { Component, forwardRef, Input } from '@angular/core'; +import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; + +@Component({ + selector: 'taskana-type-ahead', + template: 'dummydetail', + providers: [ + { + provide: NG_VALUE_ACCESSOR, + multi: true, + useExisting: forwardRef(() => TaskanaTypeAheadMockComponent), + } + ] +}) +export class TaskanaTypeAheadMockComponent implements ControlValueAccessor { + @Input() + placeHolderMessage; + + @Input() + validationValue; + + writeValue(obj: any): void { + + } + registerOnChange(fn: any): void { + + } + registerOnTouched(fn: any): void { + + } + setDisabledState?(isDisabled: boolean): void { + + } +} diff --git a/web/src/app/workplace/components/code/code.component.ts b/web/src/app/workplace/components/code/code.component.ts index 179d7ca39..6eac4d5ea 100644 --- a/web/src/app/workplace/components/code/code.component.ts +++ b/web/src/app/workplace/components/code/code.component.ts @@ -1,24 +1,12 @@ import { Component, OnInit, HostListener } from '@angular/core'; import { trigger, transition, keyframes, style, animate, state } from '@angular/animations'; +import { opacity } from 'app/shared/animations/expand.animation'; @Component({ selector: 'taskana-code', templateUrl: './code.component.html', styleUrls: ['./code.component.scss'], - animations: [ - trigger('toggle', [ - state('*', style({ opacity: '1' })), - state('void', style({ opacity: '0' })), - transition('void => *', animate('300ms ease-in', keyframes([ - style({ opacity: 0 }), - style({ opacity: 0.5 }), - style({ opacity: 1 })]))), - transition('* => void', animate('300ms ease-out', keyframes([ - style({ opacity: 1 }), - style({ opacity: 0.5 }), - style({ opacity: 0 })]))) - ]) - ] + animations: [opacity] }) export class CodeComponent implements OnInit { diff --git a/web/src/assets/_forms.scss b/web/src/assets/_forms.scss index 68d4f2ffc..b7c8f35c8 100644 --- a/web/src/assets/_forms.scss +++ b/web/src/assets/_forms.scss @@ -5,7 +5,7 @@ } .required-text { - padding-left: 15px; + padding-left: 3px; color: $invalid; }