[ACTIVITI-3746] - fix form completion with tab fields (#5059)

* [ACTIVITI-3746] - fix form completion with tab fields

* fix lint

* fix unit test

* refractoring and PR changes

* fix unit tests

lib/core/form/components/widgets/core/form-field.model.ts

@@ -129,7 +129,6 @@ export class FormFieldModel extends FormWidgetModel {
                 }
             }
         }
-
         this._isValid = true;
         return this._isValid;
     }

lib/core/form/services/widget-visibility.service.spec.ts

@@ -34,7 +34,8 @@ import { AlfrescoApiServiceMock } from '../../mock/alfresco-api.service.mock';
 import { fakeTaskProcessVariableModels,
         fakeFormJson, formTest,
         formValues, complexVisibilityJsonVisible,
-        complexVisibilityJsonNotVisible, tabVisibilityJsonMock } from 'core/mock/form/widget-visibility.service.mock';
+        complexVisibilityJsonNotVisible, tabVisibilityJsonMock,
+        tabInvalidFormVisibility } from 'core/mock/form/widget-visibility.service.mock';
 
 declare let jasmine: any;
 
@@ -932,10 +933,12 @@ describe('WidgetVisibilityService', () => {
         const fakeTabVisibilityModel = new FormModel(tabVisibilityJsonMock);
         const complexVisibilityModel = new FormModel(complexVisibilityJsonVisible);
         const complexVisibilityJsonNotVisibleModel = new FormModel(complexVisibilityJsonNotVisible);
+        let invalidTabVisibilityJsonModel: FormModel;
         let visibilityObjTest: WidgetVisibilityModel;
 
         beforeEach(() => {
             visibilityObjTest = new WidgetVisibilityModel();
+            invalidTabVisibilityJsonModel = new FormModel(tabInvalidFormVisibility);
             fakeFormWithVariables = new FormModel(fakeFormJson);
         });
 
@@ -1028,5 +1031,18 @@ describe('WidgetVisibilityService', () => {
             expect(fakeTabVisibilityModel.tabs[1].isVisible).toBeTruthy();
         });
 
+        it('form should be valid when a tab with invalid values is not visibile', () => {
+            invalidTabVisibilityJsonModel.getFieldById('Number1').value = 'invalidField';
+            invalidTabVisibilityJsonModel.getFieldById('Text1').value = 'showtab';
+
+            service.refreshVisibility(invalidTabVisibilityJsonModel);
+            invalidTabVisibilityJsonModel.validateForm();
+            expect(invalidTabVisibilityJsonModel.isValid).toBeFalsy();
+
+            invalidTabVisibilityJsonModel.getFieldById('Text1').value = 'hidetab';
+            service.refreshVisibility(invalidTabVisibilityJsonModel);
+            invalidTabVisibilityJsonModel.validateForm();
+            expect(invalidTabVisibilityJsonModel.isValid).toBeTruthy();
+        });
     });
 });

lib/core/form/services/widget-visibility.service.ts

@@ -20,7 +20,7 @@ import { LogService } from '../../services/log.service';
 import { Injectable } from '@angular/core';
 import moment from 'moment-es6';
 import { Observable, from, throwError } from 'rxjs';
-import { FormFieldModel, FormModel, TabModel } from '../components/widgets/core/index';
+import { FormFieldModel, FormModel, TabModel, ContainerModel } from '../components/widgets/core/index';
 import { TaskProcessVariableModel } from '../models/task-process-variable.model';
 import { WidgetVisibilityModel, WidgetTypeEnum } from '../models/widget-visibility.model';
 import { map, catchError } from 'rxjs/operators';
