test confirm

src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html

@@ -32,7 +32,7 @@
         </ng-container>
     </ng-container>
         <ng-container *psDataGridFooter>
-            <psbx-ds-pagination [dataSource]="merchantDataSource" [pages]="pages"></psbx-ds-pagination> 
+            <psbx-ds-pagination [dataSource]="merchantDataSource"></psbx-ds-pagination> 
         </ng-container>
 </ps-data-grid>
 
@@ -42,12 +42,12 @@
     New Name
     <input type="text" [attr.disabled]="loading" [(ngModel)]="command.name" placeholder="Entermerchant new name" class="form-control">
     New Address
-    <input type="text" [attr.disabled]="loading" [(ngModel)]="command.address" placeholder="Entermerchant new Address" class="form-control">
+    <input type="text" required [attr.disabled]="loading" [(ngModel)]="command.address" placeholder="Entermerchant new Address" 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">
+    <input type="text" required [attr.disabled]="loading" [(ngModel)]="command.address" placeholder="Enter the merchant's address" class="form-control">
 </ng-template>

src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.html

@@ -21,20 +21,25 @@
     <ng-container psDataGridCol="actions">
         <ng-container *psDataGridColHeader>Actions</ng-container>
         <ng-container *psDataGridCell="let model">
-            <button class="btn-success btn" psbxFormGroupCommandModal 
+            <button class="btn-success btn" psbxFormGroupCommandModal [commandTitle]="'Change ' + model.name + ' name'" commandText="Update"
+            [dataSource]="merchantDataSource" command="changeMerchant" (formCreate)="onFormCreate($event)" [model]="model" [template]="theModal">Change</button>
+
+            <button class="btn-danger btn" psbxFormGroupCommandModal 
             [commandTitle]="'remove ' + model.name + ' name'" commandText="delete"
             [dataSource]="merchantDataSource" command="removeMerchant" 
-            [model]="model" (formCreate)="onFormCreate($event)">Remove Merchant</button>
+            [model]="model"  (formCreate)="onFormCreate($event)">Remove</button>
+
+            <!-- <button class="btn-danger btn" psbxExecuteCommand [dataSource]="merchantDataSource" [command]="removeMerchant"
+             [model]="model" [confirm]="true" [confirmMessage]="do you wish to delete the merchant `' + model.name + '`" [refresh]="false">Delete</button> -->
         </ng-container>
     </ng-container>
     <ng-container *psDataGridFooter>
-        <psbx-ds-pagination [dataSource]="merchantDataSource" [pages]="pages"></psbx-ds-pagination> 
+        <psbx-ds-pagination [dataSource]="merchantDataSource"></psbx-ds-pagination> 
     </ng-container>
 </ps-data-grid>
 
 
 
-
 <ng-template #theModal let-form let-loading="loading">
     <form [formGroup]="form">
         <div class="form-group">

src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.ts

@@ -31,8 +31,7 @@ export class FormGroupModalDemoComponent implements OnInit {
     });
   }
 
-  onFormCreate(event: IModelFormCreateEvent) {
-    debugger;
+  onFormCreate(event: IModelFormCreateEvent) {    
     event.shouldSetCommandModel = false;
     event.formGroup = this.fb.group({
       'name': [event.commandModel.name, Validators.required],
@@ -41,18 +40,5 @@ export class FormGroupModalDemoComponent implements OnInit {
   }
 
 
-  newMerchant(name: string) {
-    this.merchantDataSource.executeCommandByName('addMerchant', {
-      name: name
-    }).subscribe(
-      res => {
-        alert('it worked!');
-        this.merchantDataSource.refresh();
-      },
-      err => {
-        console.log(err);
-        alert('failed');
-      }
-    );
-  }
+
 }

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

@@ -4,8 +4,9 @@ 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 } from '@poweredsoft/ngx-bootstrap';
+import { psbxPaginationModule, CommandModalModule, ConfirmModalModule } from '@poweredsoft/ngx-bootstrap';
 import { FormsModule } from '@angular/forms';
+import { ModalModule } from 'ngx-bootstrap/modal';
 
 
 @NgModule({
@@ -16,7 +17,9 @@ import { FormsModule } from '@angular/forms';
     psbxPaginationModule,
     DataGridModule,
     CommandModalModule,
-    FormsModule    
+    ConfirmModalModule,
+    FormsModule
+       
   ]
 })
 export class PaginationDemoModule { }

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

@@ -17,19 +17,14 @@
         <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]="'Remove ' + model.name + ' ?'" commandText="Remove"
-            [dataSource]="merchantDataSource" command="removeMerchant" [model]="model" [template]="confirm">Remove Merchant</button> -->
-            <button class="btn-warning btn" (click)="removeMerchant(model.id)">Delete</button>
-        </ng-container>
-    </ng-container>
+
     <ng-container *psDataGridFooter>
-        <psbx-ds-pagination [dataSource]="merchantDataSource" [pages]="pages"></psbx-ds-pagination> 
+        <psbx-ds-pagination [dataSource]="merchantDataSource"></psbx-ds-pagination> 
     </ng-container>
 </ps-data-grid>
 
+<button (click)="testService()">Test confirm</button>
+
 <ng-template #confirm>
     <div class="modal-body text-center">
       <p>Do you want to confirm?</p>

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

@@ -2,8 +2,8 @@ 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';
+import { ConfirmModalService } from '@poweredsoft/ngx-bootstrap';
 
 @Component({
   selector: 'ps-pagination',
@@ -11,15 +11,27 @@ import { FormBuilder, Validators } from '@angular/forms';
   styleUrls: ['./pagination-demo.component.scss']
 })
 export class PaginationDemoComponent implements OnInit {
-  columns = ['id','name', 'address', 'commands']
+  columns = ['id','name', 'address']
   merchantDataSource: IDataSource<IMerchant>;  
-  constructor(private  merchantService: MerchantService){
+  constructor(private  merchantService: MerchantService, private confirmModalService: ConfirmModalService){
     this.merchantDataSource = this.createDataSource();
 
   }
 
   pages:any;
 
+  testService() {
+    this.confirmModalService.confirm({
+      message: 'Do you want to delete this merchant?',
+      yesText: 'yes delete this merchant',
+      yesClass: 'danger',
+      noText: 'no please dont',
+      noClass: 'light'
+    }).subscribe(result => {
+      console.log(result);
+    })
+  }
+
   removeMerchant(id: string) {    
     this.merchantDataSource.executeCommandByName('removeMerchant', {
       id: id