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;
+}