From 328f37282ac5bc89108859fb198e67cb87dae02c Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Mon, 22 Aug 2016 12:01:54 +0100 Subject: [PATCH] DocumentList component improvements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - expose ‘properties’ for the Node model - Row filtering support for Document List (refs #522) - Custom image resolver for Document List (refs #532) - readme updates --- .../ng2-alfresco-documentlist/README.md | 113 ++++++++++++++++++ .../ng2-alfresco-documentlist/index.ts | 3 + .../src/components/document-list.ts | 21 +++- .../src/data/share-datatable-adapter.ts | 34 ++++++ .../src/models/document-library.model.ts | 5 + 5 files changed, 175 insertions(+), 1 deletion(-) diff --git a/ng2-components/ng2-alfresco-documentlist/README.md b/ng2-components/ng2-alfresco-documentlist/README.md index 70d115f3fc..5d11880dab 100644 --- a/ng2-components/ng2-alfresco-documentlist/README.md +++ b/ng2-components/ng2-alfresco-documentlist/README.md @@ -101,6 +101,8 @@ Also make sure you include these dependencies in your `index.html` file: | multiselect | boolean | false | Toggles multiselect mode | | contentActions | boolean | false | Toggles content actions for each row | | contextMenuActions | boolean | false | Toggles context menus for each row | +| rowFilter | `RowFilter` | | Custom row filter, [see more](#custom-row-filter). +| imageResolver | `ImageResolver` | | Custom image resolver, [see more](#custom-image-resolver). ### Events @@ -394,6 +396,117 @@ DocumentList emits the following events: ## Advanced usage and customization +### Custom row filter + +You can create a custom row filter implementation that returns `true` if row should be displayed or `false` to hide it. +Typical row filter implementation is a function that receives `ShareDataRow` as parameter: + +```ts +myFilter(row: ShareDataRow): boolean { + return true; +} +``` + +_Note that for the sake of simplicity the example code below was reduced to the main points of interest only._ + +**View1.component.html** +```html + + +``` + +**View1.component.ts** +```ts + +import { RowFilter, ShareDataRow } from 'ng2-alfresco-documentlist'; + +export class View1 { + + folderFilter: RowFilter; + + constructor() { + + // This filter will make document list show only folders + + this.folderFilter = (row: ShareDataRow) => { + let node = row.node.entry; + + if (node && node.isFolder) { + return true; + } + + return false; + }; + } +} +``` + +### Custom image resolver + +You can create a custom image resolver implementation and take full control over how folder/file icons and thumbnails +are resolved and what document list should display. + +**Image resolvers are executed only for columns of the `image` type.** + +Typical image resolver implementation is a function that receives `DataRow` and `DataColumn` as parameters: + +```ts +myImageResolver(row: DataRow, col: DataColumn): string { + return '/path/to/image'; +} +``` + +Your function can return `null` or `false` values to fallback to default image resolving behavior. + +_Note that for the sake of simplicity the example code below was reduced to the main points of interest only._ + +**View1.component.html** +```html + + + + + + + + +``` + +**View1.component.ts** +```ts +import { DataColumn, DataRow } from 'ng2-alfresco-datatable'; +import { ImageResolver } from 'ng2-alfresco-documentlist'; + +export class View1 { + + folderImageResolver: ImageResolver; + + constructor() { + + // Customize folder icons, leave file icons untouched + + this.folderImageResolver = (row: DataRow, col: DataColumn) => { + let isFolder = row.getValue('isFolder'); + if (isFolder) { + + // (optional) You may want dynamically getting the column value + let name = row.getValue(col.key); + + // Format image url + return `http:///${name}`; + } + + // For the rest of the cases just fallback to default behaviour. + return null; + }; + + } + +} +``` + ### Hiding columns on small screens You can hide columns on small screens by means of custom CSS rules: diff --git a/ng2-components/ng2-alfresco-documentlist/index.ts b/ng2-components/ng2-alfresco-documentlist/index.ts index 71ed776fef..0d98e4d255 100644 --- a/ng2-components/ng2-alfresco-documentlist/index.ts +++ b/ng2-components/ng2-alfresco-documentlist/index.ts @@ -36,6 +36,9 @@ export * from './src/components/content-action-list'; export * from './src/components/empty-folder-content'; export * from './src/components/breadcrumb/breadcrumb.component'; +// data +export * from './src/data/share-datatable-adapter'; + // services export * from './src/services/folder-actions.service'; export * from './src/services/document-actions.service'; diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts index 54c3707c57..54394d654c 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts @@ -45,7 +45,12 @@ import { import { DocumentListService } from './../services/document-list.service'; import { MinimalNodeEntity } from './../models/document-library.model'; import { ContentActionModel } from './../models/content-action.model'; -import { ShareDataTableAdapter, ShareDataRow } from './../data/share-datatable-adapter'; +import { + ShareDataTableAdapter, + ShareDataRow, + RowFilter, + ImageResolver +} from './../data/share-datatable-adapter'; declare var componentHandler; declare let __moduleName: string; @@ -89,6 +94,20 @@ export class DocumentList implements OnInit, AfterViewInit, AfterViewChecked, Af @Input() pageSize: number = DocumentList.DEFAULT_PAGE_SIZE; + @Input() + set rowFilter(value: RowFilter) { + if (this.data) { + this.data.setFilter(value); + } + }; + + @Input() + set imageResolver(value: ImageResolver) { + if (this.data) { + this.data.setImageResolver(value); + } + } + @Output() nodeClick: EventEmitter = new EventEmitter(); 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 5eccf2cd37..a3146ff66a 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 @@ -41,6 +41,9 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid private page: NodePaging; private currentPath: string; + private filter: RowFilter; + private imageResolver: ImageResolver; + private _count: number = 0; private _hasMoreItems: boolean = false; private _totalItems: number = 0; @@ -130,6 +133,13 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid if (col.type === 'image') { + if (this.imageResolver) { + let resolved = this.imageResolver(row, col); + if (resolved) { + return resolved; + } + } + if (col.key === '$thumbnail') { let node = ( row).node; @@ -221,6 +231,18 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid } } + setFilter(filter: RowFilter) { + this.filter = filter; + + if (this.filter && this.currentPath) { + this.loadPath(this.currentPath); + } + } + + setImageResolver(resolver: ImageResolver) { + this.imageResolver = resolver; + } + private loadPage(page: NodePaging) { this.page = page; this.resetPagination(); @@ -232,6 +254,10 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid if (data && data.length > 0) { rows = data.map(item => new ShareDataRow(item)); + if (this.filter) { + rows = rows.filter(this.filter); + } + // Sort by first sortable or just first column if (this.columns && this.columns.length > 0) { let sortable = this.columns.filter(c => c.sortable); @@ -289,3 +315,11 @@ export class ShareDataRow implements DataRow { return this.getValue(key) ? true : false; } } + +export interface RowFilter { + (value: ShareDataRow, index: number, array: ShareDataRow[]): boolean; +} + +export interface ImageResolver { + (row: DataRow, column: DataColumn): string; +} diff --git a/ng2-components/ng2-alfresco-documentlist/src/models/document-library.model.ts b/ng2-components/ng2-alfresco-documentlist/src/models/document-library.model.ts index 3db16122ae..1ef4ddd54d 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/models/document-library.model.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/models/document-library.model.ts @@ -53,6 +53,7 @@ export class MinimalNodeEntryEntity { createdByUser: UserInfo; content: ContentInfo; path: PathInfoEntity; + properties: NodeProperties = {}; } export class UserInfo { @@ -77,3 +78,7 @@ export class PathElementEntity { id: string; name: string; } + +export interface NodeProperties { + [key: string]: any; +}