From 5bd9ae4d3b2dabd783d27e38ce50d1bb77ea55ab Mon Sep 17 00:00:00 2001
From: Yubing325 <35515298+Yubing325@users.noreply.github.com>
Date: Tue, 9 Jun 2020 11:57:54 -0500
Subject: [PATCH 1/6] modal init

---
 angular.json                                  | 40 +++++++++++++++++++
 package-lock.json                             |  2 +-
 package.json                                  |  6 +--
 projects/poweredsoft/ngx-bootstrap/README.md  | 24 +++++++++++
 .../poweredsoft/ngx-bootstrap/karma.conf.js   | 32 +++++++++++++++
 .../poweredsoft/ngx-bootstrap/ng-package.json |  7 ++++
 .../poweredsoft/ngx-bootstrap/package.json    | 12 ++++++
 .../src/lib/ngx-bootstrap.module.ts           | 11 +++++
 .../src/lib/ngx-bootstrap.service.ts          |  9 +++++
 .../ngx-bootstrap/src/public-api.ts           |  7 ++++
 .../poweredsoft/ngx-bootstrap/src/test.ts     | 26 ++++++++++++
 .../ngx-bootstrap/tsconfig.lib.json           | 23 +++++++++++
 .../ngx-bootstrap/tsconfig.lib.prod.json      |  6 +++
 .../ngx-bootstrap/tsconfig.spec.json          | 17 ++++++++
 .../poweredsoft/ngx-bootstrap/tslint.json     | 17 ++++++++
 tsconfig.json                                 |  4 ++
 16 files changed, 239 insertions(+), 4 deletions(-)
 create mode 100644 projects/poweredsoft/ngx-bootstrap/README.md
 create mode 100644 projects/poweredsoft/ngx-bootstrap/karma.conf.js
 create mode 100644 projects/poweredsoft/ngx-bootstrap/ng-package.json
 create mode 100644 projects/poweredsoft/ngx-bootstrap/package.json
 create mode 100644 projects/poweredsoft/ngx-bootstrap/src/lib/ngx-bootstrap.module.ts
 create mode 100644 projects/poweredsoft/ngx-bootstrap/src/lib/ngx-bootstrap.service.ts
 create mode 100644 projects/poweredsoft/ngx-bootstrap/src/public-api.ts
 create mode 100644 projects/poweredsoft/ngx-bootstrap/src/test.ts
 create mode 100644 projects/poweredsoft/ngx-bootstrap/tsconfig.lib.json
 create mode 100644 projects/poweredsoft/ngx-bootstrap/tsconfig.lib.prod.json
 create mode 100644 projects/poweredsoft/ngx-bootstrap/tsconfig.spec.json
 create mode 100644 projects/poweredsoft/ngx-bootstrap/tslint.json

diff --git a/angular.json b/angular.json
index d96d6a9..9216f12 100644
--- a/angular.json
+++ b/angular.json
@@ -163,6 +163,46 @@
           }
         }
       }
+    },
+    "@poweredsoft/ngx-bootstrap": {
+      "projectType": "library",
+      "root": "projects/poweredsoft/ngx-bootstrap",
+      "sourceRoot": "projects/poweredsoft/ngx-bootstrap/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/poweredsoft/ngx-bootstrap/tsconfig.lib.json",
+            "project": "projects/poweredsoft/ngx-bootstrap/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/poweredsoft/ngx-bootstrap/tsconfig.lib.prod.json"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/poweredsoft/ngx-bootstrap/src/test.ts",
+            "tsConfig": "projects/poweredsoft/ngx-bootstrap/tsconfig.spec.json",
+            "karmaConfig": "projects/poweredsoft/ngx-bootstrap/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/poweredsoft/ngx-bootstrap/tsconfig.lib.json",
+              "projects/poweredsoft/ngx-bootstrap/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
     }},
   "defaultProject": "ngx-cdk-ui"
 }
diff --git a/package-lock.json b/package-lock.json
index 4e24382..0cdb65e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-cdk-ui",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 26a2b2d..2d27be7 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "ngx-cdk-ui",
+  "name": "ngx-ui",
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
@@ -9,8 +9,8 @@
     "lint": "ng lint",
     "e2e": "ng e2e",
     "clean": "rimraf dist",
-    "start:app": "wait-on dist/poweredsoft/ngx-cdk-ui/fesm5 && ng serve --poll 2000",
-    "watch:lib": "ng build @poweredsoft/ngx-cdk-ui --watch",
+    "start:app": "wait-on dist/poweredsoft/ngx-cdk-ui/fesm5 && dist/poweredsoft/ngx-bootstrap/fesm5 && ng serve --poll 2000",
+    "watch:lib": "ng build @poweredsoft/ngx-cdk-ui --watch && ng build @poweredsoft/ngx-bootstrap --watch",
     "watch:all": "npm run clean && run-p watch:lib start:app"
   },
   "private": true,
