fix: (Core) Add missed controls into Pagination component and fix sma…

…ll issue (#4183)

* fix pagination issue, update docs, add select default items per page

* add text alternative

* fix PR note

* fix pagination service test

* small improvement for shown pages

apps/docs/src/app/core/component-docs/pagination/examples/pagination-example.component.ts

@@ -1,48 +1,53 @@
 import { Component, ViewChild } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { PaginationComponent } from '@fundamental-ngx/core';
+import { tap, delay } from 'rxjs/operators';
 
 @Component({
     selector: 'fd-pagination-example',
     template: ` <fd-pagination
+            [displayTotalItems]="false"
             [totalItems]="totalItems"
             (pageChangeStart)="newPageClicked($event)"
-            [itemsPerPage]="itemsPerPage"
             [currentPage]="currentPage"
         ></fd-pagination>
         <br /><br />
-        <button fd-button label="Go to page 1" (click)="goToPage1()"></button>`
+        <button fd-button label="Go to page 1" (click)="goToPage(1)"></button>
+        <div *ngIf="notification">{{ notification }}</div>
+        `
 })
 export class PaginationExampleComponent {
     totalItems = 50;
     itemsPerPage = 10;
-    currentPage = 3;
+    currentPage = 5;
+    notification: string = null;
 
     @ViewChild(PaginationComponent) paginationComponent: PaginationComponent;
 
-    newPageClicked(event): void {
-        this.http.get('assets/pagination-data.json').subscribe(
+    newPageClicked(event: number): void {
+        this.http.get('assets/pagination-data.json').pipe(
+            tap(() => {
+                this.notification = 'loading...';
+            }),
+            delay(100),
+        ).subscribe(
             (data) => {
-                /*
-             update the currentPage when the http action is successful
-             */
+                /* update the currentPage when the http action is successful */
                 this.currentPage = event;
-                console.log('page change success!');
+                this.notification = 'page change success!';
             },
             (error) => {
-                /*
-             do not update the currentPage when the http action fails
-             */
-                console.log('page change error!');
+                /* do not update the currentPage when the http action fails */
+                this.notification = 'page change error!';
             },
             () => {
-                alert('New page selected: ' + this.currentPage);
+                this.notification = 'New page selected: ' + this.currentPage;
             }
         );
     }
 
-    goToPage1(): void {
-        this.paginationComponent.goToPage(1);
+    goToPage(page: number): void {
+        this.paginationComponent.goToPage(page);
     }
 
     constructor(private http: HttpClient) {}

apps/docs/src/app/core/component-docs/pagination/examples/pagination-per-page-example.component.html

@@ -0,0 +1,37 @@
+<div>
+    <h5><code>[itemsPerPage]=15</code> Default property for items per page</h5>
+    <fd-pagination
+        fd-toolbar-item
+        [totalItems]="totalItems"
+        [itemsPerPage]="15"
+        [currentPage]="currentPage1"
+        (pageChangeStart)="pageChanged1($event)"
+    ></fd-pagination>
+</div>
+<div>
+    <h5><code>[itemsPerPageOptions]="[4,8,16]"</code> - Default select template for items per page options</h5>
+    <fd-pagination
+        fd-toolbar-item
+        [totalItems]="totalItems"
+        [itemsPerPageOptions]="[4,8,16]"
+        [currentPage]="currentPage2"
+        (pageChangeStart)="pageChanged2($event)"
+    ></fd-pagination>
+</div>
+<div>
+    <h5>Custom items per page - list of buttons</h5>
+    <fd-pagination
+        fd-toolbar-item
+        [totalItems]="totalItems"
+        [currentPage]="currentPage3"
+        [itemsPerPageTemplate]="itemsPerPageCustom"
+        (pageChangeStart)="pageChanged3($event)"
+        #pagination
+    ></fd-pagination>
+
+    <ng-template #itemsPerPageCustom let-onSelect="onSelect">
+        <fd-segmented-button>
+            <button fd-button [label]="count" [class.is-selected]="pagination.itemsPerPage === count" *ngFor="let count of [2,5,100]" (click)="onSelect(count)"></button>
+        </fd-segmented-button>
+    </ng-template>
+</div>

apps/docs/src/app/core/component-docs/pagination/examples/pagination-per-page-example.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-pagination-per-page-example',
+    templateUrl: './pagination-per-page-example.component.html'
+})
+export class PaginationPerPageExampleComponent {
+    totalItems = 50;
+    currentPage1 = 1;
+    currentPage2 = 1;
+    currentPage3 = 1;
+
+    pageChanged1(event: number): void {
+        this.currentPage1 = event;
+    }
+    pageChanged2(event: number): void {
+        this.currentPage2 = event;
+    }
+    pageChanged3(event: number): void {
+        this.currentPage3 = event;
+    }
+}

apps/docs/src/app/core/component-docs/pagination/examples/pagination-showing-example.component.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-pagination-showing-example',
+    template: `
+        <fd-pagination
+            [totalItems]="totalItems"
+            [displayTextTemplate]="customDisplayTextTemplate"
+            [itemsPerPage]="itemsPerPage"
+            [currentPage]="currentPage"
+            (pageChangeStart)="pageChanged($event)"
+        ></fd-pagination>
+        <ng-template #customDisplayTextTemplate let-showing="showing">
+            From {{ showing.from }} to {{ showing.to }}. Total items {{ showing.of }}
+        </ng-template>
+    `
+})
+export class PaginationShowingExampleComponent {
+    totalItems = 50;
+    itemsPerPage = 10;
+    currentPage = 1;
+
+    pageChanged(event: number): void {
+        this.currentPage = event;
+    }
+}

apps/docs/src/app/core/component-docs/pagination/pagination-docs.component.html

@@ -1,17 +1,53 @@
-<fd-docs-section-title [id]="'def'" [componentName]="'pagination'">
-    Pagination
+<fd-docs-section-title id="def" componentName="pagination">
+    Basic Pagination
 </fd-docs-section-title>
 <component-example>
     <fd-pagination-example></fd-pagination-example>
 </component-example>
 <code-example [exampleFiles]="paginationBasic"></code-example>
 
 <separator></separator>
+
+<fd-docs-section-title id="def" componentName="pagination">
+    Pagination showing items
+</fd-docs-section-title>
+<description>
+    Pagination with custom showing template
+    <ul>
+        <li>Set <code>[displayTextTemplate]</code> property to specify the display template for showing items.</li>
+    </ul>
+</description>
+<component-example>
+    <fd-pagination-showing-example></fd-pagination-showing-example>
+</component-example>
+<code-example [exampleFiles]="paginationShowing"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title id="def" componentName="pagination">
+    Pagination with per page select.
+</fd-docs-section-title>
+<description>
+    Pagination with custom showing template
+    <ul>
+        <li>Set <code>[itemsPerPage]</code> property to number of items per page. It's equal 10 by default.</li>
+        <li>Set <code>[itemsPerPageOptions]</code> property to array of numbers for items per page select.</li>
+        <li>Set <code>[itemsPerPageTemplate]</code> property to custom template.
+            You will have <code>onSelect</code> property to interact with component.
+            This property has higher priority than <code>[itemsPerPageOptions]</code>.</li>
+    </ul>
+</description>
+<component-example>
+    <fd-pagination-per-page-example></fd-pagination-per-page-example>
+</component-example>
+<code-example [exampleFiles]="paginationPerPageSrc"></code-example>
+
+<separator></separator>
+
 <playground [schema]="schema" [schemaInitialValues]="data" (onFormChanges)="onSchemaValues($event)">
     <fd-pagination
         [totalItems]="data.properties.totalItems"
         [itemsPerPage]="data.properties.itemsPerPage"
         [currentPage]="data.properties.currentPage"
-        [displayText]="data.properties.displayText"
     ></fd-pagination>
 </playground>

apps/docs/src/app/core/component-docs/pagination/pagination-docs.component.ts

@@ -3,6 +3,12 @@ import { Schema } from '../../../schema/models/schema.model';
 import { SchemaFactoryService } from '../../../schema/services/schema-factory/schema-factory.service';
 
 import * as paginationSrc from '!raw-loader!./examples/pagination-example.component.ts';
+
+import * as paginationShowingSrc from '!raw-loader!./examples/pagination-showing-example.component.ts';
+
+import * as paginationPerPageHtml from '!raw-loader!./examples/pagination-per-page-example.component.html';
+import * as paginationPerPageTs from '!raw-loader!./examples/pagination-per-page-example.component.ts';
+
 import { ExampleFile } from '../../../documentation/core-helpers/code-example/example-file';
 
 @Component({
@@ -53,6 +59,28 @@ export class PaginationDocsComponent {
         }
     ];
 
+    paginationShowing: ExampleFile[] = [
+        {
+            language: 'typescript',
+            code: paginationShowingSrc,
+            fileName: 'pagination-showing-example',
+            component: 'PaginationShowingExampleComponent'
+        }
+    ];
+    paginationPerPageSrc: ExampleFile[] = [
+        {
+            language: 'html',
+            code: paginationPerPageHtml,
+            fileName: 'pagination-perpage-example',
+        },
+        {
+            language: 'typescript',
+            code: paginationPerPageTs,
+            fileName: 'pagination-perpage-example',
+            component: 'PaginationPerPageExampleComponent'
+        }
+    ];
+
     constructor(private schemaFactory: SchemaFactoryService) {
         this.schema = this.schemaFactory.getComponent('pagination');
     }

apps/docs/src/app/core/component-docs/pagination/pagination-docs.module.ts

@@ -5,7 +5,10 @@ import { API_FILES } from '../../api-files';
 import { PaginationHeaderComponent } from './pagination-header/pagination-header.component';
 import { PaginationDocsComponent } from './pagination-docs.component';
 import { PaginationExampleComponent } from './examples/pagination-example.component';
-import { PaginationModule } from '@fundamental-ngx/core';
+import { PaginationShowingExampleComponent } from './examples/pagination-showing-example.component';
+import { PaginationPerPageExampleComponent } from './examples/pagination-per-page-example.component';
+
+import { PaginationModule, ToolbarModule, SelectModule, SegmentedButtonModule } from '@fundamental-ngx/core';
 import { SharedDocumentationPageModule } from '../../../documentation/shared-documentation-page.module';
 
 const routes: Routes = [
@@ -20,8 +23,21 @@ const routes: Routes = [
 ];
 
 @NgModule({
-    imports: [RouterModule.forChild(routes), SharedDocumentationPageModule, PaginationModule],
+    imports: [
+        RouterModule.forChild(routes),
+        SharedDocumentationPageModule,
+        PaginationModule,
+        ToolbarModule,
+        SelectModule,
+        SegmentedButtonModule
+    ],
     exports: [RouterModule],
-    declarations: [PaginationDocsComponent, PaginationHeaderComponent, PaginationExampleComponent]
+    declarations: [
+        PaginationDocsComponent,
+        PaginationHeaderComponent,
+        PaginationExampleComponent,
+        PaginationShowingExampleComponent,
+        PaginationPerPageExampleComponent
+    ]
 })
 export class PaginationDocsModule {}