diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/core/tab.model.ts b/ng2-components/ng2-activiti-form/src/components/widgets/core/tab.model.ts index ed5db944d2..ccc0df7466 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/core/tab.model.ts +++ b/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 = json.visibilityCondition; } } } diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.html index f79783472b..4d9d3e7680 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.html +++ b/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.html @@ -1,13 +1,14 @@
- {{tab.title}}
-
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.spec.ts index 509e47dc63..4a253835fa 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.spec.ts +++ b/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 { FormFieldModel } from './../core/form-field.model'; +import { TabModel } from '../core/tab.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; + 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(); + }); + }); + }); + + }); }); diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.ts index 7472231fb6..9110beb9ef 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.ts +++ b/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 = new EventEmitter(); + 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 ) { - this.formTabChanged.emit(field); + tabChanged(field: FormFieldModel) { + this.formTabChanged.emit(field); } } 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 a1f4c6fe57..0bbda4882c 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 @@ -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(); + }); }); }); 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 8b3a632dab..4a75da4613 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 @@ -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.getFormValue(form, visibilityObj.leftFormFieldId); + return this.getVariableValue(form, visibilityObj.leftRestResponseId, this.processVarList) || + this.getFormValue(form, visibilityObj.leftFormFieldId); } getRightValue(form: FormModel, visibilityObj: WidgetVisibilityModel) {