diff --git a/projects/poweredsoft/ngx-bootstrap/README.md b/projects/poweredsoft/ngx-bootstrap/README.md
new file mode 100644
index 0000000..11fa36b
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/README.md
@@ -0,0 +1,24 @@
+# NgxBootstrap
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.9.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ngx-bootstrap` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-bootstrap`.
+> Note: Don't forget to add `--project ngx-bootstrap` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ngx-bootstrap` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ngx-bootstrap`, go to the dist folder `cd dist/ngx-bootstrap` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ngx-bootstrap` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/poweredsoft/ngx-bootstrap/karma.conf.js b/projects/poweredsoft/ngx-bootstrap/karma.conf.js
new file mode 100644
index 0000000..75c4d37
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../../coverage/poweredsoft/ngx-bootstrap'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/poweredsoft/ngx-bootstrap/ng-package.json b/projects/poweredsoft/ngx-bootstrap/ng-package.json
new file mode 100644
index 0000000..31ef03f
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/poweredsoft/ngx-bootstrap",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/poweredsoft/ngx-bootstrap/package.json b/projects/poweredsoft/ngx-bootstrap/package.json
new file mode 100644
index 0000000..398f497
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@poweredsoft/ngx-bootstrap",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^9.1.9",
+    "@angular/core": "^9.1.9",
+    "@poweredsoft/ngx-cdk-ui": "0.0.1"    
+  },
+  "dependencies": {
+    "tslib": "^1.10.0"
+  }
+}
\ No newline at end of file
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/ngx-bootstrap.module.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/ngx-bootstrap.module.ts
new file mode 100644
index 0000000..d866978
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/ngx-bootstrap.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+  ],
+  exports: []
+})
+export class NgxBootstrapModule { }
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/ngx-bootstrap.service.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/ngx-bootstrap.service.ts
new file mode 100644
index 0000000..ce268f0
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/ngx-bootstrap.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NgxBootstrapService {
+
+  constructor() { }
+}
diff --git a/projects/poweredsoft/ngx-bootstrap/src/public-api.ts b/projects/poweredsoft/ngx-bootstrap/src/public-api.ts
new file mode 100644
index 0000000..33f4969
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/src/public-api.ts
@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of ngx-bootstrap
+ */
+
+export * from './lib/ngx-bootstrap.service';
+export * from './lib/ngx-bootstrap.component';
+export * from './lib/ngx-bootstrap.module';
diff --git a/projects/poweredsoft/ngx-bootstrap/src/test.ts b/projects/poweredsoft/ngx-bootstrap/src/test.ts
new file mode 100644
index 0000000..303b32a
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/src/test.ts
@@ -0,0 +1,26 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/poweredsoft/ngx-bootstrap/tsconfig.lib.json b/projects/poweredsoft/ngx-bootstrap/tsconfig.lib.json
new file mode 100644
index 0000000..38a679b
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/tsconfig.lib.json
@@ -0,0 +1,23 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/poweredsoft/ngx-bootstrap/tsconfig.lib.prod.json b/projects/poweredsoft/ngx-bootstrap/tsconfig.lib.prod.json
new file mode 100644
index 0000000..cbae794
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/tsconfig.lib.prod.json
@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "angularCompilerOptions": {
+    "enableIvy": false
+  }
+}
diff --git a/projects/poweredsoft/ngx-bootstrap/tsconfig.spec.json b/projects/poweredsoft/ngx-bootstrap/tsconfig.spec.json
new file mode 100644
index 0000000..4acf941
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/poweredsoft/ngx-bootstrap/tslint.json b/projects/poweredsoft/ngx-bootstrap/tslint.json
new file mode 100644
index 0000000..3aa2f4c
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "lib",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "lib",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
index 59801a3..8259035 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,6 +19,10 @@
       "@poweredsoft/ngx-cdk-ui": [
         "dist/poweredsoft/ngx-cdk-ui/poweredsoft-ngx-cdk-ui",
         "dist/poweredsoft/ngx-cdk-ui"
+      ],
+      "@poweredsoft/ngx-bootstrap": [
+        "dist/poweredsoft/ngx-bootstrap/poweredsoft-ngx-bootstrap",
+        "dist/poweredsoft/ngx-bootstrap"
       ]
     }
   },

From 9e1c565feff7b52cf10fb6173fe142354ee2e88a Mon Sep 17 00:00:00 2001
From: Yubing325 <35515298+Yubing325@users.noreply.github.com>
Date: Tue, 9 Jun 2020 14:14:18 -0500
Subject: [PATCH 2/6] add demo for command modal

---
 angular.json                                  |  2 +-
 .../lib/command-modal/command-modal.module.ts | 12 +++++++++
 .../command-modal.component.html              |  1 +
 .../command-modal.component.scss              |  0
 .../command-modal.component.spec.ts           | 25 +++++++++++++++++++
 .../command-modal/command-modal.component.ts  | 15 +++++++++++
 .../form-group-command-modal.module.ts        | 13 ++++++++++
 .../form-group-command-modal.component.html   |  1 +
 .../form-group-command-modal.component.scss   |  0
 .../form-group-command-modal.component.ts     | 15 +++++++++++
 .../src/lib/ngx-bootstrap.module.ts           | 11 --------
 .../src/lib/ngx-bootstrap.service.ts          |  9 -------
 .../ngx-bootstrap/src/public-api.ts           |  5 ++--
 src/app/app-routing.module.ts                 |  4 +++
 src/app/app.component.html                    |  3 +++
 .../command-modal-demo-routing.module.ts      | 18 +++++++++++++
 .../command-modal-demo.module.ts              | 15 +++++++++++
 .../command-modal-demo.component.html         |  1 +
 .../command-modal-demo.component.scss         |  0
 .../command-modal-demo.component.ts           | 15 +++++++++++
 20 files changed, 141 insertions(+), 24 deletions(-)
 create mode 100644 projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal.module.ts
 create mode 100644 projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.html
 create mode 100644 projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.scss
 create mode 100644 projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.spec.ts
 create mode 100644 projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts
 create mode 100644 projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal.module.ts
 create mode 100644 projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.html
 create mode 100644 projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.scss
 create mode 100644 projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts
 delete mode 100644 projects/poweredsoft/ngx-bootstrap/src/lib/ngx-bootstrap.module.ts
 delete mode 100644 projects/poweredsoft/ngx-bootstrap/src/lib/ngx-bootstrap.service.ts
 create mode 100644 src/app/command-modal-demo/command-modal-demo-routing.module.ts
 create mode 100644 src/app/command-modal-demo/command-modal-demo.module.ts
 create mode 100644 src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html
 create mode 100644 src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.scss
 create mode 100644 src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.ts

