diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.html index d111f90745..877fb95363 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.html +++ b/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.html @@ -1,6 +1,6 @@
-
-

+

- {{content.name}} + {{content.name}}

diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.spec.ts index 4dc6894b77..5ae4d65192 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.spec.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.spec.ts @@ -20,13 +20,17 @@ import { FormModel } from './../core/form.model'; import { ContainerModel } from './../core/container.model'; import { FormFieldTypes } from './../core/form-field-types'; import { FormFieldModel } from './../core/form-field.model'; +import { ComponentFixture, TestBed, async } from '@angular/core/testing'; +import { CoreModule } from 'ng2-alfresco-core'; +import { WIDGET_DIRECTIVES } from '../index'; +import { fakeFormJson } from '../../../services/assets/widget-visibility.service.mock'; describe('ContainerWidget', () => { let componentHandler; beforeEach(() => { - componentHandler = jasmine.createSpyObj('componentHandler', [ + componentHandler = jasmine.createSpyObj('componentHandler', [ 'upgradeAllRegistered' ]); @@ -49,7 +53,7 @@ describe('ContainerWidget', () => { it('should toggle underlying group container', () => { let container = new ContainerModel(new FormModel(), { - type: FormFieldTypes.GROUP, + type: FormFieldTypes.GROUP, params: { allowCollapse: true } @@ -67,7 +71,7 @@ describe('ContainerWidget', () => { it('should toggle only collapsible container', () => { let container = new ContainerModel(new FormModel(), { - type: FormFieldTypes.GROUP + type: FormFieldTypes.GROUP }); let widget = new ContainerWidget(); @@ -80,7 +84,7 @@ describe('ContainerWidget', () => { it('should toggle only group container', () => { let container = new ContainerModel(new FormModel(), { - type: FormFieldTypes.CONTAINER, + type: FormFieldTypes.CONTAINER, params: { allowCollapse: true } @@ -108,4 +112,100 @@ describe('ContainerWidget', () => { widget.fieldChanged(fakeField); }); + describe('when template is ready', () => { + let containerWidgetComponent: ContainerWidget; + let fixture: ComponentFixture; + let element: HTMLElement; + let fakeContainerVisible: ContainerModel; + let fakeContainerInvisible: ContainerModel; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [CoreModule], + declarations: [WIDGET_DIRECTIVES] + }).compileComponents().then(() => { + fixture = TestBed.createComponent(ContainerWidget); + containerWidgetComponent = fixture.componentInstance; + element = fixture.nativeElement; + }); + })); + + beforeEach(() => { + componentHandler = jasmine.createSpyObj('componentHandler', ['upgradeAllRegistered', 'upgradeElement']); + window['componentHandler'] = componentHandler; + fakeContainerVisible = new ContainerModel(new FormModel(fakeFormJson), { + fieldType: FormFieldTypes.GROUP, + id: 'fake-cont-id-1', + name: 'fake-cont-1-name', + type: FormFieldTypes.GROUP + }); + fakeContainerInvisible = new ContainerModel(new FormModel(fakeFormJson), { + fieldType: FormFieldTypes.GROUP, + id: 'fake-cont-id-2', + name: 'fake-cont-2-name', + type: FormFieldTypes.GROUP + }); + fakeContainerVisible.isVisible = true; + fakeContainerInvisible.isVisible = false; + }); + + afterEach(() => { + fixture.destroy(); + TestBed.resetTestingModule(); + }); + + it('should show the container header when it is visible', () => { + containerWidgetComponent.content = fakeContainerVisible; + fixture.detectChanges(); + fixture.whenStable() + .then(() => { + expect(element.querySelector('#container-header')).toBeDefined(); + expect(element.querySelector('#container-header')).not.toBeNull(); + expect(element.querySelector('#container-header-label')).toBeDefined(); + expect(element.querySelector('#container-header-label').innerHTML).toContain('fake-cont-1-name'); + }); + }); + + it('should not show the container header when it is not visible', () => { + containerWidgetComponent.content = fakeContainerInvisible; + fixture.detectChanges(); + fixture.whenStable() + .then(() => { + expect(element.querySelector('#container-header')).toBeNull(); + expect(element.querySelector('#container-header-label')).toBeNull(); + }); + }); + + it('should hide header when it becomes not visible', () => { + containerWidgetComponent.content = fakeContainerVisible; + containerWidgetComponent.fieldChanged(null); + containerWidgetComponent.formValueChanged.subscribe((res) => { + containerWidgetComponent.content.isVisible = false; + fixture.detectChanges(); + fixture.whenStable() + .then(() => { + expect(element.querySelector('#container-header')).toBeNull(); + expect(element.querySelector('#container-header-label')).toBeNull(); + }); + }); + }); + + it('should show header when it becomes visible', () => { + containerWidgetComponent.content = fakeContainerInvisible; + containerWidgetComponent.fieldChanged(null); + containerWidgetComponent.formValueChanged.subscribe((res) => { + containerWidgetComponent.content.isVisible = true; + fixture.detectChanges(); + fixture.whenStable() + .then(() => { + expect(element.querySelector('#container-header')).toBeDefined(); + expect(element.querySelector('#container-header')).not.toBeNull(); + expect(element.querySelector('#container-header-label')).toBeDefined(); + expect(element.querySelector('#container-header-label').innerHTML).toContain('fake-cont-2-name'); + }); + }); + }); + + }); + }); diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/core/container.model.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/core/container.model.spec.ts index 6ec17b8db5..643929b392 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/core/container.model.spec.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/core/container.model.spec.ts @@ -51,7 +51,8 @@ describe('ContainerModel', () => { type: '', tab: '', numberOfColumns: 2, - params: {} + params: {}, + visibilityCondition: {} }; let container = new ContainerModel(null, json); Object.keys(json).forEach(key => { @@ -69,6 +70,7 @@ describe('ContainerModel', () => { tab: '', numberOfColumns: 3, params: {}, + visibilityCondition: {}, fields: { '1': [ { id: 'field-1' }, diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/core/container.model.ts b/ng2-components/ng2-activiti-form/src/components/widgets/core/container.model.ts index dfeaf231b9..bf6af192f4 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/core/container.model.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/core/container.model.ts @@ -21,6 +21,7 @@ import { ContainerColumnModel } from './container-column.model'; import { FormFieldTypes } from './form-field-types'; import { FormModel } from './form.model'; import { FormFieldModel } from './form-field.model'; +import { WidgetVisibilityModel } from '../../../models/widget-visibility.model'; // TODO: inherit FormFieldModel export class ContainerModel extends FormWidgetModel { @@ -32,6 +33,8 @@ export class ContainerModel extends FormWidgetModel { tab: string; numberOfColumns: number = 1; params: FormFieldMetadata = {}; + isVisible: boolean = true; + visibilityCondition: WidgetVisibilityModel = null; columns: ContainerColumnModel[] = []; isExpanded: boolean = true; @@ -71,6 +74,7 @@ export class ContainerModel extends FormWidgetModel { this.tab = json.tab; this.numberOfColumns = json.numberOfColumns; this.params = json.params || {}; + this.visibilityCondition = json.visibilityCondition; let columnSize: number = 12; if (this.numberOfColumns > 1) { 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 0bbda4882c..c1fd593aaf 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, TabModel } from '../components/widgets/core/index'; +import { FormModel, FormFieldModel, TabModel, ContainerModel } from '../components/widgets/core/index'; declare let jasmine: any; @@ -637,5 +637,36 @@ describe('WidgetVisibilityService (mockBackend)', () => { expect(tab.isVisible).toBeFalsy(); }); + + it('should refresh the visibility for container in forms', () => { + visibilityObjTest.leftFormFieldId = 'FIELD_TEST'; + visibilityObjTest.operator = '!='; + visibilityObjTest.rightFormFieldId = 'RIGHT_FORM_FIELD_ID'; + let contModel = new ContainerModel(fakeFormWithField, { + id: 'fake-container-id', + name: 'fake-container-name', + isVisible: true + }); + contModel.visibilityCondition = visibilityObjTest; + fakeFormWithField.fields[0].visibilityCondition = visibilityObjTest; + service.refreshVisibility(fakeFormWithField); + + expect(fakeFormWithField.fields[0].isVisible).toBeFalsy(); + }); + + it('should refresh the visibility for single container', () => { + visibilityObjTest.leftFormFieldId = 'FIELD_TEST'; + visibilityObjTest.operator = '!='; + visibilityObjTest.rightFormFieldId = 'RIGHT_FORM_FIELD_ID'; + let contModel = new ContainerModel(fakeFormWithField, { + id: 'fake-container-id', + name: 'fake-container-name', + isVisible: true + }); + contModel.visibilityCondition = visibilityObjTest; + service.refreshContainerVisibility(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 4a75da4613..6271654812 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 @@ -19,7 +19,7 @@ import { Injectable } from '@angular/core'; import { Response, Http, Headers, RequestOptions } from '@angular/http'; import { Observable } from 'rxjs/Rx'; import { AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core'; -import { FormModel, FormFieldModel, TabModel } from '../components/widgets/core/index'; +import { FormModel, FormFieldModel, TabModel, ContainerModel } from '../components/widgets/core/index'; import { WidgetVisibilityModel } from '../models/widget-visibility.model'; import { TaskProcessVariableModel } from '../models/task-process-variable.model'; @@ -38,9 +38,11 @@ export class WidgetVisibilityService { form.tabs.map(tabModel => this.refreshTabVisibility(tabModel)); } if (form && form.fields.length > 0) { - form.fields.map(contModel => + form.fields.map(contModel => { + this.refreshContainerVisibility(contModel); contModel.columns.map(contColModel => - contColModel.fields.map(field => this.refreshFieldVisibility(field)))); + contColModel.fields.map(field => this.refreshFieldVisibility(field))); + }); } } @@ -50,6 +52,12 @@ export class WidgetVisibilityService { } } + 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); @@ -81,8 +89,10 @@ export class WidgetVisibilityService { } getLeftValue(form: FormModel, visibilityObj: WidgetVisibilityModel) { - return this.getVariableValue(form, visibilityObj.leftRestResponseId, this.processVarList) || - this.getFormValue(form, visibilityObj.leftFormFieldId); + if (visibilityObj.leftRestResponseId && visibilityObj.leftRestResponseId !== 'null') { + return this.getVariableValue(form, visibilityObj.leftRestResponseId, this.processVarList); + } + return this.getFormValue(form, visibilityObj.leftFormFieldId); } getRightValue(form: FormModel, visibilityObj: WidgetVisibilityModel) {