Merge pull request #920 from Alfresco/dev-valbano-896

Fix Visibility check for equal dates

ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.html

@@ -1,16 +1,15 @@
-<div class="mdl-grid">
+<div class="mdl-grid" *ngIf="field?.isVisible" id="data-widget">
     <div class="mdl-cell mdl-cell--11-col">
         <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label date-widget"
-            [class.date-widget__invalid]="!field.isValid">
-            <input id="dateInput"
-                class="mdl-textfield__input"
-                type="text"
-                [attr.id]="field.id"
-                [attr.required]="isRequired()"
-                [(ngModel)]="field.value"
-                (ngModelChange)="onDateChanged()"
-                (onOk)="onDateSelected()"
-                [disabled]="field.readOnly">
+             [class.date-widget__invalid]="!field.isValid">
+            <input class="mdl-textfield__input"
+                   type="text"
+                   [attr.id]="field.id"
+                   [attr.required]="isRequired()"
+                   [(ngModel)]="field.value"
+                   (ngModelChange)="onDateChanged()"
+                   (onOk)="onDateSelected()"
+                   [disabled]="field.readOnly">
             <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}} (d-M-yyyy)</label>
             <span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
         </div>
@@ -23,3 +22,4 @@
         </button>
     </div>
 </div>
+

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<DateWidget>;
+        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);
+        }));
+    });
 });

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

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

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) {