diff --git a/angular.json b/angular.json
index 9216f12..45e3006 100644
--- a/angular.json
+++ b/angular.json
@@ -168,7 +168,7 @@
       "projectType": "library",
       "root": "projects/poweredsoft/ngx-bootstrap",
       "sourceRoot": "projects/poweredsoft/ngx-bootstrap/src",
-      "prefix": "lib",
+      "prefix": "ps",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-ng-packagr:build",
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal.module.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal.module.ts
new file mode 100644
index 0000000..7528845
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CommandModalComponent } from './command-modal/command-modal.component';
+
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [CommandModalComponent]
+})
+export class CommandModalModule { }
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.html b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.html
new file mode 100644
index 0000000..5263bc9
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.html
@@ -0,0 +1 @@
+<p>command-modal works!</p>
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.scss b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.spec.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.spec.ts
new file mode 100644
index 0000000..89276ef
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommandModalComponent } from './command-modal.component';
+
+describe('CommandModalComponent', () => {
+  let component: CommandModalComponent;
+  let fixture: ComponentFixture<CommandModalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CommandModalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CommandModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts
new file mode 100644
index 0000000..1dc29a2
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ps-command-modal',
+  templateUrl: './command-modal.component.html',
+  styleUrls: ['./command-modal.component.scss']
+})
+export class CommandModalComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal.module.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal.module.ts
new file mode 100644
index 0000000..d7d08b1
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroupCommandModalComponent } from './form-group-command-modal/form-group-command-modal.component';
+
+
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [FormGroupCommandModalComponent]
+})
+export class FormGroupCommandModalModule { }
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.html b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.html
new file mode 100644
index 0000000..feefece
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.html
@@ -0,0 +1 @@
+<p>form-group-command-modal works!</p>
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.scss b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts
new file mode 100644
index 0000000..7ae5720
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ps-form-group-command-modal',
+  templateUrl: './form-group-command-modal.component.html',
+  styleUrls: ['./form-group-command-modal.component.scss']
+})
+export class FormGroupCommandModalComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/ngx-bootstrap.module.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/ngx-bootstrap.module.ts
deleted file mode 100644
index d866978..0000000
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/ngx-bootstrap.module.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { NgModule } from '@angular/core';
-
-
-
-@NgModule({
-  declarations: [],
-  imports: [
-  ],
-  exports: []
-})
-export class NgxBootstrapModule { }
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/ngx-bootstrap.service.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/ngx-bootstrap.service.ts
deleted file mode 100644
index ce268f0..0000000
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/ngx-bootstrap.service.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class NgxBootstrapService {
-
-  constructor() { }
-}
diff --git a/projects/poweredsoft/ngx-bootstrap/src/public-api.ts b/projects/poweredsoft/ngx-bootstrap/src/public-api.ts
index 33f4969..6734a41 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/public-api.ts
+++ b/projects/poweredsoft/ngx-bootstrap/src/public-api.ts
@@ -2,6 +2,5 @@
  * Public API Surface of ngx-bootstrap
  */
 
-export * from './lib/ngx-bootstrap.service';
-export * from './lib/ngx-bootstrap.component';
-export * from './lib/ngx-bootstrap.module';
+export * from './lib/command-modal/command-modal.module';
+export * from './lib/command-modal/command-modal/command-modal.component';
\ No newline at end of file
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 9f9a2d8..8cc48e3 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -15,6 +15,10 @@ const routes: Routes = [
   {
     path: 'list-view',
     loadChildren: () => import('./list-view-demo/list-view-demo.module').then(m => m.ListViewDemoModule)
+  },
+  {
+    path: 'command-modal',
+    loadChildren: () => import('./command-modal-demo/command-modal-demo.module').then(m => m.CommandModalDemoModule)
   }
 ];
 
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 74c6a32..b31c50e 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -12,6 +12,9 @@
         <li class="nav-item">
           <a class="nav-link" routerLink="list-view">List View</a>
         </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLink="command-modal">Command Modal</a>
+        </li>
       </ul>
     </div>
     <div class="col-lg-10" style="padding-top: 5px">
diff --git a/src/app/command-modal-demo/command-modal-demo-routing.module.ts b/src/app/command-modal-demo/command-modal-demo-routing.module.ts
new file mode 100644
index 0000000..a74dc2d
--- /dev/null
+++ b/src/app/command-modal-demo/command-modal-demo-routing.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { CommandModalDemoComponent } from './command-modal-demo/command-modal-demo.component';
+
+
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CommandModalDemoComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class CommandModalDemoRoutingModule { }
diff --git a/src/app/command-modal-demo/command-modal-demo.module.ts b/src/app/command-modal-demo/command-modal-demo.module.ts
new file mode 100644
index 0000000..f291d86
--- /dev/null
+++ b/src/app/command-modal-demo/command-modal-demo.module.ts
@@ -0,0 +1,15 @@
+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';
+
+
+
+@NgModule({
+  declarations: [CommandModalDemoComponent],
+  imports: [
+    CommonModule,
+    CommandModalDemoRoutingModule
+  ]
+})
+export class CommandModalDemoModule { }
diff --git a/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html b/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html
new file mode 100644
index 0000000..bf60fb3
--- /dev/null
+++ b/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html
@@ -0,0 +1 @@
+<p>command-modal-demo works!</p>
diff --git a/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.scss b/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.ts b/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.ts
new file mode 100644
index 0000000..4b229ff
--- /dev/null
+++ b/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ps-command-modal-demo',
+  templateUrl: './command-modal-demo.component.html',
+  styleUrls: ['./command-modal-demo.component.scss']
+})
+export class CommandModalDemoComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

