inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-1169] validation date start task form (#2208)

Browse Source 
* validation date start task form

* move mock test in before each of the creation component
This commit is contained in:
Eugenio Romano 2017-08-14 13:31:50 +01:00 committed by Mario Romano
parent 7aecd13b6f
commit 6d30752386
7 changed files with 235 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
ng2-components/ng2-activiti-tasklist/src/components/start-task.component.css
View File

@ -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%;
}

138
ng2-components/ng2-activiti-tasklist/src/components/start-task.component.html
View File

@ -1,66 +1,82 @@
<md-card class="adf-new-task-layout-card"> <md-card class="adf-new-task-layout-card">
<md-grid-list cols="1" rowHeight="60px"> <md-grid-list cols="1" rowHeight="60px">
<md-grid-tile> <md-grid-tile>
<div class="adf-new-task-heading">{{'START_TASK.FORM.TITLE'|translate}}</div> <div class="adf-new-task-heading">{{'START_TASK.FORM.TITLE'|translate}}</div>
</md-grid-tile> </md-grid-tile>
</md-grid-list> </md-grid-list>
<md-card-content> <md-card-content>
<md-grid-list cols="1" rowHeight="80px"> <md-grid-list cols="1" rowHeight="80px">
<md-grid-tile> <md-grid-tile>
<md-input-container class="adf-new-task-text-width"> <md-input-container class="adf-new-task-text-width">
<input mdInput placeholder="{{'START_TASK.FORM.LABEL.NAME'|translate}}" [(ngModel)]="startTaskmodel.name" required id="name_id"> <input mdInput placeholder="{{'START_TASK.FORM.LABEL.NAME'|translate}}"
</md-input-container> [(ngModel)]="startTaskmodel.name" required id="name_id">
</md-grid-tile> </md-input-container>
</md-grid-list> </md-grid-tile>
<md-grid-list cols="1" rowHeight="80px"> </md-grid-list>
<md-grid-tile> <md-grid-list cols="1" rowHeight="80px">
<md-input-container class="adf-new-task-text-width"> <md-grid-tile>
<textarea mdInput placeholder="{{'START_TASK.FORM.LABEL.DESCRIPTION'|translate}}" [(ngModel)]="startTaskmodel.description" id="description_id"></textarea> <md-input-container class="adf-new-task-text-width">
</md-input-container> <textarea mdInput placeholder="{{'START_TASK.FORM.LABEL.DESCRIPTION'|translate}}"
</md-grid-tile> [(ngModel)]="startTaskmodel.description" id="description_id"></textarea>
</md-grid-list> </md-input-container>
<md-grid-list cols="2" rowHeight="80px"> </md-grid-tile>
<md-grid-tile> </md-grid-list>
<md-input-container class="adf-start-task-input-container"> <md-grid-list cols="2" rowHeight="80px">
<input mdInput <md-grid-tile>
[mdDatepicker]="taskDatePicker" <md-input-container class="adf-start-task-input-container">
[value]="taskDatePicker" <input mdInput
(click)="taskDatePicker.open()" [mdDatepicker]="taskDatePicker"
(keydown)="true" (keydown)="true"
placeholder="{{'START_TASK.FORM.LABEL.DATE'|translate}}" (focusout)="onDateChanged($event.srcElement.value)"
[(ngModel)]="startTaskmodel.dueDate" id="date_id"> placeholder="{{'START_TASK.FORM.LABEL.DATE'|translate}}"
<button mdSuffix [mdDatepickerToggle]="taskDatePicker"></button> [(ngModel)]="startTaskmodel.dueDate" id="date_id">
</md-input-container> <button mdSuffix [mdDatepickerToggle]="taskDatePicker"></button>
<md-datepicker #taskDatePicker [touchUi]="true"></md-datepicker> </md-input-container>
</md-grid-tile> <md-datepicker #taskDatePicker [touchUi]="true"
<md-grid-tile> (selectedChanged)="onDateChanged($event)"></md-datepicker>
<md-select placeholder="{{'START_TASK.FORM.LABEL.ASSIGNEE'|translate}}" id="assignee_id" class="adf-start-task-input-container" [(ngModel)]="assignee"> <div class="adf-error-text-container">
<md-option>{{'START_TASK.FORM.LABEL.NONE'|translate}}</md-option> <div *ngIf="dateError">
<div class="adf-error-text">{{'START_TASK.FORM.DATE.ERROR'|translate}}</div>
<i class="material-icons adf-error-icon">warning</i>
</div>
</div>
</md-grid-tile>
<md-grid-tile>
<md-select placeholder="{{'START_TASK.FORM.LABEL.ASSIGNEE'|translate}}" id="assignee_id"
class="adf-start-task-input-container" [(ngModel)]="assignee">
<md-option>{{'START_TASK.FORM.LABEL.NONE'|translate}}</md-option>
<span *ngFor="let user of people"> <span *ngFor="let user of people">
<md-option [value]="user" *ngIf="!isUserNameEmpty(user)">{{ getDisplayUser(user.firstName, user.lastName, ' ')}}</md-option> <md-option [value]="user" *ngIf="!isUserNameEmpty(user)">{{ getDisplayUser(user.firstName,
user.lastName, ' ')}}
</md-option>
</span> </span>
</md-select> </md-select>
</md-grid-tile> </md-grid-tile>
</md-grid-list> </md-grid-list>
<md-grid-list cols="2" rowHeight="80px"> <md-grid-list cols="2" rowHeight="80px">
<md-grid-tile> <md-grid-tile>
<md-select placeholder="{{'START_TASK.FORM.LABEL.FORM'|translate}}" id="form_id" [(ngModel)]="formKey" class="adf-start-task-input-container"> <md-select placeholder="{{'START_TASK.FORM.LABEL.FORM'|translate}}" id="form_id" [(ngModel)]="formKey"
<md-option>{{'START_TASK.FORM.LABEL.NONE'|translate}}</md-option> class="adf-start-task-input-container">
<md-option *ngFor="let form of forms" [value]="form.id">{{ form.name }}</md-option> <md-option>{{'START_TASK.FORM.LABEL.NONE'|translate}}</md-option>
</md-select> <md-option *ngFor="let form of forms" [value]="form.id">{{ form.name }}</md-option>
</md-grid-tile> </md-select>
<md-grid-tile></md-grid-tile> </md-grid-tile>
</md-grid-list> <md-grid-tile></md-grid-tile>
</md-card-content> </md-grid-list>
<md-card-actions> </md-card-content>
<md-grid-list cols="1" rowHeight="60px"> <md-card-actions>
<md-grid-tile> <md-grid-list cols="1" rowHeight="60px">
<div class="adf-new-task-footer"> <md-grid-tile>
<button md-button (click)="onCancel()" id="button-cancle">{{'START_TASK.FORM.ACTION.CANCEL'|translate}}</button> <div class="adf-new-task-footer">
<button md-button [disabled]="!startTaskmodel.name" (click)="start()" id="button-start">{{'START_TASK.FORM.ACTION.START'|translate}}</button> <button md-button (click)="onCancel()" id="button-cancle">
</div> {{'START_TASK.FORM.ACTION.CANCEL'|translate}}
</md-grid-tile> </button>
</md-grid-list> <button md-button [disabled]="!startTaskmodel.name || dateError" (click)="start()" id="button-start">
</md-card-actions> {{'START_TASK.FORM.ACTION.START'|translate}}
</button>
</div>
</md-grid-tile>
</md-grid-list>
</md-card-actions>
</md-card> </md-card>

