pager v1.

projects/poweredsoft/ngx-cdk-ui/src/lib/ds-pager/ds-pager.component.html

@@ -0,0 +1,23 @@
+<ul>
+    <li class="ds-pager-first" (click)="first()">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+          </svg>
+    </li>
+    <li class="ds-pager-previous" (click)="previous()">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+        </svg>
+    </li>
+    <li class="ds-pager-page" [class.ds-pager-current]="page == pr" *ngFor="let pr of pageRanges" (click)="page = pr">{{ pr }}</li>
+    <li class="ds-pager-next" (click)="next()">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+        </svg>
+    </li>
+    <li class="ds-pager-last" (click)="last()">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
+        </svg>
+    </li>
+</ul>

projects/poweredsoft/ngx-cdk-ui/src/lib/ds-pager/ds-pager.component.scss

@@ -0,0 +1,20 @@
+:host {
+
+    ul {
+        list-style: none;
+        display: flex;
+    }
+
+    li {
+        padding: 4px 2px;
+    }
+
+    li.ds-pager-current {
+        color: blue;
+    }
+
+    svg {
+        height: 15px;
+        width: 15px;
+    }
+}

projects/poweredsoft/ngx-cdk-ui/src/lib/ds-pager/ds-pager.component.ts

@@ -0,0 +1,93 @@
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { IDataSource, IQueryExecutionGroupResult, IQueryExecutionResult } from '@poweredsoft/data';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'ps-ds-pager',
+  templateUrl: './ds-pager.component.html',
+  styleUrls: ['./ds-pager.component.scss']
+})
+export class DsPagerComponent implements OnInit, OnDestroy {
+
+  private _range: number = 5;
+
+  @Input() dataSource: IDataSource<any>;
+  pageRanges: number[] = [];
+
+  // range.
+  @Input() set range(value: number) {
+    this._range = value;
+  }
+  get range() {
+    return this._range;
+  }
+
+  // page.
+  @Input() set page(value: number) {
+    if (this.dataSource.page != value) {
+      this.dataSource.page = value;
+      this.pageChange.emit(value);
+    }
+  }
+  get page() {
+    return this.dataSource?.page;
+  }
+
+  @Output() pageChange = new EventEmitter<number>();
+
+  public latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any> = null;
+  private dataSubscription: Subscription;
+
+  constructor() {
+
+  }
+
+  ngOnInit(): void {
+    this.dataSubscription = this.dataSource.data$.subscribe(result => {
+      this.latestResult = result;
+      this.refreshPageRange();
+    });
+  }
+
+  refreshPageRange() {
+    let previous = [];
+    let nexts = [];
+    for (let i = 0; i < this.range; i++) {
+      const currentPrevious = this.dataSource.page - 1 - i;
+      if (currentPrevious >= 1)
+        previous.push(currentPrevious);
+
+      const currentNext = this.dataSource.page + i + 1;
+      if (currentNext <= this.latestResult?.numberOfPages)
+        nexts.push(currentNext);
+    }
+
+    previous.reverse();
+
+    const final = previous.concat([this.dataSource.page]).concat(nexts);
+    this.pageRanges = final;
+  }
+
+  first() {
+    this.page = 1;
+  }
+
+  last() {
+    if (this.latestResult)
+      this.page = this.latestResult!.numberOfPages;
+  }
+
+  next() {
+    if (this.page + 1 <= this.latestResult?.totalRecords)
+      this.page++;
+  }
+
+  previous() {
+    if (this.page > 1)
+      this.page--;
+  }
+
+  ngOnDestroy() {
+    this.dataSubscription?.unsubscribe();
+  }
+}

projects/poweredsoft/ngx-cdk-ui/src/lib/ds-pager/ds-pager.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DsPagerComponent } from './ds-pager.component';
+
+@NgModule({
+  declarations: [DsPagerComponent],
+  imports: [
+    CommonModule
+  ],
+  exports: [DsPagerComponent]
+})
+export class DsPagerModule { }

projects/poweredsoft/ngx-cdk-ui/src/public-api.ts

@@ -45,4 +45,8 @@ export * from './lib/ds-command/directives/ds-command-submit.directive';
 export * from './lib/ds-command/directives/ds-command-validation.directive';
 export * from './lib/ds-command/directives/ds-command-footer.directive';
 export * from './lib/ds-command/directives/ds-command-no-command.directive';
-export * from './lib/ds-command/directives/ds-command-error.directive';
+export * from './lib/ds-command/directives/ds-command-error.directive';
+
+// ds-pager
+export * from './lib/ds-pager/ds-pager.module';
+export * from './lib/ds-pager/ds-pager.component';

src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.html

@@ -29,6 +29,9 @@
     </div>
     <div *psListViewFooter class="mt-2">
         <psbx-ds-pagination [dataSource]="merchantDataSource"></psbx-ds-pagination>
+        
+        <ps-ds-pager class="mt-2" [dataSource]="merchantDataSource"></ps-ds-pager>
+        <ps-ds-pager class="mt-2" range="0" [dataSource]="merchantDataSource"></ps-ds-pager>
     </div>
 </ps-list-view>
 

src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.ts

@@ -40,7 +40,7 @@ export class ListViewDemoHomeComponent implements OnInit {
   ngOnInit(): void {
 
     this.merchantDataSource.query({
-      pageSize: 6
+      pageSize: 2
     })
   }
 

src/app/list-view-demo/list-view-demo.module.ts

@@ -7,6 +7,7 @@ import { ListViewModule } from '@poweredsoft/ngx-cdk-ui';
 import { FormGroupCommandModalModule, PaginationModule } from '@poweredsoft/ngx-bootstrap';
 import { ReactiveFormsModule } from '@angular/forms';
 import { DsSearchModule } from 'projects/poweredsoft/ngx-cdk-ui/src/lib/ds-search/ds-search.module';
+import { DsPagerModule } from 'projects/poweredsoft/ngx-cdk-ui/src/public-api';
 
 
 
@@ -19,7 +20,8 @@ import { DsSearchModule } from 'projects/poweredsoft/ngx-cdk-ui/src/lib/ds-searc
     PaginationModule,
     ReactiveFormsModule,
     FormGroupCommandModalModule,
-    DsSearchModule
+    DsSearchModule,
+    DsPagerModule
   ]
 })
 export class ListViewDemoModule { }