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 @@
-
command-modal works!
+
+
+
+
+
\ 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;
+ command: string;
+ commandModel: any;
+ dataSource: IDataSource;
+ 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;
+ @Input() command: string;
+ @Input() model: any;
+ @Input() template: TemplateRef;
+ @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 @@
-command-modal-demo works!
+
+ 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.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;
+ 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 {
+ 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({
- name: '',
+ name: 'A New merchant',
address: ''
})
);