94
ng2-components/ng2-activiti-tasklist/src/components/start-task.component.scss Normal file
View File

@ -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);
}
}
}
}

45
ng2-components/ng2-activiti-tasklist/src/components/start-task.component.spec.ts
View File

@ -76,33 +76,32 @@ describe('StartTaskComponent', () => {
fixture = TestBed.createComponent(StartTaskComponent); fixture = TestBed.createComponent(StartTaskComponent);
activitiStartTaskComponent = fixture.componentInstance; activitiStartTaskComponent = fixture.componentInstance;
element = fixture.nativeElement; 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(); 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', () => { it('should create instance of StartTaskComponent', () => {
expect(fixture.componentInstance instanceof StartTaskComponent).toBe(true, 'should create StartTaskComponent'); expect(fixture.componentInstance instanceof StartTaskComponent).toBe(true, 'should create StartTaskComponent');
}); });

44
ng2-components/ng2-activiti-tasklist/src/components/start-task.component.ts
View File

@ -15,7 +15,10 @@
* limitations under the License. * 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 { LogService } from 'ng2-alfresco-core';
import { Observable } from 'rxjs/Rx'; import { Observable } from 'rxjs/Rx';
import { Form } from '../models/form.model'; import { Form } from '../models/form.model';
@ -28,10 +31,16 @@ import { TaskListService } from './../services/tasklist.service';
@Component({ @Component({
selector: 'adf-start-task, activiti-start-task', selector: 'adf-start-task, activiti-start-task',
templateUrl: './start-task.component.html', 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 { export class StartTaskComponent implements OnInit {
public FORMAT_DATE: string = 'DD/MM/YYYY';
@Input() @Input()
appId: string; appId: string;
@ -56,6 +65,8 @@ export class StartTaskComponent implements OnInit {
taskId: string; taskId: string;
dateError: boolean;
/** /**
* Constructor * Constructor
* @param auth * @param auth
@ -83,13 +94,13 @@ export class StartTaskComponent implements OnInit {
) )
) )
.subscribe( .subscribe(
(res: any) => { (res: any) => {
this.success.emit(res); this.success.emit(res);
}, },
(err) => { (err) => {
this.error.emit(err); this.error.emit(err);
this.logService.error('An error occurred while creating new task'); this.logService.error('An error occurred while creating new task');
}); });
} }
} }
@ -115,8 +126,8 @@ export class StartTaskComponent implements OnInit {
private loadFormsTask(): void { private loadFormsTask(): void {
this.taskService.getFormList().subscribe((res: Form[]) => { this.taskService.getFormList().subscribe((res: Form[]) => {
this.forms = res; this.forms = res;
}, },
(err) => { (err) => {
this.error.emit(err); this.error.emit(err);
this.logService.error('An error occurred while trying to get the forms'); 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 : ''); lastName = (lastName !== null ? lastName : '');
return firstName + delimiter + 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;
}
}
}
} }

11
ng2-components/ng2-activiti-tasklist/src/i18n/en.json
View File

@ -78,14 +78,17 @@
"NONE": "None", "NONE": "None",
"NAME": "Name", "NAME": "Name",
"DESCRIPTION": "Description", "DESCRIPTION": "Description",
"ATTACHFORM" : "Attach a Form", "ATTACHFORM": "Attach a Form",
"ASSIGNEE" : "Assignee", "ASSIGNEE": "Assignee",
"FORM" : "Form", "FORM": "Form",
"DATE" : "Choose a Date" "DATE": "Choose a Date"
}, },
"ACTION": { "ACTION": {
"START": "Start", "START": "Start",
"CANCEL": "Cancel" "CANCEL": "Cancel"
},
"DATE": {
"ERROR": "Date format DD/MM/YYYY"
} }
} }
}, },

4
ng2-components/ng2-alfresco-core/src/utils/momentDateAdapter.ts
View File

@ -21,10 +21,10 @@ import * as moment from 'moment';
export const MOMENT_DATE_FORMATS: MdDateFormats = { export const MOMENT_DATE_FORMATS: MdDateFormats = {
parse: { parse: {
dateInput: 'MM-DD-YYYY' dateInput: 'DD/MM/YYYY'
}, },
display: { display: {
dateInput: 'MM-DD-YYYY', dateInput: 'DD/MM/YYYY',
monthYearLabel: 'MMMM Y', monthYearLabel: 'MMMM Y',
dateA11yLabel: 'LL', dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM Y' monthYearA11yLabel: 'MMMM Y'