DocumentList component improvements

- 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-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
+<alfresco-document-list 
+    [rowFilter]="folderFilter">
+</alfresco-document-list>
+```
+
+**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
+<alfresco-document-list 
+    [imageResolver]="folderImageResolver">
+    
+    <content-columns>
+        <content-column key="name" type="image"></content-column>
+    </content-columns>
+    
+    
+</alfresco-document-list>
+```
+
+**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 = <boolean> 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://<my custom path to folder icon>/${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:

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';

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<any> = new EventEmitter();
 

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 = (<ShareDataRow> 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;
+}

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