diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-pager/ds-pager.component.html b/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-pager/ds-pager.component.html
new file mode 100644
index 0000000..126f5cc
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-pager/ds-pager.component.html
@@ -0,0 +1,23 @@
+
\ No newline at end of file
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-pager/ds-pager.component.scss b/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-pager/ds-pager.component.scss
new file mode 100644
index 0000000..3618e4b
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-pager/ds-pager.component.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-pager/ds-pager.component.ts
new file mode 100644
index 0000000..01da166
--- /dev/null
+++ b/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;
+ 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();
+
+ public latestResult: IQueryExecutionResult & IQueryExecutionGroupResult = 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();
+ }
+}
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-pager/ds-pager.module.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-pager/ds-pager.module.ts
new file mode 100644
index 0000000..865fd1e
--- /dev/null
+++ b/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 { }
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts b/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
index d13ca84..edcef08 100644
--- a/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
+++ b/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';
\ No newline at end of file
+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';
\ No newline at end of file
diff --git a/src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.html b/src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.html
index f544518..c3b95fc 100644
--- a/src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.html
+++ b/src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.html
@@ -29,6 +29,9 @@
diff --git a/src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.ts b/src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.ts
index 3c70b84..056fd1d 100644
--- a/src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.ts
+++ b/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
})
}
diff --git a/src/app/list-view-demo/list-view-demo.module.ts b/src/app/list-view-demo/list-view-demo.module.ts
index c3f66cb..c923dcb 100644
--- a/src/app/list-view-demo/list-view-demo.module.ts
+++ b/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 { }