[ADF-2589] conditional visibility for DL/DT components (#3223)

* watch data columns and update layout if needed

* update docs

* support DataTable, docs and tests

lib/content-services/document-list/components/document-list.component.spec.ts

@@ -15,9 +15,9 @@
  * limitations under the License.
  */
 
-import { CUSTOM_ELEMENTS_SCHEMA, SimpleChange, TemplateRef } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { AlfrescoApiService } from '@alfresco/adf-core';
+import { CUSTOM_ELEMENTS_SCHEMA, SimpleChange, TemplateRef, QueryList } from '@angular/core';
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { AlfrescoApiService, DataColumnListComponent, DataColumnComponent } from '@alfresco/adf-core';
 import { DataColumn, DataTableComponent } from '@alfresco/adf-core';
 import { Observable } from 'rxjs/Observable';
 import { Subject } from 'rxjs/Subject';
@@ -74,6 +74,24 @@ describe('DocumentList', () => {
         fixture.destroy();
     });
 
+    it('should update schema if columns change', fakeAsync(() => {
+
+        documentList.ngOnInit();
+
+        documentList.columnList = new DataColumnListComponent();
+        documentList.columnList.columns = new QueryList<DataColumnComponent>();
+
+        spyOn(documentList.data, 'setColumns').and.callThrough();
+
+        documentList.ngAfterContentInit();
+        documentList.columnList.columns.reset([new DataColumnComponent()]);
+        documentList.columnList.columns.notifyOnChanges();
+
+        tick(100);
+
+        expect(documentList.data.setColumns).toHaveBeenCalled();
+    }));
+
     it('should setup default columns', () => {
         fixture.detectChanges();
         documentList.ngAfterContentInit();

lib/content-services/document-list/components/document-list.component.ts

@@ -231,8 +231,7 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
 
     private _pagination: BehaviorSubject<PaginationModel>;
     private layoutPresets = {};
-
-    private contextActionHandlerSubscription: Subscription;
+    private subscriptions: Subscription[] = [];
 
     constructor(private documentListService: DocumentListService,
                 private ngZone: NgZone,
@@ -342,12 +341,25 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
             this.data.setImageResolver(this.imageResolver);
         }
 
-        this.contextActionHandlerSubscription = this.contextActionHandler.subscribe(val => this.contextActionCallback(val));
+        this.subscriptions.push(
+            this.contextActionHandler.subscribe(val => this.contextActionCallback(val))
+        );
 
         this.enforceSingleClickNavigationForMobile();
     }
 
     ngAfterContentInit() {
+        if (this.columnList) {
+            this.subscriptions.push(
+                this.columnList.columns.changes.subscribe(() => {
+                    this.setTableSchema();
+                })
+            );
+        }
+        this.setTableSchema();
+    }
+
+    private setTableSchema() {
         let schema: DataColumn[] = [];
 
         if (this.hasCustomLayout) {
@@ -770,10 +782,8 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
     }
 
     ngOnDestroy() {
-        if (this.contextActionHandlerSubscription) {
-            this.contextActionHandlerSubscription.unsubscribe();
-            this.contextActionHandlerSubscription = null;
-        }
+        this.subscriptions.forEach(s => s.unsubscribe());
+        this.subscriptions = [];
     }
 
     private handleError(err: any) {

lib/content-services/version-manager/version-list.component.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed, tick, fakeAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { VersionListComponent } from './version-list.component';
 import { AlfrescoApiService, setupTestBed, CoreModule, AlfrescoApiServiceMock } from '@alfresco/adf-core';

lib/core/datatable/components/datatable/datatable.component.spec.ts

@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 
-import { SimpleChange, NO_ERRORS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SimpleChange, NO_ERRORS_SCHEMA, QueryList } from '@angular/core';
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { MatCheckboxChange } from '@angular/material';
 import { DataColumn } from '../../data/data-column.model';
 import { DataRow } from '../../data/data-row.model';
@@ -26,6 +26,8 @@ import { ObjectDataTableAdapter } from '../../data/object-datatable-adapter';
 import { DataTableComponent } from './datatable.component';
 import { setupTestBed } from '../../../testing/setupTestBed';
 import { CoreTestingModule } from '../../../testing/core.testing.module';
+import { DataColumnListComponent } from '../../../data-column/data-column-list.component';
+import { DataColumnComponent } from '../../../data-column/data-column.component';
 
 describe('DataTable', () => {
 
@@ -50,6 +52,23 @@ describe('DataTable', () => {
         fixture.destroy();
     });
 
+    it('should update schema if columns change', fakeAsync(() => {
+
+        dataTable.columnList = new DataColumnListComponent();
+        dataTable.columnList.columns = new QueryList<DataColumnComponent>();
+        dataTable.data = new ObjectDataTableAdapter([], []);
+
+        spyOn(dataTable.data, 'setColumns').and.callThrough();
+
+        dataTable.ngAfterContentInit();
+        dataTable.columnList.columns.reset([new DataColumnComponent()]);
+        dataTable.columnList.columns.notifyOnChanges();
+
+        tick(100);
+
+        expect(dataTable.data.setColumns).toHaveBeenCalled();
+    }));
+
     it('should use the cardview style if cardview is true', () => {
         let newData = new ObjectDataTableAdapter(
             [

lib/core/datatable/components/datatable/datatable.component.ts

@@ -17,7 +17,7 @@
 
 import {
     AfterContentInit, Component, ContentChild, DoCheck, ElementRef, EventEmitter, Input,
-    IterableDiffers, OnChanges, Output, SimpleChange, SimpleChanges, TemplateRef, ViewEncapsulation
+    IterableDiffers, OnChanges, Output, SimpleChange, SimpleChanges, TemplateRef, ViewEncapsulation, OnDestroy
 } from '@angular/core';
 import { MatCheckboxChange } from '@angular/material';
 import { Subscription } from 'rxjs/Subscription';
@@ -50,7 +50,7 @@ export enum DisplayMode {
     templateUrl: './datatable.component.html',
     encapsulation: ViewEncapsulation.None
 })
-export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck {
+export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck, OnDestroy {
 
     @ContentChild(DataColumnListComponent)
     columnList: DataColumnListComponent;
@@ -159,6 +159,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
     private differ: any;
     private rowMenuCache: object = {};
 
+    private subscriptions: Subscription[] = [];
     private singleClickStreamSub: Subscription;
     private multiClickStreamSub: Subscription;
 
@@ -172,6 +173,13 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
     }
 
     ngAfterContentInit() {
+        if (this.columnList) {
+            this.subscriptions.push(
+                this.columnList.columns.changes.subscribe(() => {
+                    this.setTableSchema();
+                })
+            );
+        }
         this.setTableSchema();
     }
 
@@ -258,9 +266,11 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
     private unsubscribeClickStream() {
         if (this.singleClickStreamSub) {
             this.singleClickStreamSub.unsubscribe();
+            this.singleClickStreamSub = null;
         }
         if (this.multiClickStreamSub) {
             this.multiClickStreamSub.unsubscribe();
+            this.multiClickStreamSub = null;
         }
     }
 
@@ -590,4 +600,10 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
         });
         this.elementRef.nativeElement.dispatchEvent(domEvent);
     }
+
+    ngOnDestroy() {
+        this.unsubscribeClickStream();
+        this.subscriptions.forEach(s => s.unsubscribe());
+        this.subscriptions = [];
+    }
 }