[ADF-994] Integrate SFS enhancements for Pagination component (#2119)

* Add pagination module with pagination component

* Update the old pagination to have the old selector

* Add licence headers to ts files

* Update pagination files

* Rename properties for consistency reasons and remove redundant event emitters

* Add PaginationQueryParams interface to reference the query params used for paginated requests

* Add documentation of pagination (work in progress)

* Add i18n translations to pagination component

* Rename some variables used in pagination template

* Update pagination component to be backwards compatible

* Update pagination component specs

* Update pagination’s documentation

* Remove the old pagination code

* Add old alfresco-pagination tag selector

* Update document list component to include the new pagination

* Add adf-pagination in search component

* Update link to pagination component from main readme file

* Update search component specs

* Add a default pagination object in case it’s not provided

* Assign pagination to default one to default the missing properties (if any)

* Remove unused variables

* Add fail hints from expectancies of pagination tests

* Add default onInit and remove the old defaults

ng2-components/README.md

@@ -62,7 +62,7 @@
 - [adf-dropdown-breadcrumb](ng2-alfresco-documentlist/README.md)
 - [adf-breadcrumb](ng2-alfresco-documentlist/README.md)
 - [adf-document-list](ng2-alfresco-documentlist/README.md)
-- [adf-pagination](ng2-alfresco-datatable/README.md)
+- [adf-pagination](ng2-alfresco-core/src/components/pagination/pagination.md)
 - [adf-empty-list](ng2-alfresco-datatable/README.md)
 - [adf-datatable](ng2-alfresco-datatable/README.md)
 - [adf-datatable-cell](ng2-alfresco-datatable/README.md)

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

@@ -24,6 +24,7 @@ import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 
 import { CollapsableModule } from './src/components/collapsable/collapsable.module';
 import { ContextMenuModule } from './src/components/context-menu/context-menu.module';
+import { PaginationModule } from './src/components/pagination/pagination.module';
 import { ToolbarModule } from './src/components/toolbar/toolbar.module';
 import { CardViewModule } from './src/components/view/card-view.module';
 import { MaterialModule } from './src/material.module';
@@ -209,6 +210,7 @@ export function createTranslateLoader(http: Http, logService: LogService) {
         }),
         MaterialModule,
         AppConfigModule,
+        PaginationModule,
         ToolbarModule,
         ContextMenuModule,
         CardViewModule,
