Merge pull request #910 from Alfresco/dev-valbano-839

Dev valbano 839

ng2-components/ng2-activiti-form/src/components/widgets/core/tab.model.ts

@@ -18,13 +18,14 @@
 import { FormWidgetModel } from './form-widget.model';
 import { ContainerModel } from './container.model';
 import { FormModel } from './form.model';
+import { WidgetVisibilityModel } from '../../../models/widget-visibility.model';
 
 export class TabModel extends FormWidgetModel {
 
     id: string;
     title: string;
     isVisible: boolean = true;
-    visibilityCondition: any;
+    visibilityCondition: WidgetVisibilityModel;
 
     fields: ContainerModel[] = [];
 
@@ -38,7 +39,7 @@ export class TabModel extends FormWidgetModel {
         if (json) {
             this.id = json.id;
             this.title = json.title;
-            this.visibilityCondition = json.visibilityCondition;
+            this.visibilityCondition = <WidgetVisibilityModel> json.visibilityCondition;
         }
     }
 }

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

@@ -1,13 +1,14 @@
 <div *ngIf="hasTabs()" class="alfresco-tabs-widget">
     <div alfresco-mdl-tabs>
         <div class="mdl-tabs__tab-bar">
-            <a *ngFor="let tab of tabs; let isFirst = first"
+            <a *ngFor="let tab of visibleTabs; let isFirst = first"
+               id="title-{{tab.id}}"
                [href]="'#' + tab.id"
                class="mdl-tabs__tab" [class.is-active]="isFirst">
                 {{tab.title}}
             </a>
         </div>
-        <div *ngFor="let tab of tabs; let isFirst = first"
+        <div *ngFor="let tab of visibleTabs; let isFirst = first"
              class="mdl-tabs__panel"
              [class.is-active]="isFirst"
              [attr.id]="tab.id">

ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.spec.ts

@@ -15,9 +15,14 @@
  * limitations under the License.
  */
 
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { FormModel } from '../core/form.model';
+import { FormFieldModel } from '../core/form-field.model';
+import { fakeFormJson } from '../../../services/assets/widget-visibility.service.mock';
 import { TabsWidget } from './tabs.widget';
