command-modal works good!

src/app/command-modal-demo/command-modal-demo.module.ts

@@ -2,14 +2,17 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CommandModalDemoComponent } from './command-modal-demo/command-modal-demo.component';
 import { CommandModalDemoRoutingModule } from './command-modal-demo-routing.module';
-
-
-
+import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
+import { CommandModalModule } from 'projects/poweredsoft/ngx-bootstrap/src/public-api';
+import {FormsModule} from '@angular/forms';
 @NgModule({
   declarations: [CommandModalDemoComponent],
   imports: [
     CommonModule,
-    CommandModalDemoRoutingModule
+    CommandModalDemoRoutingModule,
+    DataGridModule,
+    CommandModalModule,
+    FormsModule
   ]
 })
 export class CommandModalDemoModule { }

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

@@ -1 +1,47 @@
-<p>command-modal-demo works!</p>
+<h1>
+    This is a demo for a command modal.
+</h1>
+<ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns"
+    tableClasses="table table-sm table-dark table-striped table-bordered">
+    <ng-container *psDataGridHeader>
+        <button class="btn-primary 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>
+    </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-primary btn" psbxCommandModal [commandTitle]="'Change ' + model.name + ' name'" commandText="Update"
+            [dataSource]="merchantDataSource" command="changeMerchantName" [model]="model" [template]="changeName">Change name</button>
+        </ng-container>
+    </ng-container>
+    <ng-container *psDataGridFooter>
+        <button class="btn-primary btn" psbxCommandModal commandTitle="Adding a new merchant" commandText="Add"
+            [dataSource]="merchantDataSource" command="addMerchant" [template]="theModal">Create a new record</button>
+    </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 #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">
+</ng-template>

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

@@ -1,4 +1,7 @@
 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';
 
 @Component({
   selector: 'ps-command-modal-demo',
@@ -7,9 +10,41 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CommandModalDemoComponent implements OnInit {
 
-  constructor() { }
+  columns = ['id','name', 'address', 'commands']
+  merchantDataSource: IDataSource<IMerchant>;  
+  constructor(private  merchantService: MerchantService){
+    this.merchantDataSource = this.createDataSource();
 
-  ngOnInit(): void {
+  }
+
+  newMerchant(name: string) {
+    this.merchantDataSource.executeCommandByName('addMerchant', {
+      name: name
+    }).subscribe(
+      res => {
+        alert('it worked!');
+        this.merchantDataSource.refresh();
+      },
+      err => {
+        console.log(err);
+        alert('failed');
+      }
+    );
+  }
+
+  createDataSource(): IDataSource<IMerchant> {
+    return this.merchantService.createDataSource();
+  }
+
+  ngOnInit() {
+    this.merchantDataSource.loading$.subscribe(isLoading => {
+      console.log('merchant data source event loading', isLoading);
+    });
+
+    this.merchantDataSource.data$.subscribe(receivedData => {
+      console.log('new data is coming from the server', receivedData);
+    });
+    this.merchantDataSource.refresh();
   }
 
 }

src/app/data-grid-demo/data-grid-demo.module.ts

@@ -4,7 +4,6 @@ import { CommonModule } from '@angular/common';
 import { DataGridDemoRoutingModule } from './data-grid-demo-routing.module';
 import { DataGridDemoHomeComponent } from './data-grid-demo-home/data-grid-demo-home.component';
 import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
-import { PaginationModule } from 'ngx-bootstrap/pagination';
 
 
 @NgModule({
@@ -12,8 +11,7 @@ import { PaginationModule } from 'ngx-bootstrap/pagination';
   imports: [
     CommonModule,
     DataGridDemoRoutingModule,
-    DataGridModule,
-    PaginationModule
+    DataGridModule    
   ]
 })
 export class DataGridDemoModule { }

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

@@ -78,7 +78,7 @@ export class MerchantService {
       
       // viewModel -> transform to the form model for that command -> IChangeMerchantName
       e => of(<IAddMerchantCommand>{
-        name: '',
+        name: 'A New merchant',
         address: ''
       })
     );