@@ -236,6 +238,7 @@ export function createTranslateLoader(http: Http, logService: LogService) {
         ContextMenuModule,
         CardViewModule,
         CollapsableModule,
+        PaginationModule,
         ToolbarModule,
         ...obsoleteMdlDirectives(),
         UploadDirective,

ng2-components/ng2-alfresco-core/src/components/pagination/pagination-query-params.interface.ts

@@ -0,0 +1,31 @@
+/*!
+ * @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.
+ */
+
+/**
+ * PaginationQueryParams object is used to emit events regarding pagination having two
+ * properties from the Pagination interface found in AlfrescoJS API
+ *
+ * The two properties are "skipCount" and "maxItems" that are sent as query parameters
+ * to server to paginate results
+ *
+ * @TODO Contribute this to AlfrescoJS API
+ */
+
+export interface PaginationQueryParams {
+    skipCount: number;
+    maxItems: number;
+};

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

@@ -0,0 +1,64 @@
+<div class="adf-pagination__block adf-pagination__range">
+    <span>
+        {{
+            'CORE.PAGINATION.ITEMS_RANGE' | translate: {
+                range: range.join('-'),
+                total: pagination.totalItems
+            }
+        }}
+    </span>
+</div>
+
+<div class="adf-pagination__block adf-pagination__size">
+    <span>{{ 'CORE.PAGINATION.ITEMS_PER_PAGE' | translate }}</span>
+    {{ pagination.maxItems }}
+    <button md-icon-button [mdMenuTriggerFor]="pageSizeMenu">
+        <md-icon>arrow_drop_down</md-icon>
+    </button>
+
+    <md-menu #pageSizeMenu="mdMenu">
+        <button
+            md-menu-item
+            *ngFor="let pageSize of supportedPageSizes"
+            (click)="changePageSize(pageSize)">
+            {{ pageSize }}
+        </button>
+    </md-menu>
+</div>
+
+<div class="adf-pagination__block adf-pagination__current-page">
+    {{ 'CORE.PAGINATION.CURRENT_PAGE' | translate }} {{ current }}
+
+    <button md-icon-button [mdMenuTriggerFor]="pagesMenu" *ngIf="pages.length > 1">
+        <md-icon>arrow_drop_down</md-icon>
+    </button>
+
+    <span>
+        {{ 'CORE.PAGINATION.TOTAL_PAGES' | translate: { total: pages.length } }}
+    </span>
+
+    <md-menu #pagesMenu="mdMenu">
+        <button
+            md-menu-item
+            *ngFor="let pageNumber of pages"
+            (click)="changePageNumber(pageNumber)">
+            {{ pageNumber }}
+        </button>
+    </md-menu>
+</div>
+
+<div class="adf-pagination__block adf-pagination__navigation">
+    <button
+        md-icon-button
+        [disabled]="isFirstPage"
+        (click)="goPrevious()">
+        <md-icon>keyboard_arrow_left</md-icon>
+    </button>
+
+    <button
+        md-icon-button
+        [disabled]="isLastPage"
+        (click)="goNext()">
+        <md-icon>keyboard_arrow_right</md-icon>
+    </button>
+</div>

ng2-components/ng2-alfresco-core/src/components/pagination/pagination.component.scss

@@ -0,0 +1,37 @@
+@import 'theming';
+
+$adf-pagination--height: 48px;
+$adf-pagination--icon-button-size: 32px;
+
+.adf-pagination {
+    display: flex;
+    border-top: 1px solid $alfresco-divider-color;
+    height: $adf-pagination--height;
+    line-height: $adf-pagination--height;
+
+    &__block {
+        display: flex;
+        align-items: center;
+        padding: 0 12px;
+        border-right: 1px solid $alfresco-divider-color;
+
+        &:first-child {
+            flex: 1 1 auto;
+        }
+
+        &:last-child {
+            border-right-width: 0;
+        }
+
+        span {
+            color: $alfresco-secondary-text-color;
+            margin: 0 5px;
+        }
+    }
+
+    button[md-icon-button] {
+        width: $adf-pagination--icon-button-size;
+        height: $adf-pagination--icon-button-size;
+        line-height: $adf-pagination--icon-button-size;
+    }
+}

ng2-components/ng2-alfresco-core/src/components/pagination/pagination.component.spec.ts

@@ -0,0 +1,276 @@
+/*!
+ * @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 { NO_ERRORS_SCHEMA } from '@angular/core';
+import { async, TestBed } from '@angular/core/testing';
+import { MaterialModule } from '@angular/material';
+
+import { CoreModule } from 'ng2-alfresco-core';
+
+import { PaginationComponent } from './pagination.component';
+
+declare let jasmine: any;
+
+class FakePaginationInput {
+    count: string = 'Not applicable / not used';
+    hasMoreItems: string = 'Not applicable / not used';
+    totalItems: number = null;
+    skipCount: number = null;
+    maxItems: number = 25;
+
+    constructor(pagesCount, currentPage, lastPageItems) {
+        this.totalItems = ((pagesCount - 1) * this.maxItems) + lastPageItems;
+        this.skipCount = (currentPage - 1) * this.maxItems;
+    }
+}
+
+class TestConfig {
+    testBed: any = null;
+
+    constructor() {
+        this.testBed = TestBed.configureTestingModule({
+            imports: [
+                CoreModule.forRoot(),
+                MaterialModule
+            ],
+            schemas: [ NO_ERRORS_SCHEMA ]
+        });
+    }
+}
+
+describe('PaginationComponent', () => {
+    beforeEach(() => {
+        jasmine.Ajax.install();
+    });
+
+    afterEach(() => {
+        jasmine.Ajax.uninstall();
+    });
+
+    beforeEach(async(() => {
+        const test = new TestConfig();
+
+        test.testBed
+            .compileComponents()
+            .then(() => {
+                const fixture = test.testBed.createComponent(PaginationComponent);
+                const component: PaginationComponent = fixture.componentInstance;
+
+                (<any> component).ngAfterViewInit = jasmine
+                    .createSpy('ngAfterViewInit').and
+                    .callThrough();
+
+                spyOn(component.onChangePageNumber, 'emit');
+                spyOn(component.onChangePageSize, 'emit');
+                spyOn(component.onNextPage, 'emit');
+                spyOn(component.onPrevPage, 'emit');
+
+                this.fixture = fixture;
+                this.component = component;
+
+                fixture.detectChanges();
+            });
+    }));
+
+    describe('Single page', () => {
+        beforeEach(() => {
+            this.component.pagination = new FakePaginationInput(1, 1, 10);
+        });
+
+        it('has a single page', () => {
+            expect(this.component.pages.length).toBe(1);
+        });
+
+        it('has current page 1', () => {
+            expect(this.component.current).toBe(1);
+        });
+
+        it('is first and last page', () => {
+            expect(this.component.isFirstPage).toBe(true);
+            expect(this.component.isLastPage).toBe(true);
+        });
+
+        it('has range', () => {
+            expect(this.component.range).toEqual([ 1, 10 ]);
+        });
+    });
+
+    describe('Single full page', () => {
+        beforeEach(() => {
+            this.component.pagination = new FakePaginationInput(1, 1, 25);
+        });
+
+        it('has a single page', () => {
+            expect(this.component.pages.length).toBe(1);
+        });
+
+        it('has range', () => {
+            expect(this.component.range).toEqual([ 1, 25 ]);
+        });
+    });
+
+    describe('Middle page', () => {
+
+        // This test describes 6 pages being on the third page
+        // and last page has 5 items
+
+        beforeEach(() => {
+            this.component.pagination = new FakePaginationInput(6, 3, 5);
+        });
+
+        it('has more pages', () => {
+            expect(this.component.pages.length).toBe(6);
+        });
+
+        it('has the last page', () => {
+            expect(this.component.lastPage).toBe(6);
+        });
+
+        it('is on the 3rd page', () => {
+            expect(this.component.current).toBe(3);
+        });
+
+        it('has previous and next page', () => {
+            expect(this.component.previous).toBe(2);
+            expect(this.component.next).toBe(4);
+        });
+
+        it('is not first, nor last', () => {
+            expect(this.component.isFirstPage).toBe(false);
+            expect(this.component.isLastPage).toBe(false);
+        });
+
+        it('has range', () => {
+            expect(this.component.range).toEqual([ 51, 75 ]);
+        });
+
+        it('goes next', () => {
+            const { component } = this;
+
+            component.goNext();
+
+            const { emit: { calls } } = component.onNextPage;
+            const { skipCount } = calls.mostRecent().args[0];
+
+            expect(skipCount).toBe(75);
+        });
+
+        it('goes previous', () => {
+            const { component } = this;
+
+            component.goPrevious();
+
+            const { emit: { calls } } = component.onPrevPage;
+            const { skipCount } = calls.mostRecent().args[0];
+
+            expect(skipCount).toBe(25);
+        });
+
+        it('changes page size', () => {
+            const { component } = this;
+            component.changePageSize(50);
+
+            const { emit: { calls } } = component.onChangePageSize;
+            const { maxItems } = calls.mostRecent().args[0];
+
+            expect(maxItems).toBe(50);
+        });
+
+        it('changes page number', () => {
+            const { component } = this;
+
+            component.changePageNumber(5);
+
+            const { emit: { calls } } = component.onChangePageNumber;
+            const { skipCount } = calls.mostRecent().args[0];
+
+            expect(skipCount).toBe(100);
+        });
+    });
+
+    describe('First page', () => {
+
+        // This test describes 10 pages being on the first page
+
+        beforeEach(() => {
+            this.component.pagination = new FakePaginationInput(10, 1, 5);
+        });
+
+        it('is on the first page', () => {
+            expect(this.component.current).toBe(1);
+            expect(this.component.isFirstPage).toBe(true);
+        });
+
+        it('has the same, previous page', () => {
+            expect(this.component.previous).toBe(1);
+        });
+
+        it('has next page', () => {
+            expect(this.component.next).toBe(2);
+        });
+
+        it('has range', () => {
+            expect(this.component.range).toEqual([ 1, 25 ]);
+        });
+    });
+
+    describe('Last page', () => {
+
+        // This test describes 10 pages being on the last page
+
+        beforeEach(() => {
+            this.component.pagination = new FakePaginationInput(10, 10, 5);
+        });
+
+        it('is on the last page', () => {
+            expect(this.component.current).toBe(10);
+            expect(this.component.isLastPage).toBe(true);
+        });
+
+        it('has the same, next page', () => {
+            expect(this.component.next).toBe(10);
+        });
+
+        it('has previous page', () => {
+            expect(this.component.previous).toBe(9);
+        });
+
+        it('has range', () => {
+            expect(this.component.range).toEqual([ 226, 230 ]);
+        });
+    });
+
+    describe('Without pagination input', () => {
+        it('has defaults', () => {
+            const {
+                current, lastPage, isFirstPage, isLastPage,
+                next, previous, range, pages
+            } = this.component;
+
+            expect(lastPage).toBe(1, 'lastPage');
+            expect(previous).toBe(1, 'previous');
+            expect(current).toBe(1, 'current');
+            expect(next).toBe(1, 'next');
+
+            expect(isFirstPage).toBe(true, 'isFirstPage');
+            expect(isLastPage).toBe(true, 'isLastPage');
+
+            expect(range).toEqual([ 0, 0 ], 'range');
+            expect(pages).toEqual([ 1 ], 'pages');
+        });
+    });
+});

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

@@ -0,0 +1,206 @@
+/*!
+ * @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 {
+    ChangeDetectionStrategy,
+    Component,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+    ViewEncapsulation
+} from '@angular/core';
+
+import { Pagination } from 'alfresco-js-api';
+import { PaginationQueryParams } from './pagination-query-params.interface';
+
+@Component({
+    selector: 'adf-pagination, alfresco-pagination',
+    host: { 'class': 'adf-pagination' },
+    templateUrl: './pagination.component.html',
+    styleUrls: [ './pagination.component.scss' ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None
+})
+export class PaginationComponent implements OnInit {
+
+    static DEFAULT_PAGE_SIZE: number = 25;
+
+    static ACTIONS = {
+        NEXT_PAGE: 'NEXT_PAGE',
+        PREV_PAGE: 'PREV_PAGE',
+        CHANGE_PAGE_SIZE: 'CHANGE_PAGE_SIZE',
+        CHANGE_PAGE_NUMBER: 'CHANGE_PAGE_NUMBER'
+    };
+
+    @Input()
+    supportedPageSizes: number[] = [ 25, 50, 100 ];
+
+    /** @deprecated */
+    /** "pagination" object already has "maxItems" */
+    @Input()
+    maxItems: number = PaginationComponent.DEFAULT_PAGE_SIZE;
+
+    @Input()
+    pagination: Pagination;
+
+    @Output('change')
+    onChange: EventEmitter<PaginationQueryParams> = new EventEmitter<PaginationQueryParams>();
+
+    @Output('changePageNumber')
+    onChangePageNumber: EventEmitter<Pagination> = new EventEmitter<Pagination>();
+
+    @Output('changePageSize')
+    onChangePageSize: EventEmitter<Pagination> = new EventEmitter<Pagination>();
+
+    @Output('nextPage')
+    onNextPage: EventEmitter<Pagination> = new EventEmitter<Pagination>();
+
+    @Output('prevPage')
+    onPrevPage: EventEmitter<Pagination> = new EventEmitter<Pagination>();
+
+    ngOnInit() {
+        this.pagination = {
+            skipCount: 0,
+            maxItems: PaginationComponent.DEFAULT_PAGE_SIZE,
+            totalItems: 0
+        };
+    }
+
+    get lastPage(): number {
+        const { maxItems, totalItems } = this.pagination;
+
+        return (totalItems && maxItems)
+            ? Math.ceil(totalItems / maxItems)
+            : 1;
+    }
+
+    get current(): number {
+        const { maxItems, skipCount } = this.pagination;
+
+        return (skipCount && maxItems)
+            ? Math.floor(skipCount / maxItems) + 1
+            : 1;
+    }
+
+    get isLastPage(): boolean {
+        const { current, lastPage } = this;
+        return current === lastPage;
+    }
+
+    get isFirstPage(): boolean {
+        return this.current === 1;
+    }
+
+    get next(): number {
+        const { isLastPage, current } = this;
+        return isLastPage ? current : current + 1;
+    }
+
+    get previous(): number {
+        const { isFirstPage, current } = this;
+        return isFirstPage ? 1 : current - 1;
+    }
+
+    get range(): number[] {
+        const { skipCount, maxItems, totalItems } = this.pagination;
+        const { isLastPage } = this;
+
+        const start = totalItems ? skipCount + 1 : 0;
+        const end = isLastPage ? totalItems : skipCount + maxItems;
+
+        return [ start, end ];
+    }
+
+    get pages(): number[] {
+        return Array(this.lastPage)
+            .fill('n')
+            .map((item, index) => (index + 1));
+    }
+
+    goNext() {
+        const { next, pagination: { maxItems } } = this;
+
+        this.handlePaginationEvent(PaginationComponent.ACTIONS.NEXT_PAGE, {
+            skipCount: (next - 1) * maxItems,
+            maxItems
+        });
+    }
+
+    goPrevious() {
+        const { previous, pagination: { maxItems } } = this;
+
+        this.handlePaginationEvent(PaginationComponent.ACTIONS.PREV_PAGE, {
+            skipCount: (previous - 1) * maxItems,
+            maxItems
+        });
+    }
+
+    changePageNumber(pageNumber: number) {
+        const { pagination: { maxItems } } = this;
+
+        this.handlePaginationEvent(PaginationComponent.ACTIONS.CHANGE_PAGE_NUMBER, {
+            skipCount: (pageNumber - 1) * maxItems,
+            maxItems
+        });
+    }
+
+    changePageSize(maxItems: number) {
+        this.handlePaginationEvent(PaginationComponent.ACTIONS.CHANGE_PAGE_SIZE, {
+            skipCount: 0,
+            maxItems
+        });
+    }
+
+    handlePaginationEvent(action: string, params: PaginationQueryParams) {
+        const {
+            NEXT_PAGE,
+            PREV_PAGE,
+            CHANGE_PAGE_NUMBER,
+            CHANGE_PAGE_SIZE
+        } = PaginationComponent.ACTIONS;
+
+        const {
+            onChange,
+            onChangePageNumber,
+            onChangePageSize,
+            onNextPage,
+            onPrevPage,
+            pagination
+        } = this;
+
+        const data = Object.assign({}, pagination, params);
+
+        if (action === NEXT_PAGE) {
+            onNextPage.emit(data);
+        }
+
+        if (action === PREV_PAGE) {
+            onPrevPage.emit(data);
+        }
+
+        if (action === CHANGE_PAGE_NUMBER) {
+            onChangePageNumber.emit(data);
+        }
+
+        if (action === CHANGE_PAGE_SIZE) {
+            onChangePageSize.emit(data);
+        }
+
+        onChange.emit(params);
+    }
+}

