From 6d30752386c4cb581dd99e1fc98d5b0843b7303b Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Mon, 14 Aug 2017 13:31:50 +0100 Subject: [PATCH] [ADF-1169] validation date start task form (#2208) * validation date start task form * move mock test in before each of the creation component --- .../src/components/start-task.component.css | 37 ----- .../src/components/start-task.component.html | 138 ++++++++++-------- .../src/components/start-task.component.scss | 94 ++++++++++++ .../components/start-task.component.spec.ts | 45 +++--- .../src/components/start-task.component.ts | 44 ++++-- .../ng2-activiti-tasklist/src/i18n/en.json | 11 +- .../src/utils/momentDateAdapter.ts | 4 +- 7 files changed, 235 insertions(+), 138 deletions(-) delete mode 100644 ng2-components/ng2-activiti-tasklist/src/components/start-task.component.css create mode 100644 ng2-components/ng2-activiti-tasklist/src/components/start-task.component.scss diff --git a/ng2-components/ng2-activiti-tasklist/src/components/start-task.component.css b/ng2-components/ng2-activiti-tasklist/src/components/start-task.component.css deleted file mode 100644 index 253809829b..0000000000 --- a/ng2-components/ng2-activiti-tasklist/src/components/start-task.component.css +++ /dev/null @@ -1,37 +0,0 @@ -.adf-new-task-heading { - padding: 12px 20px; - font-family: Muli; - font-weight: bold; - border-bottom: 1px solid #eee; - font-size: 18px; - float: left; - text-align: left; - width: calc(100% - 40px); -} - -.adf-new-task-layout-card { - width: 66.6667%; - margin-right:calc(33.3333%/2 - 24px); - margin-left: calc(33.3333%/2 - 24px); - margin-top: 10px; - margin-bottom: 10px; - padding: 0px -} - -.adf-new-task-footer { - padding: 4px; - font-family: Muli; - font-size: 18px; - border-top: 1px solid #eee; - float: left; - width: calc(100% - 40px); - text-align: right; -} - -.adf-start-task-input-container { - width: 80%; -} - -.adf-new-task-text-width { - width: 90%; -} diff --git a/ng2-components/ng2-activiti-tasklist/src/components/start-task.component.html b/ng2-components/ng2-activiti-tasklist/src/components/start-task.component.html index a717e038c6..0082443494 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/start-task.component.html +++ b/ng2-components/ng2-activiti-tasklist/src/components/start-task.component.html @@ -1,66 +1,82 @@ - - -
{{'START_TASK.FORM.TITLE'|translate}}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - {{'START_TASK.FORM.LABEL.NONE'|translate}} + + +
{{'START_TASK.FORM.TITLE'|translate}}
+ + + + + + + + + + + + + + + + + + + + + + + + +
+
+
{{'START_TASK.FORM.DATE.ERROR'|translate}}
+ warning +
+
+ + + + {{'START_TASK.FORM.LABEL.NONE'|translate}} - {{ getDisplayUser(user.firstName, user.lastName, ' ')}} + {{ getDisplayUser(user.firstName, + user.lastName, ' ')}} + - - - - - - - {{'START_TASK.FORM.LABEL.NONE'|translate}} - {{ form.name }} - - - - - - - - -
- - -
- - - + + + + + + + {{'START_TASK.FORM.LABEL.NONE'|translate}} + {{ form.name }} + + + + + + + + +
+ + +
+ + + diff --git a/ng2-components/ng2-activiti-tasklist/src/components/start-task.component.scss b/ng2-components/ng2-activiti-tasklist/src/components/start-task.component.scss new file mode 100644 index 0000000000..b3eb6b28d9 --- /dev/null +++ b/ng2-components/ng2-activiti-tasklist/src/components/start-task.component.scss @@ -0,0 +1,94 @@ +@import 'theming'; + +.adf-new-task-heading { + padding: 12px 20px; + font-family: Muli; + font-weight: bold; + border-bottom: 1px solid #eee; + font-size: 18px; + float: left; + text-align: left; + width: calc(100% - 40px); +} + +.adf-new-task-layout-card { + width: 66.6667%; + margin-right: calc(33.3333%/2 - 24px); + margin-left: calc(33.3333%/2 - 24px); + margin-top: 10px; + margin-bottom: 10px; + padding: 0px; +} + +.adf-new-task-footer { + padding: 4px; + font-family: Muli; + font-size: 18px; + border-top: 1px solid #eee; + float: left; + width: calc(100% - 40px); + text-align: right; +} + +.adf-start-task-input-container { + width: 80%; +} + +.adf-new-task-text-width { + width: 90%; +} + +.adf { + + &-error-text-container { + position: absolute; + width: 81%; + height: 20px; + margin-top: 30px; + } + + &-error-text { + padding: 1px; + height: 16px; + font-size: 12px; + line-height: 1.33; + float: left; + color: mat-color($warn); + } + + &-error-icon { + float: right; + font-size: 17px; + color: mat-color($warn); + } + + &-label { + color: $alfresco-gray-label; + } + + &-invalid { + + .mat-input-underline { + background-color: #f44336 !important; + } + + .adf-file { + border-color: mat-color($warn); + } + + .mat-input-prefix { + color: mat-color($warn); + } + + .adf-input { + border-color: mat-color($warn); + } + + .adf-label { + color: mat-color($warn); + &:after { + background-color: mat-color($warn); + } + } + } +} diff --git a/ng2-components/ng2-activiti-tasklist/src/components/start-task.component.spec.ts b/ng2-components/ng2-activiti-tasklist/src/components/start-task.component.spec.ts index d7490bf884..11a3cc6d12 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/start-task.component.spec.ts +++ b/ng2-components/ng2-activiti-tasklist/src/components/start-task.component.spec.ts @@ -76,33 +76,32 @@ describe('StartTaskComponent', () => { fixture = TestBed.createComponent(StartTaskComponent); activitiStartTaskComponent = fixture.componentInstance; element = fixture.nativeElement; + + service = fixture.debugElement.injector.get(TaskListService); + peopleService = fixture.debugElement.injector.get(PeopleService); + getFormlistSpy = spyOn(service, 'getFormList').and.returnValue(Observable.of(fakeForms)); + getWorkflowUsersSpy = spyOn(peopleService, 'getWorkflowUsers').and.returnValue(Observable.of([ + { + id: 1, + firstName: 'fakeName', + lastName: 'fakeName', + email: 'fake@app.activiti.com', + company: 'Alfresco.com', + pictureId: 3003 + }, + { + id: 1001, + firstName: 'fake-name', + lastName: 'fake-name', + email: 'fake-@app.com', + company: 'app' + } + ])); + fixture.detectChanges(); }); })); - beforeEach(() => { - service = fixture.debugElement.injector.get(TaskListService); - peopleService = fixture.debugElement.injector.get(PeopleService); - getFormlistSpy = spyOn(service, 'getFormList').and.returnValue(Observable.of(fakeForms)); - getWorkflowUsersSpy = spyOn(peopleService, 'getWorkflowUsers').and.returnValue(Observable.of([ - { - id: 1, - firstName: 'fakeName', - lastName: 'fakeName', - email: 'fake@app.activiti.com', - company: 'Alfresco.com', - pictureId: 3003 - }, - { - id: 1001, - firstName: 'fake-name', - lastName: 'fake-name', - email: 'fake-@app.com', - company: 'app' - } - ])); - }); - it('should create instance of StartTaskComponent', () => { expect(fixture.componentInstance instanceof StartTaskComponent).toBe(true, 'should create StartTaskComponent'); }); diff --git a/ng2-components/ng2-activiti-tasklist/src/components/start-task.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/start-task.component.ts index ea687f4032..3938863b84 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/start-task.component.ts +++ b/ng2-components/ng2-activiti-tasklist/src/components/start-task.component.ts @@ -15,7 +15,10 @@ * limitations under the License. */ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core'; +import { DateAdapter, MD_DATE_FORMATS } from '@angular/material'; +import * as moment from 'moment'; +import { MOMENT_DATE_FORMATS, MomentDateAdapter } from 'ng2-alfresco-core'; import { LogService } from 'ng2-alfresco-core'; import { Observable } from 'rxjs/Rx'; import { Form } from '../models/form.model'; @@ -28,10 +31,16 @@ import { TaskListService } from './../services/tasklist.service'; @Component({ selector: 'adf-start-task, activiti-start-task', templateUrl: './start-task.component.html', - styleUrls: ['./start-task.component.css'] + styleUrls: ['./start-task.component.scss'], + providers: [ + {provide: DateAdapter, useClass: MomentDateAdapter}, + {provide: MD_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS}], + encapsulation: ViewEncapsulation.None }) export class StartTaskComponent implements OnInit { + public FORMAT_DATE: string = 'DD/MM/YYYY'; + @Input() appId: string; @@ -56,6 +65,8 @@ export class StartTaskComponent implements OnInit { taskId: string; + dateError: boolean; + /** * Constructor * @param auth @@ -83,13 +94,13 @@ export class StartTaskComponent implements OnInit { ) ) .subscribe( - (res: any) => { - this.success.emit(res); - }, - (err) => { - this.error.emit(err); - this.logService.error('An error occurred while creating new task'); - }); + (res: any) => { + this.success.emit(res); + }, + (err) => { + this.error.emit(err); + this.logService.error('An error occurred while creating new task'); + }); } } @@ -115,8 +126,8 @@ export class StartTaskComponent implements OnInit { private loadFormsTask(): void { this.taskService.getFormList().subscribe((res: Form[]) => { - this.forms = res; - }, + this.forms = res; + }, (err) => { this.error.emit(err); this.logService.error('An error occurred while trying to get the forms'); @@ -145,4 +156,15 @@ export class StartTaskComponent implements OnInit { lastName = (lastName !== null ? lastName : ''); return firstName + delimiter + lastName; } + + onDateChanged(newDateValue): void { + this.dateError = false; + + if (newDateValue) { + let momentDate = moment(newDateValue, this.FORMAT_DATE, true); + if (!momentDate.isValid()) { + this.dateError = true; + } + } + } } diff --git a/ng2-components/ng2-activiti-tasklist/src/i18n/en.json b/ng2-components/ng2-activiti-tasklist/src/i18n/en.json index 37e7aea674..3a31c90be9 100644 --- a/ng2-components/ng2-activiti-tasklist/src/i18n/en.json +++ b/ng2-components/ng2-activiti-tasklist/src/i18n/en.json @@ -78,14 +78,17 @@ "NONE": "None", "NAME": "Name", "DESCRIPTION": "Description", - "ATTACHFORM" : "Attach a Form", - "ASSIGNEE" : "Assignee", - "FORM" : "Form", - "DATE" : "Choose a Date" + "ATTACHFORM": "Attach a Form", + "ASSIGNEE": "Assignee", + "FORM": "Form", + "DATE": "Choose a Date" }, "ACTION": { "START": "Start", "CANCEL": "Cancel" + }, + "DATE": { + "ERROR": "Date format DD/MM/YYYY" } } }, diff --git a/ng2-components/ng2-alfresco-core/src/utils/momentDateAdapter.ts b/ng2-components/ng2-alfresco-core/src/utils/momentDateAdapter.ts index a464840631..e5294dd522 100644 --- a/ng2-components/ng2-alfresco-core/src/utils/momentDateAdapter.ts +++ b/ng2-components/ng2-alfresco-core/src/utils/momentDateAdapter.ts @@ -21,10 +21,10 @@ import * as moment from 'moment'; export const MOMENT_DATE_FORMATS: MdDateFormats = { parse: { - dateInput: 'MM-DD-YYYY' + dateInput: 'DD/MM/YYYY' }, display: { - dateInput: 'MM-DD-YYYY', + dateInput: 'DD/MM/YYYY', monthYearLabel: 'MMMM Y', dateA11yLabel: 'LL', monthYearA11yLabel: 'MMMM Y'