[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/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;
-    }
-}