#70 pagination component (first cut), mdl directives

demo-shell-ng2/app/components/files/files.component.html

@@ -92,6 +92,8 @@
                 </content-action>
             </content-actions>
         </alfresco-document-list>
+        <alfresco-document-list-pagination [provider]="documentList.data">
+        </alfresco-document-list-pagination>
     </alfresco-upload-drag-area>
 </div>
 

ng2-components/ng2-alfresco-core/.gitignore

@@ -11,5 +11,5 @@ demo/**/*.js
 demo/**/*.js.map
 demo/**/*.d.ts
 index.js
-index.map
+index.js.map
 !systemjs.config.js

ng2-components/ng2-alfresco-core/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;;;;;QAwBU,uBAAuB,EAUvB,sBAAsB,EAItB,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAdvB,qCAAA,uBAAuB,GAAU;gBAC1C,qEAA6B;gBAC7B,uDAAsB;gBACtB,yDAAuB;gBACvB,6DAAyB;gBACzB,+DAA0B;gBAC1B,qDAAqB;gBACrB,yCAAkB;aACrB,CAAA,CAAC;YAEW,oCAAA,sBAAsB,GAAU;gBACzC,yCAAkB;aACrB,CAAA,CAAC;YAEW,qCAAA,uBAAuB,GAAU;gBAC1C,0DAA0B;gBAC1B,6CAAoB;aACvB,CAAA,CAAC"}

ng2-components/ng2-alfresco-core/index.ts

@@ -24,19 +24,27 @@ import { AlfrescoContentService } from './src/services/AlfrescoContentService.se
 import { ContextMenuService } from './src/services/context-menu.service';
 import { ContextMenuHolderComponent } from './src/components/context-menu-holder.component';
 import { ContextMenuDirective } from './src/components/context-menu.directive';
+import { MDL } from './src/material/MaterialDesignLiteUpgradeElement';
+import { AlfrescoMdlButtonDirective } from './src/material/mdl-button.directive';
+import { AlfrescoMdlMenuDirective } from './src/material/mdl-menu.directive';
 
 export * from './src/services/AlfrescoSettingsService.service';
 export * from './src/services/AlfrescoTranslationLoader.service';
 export * from './src/services/AlfrescoTranslationService.service';
 export * from './src/services/AlfrescoPipeTranslate.service';
-export * from './src/material/MaterialDesignLiteUpgradeElement';
 export * from './src/services/AlfrescoAuthenticationService.service';
 export * from './src/services/AlfrescoContentService.service';
 
+// Material Design Lite integration
+export * from './src/material/MaterialDesignLiteUpgradeElement';
+export * from './src/material/mdl-button.directive';
+export * from './src/material/mdl-menu.directive';
+
 export * from './src/services/context-menu.service';
 export * from './src/components/context-menu-holder.component';
 export * from './src/components/context-menu.directive';
 