@@ -31,12 +31,14 @@ import { map, catchError } from 'rxjs/operators';
 export class WidgetVisibilityService {
 
     private processVarList: TaskProcessVariableModel[];
+    private form: FormModel;
 
     constructor(private apiService: AlfrescoApiService,
                 private logService: LogService) {
     }
 
     public refreshVisibility(form: FormModel) {
+        this.form = form;
         if (form && form.tabs && form.tabs.length > 0) {
             form.tabs.map((tabModel) => this.refreshEntityVisibility(tabModel));
         }
@@ -48,7 +50,7 @@ export class WidgetVisibilityService {
 
     refreshEntityVisibility(element: FormFieldModel | TabModel) {
         const visible = this.evaluateVisibility(element.form, element.visibilityCondition);
-        element.isVisible = visible;
+        element.isVisible = visible && this.isParentTabVisible(this.form, element);
     }
 
     evaluateVisibility(form: FormModel, visibilityObj: WidgetVisibilityModel): boolean {
@@ -164,6 +166,40 @@ export class WidgetVisibilityService {
         return fieldValue;
     }
 
+    isParentTabVisible(form: FormModel, currentFormField: FormFieldModel | TabModel): boolean {
+        const containers = this.getFormTabContainers(form);
+        let isVisible: boolean = true;
+        containers.map( (container: ContainerModel) => {
+            if ( !!this.getCurrentFieldFromTabById(container, currentFormField.id) ) {
+                const currentTab = form.tabs.find( (tab: TabModel) => tab.id === container.tab );
+                if (!!currentTab) {
+                    isVisible = currentTab.isVisible;
+                }
+            }
+        });
+        return isVisible;
+    }
+
+    private getCurrentFieldFromTabById(container: ContainerModel, fieldId: string): FormFieldModel {
+        const tabFields: FormFieldModel[][] = Object.keys(container.field.fields).map( key => container.field.fields[key]);
+        let currentField: FormFieldModel;
+
+        for (const tabField of tabFields) {
+            currentField = tabField.find( (tab: FormFieldModel) => tab.id === fieldId );
+            if (currentField) {
+                return currentField;
+            }
+        }
+        return null;
+    }
+
+    private getFormTabContainers(form: FormModel): ContainerModel[] {
+        if (!!form) {
+            return <ContainerModel[]> form.fields.filter(field => field.type === 'container' && field.tab);
+        }
+        return [];
+    }
+
     private getObjectValue(field: FormFieldModel, fieldId: string): string {
         let value = '';
         if (field.value && field.value.name) {

lib/core/mock/form/widget-visibility.service.mock.ts

@@ -999,3 +999,133 @@ export let tabVisibilityJsonMock = {
        'gridsterForm': false
     }
  };
+
+export const tabInvalidFormVisibility = {
+    'id': 'form-0668939d-34b2-440c-ab4d-01ab8b05a881',
+    'name': 'tab-visibility',
+    'description': '',
+    'version': 0,
+    'standAlone': true,
+    'tabs': [
+        {
+            'id': 'a8a4718d-5019-4852-9645-bba9b8253d86',
+            'title': 'tab1',
+            'visibilityCondition': {
+                'leftType': 'field',
+                'leftValue': 'Text1',
+                'operator': '==',
+                'rightValue': 'showtab',
+                'rightType': 'value',
+                'nextConditionOperator': '',
+                'nextCondition': null
+            }
+        },
+        {
+            'id': 'bb9033ca-55ef-432a-8120-bffc8a179ebb',
+            'title': 'tab2',
+            'visibilityCondition': null
+        }
+    ],
+    'formDefinition': {
+        'fields': [
+            {
+                'id': '093270a5-6e28-4cf0-a72a-09731c0d59fd',
+                'name': 'Label',
+                'type': 'container',
+                'tab': 'a8a4718d-5019-4852-9645-bba9b8253d86',
+                'numberOfColumns': 2,
+                'fields': {
+                    '1': [
+                        {
+                            'id': 'Number1',
+                            'name': 'Number1',
+                            'type': 'integer',
+                            'colspan': 1,
+                            'placeholder': null,
+                            'minValue': null,
+                            'maxValue': null,
+                            'required': false,
+                            'visibilityCondition': null,
+                            'params': {
+                                'existingColspan': 1,
+                                'maxColspan': 2
+                            }
+                        },
+                        {
+                            'id': 'Number2',
+                            'name': 'Number2',
+                            'type': 'integer',
+                            'colspan': 1,
+                            'placeholder': null,
+                            'minValue': null,
+                            'maxValue': null,
+                            'required': false,
+                            'visibilityCondition': {
+                                'leftType': 'field',
+                                'leftValue': 'Text2',
+                                'operator': '==',
+                                'rightValue': 'shownumber',
+                                'rightType': 'value',
+                                'nextConditionOperator': '',
+                                'nextCondition': null
+                            },
+                            'params': {
+                                'existingColspan': 1,
+                                'maxColspan': 2
+                            }
+                        }
+                    ],
+                    '2': [
+                        {
+                            'id': 'Text2',
+                            'name': 'Text2',
+                            'type': 'text',
+                            'required': false,
+                            'colspan': 1,
+                            'placeholder': null,
+                            'minLength': 0,
+                            'maxLength': 0,
+                            'regexPattern': null,
+                            'visibilityCondition': null,
+                            'params': {
+                                'existingColspan': 1,
+                                'maxColspan': 2
+                            }
+                        }
+                    ]
+                }
+            },
+            {
+                'id': 'c33579eb-3514-42cc-832d-2998d06a3eab',
+                'name': 'Label',
+                'type': 'container',
+                'tab': 'bb9033ca-55ef-432a-8120-bffc8a179ebb',
+                'numberOfColumns': 2,
+                'fields': {
+                    '1': [
+                        {
+                            'id': 'Text1',
+                            'name': 'Text1',
+                            'type': 'text',
+                            'required': false,
+                            'colspan': 1,
+                            'placeholder': null,
+                            'minLength': 0,
+                            'maxLength': 0,
+                            'regexPattern': null,
+                            'visibilityCondition': null,
+                            'params': {
+                                'existingColspan': 1,
+                                'maxColspan': 2
+                            }
+                        }
+                    ],
+                    '2': []
+                }
+            }
+        ],
+        'outcomes': [],
+        'metadata': {},
+        'variables': []
+    }
+};