From aec93beeca2a1e1e56484b6b04b7581a2c07ebcf Mon Sep 17 00:00:00 2001
From: Yubing325 <35515298+Yubing325@users.noreply.github.com>
Date: Tue, 9 Jun 2020 17:53:19 -0500
Subject: [PATCH 3/6] command-modal works good!

---
 angular.json                                  |  2 +-
 package-lock.json                             |  4 +-
 .../poweredsoft/ngx-bootstrap/package.json    |  2 +-
 .../lib/command-modal/command-modal.module.ts |  9 ++-
 .../command-modal.component.html              | 25 ++++++++-
 .../command-modal/command-modal.component.ts  | 55 +++++++++++++++++--
 .../directives/command-modal.directive.ts     | 51 +++++++++++++++++
 .../ngx-bootstrap/src/public-api.ts           |  2 +-
 .../command-modal-demo.module.ts              | 11 ++--
 .../command-modal-demo.component.html         | 48 +++++++++++++++-
 .../command-modal-demo.component.ts           | 39 ++++++++++++-
 .../data-grid-demo/data-grid-demo.module.ts   |  4 +-
 src/app/data/services/merchant.service.ts     |  2 +-
 13 files changed, 230 insertions(+), 24 deletions(-)
 create mode 100644 projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts

diff --git a/angular.json b/angular.json
index 45e3006..c28fc2e 100644
--- a/angular.json
+++ b/angular.json
@@ -168,7 +168,7 @@
       "projectType": "library",
       "root": "projects/poweredsoft/ngx-bootstrap",
       "sourceRoot": "projects/poweredsoft/ngx-bootstrap/src",
-      "prefix": "ps",
+      "prefix": "psbx",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-ng-packagr:build",
diff --git a/package-lock.json b/package-lock.json
index 0cdb65e..c3334f8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
-  "name": "ngx-cdk-ui",
-  "version": "0.0.1",
+  "name": "ngx-ui",
+  "version": "0.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/projects/poweredsoft/ngx-bootstrap/package.json b/projects/poweredsoft/ngx-bootstrap/package.json
index 398f497..a3c3207 100644
--- a/projects/poweredsoft/ngx-bootstrap/package.json
+++ b/projects/poweredsoft/ngx-bootstrap/package.json
@@ -4,7 +4,7 @@
   "peerDependencies": {
     "@angular/common": "^9.1.9",
     "@angular/core": "^9.1.9",
-    "@poweredsoft/ngx-cdk-ui": "0.0.1"    
+    "ngx-bootstrap": "^5.6.1"
   },
   "dependencies": {
     "tslib": "^1.10.0"
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal.module.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal.module.ts
index 7528845..88852c8 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal.module.ts
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal.module.ts
@@ -1,12 +1,15 @@
 import { NgModule } from '@angular/core';
 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';
 
-
 @NgModule({
   imports: [
-    CommonModule
+    CommonModule,
+    ModalModule.forRoot()
   ],
-  declarations: [CommandModalComponent]
+  declarations: [CommandModalDirective, CommandModalComponent],
+  exports: [CommandModalDirective]
 })
 export class CommandModalModule { }
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.html b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.html
index 5263bc9..e4f2e07 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.html
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.html
@@ -1 +1,24 @@
-<p>command-modal works!</p>
+<div class="modal-header">
+    <h4 class="modal-title pull-left">{{ title }}</h4>
+    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
+        <span aria-hidden="true">&times;</span>
+    </button>
+</div>
+<div class="modal-body">
+    <ng-container [ngTemplateOutlet]="template"
+        [ngTemplateOutletContext]="{ $implicit: commandModel, loading: loading }"></ng-container>
+</div>
+<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">{{ commandText }}</button>
+
+    <br>
+
+    <div class="progress" style="width: 100%" *ngIf="loading">
+        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100"
+            aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
+    </div>
+
+</div>
\ No newline at end of file
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts
index 1dc29a2..84c892e 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts
@@ -1,15 +1,62 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, TemplateRef, OnDestroy } from '@angular/core';
+import { IDataSource } from '@poweredsoft/data';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+import { finalize} from 'rxjs/operators';
+import { Subscription } from 'rxjs';
 
 @Component({
-  selector: 'ps-command-modal',
+  selector: 'psbx-command-modal',
   templateUrl: './command-modal.component.html',
   styleUrls: ['./command-modal.component.scss']
 })