-import { TabModel } from './../core/tab.model';
+import { TabModel } from '../core/tab.model';
-import { FormFieldModel } from './../core/form-field.model';
+import { WIDGET_DIRECTIVES } from '../index';
+import { CoreModule } from 'ng2-alfresco-core';
 
 describe('TabsWidget', () => {
 
@@ -66,4 +71,104 @@ describe('TabsWidget', () => {
         widget.tabChanged(field);
     });
 
+    it('should remove invisible tabs', () => {
+        let fakeTab = new TabModel(null, {id: 'fake-tab-id', title: 'fake-tab-title'});
+        fakeTab.isVisible = false;
+        widget.tabs.push(fakeTab);
+        widget.ngAfterContentChecked();
+
+        expect(widget.visibleTabs.length).toBe(0);
+    });
+
+    it('should leave visible tabs', () => {
+        let fakeTab = new TabModel(null, {id: 'fake-tab-id', title: 'fake-tab-title'});
+        fakeTab.isVisible = true;
+        widget.tabs.push(fakeTab);
+        widget.ngAfterContentChecked();
+
+        expect(widget.visibleTabs.length).toBe(1);
+        expect(widget.visibleTabs[0].id).toBe('fake-tab-id');
+        expect(widget.visibleTabs[0].title).toBe('fake-tab-title');
+        expect(widget.visibleTabs[0].isVisible).toBeTruthy();
+    });
+
+    describe('when template is ready', () => {
+        let tabWidgetComponent: TabsWidget;
+        let fixture: ComponentFixture<TabsWidget>;
+        let element: HTMLElement;
+        let fakeTabVisible: TabModel;
+        let fakeTabInvisible: TabModel;
+
+        beforeEach(async(() => {
+            TestBed.configureTestingModule({
+                imports: [CoreModule],
+                declarations: [WIDGET_DIRECTIVES]
+            }).compileComponents().then(() => {
+                fixture = TestBed.createComponent(TabsWidget);
+                tabWidgetComponent = fixture.componentInstance;
+                element = fixture.nativeElement;
+            });
+        }));
+
+        beforeEach(() => {
+            componentHandler = jasmine.createSpyObj('componentHandler', ['upgradeAllRegistered', 'upgradeElement']);
+            window['componentHandler'] = componentHandler;
+            fakeTabVisible = new TabModel(new FormModel(fakeFormJson), {
+                id: 'tab-id-visible',
+                title: 'tab-title-visible'
+            });
+            fakeTabVisible.isVisible = true;
+            fakeTabInvisible = new TabModel(new FormModel(fakeFormJson), {
+                id: 'tab-id-invisible',
+                title: 'tab-title-invisible'
+            });
+            fakeTabInvisible.isVisible = false;
+            tabWidgetComponent.tabs.push(fakeTabVisible);
+            tabWidgetComponent.tabs.push(fakeTabInvisible);
+        });
+
+        afterEach(() => {
+            fixture.destroy();
+            TestBed.resetTestingModule();
+        });
+
+        it('should show only visible tabs', () => {
+            fixture.detectChanges();
+            fixture.whenStable()
+                .then(() => {
+                    expect(element.querySelector('#tab-id-visible')).toBeDefined();
+                    expect(element.querySelector('#tab-id-visible')).not.toBeNull();
+                    expect(element.querySelector('#tab-id-invisible')).toBeNull();
+                    expect(element.querySelector('#title-tab-id-visible')).toBeDefined();
+                    expect(element.querySelector('#title-tab-id-visible').innerHTML).toContain('tab-title-visible');
+                });
+        });
+
+        it('should show tab when it became visible', () => {
+            tabWidgetComponent.tabChanged(null);
+            tabWidgetComponent.formTabChanged.subscribe((res) => {
+                tabWidgetComponent.tabs[1].isVisible = true;
+                fixture.detectChanges();
+                fixture.whenStable()
+                    .then(() => {
+                        expect(element.querySelector('#tab-id-invisible')).not.toBeNull();
+                        expect(element.querySelector('#title-tab-id-invisible').innerHTML).toContain('tab-title-invisible');
+                    });
+            });
+        });
+
+        it('should hide tab when it became not visible', () => {
+            tabWidgetComponent.tabChanged(null);
+            tabWidgetComponent.formTabChanged.subscribe((res) => {
+                tabWidgetComponent.tabs[0].isVisible = false;
+                fixture.detectChanges();
+                fixture.whenStable()
+                    .then(() => {
+                        expect(element.querySelector('#tab-id-visible')).toBeNull();
+                        expect(element.querySelector('#title-tab-id-visible')).toBeNull();
+                    });
+            });
+        });
+
+    });
 });

ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Input, AfterViewInit, EventEmitter, Output } from '@angular/core';
+import { Component, Input, AfterViewInit, AfterContentChecked, EventEmitter, Output } from '@angular/core';
 import { TabModel, FormFieldModel } from './../core/index';
 
 @Component({
@@ -23,7 +23,7 @@ import { TabModel, FormFieldModel } from './../core/index';
     selector: 'tabs-widget',
     templateUrl: './tabs.widget.html'
 })
