change & delete for command modal

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

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormGroupModalDemoComponent } from './form-group-modal-demo/form-group-modal-demo.component';
 import { FormGroupModalDemoRoutingModule } from './form-group-modal-demo-routing.module'
 import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
-import { FormGroupCommandModalModule,CommandModalModule } from '@poweredsoft/ngx-bootstrap';
+import { FormGroupCommandModalModule,CommandModalModule, psbxPaginationModule } from '@poweredsoft/ngx-bootstrap';
 import { ReactiveFormsModule } from '@angular/forms';
 
 
@@ -15,7 +15,8 @@ import { ReactiveFormsModule } from '@angular/forms';
     FormGroupModalDemoRoutingModule,
     DataGridModule,
     FormGroupCommandModalModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    psbxPaginationModule
     
   ]
 })

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

@@ -1,8 +1,10 @@
 <h3>This is the demo for form-group modal!</h3>
-<ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns" tableClasses="table table-dark table-striped table-sm table-bordered">
+<ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns" 
+              tableClasses="table table-dark table-striped table-sm table-bordered">
     <ng-container *psDataGridHeader>
-            <button class="btn-success btn" psbxFormGroupCommandModal commandTitle="Adding a new merchant" commandText="Add"
-            [dataSource]="merchantDataSource" command="addMerchant" (formCreate)="onFormCreate($event)" [template]="theModal">Create a new</button>   
+            <button class="btn-success btn" psbxFormGroupCommandModal commandTitle="Adding a new merchant"
+             commandText="Add" [dataSource]="merchantDataSource" command="addMerchant" 
+             (formCreate)="onFormCreate($event)" [template]="theModal">Create a new</button>   
     </ng-container>
     <ng-container psDataGridCol="id">
         <div *psDataGridColHeader>ID</div>
@@ -19,10 +21,15 @@
     <ng-container psDataGridCol="actions">
         <ng-container *psDataGridColHeader>Actions</ng-container>
         <ng-container *psDataGridCell="let model">
-            <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>
+            <button class="btn-success 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>
+    <ng-container *psDataGridFooter>
+        <psbx-ds-pagination [dataSource]="merchantDataSource" [pages]="pages"></psbx-ds-pagination> 
+    </ng-container>
 </ps-data-grid>
 
 
@@ -35,6 +42,11 @@
             <div class="col-sm-8">
                 <input id="name" type="text" class="form-control" formControlName="name">
             </div>
+
+            <label for="address" class="col-sm-2 control-label">Address</label>
+            <div class="col-sm-8">
+                <input id="address" type="text" class="form-control" formControlName="address">
+            </div>
         </div>
     </form>
 </ng-template>

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

@@ -16,7 +16,7 @@ export class FormGroupModalDemoComponent implements OnInit {
     return this.merchantService.createDataSource();
   }
 
-  
+  pages:any;
   merchantDataSource: IDataSource<IMerchant>;
   columns = ['id','name', 'address', 'actions'];
   constructor(private merchantService: MerchantService, private fb: FormBuilder) {
@@ -25,12 +25,18 @@ export class FormGroupModalDemoComponent implements OnInit {
 
   ngOnInit(): void {
     this.merchantDataSource.refresh();
+    this.merchantDataSource.data$.subscribe(newData => {     
+      if (newData)
+        this.pages = new Array(newData.numberOfPages);
+    });
   }
 
   onFormCreate(event: IModelFormCreateEvent) {
+    debugger;
     event.shouldSetCommandModel = false;
     event.formGroup = this.fb.group({
-      'name': [event.commandModel.name, Validators.required]
+      'name': [event.commandModel.name, Validators.required],
+      'address': [event.commandModel.address, Validators.required]
     });
   }