test confirm

projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal.module.ts

@@ -3,13 +3,14 @@ import { CommonModule } from '@angular/common';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { CommandModalDirective } from './directives/command-modal.directive';
 import { CommandModalComponent } from './command-modal/command-modal.component';
+import { InputValidatorDirective } from './directives/input-validator.directive';
 
 @NgModule({
   imports: [
     CommonModule,
     ModalModule.forRoot()
   ],
-  declarations: [CommandModalDirective, CommandModalComponent],
+  declarations: [CommandModalDirective, CommandModalComponent, InputValidatorDirective],
   exports: [CommandModalDirective]
 })
 export class CommandModalModule { }

projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts

@@ -20,7 +20,6 @@ export class CommandModalDirective {
   @Input() commandText: string;
   @Input() cancelText: string;
   @Input() animated: boolean;
-  @Input() isConfirmModal: boolean;
 
   @HostListener('click')
   wasClicked() {            
@@ -38,12 +37,6 @@ export class CommandModalDirective {
         commandText: this.commandText || 'OK',
         cancelText: this.cancelText || 'Cancel'
       };
-      if(this.isConfirmModal){
-        this.modalService.show(CommandModalComponent, {
-          animated: this.animated === undefined ? true : this.animated,
-          initialState
-        });
-      }
       this.modalService.show(CommandModalComponent, {
         animated: this.animated === undefined ? true : this.animated,
         initialState

projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/input-validator.directive.ts

@@ -0,0 +1,19 @@
+import { Directive } from '@angular/core';
+import { Validator, AbstractControl, ValidationErrors, NG_VALIDATORS } from '@angular/forms';
+
+@Directive({
+  selector: '[psbxInputValidator]',
+  providers: [{ provide: NG_VALIDATORS, useExisting: InputValidatorDirective, multi: true }]
+})
+export class InputValidatorDirective implements Validator{    
+
+  constructor() { }
+
+  validate(control: AbstractControl): ValidationErrors {
+    throw new Error("Method not implemented.");
+  }
+  registerOnValidatorChange?(fn: () => void): void {
+    throw new Error("Method not implemented.");
+  }
+
+}

projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal-components/confirm-modal/confirm-modal.component.html

@@ -0,0 +1,6 @@
+<div class="modal-body text-center">
+    <p>{{ message }}</p>
+    <button type="button" [ngClass]="yesButtonClass" (click)="confirm()">{{ yesText }}</button>
+    &nbsp;
+    <button type="button" [ngClass]="noButtonClass" (click)="decline()">{{ noText }}</button>
+</div>

projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal-components/confirm-modal/confirm-modal.component.ts

@@ -0,0 +1,50 @@
+import { Component, OnInit, TemplateRef } from '@angular/core';
+import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+import { ConfirmModalService } from '../../confirm-modal.service';
+import { Observer } from 'rxjs';
+
+
+@Component({
+  selector: 'psbx-confirm-modal',
+  templateUrl: './confirm-modal.component.html',
+  styleUrls: ['./confirm-modal.component.scss']
+})
+export class ConfirmModalComponent implements OnInit {
+
+
+  yesText: string;
+  noText: string;
+  message: string;
+  yesClass: string;
+  noClass: string;
+  observer: Observer<boolean>;
+
+  constructor(private modelRef: BsModalRef, private actionService: ConfirmModalService) {
+
+  }
+
+  ngOnInit(): void {
+    
+  }
+
+  get yesButtonClass() {
+    return `btn btn-sm btn-${this.yesClass}`
+  }
+
+  get noButtonClass() {
+    return `btn btn-sm btn-${this.noClass}`
+  }
+
+  confirm(): void {
+    this.modelRef.hide();
+    this.observer.next(true);
+    this.observer.complete();
+  }
+ 
+  decline(): void {
+    this.modelRef.hide();
+    this.observer.next(false);
+    this.observer.complete();
+  }
+
+}

projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ConfirmModalComponent } from './confirm-modal-components/confirm-modal/confirm-modal.component';
+import { ModalModule } from 'ngx-bootstrap/modal';
+import { ConfirmModalService } from './confirm-modal.service';
+
+
+
+@NgModule({
+  declarations: [ConfirmModalComponent],
+  imports: [
+    CommonModule,
+    ModalModule.forRoot(),
+    
+  ],
+  providers: [ConfirmModalService]
+})
+export class ConfirmModalModule { }

projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.service.ts

@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import { ConfirmModalComponent } from './confirm-modal-components/confirm-modal/confirm-modal.component';
+import { Observable, Observer } from 'rxjs';
+
+export interface IConfirmModalOptions
+{
+  yesClass?: string;
+  noClass?: string;
+  message: string;
+  yesText?: string;
+  noText?: string;
+}
+
+@Injectable()
+export class ConfirmModalService {
+
+  constructor(private modalService: BsModalService) { }
+
+  confirm(options: IConfirmModalOptions) : Observable<boolean> {
+    return Observable.create((o: Observer<boolean>) => {
+
+
+      const initialState = {
+        message: options.message,
+        yesText: options.yesText || 'yes',
+        noText: options.noText || 'no',
+        yesClass: options.yesClass || 'primary',
+        noClass: options.noClass || 'light',
+        observer: o
+      };
+
+      const modal = this.modalService.show(ConfirmModalComponent, {
+        initialState: initialState,
+        animated: true,
+        keyboard: false
+      });
+    });
+  }
+}

projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/directives/form-group-command-modal.directive.ts

@@ -3,6 +3,7 @@ import { IDataSource } from '@poweredsoft/data';
 import { BsModalService } from 'ngx-bootstrap/modal';
 import { FormGroupCommandModalComponent } from '../form-group-command-modal/form-group-command-modal.component';
 import { FormGroup } from '@angular/forms';
+import { ConfirmModalComponent } from '../../confirm-modal/confirm-modal-components/confirm-modal/confirm-modal.component';
 
 export interface IModelFormCreateEvent
 {
@@ -28,7 +29,7 @@ export class FormGroupCommandModalDirective {
   @Input() refreshOnSuccess: boolean;
   @Input() commandText: string;
   @Input() cancelText: string;
-
+  @Input() isConfirmModal:boolean;
   @Output() formCreate: EventEmitter<IModelFormCreateEvent> = new EventEmitter<IModelFormCreateEvent>();
 
   constructor(private modalService: BsModalService) { }
@@ -39,7 +40,6 @@ export class FormGroupCommandModalDirective {
       command: this.command,
       model: this.model
     }).subscribe(commandModel => {
-      debugger;
       const event = <IModelFormCreateEvent>{
         commandName: this.command,
         viewModel: this.model,
@@ -47,60 +47,96 @@ export class FormGroupCommandModalDirective {
         shouldSetCommandModel: true
       }
 
-      this.formCreate.emit(event);
+      if(this.isConfirmModal){
 
-      if (event.formGroup == null)
+        const initialState = {
-        throw new Error('form group should be set, after form createEvent');
+          dataSource: this.dataSource,
+          command: this.command,
+          template: this.template,
+          title: this.commandTitle,
+          refreshOnSuccess: this.refreshOnSuccess === undefined ? true : this.refreshOnSuccess,
+          commandText: this.commandText || 'OK',
+          cancelText: this.cancelText || 'Cancel',
+          commandModel:commandModel
+        };
       
-      if (event.shouldSetCommandModel)
+        this.modalService.show(ConfirmModalComponent, {
-        event.formGroup.patchValue(commandModel);
+          animated: this.animated === undefined ? true : this.animated,
+          initialState
+        });
 
-      const initialState = {
+      }else{
-        dataSource: this.dataSource,
+        this.formCreate.emit(event);
-        command: this.command,
+        if (event.formGroup == null)
-        template: this.template,
+          throw new Error('form group should be set, after form createEvent');
-        title: this.commandTitle,
-        refreshOnSuccess: this.refreshOnSuccess === undefined ? true : this.refreshOnSuccess,
-        commandText: this.commandText || 'OK',
-        cancelText: this.cancelText || 'Cancel',
-        modelForm: event.formGroup
-      };
 
-      this.modalService.show(FormGroupCommandModalComponent, {
+        if (event.shouldSetCommandModel)
-        animated: this.animated === undefined ? true : this.animated,
+          event.formGroup.patchValue(commandModel);
-        initialState
-      });
 
+        const initialState = {
+          dataSource: this.dataSource,
+          command: this.command,
+          template: this.template,
+          title: this.commandTitle,
+          refreshOnSuccess: this.refreshOnSuccess === undefined ? true : this.refreshOnSuccess,
+          commandText: this.commandText || 'OK',
+          cancelText: this.cancelText || 'Cancel',
+          modelForm: event.formGroup,
+          commandModel:commandModel
+        };
+      
+        this.modalService.show(FormGroupCommandModalComponent, {
+          animated: this.animated === undefined ? true : this.animated,
+          initialState
+        });
+      }
     }, error => {
 
     });
   }
 
-  // @Input()
+  // @HostListener('click')
-  // set psbxFormGroupCommandModal(element:HTMLBaseElement){
+  // wasClicked() {
-  //   element.addEventListener('click',()=>{
+  //   this.dataSource.resolveCommandModelByName({
-  //     this.dataSource.resolveCommandModelByName({
+  //     command: this.command,
-  //       command: this.command,
+  //     model: this.model
-  //       model: this.model
+  //   }).subscribe(commandModel => {
-  //     }).subscribe(commandModel => {
+  //     debugger;
-  //       const initialState = {
+  //     const event = <IModelFormCreateEvent>{
-  //         dataSource: this.dataSource,
+  //       commandName: this.command,
-  //         command: this.command,
+  //       viewModel: this.model,
-  //         commandModel: commandModel,
+  //       commandModel: commandModel,
-  //         template: this.template,
+  //       shouldSetCommandModel: true
-  //         title: this.commandTitle,
+  //     }
-  //         refreshOnSuccess: this.refreshOnSuccess === undefined ? true : this.refreshOnSuccess,
-  //         commandText: this.commandText || 'OK',
-  //         cancelText: this.cancelText || 'Cancel'
-  //       };
-  //       this.modalService.show(FormGroupCommandModalComponent, {
-  //         animated: this.animated === undefined ? true : this.animated,
-  //         initialState
-  //       })
-  //     },error => {
 
+  //     this.formCreate.emit(event);
+
+  //     if (event.formGroup == null)
+  //       throw new Error('form group should be set, after form createEvent');
+
+  //     if (event.shouldSetCommandModel)
+  //       event.formGroup.patchValue(commandModel);
+
+  //     const initialState = {
+  //       dataSource: this.dataSource,
+  //       command: this.command,
+  //       template: this.template,
+  //       title: this.commandTitle,
+  //       refreshOnSuccess: this.refreshOnSuccess === undefined ? true : this.refreshOnSuccess,
+  //       commandText: this.commandText || 'OK',
+  //       cancelText: this.cancelText || 'Cancel',
+  //       modelForm: event.formGroup,
+  //       commandModel:commandModel
+  //     };
+      
+  //     this.modalService.show(FormGroupCommandModalComponent, {
+  //       animated: this.animated === undefined ? true : this.animated,
+  //       initialState
   //     });
-  //   })
+
+  //   }, error => {
+
+  //   });
   // }
 
 }

projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.html

@@ -21,7 +21,7 @@
     <div class="modal-footer">
         <button type="button" class="btn btn-light" (click)="modalRef.hide()"
             [attr.disabled]="loading">{{ cancelText }}</button>
-        <button type="button" class="btn btn-primary" (click)="attemptSave()" [attr.disabled]="loading">Create</button>
+        <button type="button" class="btn btn-primary" (click)="attemptSave()" [attr.disabled]="loading">{{commandText}}</button>
         <br>
     
         <div class="progress" style="width: 100%" *ngIf="loading">

projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts

@@ -23,7 +23,7 @@ export class FormGroupCommandModalComponent implements OnInit {
   commandText: string;
   cancelText: string;
   errorMessage: string;
-
+  commandModel:any;
   private _notifyMessage: Subscription;
   private _validationError: Subscription;
 
@@ -56,7 +56,10 @@ export class FormGroupCommandModalComponent implements OnInit {
     }
 
     const finalModel = this.modelForm.value;  
-    //this.modelForm.setValue(this.commandModel)
+    if(this.commandModel.id)
+    {
+      finalModel.id = this.commandModel.id;
+    }
     this.loading = true;
     this.dataSource.executeCommandByName(this.command, finalModel)
       .pipe(

projects/poweredsoft/ngx-bootstrap/src/lib/pagination/data-source-pagination/data-source-pagination.component.html

@@ -1,3 +1,2 @@
-<pagination [totalItems]="pages.length" [itemsPerPage]="1" [maxSize]="10"
+<pagination [totalItems]="numberOfItems" [itemsPerPage]="pageSize" [(ngModel)]="dataSource.page" [maxSize]="10"
-(pageChanged)="pageChanged($event)" 
 [boundaryLinks]='true' previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;"></pagination>

projects/poweredsoft/ngx-bootstrap/src/lib/pagination/data-source-pagination/data-source-pagination.component.ts

@@ -1,26 +1,35 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, OnDestroy, ChangeDetectorRef } from '@angular/core';
 import { IDataSource } from '@poweredsoft/data';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'psbx-ds-pagination',
   templateUrl: './data-source-pagination.component.html',
   styleUrls: ['./data-source-pagination.component.scss']
 })
-export class DataSourcePaginationComponent implements OnInit {
+export class DataSourcePaginationComponent implements OnInit, OnDestroy {
+  
 
-  @Input() pages: any[];
   @Input() dataSource: IDataSource<any>
+  numberOfItems: number = 0;
+  private dataSubscription: Subscription;
 
-  totalItems:Number;
+  constructor(private cdf: ChangeDetectorRef) { }
+  ngOnDestroy(): void {
+    this.dataSubscription.unsubscribe();
+  }
 
-  constructor() { }
+  get pageSize() {
-
+    return this.dataSource.pageSize;
-  pageChanged(event){
-    this.dataSource.page = event.page;
   }
 
   ngOnInit(): void {
-    
+    this.dataSubscription = this.dataSource.data$.subscribe(latest => {
+      if (latest)
+        this.numberOfItems = latest.totalRecords;
+      else
+        this.numberOfItems = 0;
+    });
   }
 
 }

projects/poweredsoft/ngx-bootstrap/src/lib/pagination/psbxPagination.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DataSourcePaginationComponent } from './data-source-pagination/data-source-pagination.component';
 import { PaginationModule } from 'ngx-bootstrap/pagination';
+import { FormsModule } from '@angular/forms';
 
 
 @NgModule({
@@ -9,6 +10,7 @@ import { PaginationModule } from 'ngx-bootstrap/pagination';
   imports: [
     CommonModule,
     PaginationModule.forRoot(),
+    FormsModule
   ],
   exports:[DataSourcePaginationComponent]
 })

projects/poweredsoft/ngx-bootstrap/src/public-api.ts

@@ -8,3 +8,5 @@ export * from './lib/form-group-command-modal/form-group-command-modal.module';
 export * from './lib/form-group-command-modal/directives/form-group-command-modal.directive';
 export * from './lib/pagination/psbxPagination.module';
 export * from './lib/pagination/data-source-pagination/data-source-pagination.component';
+export * from './lib/confirm-modal/confirm-modal.module';
+export * from './lib/confirm-modal/confirm-modal.service';

projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.ts

@@ -12,7 +12,6 @@ import { DataGridFooterDirective } from '../directives/data-grid-footer.directiv
 export class DataGridComponent implements OnInit {
 
   latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any>;
-  pages: any[];
 
   @ContentChildren(DataGridColDirective) columnDefinitions: QueryList<DataGridColDirective>;
   @ContentChildren(DataGridHeaderDirective) gridHeaders: QueryList<DataGridHeaderDirective>;
@@ -39,8 +38,6 @@ export class DataGridComponent implements OnInit {
     console.log(this.columnDefinitions);
     this.dataSource.data$.subscribe(newData => {
       this.latestResult = newData;
-      if (newData)
-        this.pages = new Array(newData.numberOfPages);
     });
   }
 

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

@@ -32,7 +32,6 @@ export class FormGroupModalDemoComponent implements OnInit {
   }
 
   onFormCreate(event: IModelFormCreateEvent) {    
-    debugger;
     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,
+    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