diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html index 3dad9954e2..99af5f132d 100644 --- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html +++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html @@ -38,7 +38,15 @@ [data]="dataTasks" [landingTaskId]="currentTaskId" (rowClick)="onTaskRowClick($event)" (onSuccess)="onSuccessTaskList($event)" - #activititasklist> + #activititasklist> + + +
+ +
diff --git a/demo-shell-ng2/app/components/files/files.component.html b/demo-shell-ng2/app/components/files/files.component.html index bb59434d1a..d39543fd10 100644 --- a/demo-shell-ng2/app/components/files/files.component.html +++ b/demo-shell-ng2/app/components/files/files.component.html @@ -21,12 +21,11 @@ (error)="onNavigationError($event)" (success)="resetError()" (preview)="showFile($event)"> - - - + + - - + - - + - - + - - + + diff --git a/ng2-components/ng2-activiti-tasklist/README.md b/ng2-components/ng2-activiti-tasklist/README.md index f8bc2b183e..aac116cc4b 100644 --- a/ng2-components/ng2-activiti-tasklist/README.md +++ b/ng2-components/ng2-activiti-tasklist/README.md @@ -123,8 +123,7 @@ import { NgModule, Component } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { ActivitiTaskListModule } from 'ng2-activiti-tasklist'; -import { CoreModule } from 'ng2-alfresco-core'; -import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core'; +import { CoreModule, AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core'; import { ObjectDataTableAdapter, DataSorting } from 'ng2-alfresco-datatable'; @Component({ @@ -176,14 +175,40 @@ export class AppModule {} platformBrowserDynamic().bootstrapModule(AppModule); ``` -#### Events +You can also use HTML-based schema declaration like shown below: + +```html + + + + + + +``` + +### DataColumn Properties + +Here's the list of available properties you can define for a Data Column definition. + +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| key | string | | Data source key, can be either column/property key like `title` or property path like `createdBy.name` | +| type | string (text\|image\|date) | text | Value type | +| format | string | | Value format (if supported by components), for example format of the date | +| sortable | boolean | true | Toggles ability to sort by this column, for example by clicking the column header | +| title | string | | Display title of the column, typically used for column headers | +| template | `TemplateRef` | | Custom column template | +| sr-title | string | | Screen reader title, used for accessibility purposes | +| class | string | | Additional CSS class to be applied to column (header and cells) | + +### Events | Name | Description | | --- | --- | | `onSuccess` | The event is emitted when the task list is loaded | | `rowClick` | The event is emitted when the task in the list is clicked | -#### Options +### Properties | Name | Description | | --- | --- | diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts index d4d273cccf..bd23fd4db9 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts +++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts @@ -117,9 +117,9 @@ describe('ActivitiTaskList', () => { }); it('should use the default schemaColumn as default', () => { - component.ngOnInit(); + component.ngAfterContentInit(); expect(component.data.getColumns()).toBeDefined(); - expect(component.data.getColumns().length).toEqual(4); + expect(component.data.getColumns().length).toEqual(2); }); it('should use the schemaColumn passed in input', () => { @@ -130,13 +130,13 @@ describe('ActivitiTaskList', () => { ] ); - component.ngOnInit(); + component.ngAfterContentInit(); expect(component.data.getColumns()).toBeDefined(); expect(component.data.getColumns().length).toEqual(1); }); it('should return an empty task list when no input parameters are passed', () => { - component.ngOnInit(); + component.ngAfterContentInit(); expect(component.data).toBeDefined(); expect(component.isListEmpty()).toBeTruthy(); }); @@ -177,7 +177,7 @@ describe('ActivitiTaskList', () => { expect(component.data.getRows()[0].getValue('processDefinitionCategory')).toEqual('http://www.activiti.org/processdef'); done(); }); - component.ngOnInit(); + component.ngAfterContentInit(); component.ngOnChanges({'state': state, 'processDefinitionKey': processDefinitionKey, 'assignment': assignment}); fixture.detectChanges(); }); @@ -199,7 +199,7 @@ describe('ActivitiTaskList', () => { done(); }); - component.ngOnInit(); + component.ngAfterContentInit(); component.ngOnChanges({'state': state, 'processDefinitionKey': processDefinitionKey, 'assignment': assignment}); fixture.detectChanges(); }); @@ -221,7 +221,7 @@ describe('ActivitiTaskList', () => { done(); }); - component.ngOnInit(); + component.ngAfterContentInit(); component.ngOnChanges({'state': state, 'assignment': assignment}); fixture.detectChanges(); }); @@ -231,7 +231,7 @@ describe('ActivitiTaskList', () => { spyOn(taskListService, 'getTasks').and.returnValue(Observable.of(fakeGlobalTask)); component.state = 'open'; component.assignment = 'fake-assignee'; - component.ngOnInit(); + component.ngAfterContentInit(); component.onSuccess.subscribe((res) => { expect(res).toBeDefined(); expect(component.data).toBeDefined(); diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts index 41044387d8..2bdf0809e6 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts +++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts @@ -15,9 +15,9 @@ * limitations under the License. */ -import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core'; -import { AlfrescoTranslationService, LogService } from 'ng2-alfresco-core'; -import { ObjectDataTableAdapter, DataTableAdapter, DataRowEvent, ObjectDataRow } from 'ng2-alfresco-datatable'; +import { Component, Input, Output, ContentChild, AfterContentInit, EventEmitter, OnChanges, SimpleChanges } from '@angular/core'; +import { AlfrescoTranslationService, LogService, DataColumnListComponent } from 'ng2-alfresco-core'; +import { ObjectDataTableAdapter, DataTableAdapter, DataRowEvent, ObjectDataRow, DataColumn } from 'ng2-alfresco-datatable'; import { ActivitiTaskListService } from './../services/activiti-tasklist.service'; import { TaskQueryRequestRepresentationModel } from '../models/filter.model'; @@ -29,7 +29,9 @@ declare let componentHandler: any; templateUrl: './activiti-tasklist.component.html', styleUrls: ['./activiti-tasklist.component.css'] }) -export class ActivitiTaskList implements OnInit, OnChanges { +export class ActivitiTaskList implements OnChanges, AfterContentInit { + + @ContentChild(DataColumnListComponent) columnList: DataColumnListComponent; @Input() appId: string; @@ -68,11 +70,9 @@ export class ActivitiTaskList implements OnInit, OnChanges { currentInstanceId: string; - private defaultSchemaColumn: any[] = [ - {type: 'text', key: 'id', title: 'Id'}, - {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true}, - {type: 'text', key: 'formKey', title: 'Form Key', sortable: true}, - {type: 'text', key: 'created', title: 'Created', sortable: true} + private defaultSchemaColumn: DataColumn[] = [ + { type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true }, + { type: 'text', key: 'created', title: 'Created', cssClass: 'hidden', sortable: true } ]; constructor(private translateService: AlfrescoTranslationService, @@ -83,9 +83,29 @@ export class ActivitiTaskList implements OnInit, OnChanges { } } - ngOnInit() { + ngAfterContentInit() { + this.setupSchema(); + } + + /** + * Setup html-based (html definitions) or code behind (data adapter) schema. + * If component is assigned with an empty data adater the default schema settings applied. + */ + setupSchema() { + let schema: DataColumn[] = []; + + if (this.columnList && this.columnList.columns && this.columnList.columns.length > 0) { + schema = this.columnList.columns.map(c => c); + } + if (!this.data) { - this.data = this.initDefaultSchemaColumns(); + this.data = new ObjectDataTableAdapter([], schema.length > 0 ? schema : this.defaultSchemaColumn); + } else { + if (schema && schema.length > 0) { + this.data.setColumns(schema); + } else if (this.data.getColumns().length === 0) { + this.data.setColumns(this.defaultSchemaColumn); + } } } @@ -126,17 +146,6 @@ export class ActivitiTaskList implements OnInit, OnChanges { this.load(this.requestNode); } - /** - * Return an initDefaultSchemaColumns instance with the default Schema Column - * @returns {ObjectDataTableAdapter} - */ - initDefaultSchemaColumns(): ObjectDataTableAdapter { - return new ObjectDataTableAdapter( - [], - this.defaultSchemaColumn - ); - } - private load(requestNode: TaskQueryRequestRepresentationModel) { this.taskListService.getTotalTasks(requestNode).subscribe( (res) => { diff --git a/ng2-components/ng2-alfresco-core/index.ts b/ng2-components/ng2-alfresco-core/index.ts index 4fcd9cf8f3..ea3b9eab5a 100644 --- a/ng2-components/ng2-alfresco-core/index.ts +++ b/ng2-components/ng2-alfresco-core/index.ts @@ -39,11 +39,15 @@ import { NotificationService } from './src/services/index'; +import { DataColumnComponent } from './src/components/data-column/data-column.component'; +import { DataColumnListComponent } from './src/components/data-column/data-column-list.component'; import { MATERIAL_DESIGN_DIRECTIVES } from './src/components/material/index'; import { CONTEXT_MENU_PROVIDERS, CONTEXT_MENU_DIRECTIVES } from './src/components/context-menu/index'; export * from './src/services/index'; export * from './src/components/index'; +export * from './src/components/data-column/data-column.component'; +export * from './src/components/data-column/data-column-list.component'; export * from './src/utils/index'; export * from './src/events/base.event'; export * from './src/events/base-ui.event'; @@ -85,7 +89,9 @@ export function createTranslateLoader(http: Http, logService: LogService) { ], declarations: [ ...MATERIAL_DESIGN_DIRECTIVES, - ...CONTEXT_MENU_DIRECTIVES + ...CONTEXT_MENU_DIRECTIVES, + DataColumnComponent, + DataColumnListComponent ], providers: [ ...ALFRESCO_CORE_PROVIDERS @@ -98,7 +104,9 @@ export function createTranslateLoader(http: Http, logService: LogService) { HttpModule, TranslateModule, ...MATERIAL_DESIGN_DIRECTIVES, - ...CONTEXT_MENU_DIRECTIVES + ...CONTEXT_MENU_DIRECTIVES, + DataColumnComponent, + DataColumnListComponent ] }) export class CoreModule { diff --git a/ng2-components/ng2-alfresco-core/src/components/data-column/data-column-list.component.ts b/ng2-components/ng2-alfresco-core/src/components/data-column/data-column-list.component.ts new file mode 100644 index 0000000000..45aa058b4f --- /dev/null +++ b/ng2-components/ng2-alfresco-core/src/components/data-column/data-column-list.component.ts @@ -0,0 +1,29 @@ +/*! + * @license + * Copyright 2016 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Component, ContentChildren, QueryList } from '@angular/core'; +import { DataColumnComponent } from './data-column.component'; + +@Component({ + selector: 'data-columns', + template: '' +}) +export class DataColumnListComponent { + + @ContentChildren(DataColumnComponent) columns: QueryList; + +} diff --git a/ng2-components/ng2-alfresco-core/src/components/data-column/data-column.component.ts b/ng2-components/ng2-alfresco-core/src/components/data-column/data-column.component.ts new file mode 100644 index 0000000000..117fca0497 --- /dev/null +++ b/ng2-components/ng2-alfresco-core/src/components/data-column/data-column.component.ts @@ -0,0 +1,59 @@ +/*! + * @license + * Copyright 2016 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Component, Input, ContentChild, TemplateRef } from '@angular/core'; + +@Component({ + selector: 'data-column', + template: '' +}) +export class DataColumnComponent { + + @Input() + key: string; + + @Input() + type: string = 'text'; + + @Input() + format: string; + + @Input() + sortable: boolean = true; + + @Input() + title: string = ''; + + @ContentChild(TemplateRef) + template: any; + + /** + * Title to be used for screen readers. + */ + @Input('sr-title') + srTitle: string; + + @Input('class') + cssClass: string; + + ngOnInit() { + if (!this.srTitle && this.key === '$thumbnail') { + this.srTitle = 'Thumbnail'; + } + } + +} diff --git a/ng2-components/ng2-alfresco-datatable/README.md b/ng2-components/ng2-alfresco-datatable/README.md index ddc1e2aec8..aa109ad7ec 100644 --- a/ng2-components/ng2-alfresco-datatable/README.md +++ b/ng2-components/ng2-alfresco-datatable/README.md @@ -96,9 +96,7 @@ Follow the 3 steps below: Please refer to the following example file: [systemjs.config.js](demo/systemjs.config.js) . -## Basic usage example - -Usage example of this component : +## Basic usage **my.component.ts** @@ -107,18 +105,14 @@ import { NgModule, Component } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { CoreModule } from 'ng2-alfresco-core'; -import { DataTableModule } from 'ng2-alfresco-datatable'; -import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable'; -import { Component } from '@angular/core'; -import { CONTEXT_MENU_DIRECTIVES, CONTEXT_MENU_PROVIDERS } from 'ng2-alfresco-core'; -import { ALFRESCO_DATATABLE_DIRECTIVES, ObjectDataTableAdapter } from 'ng2-alfresco-datatable'; +import { DataTableModule, ObjectDataTableAdapter } from 'ng2-alfresco-datatable'; @Component({ selector: 'alfresco-app-demo', - template: ` - `, - directives: [ALFRESCO_DATATABLE_DIRECTIVES, CONTEXT_MENU_DIRECTIVES], - providers: [CONTEXT_MENU_PROVIDERS] + template: ` + + + ` }) export class DataTableDemo { data: ObjectDataTableAdapter; @@ -166,9 +160,23 @@ platformBrowserDynamic().bootstrapModule(AppModule); ![DataTable demo](docs/assets/datatable-demo.png) -### Properties +You can also use HTML-based schema declaration like shown below: -| Name | Type | Default | Description +```html + + + + + + + + + +``` + +### DataTable Properties + +| Name | Type | Default | Description | | --- | --- | --- | --- | | `data` | DataTableAdapter | instance of **ObjectDataTableAdapter** | data source | | `multiselect` | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row | @@ -177,7 +185,22 @@ platformBrowserDynamic().bootstrapModule(AppModule); | `fallbackThumbnail` | string | | Fallback image for row ehre thubnail is missing| | `contextMenu` | boolean | false | Toggles custom context menu for the component | -### Events +### DataColumn Properties + +Here's the list of available properties you can define for a Data Column definition. + +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| key | string | | Data source key, can be either column/property key like `title` or property path like `createdBy.name` | +| type | string (text\|image\|date) | text | Value type | +| format | string | | Value format (if supported by components), for example format of the date | +| sortable | boolean | true | Toggles ability to sort by this column, for example by clicking the column header | +| title | string | | Display title of the column, typically used for column headers | +| template | `TemplateRef` | | Custom column template | +| sr-title | string | | Screen reader title, used for accessibility purposes | +| class | string | | Additional CSS class to be applied to column (header and cells) | + +### DataTable Events | Name | Description | --- | --- | @@ -221,11 +244,13 @@ event: Event // original HTML DOM event Handler example: ```ts -onRowClicked(event) { +onRowClicked(event: DataRowEvent) { console.log(event.row); } ``` +_This event is cancellable, you can use `event.preventDefault()` to prevent default behaviour._ + #### rowDblClick event _This event is emitted when user double-clicks the row._ @@ -240,11 +265,13 @@ event: Event // original HTML DOM event Handler example: ```ts -onRowDblClicked(event) { +onRowDblClicked(event: DataRowEvent) { console.log(event.row); } ``` +_This event is cancellable, you can use `event.preventDefault()` to prevent default behaviour._ + #### showRowContextMenu event _Emitted before context menu is displayed for a row._ @@ -255,7 +282,7 @@ you can provide all necessary content via handler. Event properties: ```ts -args: { +value: { row: DataRow, col: DataColumn, actions: [] @@ -265,14 +292,16 @@ args: { Handler example: ```ts -onShowRowContextMenu(event) { - event.args.actions = [ +onShowRowContextMenu(event: DataCellEvent) { + event.value.actions = [ { ... }, { ... } ] } ``` +_This event is cancellable, you can use `event.preventDefault()` to prevent default behaviour._ + DataTable will automatically render provided menu items. _Please refer to [ContextMenu](https://www.npmjs.com/package/ng2-alfresco-core) @@ -283,9 +312,20 @@ documentation for more details on context actions format and behavior._ _Emitted before actions menu is displayed for a row. Requires `actions` property to be set to `true`._ +Event properties: + +```ts +value: { + row: DataRow, + action: any +} +``` + Note that DataTable itself does not populate action menu items, you can provide all necessary content via handler. +_This event is cancellable, you can use `event.preventDefault()` to prevent default behaviour._ + #### executeRowAction event _Emitted when row action is executed by user._ @@ -346,7 +386,7 @@ a custom `DataTableAdapter` using the following interfaces: ```ts interface DataTableAdapter { - generateSchema(row: DataRow): col: DataColumn; + selectedRow: DataRow; getRows(): Array; setRows(rows: Array): void; getColumns(): Array; diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts index db1ec81250..f512bee9c1 100644 --- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts +++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts @@ -95,14 +95,14 @@ describe('DataTable', () => { it('should initialize default adapter', () => { let table = new DataTableComponent(); expect(table.data).toBeUndefined(); - table.ngOnInit(); + table.ngAfterContentInit(); expect(table.data).toEqual(jasmine.any(ObjectDataTableAdapter)); }); it('should initialize with custom data', () => { let data = new ObjectDataTableAdapter([], []); dataTable.data = data; - dataTable.ngOnInit(); + dataTable.ngAfterContentInit(); expect(dataTable.data).toBe(data); }); @@ -130,14 +130,14 @@ describe('DataTable', () => { it('should prevent default behaviour on row click event', () => { let e = jasmine.createSpyObj('event', ['preventDefault']); - dataTable.ngOnInit(); + dataTable.ngAfterContentInit(); dataTable.onRowClick(null, e); expect(e.preventDefault).toHaveBeenCalled(); }); it('should prevent default behaviour on row double-click event', () => { let e = jasmine.createSpyObj('event', ['preventDefault']); - dataTable.ngOnInit(); + dataTable.ngAfterContentInit(); dataTable.onRowDblClick(null, e); expect(e.preventDefault).toHaveBeenCalled(); }); @@ -149,7 +149,7 @@ describe('DataTable', () => { }); it('should not sort if column is missing', () => { - dataTable.ngOnInit(); + dataTable.ngAfterContentInit(); let adapter = dataTable.data; spyOn(adapter, 'setSorting').and.callThrough(); dataTable.onColumnHeaderClick(null); @@ -157,7 +157,7 @@ describe('DataTable', () => { }); it('should not sort upon clicking non-sortable column header', () => { - dataTable.ngOnInit(); + dataTable.ngAfterContentInit(); let adapter = dataTable.data; spyOn(adapter, 'setSorting').and.callThrough(); @@ -170,7 +170,7 @@ describe('DataTable', () => { }); it('should set sorting upon column header clicked', () => { - dataTable.ngOnInit(); + dataTable.ngAfterContentInit(); let adapter = dataTable.data; spyOn(adapter, 'setSorting').and.callThrough(); @@ -189,7 +189,7 @@ describe('DataTable', () => { }); it('should invert sorting upon column header clicked', () => { - dataTable.ngOnInit(); + dataTable.ngAfterContentInit(); let adapter = dataTable.data; let sorting = new DataSorting('column_1', 'asc'); @@ -226,13 +226,13 @@ describe('DataTable', () => { let handler = jasmine.createSpyObj('componentHandler', ['upgradeAllRegistered']); window['componentHandler'] = handler; - dataTable.ngOnInit(); + dataTable.ngAfterContentInit(); expect(handler.upgradeAllRegistered).toHaveBeenCalled(); }); it('should upgrade MDL components only when component handler present', () => { expect(window['componentHandler']).toBeNull(); - dataTable.ngOnInit(); + dataTable.ngAfterContentInit(); }); it('should invert "select all" status', () => { @@ -249,7 +249,7 @@ describe('DataTable', () => { dataTable.data = data; dataTable.multiselect = true; - dataTable.ngOnInit(); + dataTable.ngAfterContentInit(); dataTable.onSelectAllClick(null); expect(dataTable.isSelectAllChecked).toBe(true); @@ -266,7 +266,7 @@ describe('DataTable', () => { it('should allow "select all" calls with no rows', () => { dataTable.multiselect = true; - dataTable.ngOnInit(); + dataTable.ngAfterContentInit(); dataTable.onSelectAllClick(null); expect(dataTable.isSelectAllChecked).toBe(true); @@ -278,7 +278,7 @@ describe('DataTable', () => { dataTable.data = data; dataTable.multiselect = false; - dataTable.ngOnInit(); + dataTable.ngAfterContentInit(); dataTable.onSelectAllClick(null); expect(dataTable.isSelectAllChecked).toBe(true); @@ -354,13 +354,13 @@ describe('DataTable', () => { }); it('should require adapter sorting to evaluate sorting state', () => { - dataTable.ngOnInit(); + dataTable.ngAfterContentInit(); spyOn(dataTable.data, 'getSorting').and.returnValue(null); expect(dataTable.isColumnSorted( {}, 'asc')).toBeFalsy(); }); it('should evaluate column sorting state', () => { - dataTable.ngOnInit(); + dataTable.ngAfterContentInit(); spyOn(dataTable.data, 'getSorting').and.returnValue(new DataSorting('column_1', 'asc')); expect(dataTable.isColumnSorted( {key: 'column_1'}, 'asc')).toBeTruthy(); expect(dataTable.isColumnSorted( {key: 'column_2'}, 'desc')).toBeFalsy(); diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts index dcbb03ba75..3b2b67d4d8 100644 --- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts +++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts @@ -15,10 +15,11 @@ * limitations under the License. */ -import { Component, OnInit, Input, Output, EventEmitter, TemplateRef } from '@angular/core'; +import { Component, Input, Output, EventEmitter, TemplateRef, AfterContentInit, ContentChild } from '@angular/core'; import { DataTableAdapter, DataRow, DataColumn, DataSorting, DataRowEvent, ObjectDataTableAdapter } from '../../data/index'; import { DataCellEvent } from './data-cell.event'; import { DataRowActionEvent } from './data-row-action.event'; +import { DataColumnListComponent } from 'ng2-alfresco-core'; declare var componentHandler; @@ -28,7 +29,9 @@ declare var componentHandler; styleUrls: ['./datatable.component.css'], templateUrl: './datatable.component.html' }) -export class DataTableComponent implements OnInit { +export class DataTableComponent implements AfterContentInit { + + @ContentChild(DataColumnListComponent) columnList: DataColumnListComponent; @Input() data: DataTableAdapter; @@ -70,12 +73,20 @@ export class DataTableComponent implements OnInit { return this.data.selectedRow; } - ngOnInit() { - if (!this.data) { - this.data = new ObjectDataTableAdapter([], []); + ngAfterContentInit() { + let schema: DataColumn[] = []; + + if (this.columnList && this.columnList.columns) { + schema = this.columnList.columns.map(c => c); } - // workaround for MDL issues with dynamic components + if (!this.data) { + this.data = new ObjectDataTableAdapter([], schema); + } else if (schema && schema.length > 0) { + this.data.setColumns(schema); + } + + // workaround for MDL issues with dynamic components if (componentHandler) { componentHandler.upgradeAllRegistered(); } diff --git a/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts b/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts index b84ac7495f..d1eb3cd771 100644 --- a/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts +++ b/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts @@ -51,7 +51,7 @@ export class ObjectDataTableAdapter implements DataTableAdapter { return schema; } - constructor(data: any[], schema: DataColumn[]) { + constructor(data: any[] = [], schema: DataColumn[] = []) { this._rows = []; this._columns = []; diff --git a/ng2-components/ng2-alfresco-documentlist/README.md b/ng2-components/ng2-alfresco-documentlist/README.md index 79adda6848..927ed6b00b 100644 --- a/ng2-components/ng2-alfresco-documentlist/README.md +++ b/ng2-components/ng2-alfresco-documentlist/README.md @@ -392,6 +392,35 @@ A custom set of columns can look like the following: ![Custom columns](docs/assets/custom-columns.png) +You can also use HTML-based schema declaration used by DataTable, TaskList and other components: + +```html + + + + + + + + + +``` + +#### DataColumn Properties + +Here's the list of available properties you can define for a Data Column definition. + +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| key | string | | Data source key, can be either column/property key like `title` or property path like `createdBy.name` | +| type | string (text\|image\|date) | text | Value type | +| format | string | | Value format (if supported by components), for example format of the date | +| sortable | boolean | true | Toggles ability to sort by this column, for example by clicking the column header | +| title | string | | Display title of the column, typically used for column headers | +| template | `TemplateRef` | | Custom column template | +| sr-title | string | | Screen reader title, used for accessibility purposes | +| class | string | | Additional CSS class to be applied to column (header and cells) | + DocumentList component assigns an instance of `MinimalNode` type (`alfresco-js-api`) as a data context of each row. ```js diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts index 2d9225523f..1bee1e1083 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts @@ -16,23 +16,13 @@ */ import { - Component, - OnInit, - Input, - OnChanges, - Output, - SimpleChanges, - EventEmitter, - AfterContentInit, - TemplateRef, - NgZone, - ViewChild, - HostListener + Component, OnInit, Input, OnChanges, Output, SimpleChanges, EventEmitter, + AfterContentInit, TemplateRef, NgZone, ViewChild, HostListener, ContentChild } from '@angular/core'; import { Subject } from 'rxjs/Rx'; import { MinimalNodeEntity, MinimalNodeEntryEntity, NodePaging, Pagination } from 'alfresco-js-api'; -import { AlfrescoTranslationService } from 'ng2-alfresco-core'; -import { DataRowEvent, DataTableComponent, ObjectDataColumn, DataCellEvent, DataRowActionEvent } from 'ng2-alfresco-datatable'; +import { AlfrescoTranslationService, DataColumnListComponent } from 'ng2-alfresco-core'; +import { DataRowEvent, DataTableComponent, ObjectDataColumn, DataCellEvent, DataRowActionEvent, DataColumn } from 'ng2-alfresco-datatable'; import { DocumentListService } from './../services/document-list.service'; import { ContentActionModel } from './../models/content-action.model'; import { ShareDataTableAdapter, ShareDataRow, RowFilter, ImageResolver } from './../data/share-datatable-adapter'; @@ -54,6 +44,8 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni baseComponentPath = module.id.replace('components/document-list.component.js', ''); + @ContentChild(DataColumnListComponent) columnList: DataColumnListComponent; + @Input() fallbackThumbnail: string = this.baseComponentPath + 'assets/images/ft_ic_miscellaneous.svg'; @@ -150,7 +142,7 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni private ngZone: NgZone, private translateService: AlfrescoTranslationService) { - this.data = new ShareDataTableAdapter(this.documentListService, this.baseComponentPath, []); + this.data = new ShareDataTableAdapter(this.documentListService, this.baseComponentPath); if (translateService) { translateService.addTranslationFolder('ng2-alfresco-documentlist', 'node_modules/ng2-alfresco-documentlist/src'); @@ -193,6 +185,18 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni } ngAfterContentInit() { + let schema: DataColumn[] = []; + + if (this.columnList && this.columnList.columns && this.columnList.columns.length > 0) { + schema = this.columnList.columns.map(c => c); + } + + if (!this.data) { + this.data = new ShareDataTableAdapter(this.documentListService, this.baseComponentPath, schema); + } else if (schema && schema.length > 0) { + this.data.setColumns(schema); + } + let columns = this.data.getColumns(); if (!columns || columns.length === 0) { this.setupDefaultColumns(); diff --git a/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts b/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts index 1974613789..0a723023fe 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts @@ -42,7 +42,7 @@ export class ShareDataTableAdapter implements DataTableAdapter { constructor(private documentListService: DocumentListService, private basePath: string, - schema: DataColumn[]) { + schema: DataColumn[] = []) { this.rows = []; this.columns = schema || []; }