ng2-components/ng2-alfresco-core/src/components/pagination/pagination.md

@@ -0,0 +1,37 @@
+# Pagination Component
+
+## Basic example
+
+```html
+<adf-pagination
+    [pagination]="pagination"
+    [supportedPageSizes]="sizes"
+    (change)="onChange($event)"
+    (nextPage)="onNextPage($event)"
+    (prevPage)="onPreviousPage($event)"
+    (changePageSize)="onChangePageSize($event)"
+    (changePageNumber)="onChangePageNumber($event)">
+</adf-pagination>
+```
+
+Depending on the pagination data, you should see result similar to the following one:
+
+![](../../../docs/pagination/basic.png)
+
+## Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| pagination | Pagination | | Pagination object |
+| supportedPageSizes | Array&lt;number&gt; | [ 25, 50, 100 ] | An array of page sizes |
+| change | EventEmitter&lt;PaginationQueryParams&gt; | | Triggered for any action in pagination |
+| nextPage | EventEmitter&lt;Pagination&gt; | | Triggered on next page action |
+| prevPage | EventEmitter&lt;Pagination&gt; | | Triggered on previous page action |
+| changePageSize | EventEmitter&lt;Pagination&gt; | | Triggered on page size change action |
+| changePageNumber | EventEmitter&lt;Pagination&gt; | | Triggered on page change action |
+
+Each event helps to detect the certain action that user have made using the component.
+
+For `change` event, a [PaginationQueryParams](https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-core/src/components/pagination/pagination-query-params.ts) (including the query params supported by the REST API, `skipCount` and `maxItems`) is returned.
+
+For all other events, other than `change`, a new [Pagination object](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/Pagination.md) is returned as in the folowing example, with updated properties to be used to query further.

