diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.html index 95009cb8df..cd2c2cb8b5 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.html +++ b/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.html @@ -1,16 +1,15 @@ -
+
- + [class.date-widget__invalid]="!field.isValid"> + {{field.validationSummary}}
@@ -23,3 +22,4 @@
+ diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.spec.ts index 144f7d0214..8b890fd6c9 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.spec.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.spec.ts @@ -18,6 +18,9 @@ import { ElementRef } from '@angular/core'; import { DateWidget } from './date.widget'; import { FormFieldModel } from './../core/form-field.model'; +import { FormModel } from './../core/form.model'; +import { CoreModule } from 'ng2-alfresco-core'; +import { ComponentFixture, TestBed, async } from '@angular/core/testing'; describe('DateWidget', () => { @@ -33,6 +36,8 @@ describe('DateWidget', () => { }; elementRef = new ElementRef(nativeElement); widget = new DateWidget(elementRef); + let componentHandler = jasmine.createSpyObj('componentHandler', ['upgradeAllRegistered', 'upgradeElement']); + window['componentHandler'] = componentHandler; }); it('should setup basic date picker settings on init ', () => { @@ -78,7 +83,9 @@ describe('DateWidget', () => { it('should setup trigger element', () => { let el = {}; spyOn(nativeElement, 'querySelector').and.returnValue(el); + widget.field = new FormFieldModel(null, {id: 'fake-id'}); widget.ngOnInit(); + widget.ngAfterViewChecked(); expect(widget.datePicker.trigger).toBe(el); }); @@ -112,7 +119,7 @@ describe('DateWidget', () => { }); it('should update field value on date selected', () => { - widget.field = new FormFieldModel(null, { type: 'date' }); + widget.field = new FormFieldModel(null, {type: 'date'}); widget.ngOnInit(); let date = '13-3-1982'; @@ -124,7 +131,7 @@ describe('DateWidget', () => { it('should update material textfield on date selected', () => { spyOn(widget, 'setupMaterialTextField').and.callThrough(); - widget.field = new FormFieldModel(null, { type: 'date' }); + widget.field = new FormFieldModel(null, {type: 'date'}); widget.ngOnInit(); widget.datePicker.time = moment(); @@ -136,11 +143,129 @@ describe('DateWidget', () => { let w = new DateWidget(null); spyOn(w, 'setupMaterialTextField').and.callThrough(); - w.field = new FormFieldModel(null, { type: 'date' }); + w.field = new FormFieldModel(null, {type: 'date'}); w.ngOnInit(); w.datePicker.time = moment(); w.onDateSelected(); expect(w.setupMaterialTextField).not.toHaveBeenCalled(); }); + + it('should send field change event when a new date is picked from data picker', (done) => { + let w = new DateWidget(null); + spyOn(w, 'setupMaterialTextField').and.callThrough(); + w.field = new FormFieldModel(null, {value: '9-9-9999', type: 'date'}); + w.ngOnInit(); + w.datePicker.time = moment('9-9-9999', w.DATE_FORMAT); + w.fieldChanged.subscribe((field) => { + expect(field).toBeDefined(); + expect(field).not.toBeNull(); + expect(field.value).toEqual('9-9-9999'); + done(); + }); + w.onDateSelected(); + }); + + it('should send field change event when date is changed in input text', (done) => { + let w = new DateWidget(null); + spyOn(w, 'setupMaterialTextField').and.callThrough(); + w.field = new FormFieldModel(null, {value: '9-9-9999', type: 'date'}); + w.ngOnInit(); + w.datePicker.time = moment('9-9-9999', w.DATE_FORMAT); + w.fieldChanged.subscribe((field) => { + expect(field).toBeDefined(); + expect(field).not.toBeNull(); + expect(field.value).toEqual('9-9-9999'); + done(); + }); + + w.onDateChanged(); + }); + + describe('template check', () => { + let dateWidget: DateWidget; + let fixture: ComponentFixture; + let element: HTMLElement; + let componentHandler; + + beforeEach(async(() => { + componentHandler = jasmine.createSpyObj('componentHandler', ['upgradeAllRegistered', 'upgradeElement']); + window['componentHandler'] = componentHandler; + TestBed.configureTestingModule({ + imports: [CoreModule], + declarations: [DateWidget] + }).compileComponents().then(() => { + fixture = TestBed.createComponent(DateWidget); + dateWidget = fixture.componentInstance; + element = fixture.nativeElement; + }); + })); + + beforeEach(() => { + spyOn(dateWidget, 'setupMaterialTextField').and.stub(); + dateWidget.field = new FormFieldModel(new FormModel(), { + id: 'date-field-id', + name: 'date-name', + value: '9-9-9999', + type: 'date', + readOnly: 'false' + }); + dateWidget.field.isVisible = true; + fixture.detectChanges(); + }); + + afterEach(() => { + fixture.destroy(); + TestBed.resetTestingModule(); + }); + + it('should show visible date widget', async(() => { + fixture.whenStable() + .then(() => { + expect(element.querySelector('#date-field-id')).toBeDefined(); + expect(element.querySelector('#date-field-id')).not.toBeNull(); + let dateElement: any = element.querySelector('#date-field-id'); + expect(dateElement.value).toEqual('9-9-9999'); + }); + })); + + it('should hide not visible date widget', async(() => { + dateWidget.field.isVisible = false; + fixture.detectChanges(); + fixture.whenStable() + .then(() => { + fixture.detectChanges(); + expect(element.querySelector('#data-widget')).toBeNull(); + }); + })); + + it('should become visibile if the visibility change to true', async(() => { + dateWidget.field.isVisible = false; + fixture.detectChanges(); + dateWidget.fieldChanged.subscribe((field) => { + field.isVisible = true; + fixture.detectChanges(); + fixture.whenStable() + .then(() => { + expect(element.querySelector('#date-field-id')).toBeDefined(); + expect(element.querySelector('#date-field-id')).not.toBeNull(); + let dateElement: any = element.querySelector('#date-field-id'); + expect(dateElement.value).toEqual('9-9-9999'); + }); + }); + dateWidget.checkVisibility(dateWidget.field); + })); + + it('should be hided if the visibility change to false', async(() => { + dateWidget.fieldChanged.subscribe((field) => { + field.isVisible = false; + fixture.detectChanges(); + fixture.whenStable() + .then(() => { + expect(element.querySelector('#data-widget')).toBeNull(); + }); + }); + dateWidget.checkVisibility(dateWidget.field); + })); + }); }); diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.ts index 4a6435e902..84a414d7c1 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, ElementRef, OnInit } from '@angular/core'; +import { Component, ElementRef, OnInit, AfterViewChecked } from '@angular/core'; import { TextFieldWidgetComponent } from './../textfield-widget.component'; @Component({ @@ -24,7 +24,7 @@ import { TextFieldWidgetComponent } from './../textfield-widget.component'; templateUrl: './date.widget.html', styleUrls: ['./date.widget.css'] }) -export class DateWidget extends TextFieldWidgetComponent implements OnInit { +export class DateWidget extends TextFieldWidgetComponent implements OnInit, AfterViewChecked { DATE_FORMAT: string = 'D-M-YYYY'; @@ -57,8 +57,12 @@ export class DateWidget extends TextFieldWidgetComponent implements OnInit { } this.datePicker = new mdDateTimePicker.default(settings); + } + + ngAfterViewChecked() { if (this.elementRef) { - this.datePicker.trigger = this.elementRef.nativeElement.querySelector('#dateInput'); + let dataLocator = '#' + this.field.id; + this.datePicker.trigger = this.elementRef.nativeElement.querySelector(dataLocator); } } @@ -72,6 +76,7 @@ export class DateWidget extends TextFieldWidgetComponent implements OnInit { onDateSelected() { let newValue = this.datePicker.time.format(this.DATE_FORMAT); this.field.value = newValue; + this.checkVisibility(this.field); if (this.elementRef) { this.setupMaterialTextField(this.elementRef, componentHandler, newValue); diff --git a/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.spec.ts b/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.spec.ts index c1fd593aaf..076b047b0d 100644 --- a/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.spec.ts +++ b/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.spec.ts @@ -31,7 +31,7 @@ import { FormModel, FormFieldModel, TabModel, ContainerModel } from '../componen declare let jasmine: any; -describe('WidgetVisibilityService (mockBackend)', () => { +describe('WidgetVisibilityService', () => { let service: WidgetVisibilityService; let booleanResult: boolean; let stubFormWithFields = new FormModel(fakeFormJson); @@ -389,6 +389,20 @@ describe('WidgetVisibilityService (mockBackend)', () => { expect(rightValue).toBe('100'); }); + it('should return formatted date when right value is a date', () => { + visibilityObjTest.rightValue = '9999-12-31'; + let rightValue = service.getRightValue(formTest, visibilityObjTest); + + expect(rightValue).toBe('9999-12-31T00:00:00.000Z'); + }); + + it('should return the value when right value is not a date', () => { + visibilityObjTest.rightValue = '9999-99-99'; + let rightValue = service.getRightValue(formTest, visibilityObjTest); + + expect(rightValue).toBe('9999-99-99'); + }); + it('should retrieve the value for the right field when it is a form variable', () => { visibilityObjTest.rightFormFieldId = 'RIGHT_FORM_FIELD_ID'; let rightValue = service.getRightValue(fakeFormWithField, visibilityObjTest); @@ -474,7 +488,7 @@ describe('WidgetVisibilityService (mockBackend)', () => { visibilityObjTest.operator = '!='; visibilityObjTest.rightFormFieldId = 'test_3'; let fakeFormField: FormFieldModel = new FormFieldModel(formTest, jsonFieldFake); - service.refreshFieldVisibility(fakeFormField); + service.refreshEntityVisibility(fakeFormField); expect(fakeFormField.isVisible).toBeFalsy(); }); @@ -488,13 +502,13 @@ describe('WidgetVisibilityService (mockBackend)', () => { expect(isVisible).toBeTruthy(); }); - it('should not change the isVisible if field does not have visibility condition', () => { + it('should return always true when field does not have a visibility condition', () => { jsonFieldFake.visibilityCondition = null; let fakeFormField: FormFieldModel = new FormFieldModel(fakeFormWithField, jsonFieldFake); fakeFormField.isVisible = false; - service.refreshFieldVisibility(fakeFormField); + service.refreshEntityVisibility(fakeFormField); - expect(fakeFormField.isVisible).toBeFalsy(); + expect(fakeFormField.isVisible).toBeTruthy(); }); it('should be able to retrieve the value of a form variable', () => { @@ -579,7 +593,7 @@ describe('WidgetVisibilityService (mockBackend)', () => { visibilityObjTest.operator = '=='; visibilityObjTest.rightFormFieldId = 'dropdown_LABEL'; let fakeFormField: FormFieldModel = new FormFieldModel(formTest, jsonFieldFake); - service.refreshFieldVisibility(fakeFormField); + service.refreshEntityVisibility(fakeFormField); expect(fakeFormField.isVisible).toBeTruthy(); }); @@ -589,7 +603,7 @@ describe('WidgetVisibilityService (mockBackend)', () => { visibilityObjTest.operator = '=='; visibilityObjTest.rightFormFieldId = 'dropdown'; let fakeFormField: FormFieldModel = new FormFieldModel(formTest, jsonFieldFake); - service.refreshFieldVisibility(fakeFormField); + service.refreshEntityVisibility(fakeFormField); expect(fakeFormField.isVisible).toBeTruthy(); }); @@ -633,7 +647,7 @@ describe('WidgetVisibilityService (mockBackend)', () => { visibilityObjTest.rightFormFieldId = 'RIGHT_FORM_FIELD_ID'; let tab = new TabModel(fakeFormWithField, {id: 'fake-tab-id', title: 'fake-tab-title', isVisible: true}); tab.visibilityCondition = visibilityObjTest; - service.refreshTabVisibility(tab); + service.refreshEntityVisibility(tab); expect(tab.isVisible).toBeFalsy(); }); @@ -664,7 +678,7 @@ describe('WidgetVisibilityService (mockBackend)', () => { isVisible: true }); contModel.visibilityCondition = visibilityObjTest; - service.refreshContainerVisibility(contModel); + service.refreshEntityVisibility(contModel); expect(contModel.isVisible).toBeFalsy(); }); diff --git a/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.ts b/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.ts index 6271654812..1b735ffa7e 100644 --- a/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.ts +++ b/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.ts @@ -35,37 +35,23 @@ export class WidgetVisibilityService { public refreshVisibility(form: FormModel) { if (form && form.tabs && form.tabs.length > 0) { - form.tabs.map(tabModel => this.refreshTabVisibility(tabModel)); + form.tabs.map(tabModel => this.refreshEntityVisibility(tabModel)); } if (form && form.fields.length > 0) { form.fields.map(contModel => { - this.refreshContainerVisibility(contModel); + this.refreshEntityVisibility(contModel); contModel.columns.map(contColModel => - contColModel.fields.map(field => this.refreshFieldVisibility(field))); + contColModel.fields.map(field => this.refreshEntityVisibility(field))); }); } } - refreshFieldVisibility(field: FormFieldModel) { - if (field.visibilityCondition) { - field.isVisible = this.evaluateVisibility(field.form, field.visibilityCondition); - } - } - - refreshContainerVisibility(content: ContainerModel) { - if (content.visibilityCondition) { - content.isVisible = this.evaluateVisibility(content.form, content.visibilityCondition); - } - } - - refreshTabVisibility(tab: TabModel) { - if (tab.visibilityCondition) { - tab.isVisible = this.evaluateVisibility(tab.form, tab.visibilityCondition); - } + refreshEntityVisibility(element: FormFieldModel | ContainerModel | TabModel) { + element.isVisible = this.evaluateVisibility(element.form, element.visibilityCondition); } evaluateVisibility(form: FormModel, visibilityObj: WidgetVisibilityModel): boolean { - let isLeftFieldPresent = visibilityObj.leftFormFieldId || visibilityObj.leftRestResponseId; + let isLeftFieldPresent = visibilityObj && ( visibilityObj.leftFormFieldId || visibilityObj.leftRestResponseId ); if (!isLeftFieldPresent || isLeftFieldPresent === 'null') { return true; } else { @@ -96,13 +82,17 @@ export class WidgetVisibilityService { } getRightValue(form: FormModel, visibilityObj: WidgetVisibilityModel) { - let valueFound = null; + let valueFound = ''; if (visibilityObj.rightRestResponseId) { valueFound = this.getVariableValue(form, visibilityObj.rightRestResponseId, this.processVarList); } else if (visibilityObj.rightFormFieldId) { valueFound = this.getFormValue(form, visibilityObj.rightFormFieldId); } else { - valueFound = visibilityObj.rightValue; + if (moment(visibilityObj.rightValue, 'YYYY-MM-DD', true).isValid()) { + valueFound = visibilityObj.rightValue + 'T00:00:00.000Z'; + } else { + valueFound = visibilityObj.rightValue; + } } return valueFound; } @@ -119,7 +109,7 @@ export class WidgetVisibilityService { } getFieldValue(valueList: any, fieldName: string) { - return fieldName ? valueList[fieldName] : fieldName; + return valueList[fieldName]; } getDropDownName(valueList: any, fieldName: string) {