-export class CommandModalComponent implements OnInit {
+export class CommandModalComponent implements OnInit, OnDestroy {
 
-  constructor() { }
+  title: string;
+  template: TemplateRef<any>;
+  command: string;
+  commandModel: any;
+  dataSource: IDataSource<any>;
+  refreshOnSuccess: boolean;
+  loading: boolean;
+  commandText: string;
+  cancelText: string;
+
+  private _notifyMessage: Subscription;
+  private _validationError: Subscription;
+
+  constructor(public modalRef: BsModalRef) { }
+
+  ngOnDestroy(): void {
+    this._notifyMessage.unsubscribe();
+    this._validationError.unsubscribe();
+  }
 
   ngOnInit(): void {
+    this._notifyMessage = this.dataSource.notifyMessage$.subscribe(message => {
+      
+    });
+
+    this._validationError = this.dataSource.validationError$.subscribe(validatorErrors => {
+      console.log(validatorErrors);
+    });
+  }
+
+  attemptSave() {
+    this.loading = true;
+    this.dataSource.executeCommandByName(this.command, this.commandModel)
+      .pipe(
+        finalize(() => {
+          this.loading = false;
+        })
+      )
+      .subscribe(success => {
+        if (this.refreshOnSuccess)
+          this.dataSource.refresh();
+
+        this.modalRef.hide();
+      }, fail => {
+        // you do not want to close on failure.. so just ignore..
+      });
   }
 
 }
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts
new file mode 100644
index 0000000..cec95fb
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts
@@ -0,0 +1,51 @@
+import { Directive, HostListener, Input, TemplateRef } from '@angular/core';
+import { IDataSource } from '@poweredsoft/data';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import { CommandModalComponent } from '../command-modal/command-modal.component';
+
+@Directive({
+  selector: '[psbxCommandModal]'
+})
+export class CommandModalDirective {
+
+  constructor(private modalService: BsModalService) { }
+
+
+  @Input() dataSource: IDataSource<any>;
+  @Input() command: string;
+  @Input() model: any;
+  @Input() template: TemplateRef<any>;
+  @Input() commandTitle: string;
+  @Input() refreshOnSuccess: boolean;
+  @Input() commandText: string;
+  @Input() cancelText: string;
+  @Input() animated: boolean;
+
+  @HostListener('click')
+  wasClicked() {    
+    this.dataSource.resolveCommandModelByName({
+      command: this.command,
+      model: this.model
+    }).subscribe(commandModel => {      
+      const initialState = {
+        dataSource: this.dataSource,
+        command: this.command,
+        commandModel: commandModel,
+        template: this.template,
+        title: this.commandTitle,
+        refreshOnSuccess: this.refreshOnSuccess === undefined ? true : this.refreshOnSuccess,
+        commandText: this.commandText || 'OK',
+        cancelText: this.cancelText || 'Cancel'
+      };
+      this.modalService.show(CommandModalComponent, {
+        animated: this.animated === undefined ? true : this.animated,
+        initialState
+      });
+
+    }, error => {
+
+    });
+  }
+
+
+}
diff --git a/projects/poweredsoft/ngx-bootstrap/src/public-api.ts b/projects/poweredsoft/ngx-bootstrap/src/public-api.ts
index 6734a41..871c113 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/public-api.ts
+++ b/projects/poweredsoft/ngx-bootstrap/src/public-api.ts
@@ -3,4 +3,4 @@
  */
 
 export * from './lib/command-modal/command-modal.module';
-export * from './lib/command-modal/command-modal/command-modal.component';
\ No newline at end of file
+export * from './lib/command-modal/directives/command-modal.directive';
\ No newline at end of file
diff --git a/src/app/command-modal-demo/command-modal-demo.module.ts b/src/app/command-modal-demo/command-modal-demo.module.ts
index f291d86..53c9b27 100644
--- a/src/app/command-modal-demo/command-modal-demo.module.ts
+++ b/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 { }
diff --git a/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html b/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html
index bf60fb3..97fff78 100644
--- a/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.ts b/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.ts
index 4b229ff..b10a2a0 100644
--- a/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.ts
+++ b/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();
   }
 
 }
diff --git a/src/app/data-grid-demo/data-grid-demo.module.ts b/src/app/data-grid-demo/data-grid-demo.module.ts
index c4b3530..71648d5 100644
--- a/src/app/data-grid-demo/data-grid-demo.module.ts
+++ b/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 { }
diff --git a/src/app/data/services/merchant.service.ts b/src/app/data/services/merchant.service.ts
index d89fcf7..97560d0 100644
--- a/src/app/data/services/merchant.service.ts
+++ b/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: ''
       })
     );

From 02dc911925efaa0dc67da41fd5660e414de12189 Mon Sep 17 00:00:00 2001
From: Yubing325 <35515298+Yubing325@users.noreply.github.com>
Date: Tue, 9 Jun 2020 18:10:22 -0500
Subject: [PATCH 4/6] bolierplate code for form-group-modal

---
 src/app/app-routing.module.ts                     |  4 ++++
 src/app/app.component.html                        |  3 +++
 .../form-group-modal-demo-routing.module.ts       | 15 +++++++++++++++
 .../form-group-modal-demo.module.ts               | 14 ++++++++++++++
 .../form-group-modal-demo.component.html          |  1 +
 .../form-group-modal-demo.component.scss          |  0
 .../form-group-modal-demo.component.ts            | 15 +++++++++++++++
 7 files changed, 52 insertions(+)
 create mode 100644 src/app/form-group-modal-demo/form-group-modal-demo-routing.module.ts
 create mode 100644 src/app/form-group-modal-demo/form-group-modal-demo.module.ts
 create mode 100644 src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.html
 create mode 100644 src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.scss
 create mode 100644 src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 8cc48e3..68d66ae 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -19,6 +19,10 @@ const routes: Routes = [
   {
     path: 'command-modal',
     loadChildren: () => import('./command-modal-demo/command-modal-demo.module').then(m => m.CommandModalDemoModule)
+  },
+  {
+    path: 'form-group',
+    loadChildren: () => import('./form-group-modal-demo/form-group-modal-demo.module').then(m => m.FormGroupModalDemoModule)
   }
 ];
 
