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..9f7d907
--- /dev/null
+++ b/src/app/command-modal-demo/command-modal-demo.module.ts
@@ -0,0 +1,19 @@
+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 {FormsModule} from '@angular/forms';
+import { CommandModalModule } from '@poweredsoft/ngx-bootstrap';
+@NgModule({
+ declarations: [CommandModalDemoComponent],
+ imports: [
+ CommonModule,
+ 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
new file mode 100644
index 0000000..97fff78
--- /dev/null
+++ b/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html
@@ -0,0 +1,47 @@
+
+ This is a demo for a command modal.
+
+
+
+
+
+
+
+ ID
+ {{model.id}}
+
+
+ Name
+ {{model.name}}
+
+
+ Address
+ {{model.address}}
+
+
+
+ Actions
+
+
+
+
+
+
+
+
+
+
+ New Name
+
+
+
+
+ Name
+
+ Address
+
+
\ No newline at end of file
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..b10a2a0
--- /dev/null
+++ b/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.ts
@@ -0,0 +1,50 @@
+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',
+ templateUrl: './command-modal-demo.component.html',
+ styleUrls: ['./command-modal-demo.component.scss']
+})
+export class CommandModalDemoComponent implements OnInit {
+
+ columns = ['id','name', 'address', 'commands']
+ merchantDataSource: IDataSource
;
+ constructor(private merchantService: MerchantService){
+ this.merchantDataSource = this.createDataSource();
+
+ }
+
+ 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 {
+ 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..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
);
@@ -78,7 +78,7 @@ export class MerchantService {
// viewModel -> transform to the form model for that command -> IChangeMerchantName
e => of({
- name: '',
+ name: 'A New merchant',
address: ''
})
);
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..3c1f825
--- /dev/null
+++ b/src/app/form-group-modal-demo/form-group-modal-demo.module.ts
@@ -0,0 +1,22 @@
+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,
+ 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
new file mode 100644
index 0000000..8688a9f
--- /dev/null
+++ b/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.html
@@ -0,0 +1,36 @@
+This is the demo for form-group modal!
+
+
+
+
+
+ ID
+ {{model.id}}
+
+
+ Name
+ {{model.name}}
+
+
+ Address
+ {{model.address}}
+
+
+ Actions
+
+
+
+
+
+
+
+
+
\ No newline at end of file
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..773ec0a
--- /dev/null
+++ b/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.ts
@@ -0,0 +1,52 @@
+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',
+ templateUrl: './form-group-modal-demo.component.html',
+ styleUrls: ['./form-group-modal-demo.component.scss']
+})
+export class FormGroupModalDemoComponent implements OnInit {
+
+ createDataSource(): IDataSource {
+ return this.merchantService.createDataSource();
+ }
+
+
+ merchantDataSource: IDataSource;
+ 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');
+ }
+ );
+ }
+}
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"
]
}
},