pagination & pagination demo 1st done

src/app/app-routing.module.ts

@@ -23,6 +23,10 @@ const routes: Routes = [
   {
     path: 'form-group',
     loadChildren: () => import('./form-group-modal-demo/form-group-modal-demo.module').then(m => m.FormGroupModalDemoModule)
+  },
+  {
+    path: 'pagination-demo',
+    loadChildren: ()=> import('./pagination-demo/pagination-demo.module').then(m => m.PaginationDemoModule)
   }
 ];
 

src/app/app.component.html

@@ -18,6 +18,9 @@
         <li class="nav-item">
           <a class="nav-link" routerLink="form-group">Form Group Modal</a>
         </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLink="pagination-demo">pagination Demo</a>
+        </li>
       </ul>
     </div>
     <div class="col-lg-10" style="padding-top: 5px">

src/app/pagination-demo/pagination-demo-routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { PaginationDemoComponent } from './pagination-demo/pagination/pagination-demo.component';
+
+
+const routes: Routes = [{
+  path: '',
+  component: PaginationDemoComponent
+}];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class PaginationDemoRoutingModule { }

src/app/pagination-demo/pagination-demo.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { PaginationDemoRoutingModule } from './pagination-demo-routing.module';
+import { PaginationDemoComponent } from './pagination-demo/pagination/pagination-demo.component';
+import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
+import { FormGroupCommandModalModule,psbxPaginationModule, CommandModalModule } from '@poweredsoft/ngx-bootstrap';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+
+
+@NgModule({
+  declarations: [PaginationDemoComponent],
+  imports: [
+    CommonModule,
+    PaginationDemoRoutingModule,
+    psbxPaginationModule,
+    DataGridModule,
+    CommandModalModule,
+    FormsModule    
+  ]
+})
+export class PaginationDemoModule { }

src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.html

@@ -0,0 +1,43 @@
+
+<ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns"
+    tableClasses="table table-sm table-dark table-striped table-bordered">
+    <ng-container *psDataGridHeader>
+        <button class="btn-warning btn" psbxCommandModal commandTitle="Adding a new merchant" commandText="Add"
+            [dataSource]="merchantDataSource" command="addMerchant" [template]="theModal">Create a new record</button>
+    </ng-container>
+    <ng-container psDataGridCol="id">
+        <div *psDataGridColHeader>ID</div>
+        <div *psDataGridCell="let model">{{model.id}}</div>
+    </ng-container>
+    <ng-container psDataGridCol="name">
+        <div *psDataGridColHeader>Name</div>
+        <div *psDataGridCell="let model">{{model.name}}</div>
+    </ng-container>
+    <ng-container psDataGridCol="address">
+        <div *psDataGridColHeader>Address</div>
+        <div *psDataGridCell="let model">{{model.address}}</div>
+    </ng-container>
+
+    <ng-container psDataGridCol="commands">
+        <ng-container *psDataGridColHeader>Actions</ng-container>
+        <ng-container *psDataGridCell="let model">
+            <button class="btn-warning btn" psbxCommandModal [commandTitle]="'Change ' + model.name + ' name'" commandText="Update"
+            [dataSource]="merchantDataSource" command="changeMerchantName" [model]="model" [template]="changeName">Change name</button>
+        </ng-container>
+    </ng-container>
+    <ng-container *psDataGridFooter>
+        <psbx-ds-pagination [dataSource]="merchantDataSource" [pages]="pages"></psbx-ds-pagination> 
+    </ng-container>
+</ps-data-grid>
+
+<ng-template #changeName let-command let-loading="loading">
+    New Name
+    <input type="text" [attr.disabled]="loading" [(ngModel)]="command.newName" placeholder="Entermerchant new name" class="form-control">
+</ng-template>
+
+<ng-template #theModal let-command let-loading="loading">
+    Name
+    <input type="text" [attr.disabled]="loading" [(ngModel)]="command.name" placeholder="Enter a merchant name" class="form-control">
+    Address
+    <input type="text" [attr.disabled]="loading" [(ngModel)]="command.address" placeholder="Enter the merchant's address" class="form-control">
+</ng-template>

src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.ts

@@ -0,0 +1,51 @@
+import { Component, OnInit } from '@angular/core';
+import { IDataSource } from '@poweredsoft/data';
+import { IMerchant } from 'src/app/data/services/IMerchant';
+import { MerchantService } from 'src/app/data/services/merchant.service';
+import { IModelFormCreateEvent } from '@poweredsoft/ngx-bootstrap';
+import { FormBuilder, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'ps-pagination',
+  templateUrl: './pagination-demo.component.html',
+  styleUrls: ['./pagination-demo.component.scss']
+})
+export class PaginationDemoComponent implements OnInit {
+  columns = ['id','name', 'address', 'commands']
+  merchantDataSource: IDataSource<IMerchant>;  
+  constructor(private  merchantService: MerchantService){
+    this.merchantDataSource = this.createDataSource();
+
+  }
+
+  pages:any;
+
+  newMerchant(name: string) {
+    this.merchantDataSource.executeCommandByName('addMerchant', {
+      name: name
+    }).subscribe(
+      res => {
+        alert('it worked!');
+        this.merchantDataSource.refresh();
+      },
+      err => {
+        console.log(err);
+        alert('failed');
+      }
+    );
+  }
+
+  createDataSource(): IDataSource<IMerchant> {
+    return this.merchantService.createDataSource();
+  }
+
+  ngOnInit() {
+    this.merchantDataSource.refresh();
+    this.merchantDataSource.data$.subscribe(newData => {     
+      if (newData)
+        this.pages = new Array(newData.numberOfPages);
+    });
+  }
+  
+
+}