simple remove works

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

@@ -39,9 +39,7 @@ export class FormGroupCommandModalDirective {
       command: this.command,
       model: this.model
     }).subscribe(commandModel => {
-
-      
-
+      debugger;
       const event = <IModelFormCreateEvent>{
         commandName: this.command,
         viewModel: this.model,

src/app/data/services/IChangeMerchantNameCommand.ts

@@ -6,3 +6,7 @@ export interface IAddMerchantCommand {
   name: string;
   address: string;
 }
+
+export interface IRemoveMerchantCommand {
+  merchantId: string;
+}

src/app/data/services/merchant.service.ts

@@ -4,7 +4,7 @@ import { IDataSource, DataSource } from '@poweredsoft/data';
 import { Apollo } from 'apollo-angular';
 import  gql  from 'graphql-tag';
 import { of } from 'rxjs';
-import { IChangeMerchantNameCommand, IAddMerchantCommand } from './IChangeMerchantNameCommand';
+import { IChangeMerchantNameCommand, IAddMerchantCommand, IRemoveMerchantCommand } from './IChangeMerchantNameCommand';
 import { IMerchant } from './IMerchant';
 
 @Injectable({
@@ -27,7 +27,7 @@ export class MerchantService {
       (model) => model.id,
       {
         page: 1,
-        pageSize: 150,
+        pageSize: 15,
       },
       true
     );
@@ -83,6 +83,31 @@ export class MerchantService {
       })
     );
 
+    builder.addMutation<IRemoveMerchantCommand, string>(
+      'removeMerchant', //<-- command name
+      'removeMerchant', //<-- graph ql mutation name
+      
+      // implementation of the command.
+      command => {
+        
+        return this.apollo.use('command').mutate<string>({
+          mutation: gql`
+            mutation executeAddMerchant($command: RemoveMerchantCommandInput) {
+              removeMerchant(params: $command)
+            }
+          `,
+          variables: {
+            command: command,
+          },
+        });
+      },
+      
+      // viewModel -> transform to the form model for that command -> IChangeMerchantName
+      e => of(<IRemoveMerchantCommand>{
+        merchantId: e.model.id,
+      })
+    );
+
     const options = builder.create();
     return new DataSource<IMerchant>(options);
   }

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

@@ -19,11 +19,15 @@
     <ng-container psDataGridCol="actions">
         <ng-container *psDataGridColHeader>Actions</ng-container>
         <ng-container *psDataGridCell="let model">
-            <button class="btn btn-primary mr-2">{{model.name}}</button>
+            <button class="btn-primary btn" psbxFormGroupCommandModal [commandTitle]="'remove ' + model.name + ' name'" commandText="delete"
+            [dataSource]="merchantDataSource" command="removeMerchant" [model]="model" (formCreate)="onFormCreate($event)">Remove Merchant</button>
         </ng-container>
     </ng-container>
 </ps-data-grid>
 
+
+
+
 <ng-template #theModal let-form let-loading="loading">
     <form [formGroup]="form">
         <div class="form-group">

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

@@ -1,4 +1,3 @@
-
 <ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns"
     tableClasses="table table-sm table-dark table-striped table-bordered">
     <ng-container *psDataGridHeader>
@@ -21,8 +20,9 @@
     <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>
+            <!-- <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>
@@ -30,10 +30,15 @@
     </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 #confirm>
+    <div class="modal-body text-center">
+      <p>Do you want to confirm?</p>
+      <button type="button" class="btn btn-default"  >Yes</button>
+      <button type="button" class="btn btn-primary"  >No</button>
+    </div>
+  </ng-template>
+
+
 
 <ng-template #theModal let-command let-loading="loading">
     Name

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

@@ -20,12 +20,12 @@ export class PaginationDemoComponent implements OnInit {
 
   pages:any;
 
-  newMerchant(name: string) {
-    this.merchantDataSource.executeCommandByName('addMerchant', {
-      name: name
+  removeMerchant(id: string) {    
+    this.merchantDataSource.executeCommandByName('removeMerchant', {
+      id: id
     }).subscribe(      
       res => {
-        alert('it worked!');
+        alert('removed!');
         this.merchantDataSource.refresh();
       },
       err => {