form group modal

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: [

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

@@ -27,7 +27,7 @@ export class MerchantService {
       (model) => model.id,
       {
         page: 1,
-        pageSize: 50,
+        pageSize: 150,
       },
       true
     );

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 { }

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>

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');
+      }
+    );
+  }
 }