+export * from './src/data/pagination-provider';
 export * from './src/utils/object-utils';
 
 export const ALFRESCO_CORE_PROVIDERS: [any] = [
@@ -58,3 +66,8 @@ export const CONTEXT_MENU_DIRECTIVES: [any] = [
     ContextMenuDirective
 ];
 
+export const MATERIAL_DESIGN_DIRECTIVES: [any] = [
+    MDL,
+    AlfrescoMdlButtonDirective,
+    AlfrescoMdlMenuDirective
+];

ng2-components/ng2-alfresco-core/src/data/pagination-provider.ts

@@ -0,0 +1,47 @@
+/*!
+ * @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.
+ */
+
+export interface PaginationProvider {
+
+    /**
+     *  The number of objects in the collection.
+     */
+    count: number;
+
+    /**
+     * A boolean value which is true if there are more entities in the collection beyond those in this response.
+     * A true value means a request with a larger value for the skipCount or the maxItems parameter will return more entities.
+     */
+    hasMoreItems: boolean;
+
+    /**
+     * An integer describing the total number of entities in the collection.
+     * The API might not be able to determine this value, in which case this property will not be present.
+     */
+    totalItems?: number;
+
+    /**
+     * An integer describing how many entities exist in the collection before those included in this list.
+     */
+    skipCount: number;
+
+    /**
+     * The value of the maxItems parameter used to generate this list,
+     * or if there was no maxItems parameter the default value is 100.
+     */
+    maxItems: number;
+}

ng2-components/ng2-alfresco-core/src/material/mdl-button.directive.ts

@@ -0,0 +1,38 @@
+/*!
+ * @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 { Directive, ElementRef, AfterViewInit } from '@angular/core';
+
+declare var componentHandler;
+
+@Directive({
+    selector: '[alfresco-mdl-button]'
+})
+export class AlfrescoMdlButtonDirective implements AfterViewInit {
+
+    constructor(private element: ElementRef) {}
+
+    ngAfterViewInit() {
+        if (componentHandler) {
+            let el = this.element.nativeElement;
+            el.classList.add('mdl-button');
+            el.classList.add('mdl-js-button');
+            el.classList.add('mdl-js-ripple-effect');
+            componentHandler.upgradeElement(el, 'MaterialButton');
+        }
+    }
+}

ng2-components/ng2-alfresco-core/src/material/mdl-menu.directive.ts

@@ -0,0 +1,38 @@
+/*!
+ * @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 { Directive, ElementRef, AfterViewInit } from '@angular/core';
+
+declare var componentHandler;
+
+@Directive({
+    selector: '[alfresco-mdl-menu]'
+})
+export class AlfrescoMdlMenuDirective implements AfterViewInit {
+
+    constructor(private element: ElementRef) {}
+
+    ngAfterViewInit() {
+        if (componentHandler) {
+            let el = this.element.nativeElement;
+            el.classList.add('mdl-menu');
+            el.classList.add('mdl-js-menu');
+            el.classList.add('mdl-js-ripple-effect');
+            componentHandler.upgradeElement(el, 'MaterialMenu');
+        }
+    }
+}

ng2-components/ng2-alfresco-documentlist/index.ts

@@ -22,6 +22,7 @@ import { ContentAction } from './src/components/content-action';
 import { ContentActionList } from './src/components/content-action-list';
 import { EmptyFolderContent } from './src/components/empty-folder-content';
 import { DocumentListBreadcrumb } from './src/components/breadcrumb/breadcrumb.component';
+import { DocumentListPagination } from './src/components/pagination/pagination.component';
 
 import { FolderActionsService } from './src/services/folder-actions.service';
 import { DocumentActionsService } from './src/services/document-actions.service';
@@ -35,6 +36,7 @@ export * from './src/components/content-action';
 export * from './src/components/content-action-list';
 export * from './src/components/empty-folder-content';
 export * from './src/components/breadcrumb/breadcrumb.component';
+export * from './src/components/pagination/pagination.component';
 
 // services
 export * from './src/services/folder-actions.service';
@@ -48,7 +50,8 @@ export const DOCUMENT_LIST_DIRECTIVES: [any] = [
     ContentAction,
     ContentActionList,
     EmptyFolderContent,
-    DocumentListBreadcrumb
+    DocumentListBreadcrumb,
+    DocumentListPagination
 ];
 
 export const DOCUMENT_LIST_PROVIDERS: [any] = [

ng2-components/ng2-alfresco-documentlist/src/components/pagination/pagination.component.css

@@ -0,0 +1,64 @@
+.mdl-paging {
+    color: rgba(0, 0, 0, 0.54);
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-justify-content: flex-end;
+    -ms-flex-pack: end;
+    justify-content: flex-end;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    height: 56px;
+    -webkit-flex-flow: row wrap;
+    -ms-flex-flow: row wrap;
+    flex-flow: row wrap;
+}
+
+.mdl-paging > * {
+    -webkit-flex: none;
+    -ms-flex: none;
+    flex: none;
+}
+
+.mdl-list + .mdl-paging {
+    margin: 0;
+}
+
+.mdl-paging__per-page {
+    position: relative;
+}
+
+.mdl-paging__per-page-label {
+    margin-right: 40px;
+}
+
+.mdl-paging__per-page-value {
+    position: absolute;
+    right: 36px;
+    top: 6px;
+}
+
+.mdl-paging__per-page + .mdl-paging__count {
+    margin-left: 24px;
+}
+
+.mdl-paging .mdl-menu {
+    min-width: 64px;
+}
+
+.mdl-paging__prev:last-child {
+    margin-right: 44px;
+}
+
+.mdl-paging__count + .mdl-paging__prev {
+    margin-left: 24px;
+}
+
+.mdl-paging__prev + .mdl-paging__next {
+    margin-left: 12px;
+}
+
+.mdl-paging__count + .mdl-paging__next {
+    margin-left: 68px;
+}

ng2-components/ng2-alfresco-documentlist/src/components/pagination/pagination.component.html

@@ -0,0 +1,23 @@
+<div *ngIf="provider" class="mdl-paging">
+    <span class="mdl-paging__per-page">
+        <span class="mdl-paging__per-page-label">Rows per page:</span>
+        <span class="mdl-paging__per-page-value">{{pageSize}}</span>
+        <button alfresco-mdl-button id="pageSizePicker" class="mdl-button--icon mdl-paging__per-page-dropdown">
+            <i class="material-icons">arrow_drop_down</i>
+        </button>
+        <ul alfresco-mdl-menu for="pageSizePicker" class="mdl-menu--bottom-right">
+            <li *ngFor="let size of supportedPageSizes"
+                tabindex="-1" [attr.data-value]="size" class="mdl-menu__item"
+                (click)="setPageSize(size)">
+                <span>{{size}}</span>
+            </li>
+        </ul>
+    </span>
+    <span class="mdl-paging__count">1-10 of 25</span>
+    <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-paging__prev">
+        <i class="material-icons">keyboard_arrow_left</i>
+    </button>
+    <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-paging__next">
+        <i class="material-icons">keyboard_arrow_right</i>
+    </button>
+</div>

ng2-components/ng2-alfresco-documentlist/src/components/pagination/pagination.component.ts

@@ -0,0 +1,55 @@
+/*!
+ * @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, OnInit } from '@angular/core';
+import {
+    MATERIAL_DESIGN_DIRECTIVES,
+    PaginationProvider
+} from 'ng2-alfresco-core';
+
+declare let __moduleName: string;
+
+@Component({
+    moduleId: __moduleName,
+    selector: 'alfresco-document-list-pagination',
+    templateUrl: './pagination.component.html',
+    styleUrls: ['./pagination.component.css'],
+    directives: [MATERIAL_DESIGN_DIRECTIVES]
+})
+export class DocumentListPagination implements OnInit {
+
+    @Input()
+    supportedPageSizes: number[] = [5, 10, 20, 50, 100];
+
+    @Input()
+    provider: PaginationProvider;
+
+    @Input()
+    pageSize: number = 10;
+
+    constructor() {}
+
+    setPageSize(value: number) {
+        this.pageSize = value;
+    }
+
+    ngOnInit() {
+        console.info(this.provider);
+    }
+}
+
+

ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts

@@ -16,7 +16,7 @@
  */
 
 import { DatePipe } from '@angular/common';
-import { ObjectUtils } from 'ng2-alfresco-core';
+import { PaginationProvider, ObjectUtils } from 'ng2-alfresco-core';
 import {
     DataTableAdapter,
     DataRow, DataColumn, DataSorting
@@ -25,16 +25,24 @@ import {
 import { NodePaging, MinimalNodeEntity } from './../models/document-library.model';
 import { DocumentListService } from './../services/document-list.service';
 
-export class ShareDataTableAdapter implements DataTableAdapter {
+export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvider {
 
     static ERR_ROW_NOT_FOUND: string = 'Row not found';
     static ERR_COL_NOT_FOUND: string = 'Column not found';
 
     static DEFAULT_DATE_FORMAT: string = 'medium';
+    static DEFAULT_PAGE_SIZE: number = 100;
 
     private sorting: DataSorting;
     private rows: DataRow[];
     private columns: DataColumn[];
+    private page: NodePaging;
+
+    private _count: number = 0;
+    private _hasMoreItems: boolean = false;
+    private _totalItems: number = 0;
+    private _skipCount: number = 0;
+    private _maxItems: number = ShareDataTableAdapter.DEFAULT_PAGE_SIZE;
 
     thumbnails: boolean = false;
 
@@ -43,12 +51,34 @@ export class ShareDataTableAdapter implements DataTableAdapter {
                 schema: DataColumn[]) {
         this.rows = [];
         this.columns = schema || [];
+        this.resetPagination();
+    }
+
+    get count(): number {
+        return this._count;
+    }
+
+    get hasMoreItems(): boolean {
+        return this._hasMoreItems;
+    }
+
+    get totalItems(): number {
+        return this._totalItems;
+    }
+
+    get skipCount(): number {
+        return this._skipCount;
+    }
+
+    get maxItems(): number {
+        return this._maxItems;
     }
 
     getRows(): Array<DataRow> {
         return this.rows;
     }
 
+    // TODO: disable this api
     setRows(rows: Array<DataRow>) {
         this.rows = rows || [];
         this.sort();
@@ -165,33 +195,53 @@ export class ShareDataTableAdapter implements DataTableAdapter {
         if (path && this.documentListService) {
             this.documentListService
                 .getFolder(path)
-                .subscribe(val => {
+                .subscribe(val => this.loadPage(<NodePaging>val),
-                    let page = <NodePaging>val;
-                    let rows = [];
-
-                    if (page && page.list) {
-                        let data = page.list.entries;
-                        if (data && data.length > 0) {
-                            rows = data.map(item => new ShareDataRow(item));
-
-                            // Sort by first sortable or just first column
-                            if (this.columns && this.columns.length > 0) {
-                                let sortable = this.columns.filter(c => c.sortable);
-                                if (sortable.length > 0) {
-                                    this.sort(sortable[0].key, 'asc');
-                                } else {
-                                    this.sort(this.columns[0].key, 'asc');
-                                }
-                            }
-                        }
-                    }
-
-                    this.rows = rows;
-                },
                 error => console.error(error));
         }
     }
 
+    private loadPage(page: NodePaging) {
+        this.page = page;
+        this.resetPagination();
+
+        let rows = [];
+
+        if (page && page.list) {
+            let data = page.list.entries;
+            if (data && data.length > 0) {
+                rows = data.map(item => new ShareDataRow(item));
+
+                // Sort by first sortable or just first column
+                if (this.columns && this.columns.length > 0) {
+                    let sortable = this.columns.filter(c => c.sortable);
+                    if (sortable.length > 0) {
+                        this.sort(sortable[0].key, 'asc');
+                    } else {
+                        this.sort(this.columns[0].key, 'asc');
+                    }
+                }
+            }
+
+            let pagination = page.list.pagination;
+            if (pagination) {
+                this._count = pagination.count;
+                this._hasMoreItems = pagination.hasMoreItems;
+                this._maxItems = pagination.maxItems;
+                this._skipCount = pagination.skipCount;
+                this._totalItems = pagination.totalItems;
+            }
+        }
+
+        this.rows = rows;
+    }
+
+    private resetPagination() {
+        this._count = 0;
+        this._hasMoreItems = false;
+        this._totalItems = 0;
+        this._skipCount = 0;
+        this._maxItems = ShareDataTableAdapter.DEFAULT_PAGE_SIZE;
+    }
 }
 
 export class ShareDataRow implements DataRow {

ng2-components/ng2-alfresco-documentlist/src/services/document-list.service.ts

@@ -89,6 +89,7 @@ export class DocumentListService {
         return Observable.fromPromise(nodesApi.deleteNode(nodeId, opts));
     }
 
+    // TODO: rename to 'getFolderContent'
     /**
      * Gets the folder node with the content.
      * @param folder Path to folder.