temp commit for spinner

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

@@ -4,11 +4,13 @@ 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 { psbxPaginationModule, CommandModalModule, ConfirmModalModule } from '@poweredsoft/ngx-bootstrap';
+import { psbxPaginationModule, CommandModalModule, ConfirmModalModule,SpinnerModule } from '@poweredsoft/ngx-bootstrap';
 import { FormsModule } from '@angular/forms';
 import { ModalModule } from 'ngx-bootstrap/modal';
 
 
+
+
 @NgModule({
   declarations: [PaginationDemoComponent],
   imports: [
@@ -18,7 +20,8 @@ import { ModalModule } from 'ngx-bootstrap/modal';
     DataGridModule,
     CommandModalModule,
     ConfirmModalModule,
-    FormsModule
+    FormsModule,
+    SpinnerModule
        
   ]
 })

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

@@ -1,29 +1,42 @@
+
+   <psbx-spinner psDataGridLoader></psbx-spinner>
 <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>
+        <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="changeMerchant" [model]="model" [template]="changeName">Change</button> -->
+            <button class="btn-danger btn" (click)="removeMerchant(model.id)">Remove</button>
+           
+        </ng-container>
+    </ng-container>
 
     <ng-container *psDataGridFooter>
         <psbx-ds-pagination [dataSource]="merchantDataSource"></psbx-ds-pagination> 
     </ng-container>
 </ps-data-grid>
+<!-- <button (click)="testService()">Test confirm</button> -->
 
-<button (click)="testService()">Test confirm</button>
 
 <ng-template #confirm>
     <div class="modal-body text-center">

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

@@ -11,7 +11,7 @@ import { ConfirmModalService } from '@poweredsoft/ngx-bootstrap';
   styleUrls: ['./pagination-demo.component.scss']
 })
 export class PaginationDemoComponent implements OnInit {
-  columns = ['id','name', 'address']
+  columns = ['id','name', 'address','commands']
   merchantDataSource: IDataSource<IMerchant>;  
   constructor(private  merchantService: MerchantService, private confirmModalService: ConfirmModalService){
     this.merchantDataSource = this.createDataSource();
@@ -20,7 +20,7 @@ export class PaginationDemoComponent implements OnInit {
 
   pages:any;
 
-  testService() {
+  removeMerchant(id:string) {
     this.confirmModalService.confirm({
       message: 'Do you want to delete this merchant?',
       yesText: 'yes delete this merchant',
@@ -28,25 +28,23 @@ export class PaginationDemoComponent implements OnInit {
       noText: 'no please dont',
       noClass: 'light'
     }).subscribe(result => {
-      console.log(result);
+      if(result){
+        this.merchantDataSource.executeCommandByName('removeMerchant', {
+          id: id
+        }).subscribe(      
+          res => {
+            this.merchantDataSource.refresh();
+          },
+          err => {
+            console.log(err);
+            alert('failed');
+          }
+        );
+      }
     })
   }
 
-  removeMerchant(id: string) {    
-    this.merchantDataSource.executeCommandByName('removeMerchant', {
-      id: id
-    }).subscribe(      
-      res => {
-        alert('removed!');
-        this.merchantDataSource.refresh();
-      },
-      err => {
-        console.log(err);
-        alert('failed');
-      }
-    );
-  }
-
+  
   createDataSource(): IDataSource<IMerchant> {
     return this.merchantService.createDataSource();
   }