#1251 #1266 fix form visibility and performance

demo-shell-ng2/package.json

@@ -5,7 +5,7 @@
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "clean": "npm install rimraf && npm run clean-build  && rimraf dist node_modules typings dist",
-    "start": "npm run server-versions && webpack-dev-server --inline --progress --port 3000",
+    "start": "npm run server-versions && webpack-dev-server --inline --progress --port 3000 --max_old_space_size=4096 --max_new_space_size=4096",
     "start:dist": "wsrv -s dist/ -p 3000 -a 0.0.0.0",
     "clean-build": "rimraf 'app/{,**/}**.js' 'app/{,**/}**.js.map' 'app/{,**/}**.d.ts'",
     "test": "karma start",

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

@@ -1,5 +1,5 @@
 <div class="container-widget">
-    <div *ngIf="content?.isGroup() && content?.isVisible" class="container-widget__header">
+    <div [ngClass]="{'hidden':!(content?.isGroup() && content?.isVisible)}" class="container-widget__header">
         <h4 class="container-widget__header-text" id="container-header"
             [class.collapsible]="content?.isCollapsible()">
             <button *ngIf="content?.isCollapsible()"
@@ -11,7 +11,7 @@
             <span (click)="onExpanderClicked()" id="container-header-label">{{content.name}}</span>
         </h4>
     </div>
-    <div class="mdl-grid" *ngIf="content?.isVisible && content?.isExpanded">
+    <div class="mdl-grid" [ngClass]="{'hidden':!(content?.isVisible && content?.isExpanded)}">
         <div *ngFor="let col of content.columns" class="mdl-cell mdl-cell--{{col.size}}-col">
             <div class="mdl-grid" *ngIf="col.hasFields()">
                 <div *ngFor="let field of col.fields" class="mdl-cell mdl-cell--12-col">

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

@@ -169,8 +169,7 @@ describe('ContainerWidget', () => {
             fixture.detectChanges();
             fixture.whenStable()
                 .then(() => {
-                    expect(element.querySelector('#container-header')).toBeDefined();
+                    expect(element.querySelector('.container-widget__header').classList.contains('hidden')).toBe(false);
-                    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');
                 });
@@ -181,8 +180,7 @@ describe('ContainerWidget', () => {
             fixture.detectChanges();
             fixture.whenStable()
                 .then(() => {
-                    expect(element.querySelector('#container-header')).toBeNull();
+                    expect(element.querySelector('.container-widget__header').classList.contains('hidden')).toBe(true);
-                    expect(element.querySelector('#container-header-label')).toBeNull();
                 });
         });
 
@@ -194,8 +192,7 @@ describe('ContainerWidget', () => {
                 fixture.detectChanges();
                 fixture.whenStable()
                     .then(() => {
-                        expect(element.querySelector('#container-header')).toBeNull();
+                        expect(element.querySelector('.container-widget__header').classList.contains('hidden')).toBe(true);
-                        expect(element.querySelector('#container-header-label')).toBeNull();
                     });
             });
             containerWidgetComponent.onFieldChanged(null);

ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.html

@@ -1,6 +1,6 @@
-<div [ngSwitch]="fieldType" class="display-value-widget">
+<div [ngSwitch]="fieldType" class="display-value-widget" *ngIf="field?.isVisible">
     <div *ngSwitchCase="'boolean'">
-        <label class="mdl-checkbox mdl-js-checkbox" [attr.for]="field.id" *ngIf="field?.isVisible">
+        <label class="mdl-checkbox mdl-js-checkbox" [attr.for]="field.id" >
             <input type="checkbox"
                    [attr.id]="field.id"
                    [checked]="field.value"
@@ -12,9 +12,8 @@
     </div>
     <div *ngSwitchCase="'text'"
          class="mdl-textfield mdl-js-textfield text-widget">
-        <label *ngIf="field?.isVisible" [attr.for]="field.id">{{field.name}}</label>
+        <label [attr.for]="field.id">{{field.name}}</label>
         <input
-            *ngIf="field?.isVisible"
             class="mdl-textfield__input"
             type="text"
             [attr.id]="field.id"
@@ -28,13 +27,12 @@
                   rows="3"
                   [value]="value"
                   [attr.id]="field.id"
-                  disabled
+                  disabled>
-                  *ngIf="field?.isVisible">
         </textarea>
-        <label *ngIf="field?.isVisible" class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
+        <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
     </div>
     <div *ngSwitchCase="'hyperlink'" class="hyperlink-widget">
-        <div *ngIf="field?.isVisible">
+        <div>
             <div>
                 <span>{{field.name}}</span>
             </div>
@@ -45,7 +43,7 @@
     </div>
     <div *ngSwitchCase="'dynamic-table'">
 
-        <div class="display-value-widget__dynamic-table" *ngIf="field?.isVisible">
+        <div class="display-value-widget__dynamic-table">
             <div>{{field.name}}</div>
             <div class="display-value-dynamic-table-widget__table-container">
                 <table class="mdl-data-table mdl-js-data-table">
@@ -70,7 +68,7 @@
         </div>
     </div>
     <div *ngSwitchCase="'upload'">
-        <div class="upload-widget" *ngIf="field?.isVisible">
+        <div class="upload-widget">
             <div>
                 <label class="upload-widget__label" [attr.for]="field.id">{{field.name}}</label>
             </div>
@@ -85,9 +83,8 @@
     </div>
     <div *ngSwitchDefault
          class="mdl-textfield mdl-js-textfield text-widget is-disabled is-dirty is-upgraded">
-        <label *ngIf="field?.isVisible" [attr.for]="field.id">{{field.name}}</label>
+        <label [attr.for]="field.id">{{field.name}}</label>
         <input
-            *ngIf="field?.isVisible"
             class="mdl-textfield__input"
             type="text"
             [attr.id]="field.id"

ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, AfterViewChecked } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { WidgetComponent } from './../widget.component';
 import { FormFieldTypes } from '../core/form-field-types';
 import { FormService } from '../../../services/form.service';
@@ -31,7 +31,7 @@ import * as moment from 'moment';
     templateUrl: './display-value.widget.html',
     styleUrls: ['./display-value.widget.css']
 })
-export class DisplayValueWidget extends WidgetComponent implements OnInit, AfterViewChecked {
+export class DisplayValueWidget extends WidgetComponent implements OnInit {
 
     value: any;
     fieldType: string;
@@ -139,13 +139,10 @@ export class DisplayValueWidget extends WidgetComponent implements OnInit, After
                     }
                 }
             }
+            this.visibilityService.refreshVisibility(this.field.form);
         }
     }
 
-    ngAfterViewChecked() {
-        this.visibilityService.refreshVisibility(this.field.form);
-    }
-
     loadRadioButtonValue() {
         let options = this.field.options || [];
         let toSelect = options.find(item => item.id === this.field.value);