diff --git a/demo-shell/src/app/components/files/files.component.html b/demo-shell/src/app/components/files/files.component.html index a98e66a05e..c95f1def4e 100644 --- a/demo-shell/src/app/components/files/files.component.html +++ b/demo-shell/src/app/components/files/files.component.html @@ -209,6 +209,7 @@ class="image-table-cell">
+
+ + Show Name Column + +
+
{{'DOCUMENT_LIST.MULTISELECT_CHECKBOXES' | translate}} diff --git a/demo-shell/src/app/components/files/files.component.ts b/demo-shell/src/app/components/files/files.component.ts index 94f51b4f49..bc64776b12 100644 --- a/demo-shell/src/app/components/files/files.component.ts +++ b/demo-shell/src/app/components/files/files.component.ts @@ -119,6 +119,9 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy { @Input() disableDragArea = false; + @Input() + showNameColumn = true; + @Output() documentListReady: EventEmitter = new EventEmitter(); diff --git a/docs/content-services/document-list.component.md b/docs/content-services/document-list.component.md index 53bd00ae5a..8b0ed2663f 100644 --- a/docs/content-services/document-list.component.md +++ b/docs/content-services/document-list.component.md @@ -141,6 +141,18 @@ Below is a basic example of handling DOM events in the parent elements.
``` +### Conditional visibility + +You can use `ngIf` directives to provide conditional visibility support for the columns: + +```html + + +``` + ### Card view The Document List has an option to display items as "cards" instead of the diff --git a/docs/core/data-column.component.md b/docs/core/data-column.component.md index c7d6f3690e..c4acfe3e4e 100644 --- a/docs/core/data-column.component.md +++ b/docs/core/data-column.component.md @@ -55,6 +55,18 @@ Defines column properties for DataTable, Tasklist, Document List and other compo ## Details +### Conditional visibility + +You can use `ngIf` directives to provide conditional visibility support for the columns: + +```html + + +``` + ### Automatic column header translation You can use i18n resource keys with DataColumn `title` property. diff --git a/lib/content-services/document-list/components/document-list.component.spec.ts b/lib/content-services/document-list/components/document-list.component.spec.ts index 11ace26f01..b3af8f40e2 100644 --- a/lib/content-services/document-list/components/document-list.component.spec.ts +++ b/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(); + + 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(); diff --git a/lib/content-services/document-list/components/document-list.component.ts b/lib/content-services/document-list/components/document-list.component.ts index 8be76b3a56..a81414f77b 100644 --- a/lib/content-services/document-list/components/document-list.component.ts +++ b/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; 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) { diff --git a/lib/content-services/version-manager/version-list.component.spec.ts b/lib/content-services/version-manager/version-list.component.spec.ts index 136f5d544e..dd10c2c497 100644 --- a/lib/content-services/version-manager/version-list.component.spec.ts +++ b/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'; diff --git a/lib/core/datatable/components/datatable/datatable.component.spec.ts b/lib/core/datatable/components/datatable/datatable.component.spec.ts index 4bdbbab6c8..8c1909cf80 100644 --- a/lib/core/datatable/components/datatable/datatable.component.spec.ts +++ b/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(); + 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( [ diff --git a/lib/core/datatable/components/datatable/datatable.component.ts b/lib/core/datatable/components/datatable/datatable.component.ts index e642853037..5fd07afb83 100644 --- a/lib/core/datatable/components/datatable/datatable.component.ts +++ b/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 = []; + } }