ng2-components/ng2-alfresco-core/src/components/pagination/pagination.module.ts

@@ -0,0 +1,39 @@
+/*!
+ * @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 { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MaterialModule } from '@angular/material';
+
+import { TranslateModule } from '@ngx-translate/core';
+
+import { PaginationComponent } from './pagination.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        TranslateModule,
+        MaterialModule
+    ],
+    declarations: [
+        PaginationComponent
+    ],
+    exports: [
+        PaginationComponent
+    ]
+})
+export class PaginationModule {}

ng2-components/ng2-alfresco-core/src/i18n/en.json

@@ -1,3 +1,10 @@
 {
-
+    "CORE": {
+        "PAGINATION": {
+            "ITEMS_RANGE": "Showing {{ range }} of {{ total }}",
+            "ITEMS_PER_PAGE": "Items per page",
+            "CURRENT_PAGE": "Page",
+            "TOTAL_PAGES": "of {{ total }}"
+        }
+    }
 }

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

@@ -24,14 +24,12 @@ export * from './src/data/index';
 export { DataTableCellComponent } from './src/components/datatable/datatable-cell.component';
 export { DataTableComponent } from './src/components/datatable/datatable.component';
 export { EmptyListComponent } from './src/components/datatable/empty-list.component';
-export { PaginationComponent } from './src/components/pagination/pagination.component';
 export { DataCellEvent, DataCellEventModel } from './src/components/datatable/data-cell.event';
 export { DataRowActionEvent, DataRowActionModel } from './src/components/datatable/data-row-action.event';
 
 import { DataTableCellComponent } from './src/components/datatable/datatable-cell.component';
 import { DataTableComponent } from './src/components/datatable/datatable.component';
 import { EmptyListComponent } from './src/components/datatable/empty-list.component';
-import { PaginationComponent } from './src/components/pagination/pagination.component';
 import { LoadingContentTemplateDirective } from './src/directives/loading-template.directive';
 import { NoContentTemplateDirective } from './src/directives/no-content-template.directive';
 
@@ -41,8 +39,7 @@ export function directives() {
         EmptyListComponent,
         DataTableCellComponent,
         NoContentTemplateDirective,
-        LoadingContentTemplateDirective,
-        PaginationComponent
+        LoadingContentTemplateDirective
     ];
 }
 

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

@@ -1,63 +0,0 @@
-.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 {
-    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-datatable/src/components/pagination/pagination.component.html

@@ -1,27 +0,0 @@
-<div 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" >{{pagination.maxItems}}</span>
-
-        <md-menu #appMenu="mdMenu" for="pageSizePicker">
-            <div *ngFor="let size of supportedPageSizes"
-                tabindex="-1" [attr.data-value]="size" md-menu-item (click)="setPageSize(size)">
-                <span>{{size}}</span>
-            </div>
-        </md-menu>
-        <button  id="pageSizePicker" md-icon-button [mdMenuTriggerFor]="appMenu">
-            <md-icon>arrow_drop_down</md-icon>
-        </button>
-    </span>
-    <span class="mdl-paging__count">{{summary}}</span>
-    <button (click)="showPrevPage()"
-            [disabled]="!prevPageAvail()"
-            md-icon-button class="mdl-button--icon mdl-paging__prev">
-        <md-icon>keyboard_arrow_left</md-icon>
-    </button>
-    <button (click)="showNextPage()"
-            [disabled]="!nextPageAvail()"
-            md-icon-button class="mdl-button--icon mdl-paging__next">
-        <md-icon>keyboard_arrow_right</md-icon>
-    </button>
-</div>

ng2-components/ng2-alfresco-datatable/src/components/pagination/pagination.component.spec.ts

@@ -1,108 +0,0 @@
-/*!
- * @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 { Injector, SimpleChange } from '@angular/core';
-import { getTestBed, TestBed } from '@angular/core/testing';
-import { PaginationData } from '../../models/pagination.data';
-import { PaginationComponent } from '../pagination/pagination.component';
-
-describe('PaginationComponent', () => {
-    let injector: Injector;
-    let paginationComponent: PaginationComponent;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            providers: [
-                PaginationComponent
-            ]
-        });
-        injector = getTestBed();
-        paginationComponent = injector.get(PaginationComponent);
-        paginationComponent.pagination = new PaginationData(0, 0, 0, 20, true);
-    });
-
-    it('should create Pagination object on init if no object pagination is passed', () => {
-        paginationComponent.pagination = null;
-        paginationComponent.ngOnInit();
-        expect(paginationComponent.pagination).not.toBe(null);
-    });
-
-    it('is defined', () => {
-        expect(paginationComponent).toBeDefined();
-    });
-
-    it('page size', () => {
-        expect(paginationComponent.pagination.maxItems).toBe(20);
-    });
-
-    it('set page size', () => {
-        paginationComponent.pagination.maxItems = 100;
-        expect(paginationComponent.pagination.maxItems).toBe(100);
-    });
-
-    it('prevPageAvail dafault false', () => {
-        expect(paginationComponent.prevPageAvail()).toBe(false);
-    });
-
-    it('nextPageAvail default true', () => {
-        expect(paginationComponent.nextPageAvail()).toBe(true);
-    });
-
-    it('showNextPage', () => {
-        expect(paginationComponent.pagination.skipCount).toBe(0);
-        paginationComponent.showNextPage();
-        expect(paginationComponent.pagination.skipCount).toBe(20);
-    });
-
-    it('showPrevPage', () => {
-        paginationComponent.pagination.skipCount = 100;
-        paginationComponent.showPrevPage();
-        expect(paginationComponent.pagination.skipCount).toBe(80);
-    });
-
-    it('should update the summary on nextpage click', () => {
-        spyOn(paginationComponent, 'updateSummary');
-
-        paginationComponent.showNextPage();
-
-        expect(paginationComponent.updateSummary).toHaveBeenCalled();
-    });
-
-    it('should update the summary on prevpage click', () => {
-        spyOn(paginationComponent, 'updateSummary');
-
-        paginationComponent.showPrevPage();
-
-        expect(paginationComponent.updateSummary).toHaveBeenCalled();
-    });
-
-    it('should update the summary on chage page size click', () => {
-        spyOn(paginationComponent, 'updateSummary');
-
-        paginationComponent.setPageSize(100);
-
-        expect(paginationComponent.updateSummary).toHaveBeenCalled();
-    });
-
-    it('should update the summary on input pagination parameter change', () => {
-        spyOn(paginationComponent, 'updateSummary');
-
-        paginationComponent.ngOnChanges({pagination: new SimpleChange(null, new PaginationData(0, 0, 0, 20, true), true)});
-
-        expect(paginationComponent.updateSummary).toHaveBeenCalled();
-    });
-});

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

@@ -1,104 +0,0 @@
-/*!
- * @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, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
-import { Pagination } from 'alfresco-js-api';
-import { PaginationData } from '../../models/pagination.data';
-
-@Component({
-    selector: 'adf-pagination, alfresco-pagination',
-    templateUrl: './pagination.component.html',
-    styleUrls: ['./pagination.component.css']
-})
-export class PaginationComponent implements OnInit, OnChanges {
-
-    static DEFAULT_PAGE_SIZE: number = 20;
-
-    summary: string = '';
-
-    @Input()
-    supportedPageSizes: number[] = [5, 10, 20, 50, 100];
-
-    @Input()
-    maxItems: number = PaginationComponent.DEFAULT_PAGE_SIZE;
-
-    @Input()
-    pagination: Pagination;
-
-    @Output()
-    changePageSize: EventEmitter<Pagination> = new EventEmitter<Pagination>();
-
-    @Output()
-    nextPage: EventEmitter<Pagination> = new EventEmitter<Pagination>();
-
-    @Output()
-    prevPage: EventEmitter<Pagination> = new EventEmitter<Pagination>();
-
-    constructor() {
-    }
-
-    ngOnInit() {
-        if (!this.pagination) {
-            this.pagination = new PaginationData(0, 0, 0, this.maxItems, true);
-        }
-    }
-
-    ngOnChanges(changes: SimpleChanges) {
-        if (changes['pagination']) {
-            if (changes['pagination'].currentValue) {
-                this.pagination = changes['pagination'].currentValue;
-                this.updateSummary();
-            }
-        }
-    }
-
-    setPageSize(value: number) {
-        this.pagination.maxItems = value;
-        this.updateSummary();
-        this.changePageSize.emit(this.pagination);
-    }
-
-    nextPageAvail(): boolean {
-        return this.pagination.hasMoreItems;
-    }
-
-    prevPageAvail(): boolean {
-        return this.pagination.skipCount > 0;
-    }
-
-    showNextPage() {
-        this.pagination.skipCount += this.pagination.maxItems;
-        this.updateSummary();
-        this.nextPage.emit(this.pagination);
-    }
-
-    showPrevPage() {
-        this.pagination.skipCount -= this.pagination.maxItems;
-        this.updateSummary();
-        this.prevPage.emit(this.pagination);
-    }
-
-    updateSummary() {
-        let from = this.pagination.skipCount;
-        if (from === 0) {
-            from = 1;
-        }
-        let to = this.pagination.skipCount + this.pagination.count;
-        let of = this.pagination.totalItems;
-        this.summary = `${from}-${to} of ${of}`;
-    }
-}

ng2-components/ng2-alfresco-datatable/src/models/pagination.data.ts

@@ -1,57 +0,0 @@
-/*!
- * @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 { Pagination } from 'alfresco-js-api';
-
-export class PaginationData implements Pagination {
-
-    /**
-     *  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;
-
-    constructor(count: number, totalItems: number, skipCount: number, maxItems: number, hasMoreItems: boolean) {
-        this.count = count;
-        this.hasMoreItems = hasMoreItems;
-        this.totalItems = totalItems;
-        this.skipCount = skipCount;
-        this.maxItems = maxItems;
-    }
-}

ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html

@@ -5,6 +5,7 @@
     (error)="onActionMenuError($event)"
     (permissionErrorEvent)="onPermissionError($event)">
 </adf-document-menu-action>
+
 <adf-datatable
     [selectionMode]="selectionMode"
     [data]="data"
@@ -24,6 +25,7 @@
     (rowDblClick)="onNodeDblClick($event.value?.node)"
     (row-select)="onNodeSelect($event.detail)"
     (row-unselect)="onNodeUnselect($event.detail)">
+
     <div *ngIf="!isEmptyTemplateDefined()">
         <no-content-template>
             <ng-template>
@@ -33,24 +35,28 @@
             </ng-template>
         </no-content-template>
     </div>
+
     <div>
         <loading-content-template>
             <ng-template>
                 <div class="adf-document-list-loading-container">
-                    <md-progress-spinner id="adf-document-list-loading"
-                                         class="adf-document-list-loading-margin"
-                                         [color]="'primary'"
-                                         [mode]="'indeterminate'">
+                    <md-progress-spinner
+                        id="adf-document-list-loading"
+                        class="adf-document-list-loading-margin"
+                        [color]="'primary'"
+                        [mode]="'indeterminate'">
                     </md-progress-spinner>
                 </div>
             </ng-template>
         </loading-content-template>
     </div>
 </adf-datatable>
-<adf-pagination *ngIf="isPaginationEnabled()"
-                     (changePageSize)="onChangePageSize($event)"
-                     (nextPage)="onNextPage($event)"
-                     (prevPage)="onPrevPage($event)"
-                     [pagination]="pagination"
-                     [supportedPageSizes]="[5, 10, 15, 20]">
+
+<adf-pagination
+    *ngIf="isPaginationEnabled()"
+    (changePageSize)="onChangePageSize($event)"
+    (nextPage)="onNextPage($event)"
+    (prevPage)="onPrevPage($event)"
+    [pagination]="pagination"
+    [supportedPageSizes]="[5, 10, 15, 20]">
 </adf-pagination>

ng2-components/ng2-alfresco-search/src/components/search.component.html

@@ -68,6 +68,7 @@
                 </content-action>
             </content-actions>
         </adf-document-list>
+
         <adf-pagination
             (changePageSize)="onChangePageSize($event)"
             (nextPage)="onNextPage($event)"

ng2-components/ng2-alfresco-search/src/components/search.component.spec.ts

@@ -32,6 +32,12 @@ describe('SearchComponent', () => {
 
     let result = {
         list: {
+            pagination: {
+                hasMoreItems: false,
+                maxItems: 25,
+                skipCount: 0,
+                totalItems: 1
+            },
             entries: [
                 {
                     entry: {
@@ -55,6 +61,12 @@ describe('SearchComponent', () => {
 
     let folderResult = {
         list: {
+            pagination: {
+                hasMoreItems: false,
+                maxItems: 25,
+                skipCount: 0,
+                totalItems: 1
+            },
             entries: [
                 {
                     entry: {
@@ -76,6 +88,12 @@ describe('SearchComponent', () => {
 
     let noResult = {
         list: {
+            pagination: {
+                hasMoreItems: false,
+                maxItems: 25,
+                skipCount: 0,
+                totalItems: 0
+            },
             entries: []
         }
     };