mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-2589] conditional visibility for DL/DT components (#3223)
* watch data columns and update layout if needed * update docs * support DataTable, docs and tests
This commit is contained in:
committed by
Eugenio Romano
parent
382ea3c1b3
commit
edee2f12b6
@@ -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(
|
||||
[
|
||||
|
@@ -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 = [];
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user