-export class TabsWidget implements AfterViewInit {
+export class TabsWidget implements AfterContentChecked, AfterViewInit {
 
     @Input()
     tabs: TabModel[] = [];
@@ -31,14 +31,26 @@ export class TabsWidget implements AfterViewInit {
     @Output()
     formTabChanged: EventEmitter<FormFieldModel> = new EventEmitter<FormFieldModel>();
 
+    visibleTabs: TabModel[] = [];
+
     hasTabs() {
         return this.tabs && this.tabs.length > 0;
     }
 
+    ngAfterContentChecked() {
+        this.filterVisibleTabs();
+    }
+
     ngAfterViewInit() {
         this.setupMaterialComponents();
     }
 
+    filterVisibleTabs() {
+        this.visibleTabs = this.tabs.filter(tab => {
+            return tab.isVisible;
+        });
+    }
+
     setupMaterialComponents(): boolean {
         // workaround for MDL issues with dynamic components
         if (componentHandler) {
@@ -48,8 +60,8 @@ export class TabsWidget implements AfterViewInit {
         return false;
     }
 
-    tabChanged( field: FormFieldModel ) {
+    tabChanged(field: FormFieldModel) {
-         this.formTabChanged.emit(field);
+        this.formTabChanged.emit(field);
     }
 
 }

ng2-components/ng2-activiti-form/src/services/widget-visibility.service.spec.ts

@@ -27,7 +27,7 @@ import { WidgetVisibilityService } from './widget-visibility.service';
 import { AlfrescoSettingsService, AlfrescoAuthenticationService, AlfrescoApiService } from 'ng2-alfresco-core';
 import { TaskProcessVariableModel } from '../models/task-process-variable.model';
 import { WidgetVisibilityModel } from '../models/widget-visibility.model';
-import { FormModel, FormFieldModel } from '../components/widgets/core/index';
+import { FormModel, FormFieldModel, TabModel } from '../components/widgets/core/index';
 
 declare let jasmine: any;
 
@@ -320,6 +320,17 @@ describe('WidgetVisibilityService (mockBackend)', () => {
                 responseText: fakeTaskProcessVariableModels
             });
         });
+
+        it('should catch error on 403 response', (done) => {
+            service.getTaskProcessVariable('9999').subscribe(() => {
+            }, () => {
+                done();
+            });
+
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 403
+            });
+        });
     });
 
     describe('should return the value of the field', () => {
@@ -591,24 +602,6 @@ describe('WidgetVisibilityService (mockBackend)', () => {
             expect(res).toBe('value_1');
         });
 
-        it('should not refresh visibility if the form is undefined', () => {
-            spyOn(service, 'refreshFieldVisibility');
-            spyOn(service, 'refreshTabVisibility');
-            service.refreshVisibility(undefined);
-
-            expect(service.refreshFieldVisibility).not.toHaveBeenCalled();
-            expect(service.refreshTabVisibility).not.toHaveBeenCalled();
-        });
-
-        it('should not refresh visibility if the form does not have fields or tabs', () => {
-            spyOn(service, 'refreshFieldVisibility');
-            spyOn(service, 'refreshTabVisibility');
-            service.refreshVisibility(formTest);
-
-            expect(service.refreshFieldVisibility).not.toHaveBeenCalled();
-            expect(service.refreshTabVisibility).not.toHaveBeenCalled();
-        });
-
         it('should refresh the visibility for field', () => {
             visibilityObjTest.leftFormFieldId = 'FIELD_TEST';
             visibilityObjTest.operator = '!=';
@@ -621,5 +614,28 @@ describe('WidgetVisibilityService (mockBackend)', () => {
             expect(fakeFormWithField.fields[0].columns[0].fields[2].isVisible).toBeTruthy();
             expect(fakeFormWithField.fields[0].columns[1].fields[0].isVisible).toBeTruthy();
         });
+
+        it('should refresh the visibility for tab in forms', () => {
+            visibilityObjTest.leftFormFieldId = 'FIELD_TEST';
+            visibilityObjTest.operator = '!=';
+            visibilityObjTest.rightFormFieldId = 'RIGHT_FORM_FIELD_ID';
+            let tab = new TabModel(fakeFormWithField, {id: 'fake-tab-id', title: 'fake-tab-title', isVisible: true});
+            tab.visibilityCondition = visibilityObjTest;
+            fakeFormWithField.tabs.push(tab);
+            service.refreshVisibility(fakeFormWithField);
+
+            expect(fakeFormWithField.tabs[0].isVisible).toBeFalsy();
+        });
+
+        it('should refresh the visibility for single tab', () => {
+            visibilityObjTest.leftFormFieldId = 'FIELD_TEST';
+            visibilityObjTest.operator = '!=';
+            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);
+
+            expect(tab.isVisible).toBeFalsy();
+        });
     });
 });

ng2-components/ng2-activiti-form/src/services/widget-visibility.service.ts

@@ -81,10 +81,8 @@ export class WidgetVisibilityService {
     }
 
     getLeftValue(form: FormModel, visibilityObj: WidgetVisibilityModel) {
-        if (visibilityObj.leftRestResponseId) {
+        return this.getVariableValue(form, visibilityObj.leftRestResponseId, this.processVarList) ||
-            return this.getVariableValue(form, visibilityObj.leftRestResponseId, this.processVarList);
+            this.getFormValue(form, visibilityObj.leftFormFieldId);
-        }
-        return this.getFormValue(form, visibilityObj.leftFormFieldId);
     }
 
     getRightValue(form: FormModel, visibilityObj: WidgetVisibilityModel) {