diff --git a/src/app/app.component.html b/src/app/app.component.html
index b31c50e..91bf4b4 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -15,6 +15,9 @@
         <li class="nav-item">
           <a class="nav-link" routerLink="command-modal">Command Modal</a>
         </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLink="form-group">Form Group Modal</a>
+        </li>
       </ul>
     </div>
     <div class="col-lg-10" style="padding-top: 5px">
diff --git a/src/app/form-group-modal-demo/form-group-modal-demo-routing.module.ts b/src/app/form-group-modal-demo/form-group-modal-demo-routing.module.ts
new file mode 100644
index 0000000..e8691f1
--- /dev/null
+++ b/src/app/form-group-modal-demo/form-group-modal-demo-routing.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { FormGroupModalDemoComponent } from './form-group-modal-demo/form-group-modal-demo.component';
+
+
+const routes: Routes = [{
+  path: '',
+  component: FormGroupModalDemoComponent
+}];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class FormGroupModalDemoRoutingModule { }
diff --git a/src/app/form-group-modal-demo/form-group-modal-demo.module.ts b/src/app/form-group-modal-demo/form-group-modal-demo.module.ts
new file mode 100644
index 0000000..04af0f0
--- /dev/null
+++ b/src/app/form-group-modal-demo/form-group-modal-demo.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+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'
+
+
+@NgModule({
+  declarations: [FormGroupModalDemoComponent],
+  imports: [
+    CommonModule,
+    FormGroupModalDemoRoutingModule
+  ]
+})
+export class FormGroupModalDemoModule { }
diff --git a/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.html b/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.html
new file mode 100644
index 0000000..aaa7d99
--- /dev/null
+++ b/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.html
@@ -0,0 +1 @@
+<p>form-group-modal-demo works!</p>
diff --git a/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.scss b/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.ts b/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.ts
new file mode 100644
index 0000000..75c3a9a
--- /dev/null
+++ b/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ps-form-group-modal-demo',
+  templateUrl: './form-group-modal-demo.component.html',
+  styleUrls: ['./form-group-modal-demo.component.scss']
+})
+export class FormGroupModalDemoComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

From 46b6d0948cc0b9f3710fff1f66eda458713c6f82 Mon Sep 17 00:00:00 2001
From: Yubing325 <35515298+Yubing325@users.noreply.github.com>
Date: Wed, 10 Jun 2020 16:42:33 -0500
Subject: [PATCH 5/6] form group modal

---
 .../command-modal/command-modal.component.ts  |   1 +
 .../directives/command-modal.directive.ts     |   6 +-
 .../form-group-command-modal.directive.ts     | 108 ++++++++++++++++++
 .../form-group-command-modal.module.ts        |  11 +-
 .../form-group-command-modal.component.html   |  32 +++++-
 .../form-group-command-modal.component.ts     |  68 ++++++++++-
 .../ngx-bootstrap/src/public-api.ts           |   4 +-
 .../command-modal-demo.module.ts              |   3 +-
 src/app/data/services/merchant.service.ts     |   2 +-
 .../form-group-modal-demo.module.ts           |  10 +-
 .../form-group-modal-demo.component.html      |  37 +++++-
 .../form-group-modal-demo.component.ts        |  45 +++++++-
 12 files changed, 310 insertions(+), 17 deletions(-)
 create mode 100644 projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/directives/form-group-command-modal.directive.ts

diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts
index 84c892e..4ef50b3 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts
@@ -42,6 +42,7 @@ export class CommandModalComponent implements OnInit, OnDestroy {
   }
 
   attemptSave() {
+    debugger;
     this.loading = true;
     this.dataSource.executeCommandByName(this.command, this.commandModel)
       .pipe(
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts
index cec95fb..9bc2866 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts
@@ -22,11 +22,13 @@ export class CommandModalDirective {
   @Input() animated: boolean;
 
   @HostListener('click')
-  wasClicked() {    
+  wasClicked() { 
+    debugger;       
     this.dataSource.resolveCommandModelByName({
       command: this.command,
       model: this.model
-    }).subscribe(commandModel => {      
+    }).subscribe(commandModel => {
+      debugger;              
       const initialState = {
         dataSource: this.dataSource,
         command: this.command,
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/directives/form-group-command-modal.directive.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/directives/form-group-command-modal.directive.ts
new file mode 100644
index 0000000..90cfdb2
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/directives/form-group-command-modal.directive.ts
@@ -0,0 +1,108 @@
+import { Directive, Input, TemplateRef, HostListener, Output, EventEmitter } from '@angular/core';
+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';
+
+export interface IModelFormCreateEvent
+{
+  shouldSetCommandModel: boolean;
+  viewModel: any;
+  commandName: string;
+  commandModel: any;
+  formGroup?: FormGroup;
+}
+
+@Directive({
+  selector: '[psbxFormGroupCommandModal]'
+})
+export class FormGroupCommandModalDirective {
+
+
+  @Input() dataSource: IDataSource<any>;
+  @Input() command: string;
+  @Input() model: any;
+  @Input() template: TemplateRef<any>;
+  @Input() commandTitle: string;
+  @Input() animated: boolean;
+  @Input() refreshOnSuccess: boolean;
+  @Input() commandText: string;
+  @Input() cancelText: string;
+
+  @Output() formCreate: EventEmitter<IModelFormCreateEvent> = new EventEmitter<IModelFormCreateEvent>();
+
+  constructor(private modalService: BsModalService) { }
+
+  @HostListener('click')
+  wasClicked() {
+    this.dataSource.resolveCommandModelByName({
+      command: this.command,
+      model: this.model
+    }).subscribe(commandModel => {
+
+      
+
+      const event = <IModelFormCreateEvent>{
+        commandName: this.command,
+        viewModel: this.model,
+        commandModel: commandModel,
+        shouldSetCommandModel: true
+      }
+
+      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
+      };
+      
+      this.modalService.show(FormGroupCommandModalComponent, {
+        animated: this.animated === undefined ? true : this.animated,
+        initialState
+      });
+
+    }, error => {
+
+    });
+  }
+
+  // @Input()
+  // set psbxFormGroupCommandModal(element:HTMLBaseElement){
+  //   element.addEventListener('click',()=>{
+  //     this.dataSource.resolveCommandModelByName({
+  //       command: this.command,
+  //       model: this.model
+  //     }).subscribe(commandModel => {
+  //       const initialState = {
+  //         dataSource: this.dataSource,
+  //         command: this.command,
+  //         commandModel: commandModel,
+  //         template: this.template,
+  //         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 => {
+
+  //     });
+  //   })
+  // }
+
+}
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal.module.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal.module.ts
index d7d08b1..cb90bfe 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal.module.ts
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal.module.ts
@@ -1,13 +1,20 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroupCommandModalComponent } from './form-group-command-modal/form-group-command-modal.component';
+import { FormGroupCommandModalDirective } from './directives/form-group-command-modal.directive';
+import { ModalModule } from 'ngx-bootstrap/modal';
+import { ReactiveFormsModule } from '@angular/forms';
+
 
 
 
 @NgModule({
   imports: [
-    CommonModule
+    CommonModule,
+    ModalModule.forRoot(),
+    ReactiveFormsModule
   ],
-  declarations: [FormGroupCommandModalComponent]
+  declarations: [FormGroupCommandModalComponent, FormGroupCommandModalDirective],
+  exports: [FormGroupCommandModalDirective]
 })
 export class FormGroupCommandModalModule { }
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.html b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.html
index feefece..a509523 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.html
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.html
@@ -1 +1,31 @@
-<p>form-group-command-modal works!</p>
+
+
+    <div class="modal-header">
+        <h4 class="modal-title pull-left">{{ title }}</h4>
+        <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
+            <span aria-hidden="true">&times;</span>
+        </button>
+    </div>
+    
+    <div class="model-body">
+        <ng-container [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ $implicit: modelForm, loading: loading }">
+        </ng-container>
+
+        <div *ngIf="errorMessage" class="alert alert-danger mt-2">
+            {{ errorMessage }}
+        </div>
+    </div>
+  
+    
+    
+    <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">Creat</button>
+        <br>
+    
+        <div class="progress" style="width: 100%" *ngIf="loading">
+            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100"
+                aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
+        </div>
+    </div>
\ No newline at end of file
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts
index 7ae5720..f5155a7 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts
@@ -1,4 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, TemplateRef } from '@angular/core';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+import { IDataSource } from '@poweredsoft/data';
+import { finalize } from 'rxjs/operators';
+import { Subscription } from 'rxjs'
+import { FormGroup, FormControl } from '@angular/forms';
 
 @Component({
   selector: 'ps-form-group-command-modal',
@@ -7,9 +12,66 @@ import { Component, OnInit } from '@angular/core';
 })
 export class FormGroupCommandModalComponent implements OnInit {
 
-  constructor() { }
 
-  ngOnInit(): void {
+  modelForm: FormGroup;
+  title: string;
+  template: TemplateRef<any>;
+  command: string;
+  dataSource: IDataSource<any>;
+  refreshOnSuccess: boolean;
+  loading: boolean;
+  commandText: string;
+  cancelText: string;
+  errorMessage: string;
+
+  private _notifyMessage: Subscription;
+  private _validationError: Subscription;
+
+  constructor(public modalRef: BsModalRef) { }
+
+  ngOnDestroy(): void {
+    /*
+    this._notifyMessage.unsubscribe();
+    this._validationError.unsubscribe();
+    */
   }
 
+  ngOnInit(): void {
+    this.errorMessage = null;
+    // this._notifyMessage = this.dataSource.notifyMessage$.subscribe(message => {
+      
+    // });
+
+    // this._validationError = this.dataSource.validationError$.subscribe(validatorErrors => {
+    //   console.log(validatorErrors);
+    // });
+  }
+
+  attemptSave() {
+
+    this.errorMessage = null;
+    if (!this.modelForm.valid)
+    {
+      this.errorMessage = 'Form is not valid, please enter all required fields';
+      return;
+    }
+
+    const finalModel = this.modelForm.value;  
+    //this.modelForm.setValue(this.commandModel)
+    this.loading = true;
+    this.dataSource.executeCommandByName(this.command, finalModel)
+      .pipe(
+        finalize(() => {
+          this.loading = false;
+        })
+      )
+      .subscribe(success => {
+        if (this.refreshOnSuccess)
+          this.dataSource.refresh();
+
+        this.modalRef.hide();
+      }, fail => {
+        // you do not want to close on failure.. so just ignore..
+      });
+  }
 }
diff --git a/projects/poweredsoft/ngx-bootstrap/src/public-api.ts b/projects/poweredsoft/ngx-bootstrap/src/public-api.ts
index 871c113..9c101bf 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/public-api.ts
+++ b/projects/poweredsoft/ngx-bootstrap/src/public-api.ts
@@ -3,4 +3,6 @@
  */
 
 export * from './lib/command-modal/command-modal.module';
-export * from './lib/command-modal/directives/command-modal.directive';
\ No newline at end of file
+export * from './lib/command-modal/directives/command-modal.directive';
+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';
\ No newline at end of file
diff --git a/src/app/command-modal-demo/command-modal-demo.module.ts b/src/app/command-modal-demo/command-modal-demo.module.ts
index 53c9b27..9f7d907 100644
--- a/src/app/command-modal-demo/command-modal-demo.module.ts
+++ b/src/app/command-modal-demo/command-modal-demo.module.ts
@@ -3,8 +3,9 @@ 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';
+import { CommandModalModule } from '@poweredsoft/ngx-bootstrap';
 @NgModule({
   declarations: [CommandModalDemoComponent],
   imports: [
diff --git a/src/app/data/services/merchant.service.ts b/src/app/data/services/merchant.service.ts
index 97560d0..9ebe7ec 100644
--- a/src/app/data/services/merchant.service.ts
+++ b/src/app/data/services/merchant.service.ts
@@ -27,7 +27,7 @@ export class MerchantService {
       (model) => model.id,
       {
         page: 1,
-        pageSize: 50,
+        pageSize: 150,
       },
       true
     );
diff --git a/src/app/form-group-modal-demo/form-group-modal-demo.module.ts b/src/app/form-group-modal-demo/form-group-modal-demo.module.ts
index 04af0f0..3c1f825 100644
--- a/src/app/form-group-modal-demo/form-group-modal-demo.module.ts
+++ b/src/app/form-group-modal-demo/form-group-modal-demo.module.ts
@@ -2,13 +2,21 @@ import { NgModule } from '@angular/core';
 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 { ReactiveFormsModule } from '@angular/forms';
+
 
 
 @NgModule({
   declarations: [FormGroupModalDemoComponent],
   imports: [
     CommonModule,
-    FormGroupModalDemoRoutingModule
+    FormGroupModalDemoRoutingModule,
+    DataGridModule,
+    FormGroupCommandModalModule,
+    ReactiveFormsModule
+    
   ]
 })
 export class FormGroupModalDemoModule { }
diff --git a/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.html b/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.html
index aaa7d99..8688a9f 100644
--- a/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.html
+++ b/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.html
@@ -1 +1,36 @@
-<p>form-group-modal-demo works!</p>
+<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">
+    <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>   
+    </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="actions">
+        <ng-container *psDataGridColHeader>Actions</ng-container>
+        <ng-container *psDataGridCell="let model">
+            <button class="btn btn-primary mr-2">{{model.name}}</button>
+        </ng-container>
+    </ng-container>
+</ps-data-grid>
+
+<ng-template #theModal let-form let-loading="loading">
+    <form [formGroup]="form">
+        <div class="form-group">
+            <label for="name" class="col-sm-2 control-label">Name</label>
+            <div class="col-sm-8">
+                <input id="name" type="text" class="form-control" formControlName="name">
+            </div>
+        </div>
+    </form>
+</ng-template>
\ No newline at end of file
diff --git a/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.ts b/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.ts
index 75c3a9a..773ec0a 100644
--- a/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.ts
+++ b/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.ts
@@ -1,4 +1,9 @@
 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 { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
+import { IModelFormCreateEvent } from 'projects/poweredsoft/ngx-bootstrap/src/public-api';
 
 @Component({
   selector: 'ps-form-group-modal-demo',
@@ -6,10 +11,42 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./form-group-modal-demo.component.scss']
 })
 export class FormGroupModalDemoComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
+ 
+  createDataSource(): IDataSource<IMerchant> {
+    return this.merchantService.createDataSource();
   }
 
+  
+  merchantDataSource: IDataSource<IMerchant>;
+  columns = ['id','name', 'address', 'actions'];
+  constructor(private merchantService: MerchantService, private fb: FormBuilder) {
+    this.merchantDataSource = this.createDataSource();
+   }
+
+  ngOnInit(): void {
+    this.merchantDataSource.refresh();
+  }
+
+  onFormCreate(event: IModelFormCreateEvent) {
+    event.shouldSetCommandModel = false;
+    event.formGroup = this.fb.group({
+      'name': [event.commandModel.name, Validators.required]
+    });
+  }
+
+
+  newMerchant(name: string) {
+    this.merchantDataSource.executeCommandByName('addMerchant', {
+      name: name
+    }).subscribe(
+      res => {
+        alert('it worked!');
+        this.merchantDataSource.refresh();
+      },
+      err => {
+        console.log(err);
+        alert('failed');
+      }
+    );
+  }
 }

From b810163be386523ea9f8f944f1dca51af264882a Mon Sep 17 00:00:00 2001
From: Yubing325 <35515298+Yubing325@users.noreply.github.com>
Date: Thu, 11 Jun 2020 08:50:53 -0500
Subject: [PATCH 6/6] remove debugger

---
 .../lib/command-modal/directives/command-modal.directive.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts
index 9bc2866..78149f5 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts
@@ -22,13 +22,11 @@ export class CommandModalDirective {
   @Input() animated: boolean;
 
   @HostListener('click')
-  wasClicked() { 
-    debugger;       
+  wasClicked() {            
     this.dataSource.resolveCommandModelByName({
       command: this.command,
       model: this.model
-    }).subscribe(commandModel => {
-      debugger;              
+    }).subscribe(commandModel => {                    
       const initialState = {
         dataSource: this.dataSource,
         command: this.command,