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 88852c8..0940f87 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
@@ -3,13 +3,16 @@ 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';
+import { InputValidatorDirective } from './directives/input-validator.directive';
+import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
CommonModule,
- ModalModule.forRoot()
+ ModalModule.forRoot(),
+ FormsModule
],
- declarations: [CommandModalDirective, CommandModalComponent],
+ declarations: [CommandModalDirective, CommandModalComponent, InputValidatorDirective],
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 e4f2e07..2c11963 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
@@ -7,13 +7,12 @@
-
\ No newline at end of file
+
+
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
index e69de29..f7e771a 100644
--- 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
@@ -0,0 +1,3 @@
+.field-error{
+ border: 1px solid red;
+}
\ 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 4ef50b3..4408a68 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
@@ -3,6 +3,7 @@ import { IDataSource } from '@poweredsoft/data';
import { BsModalRef } from 'ngx-bootstrap/modal';
import { finalize} from 'rxjs/operators';
import { Subscription } from 'rxjs';
+import { NgForm } from '@angular/forms';
@Component({
selector: 'psbx-command-modal',
@@ -20,6 +21,8 @@ export class CommandModalComponent implements OnInit, OnDestroy {
loading: boolean;
commandText: string;
cancelText: string;
+ form:NgForm;
+ validationMessage:string ;
private _notifyMessage: Subscription;
private _validationError: Subscription;
@@ -33,17 +36,26 @@ export class CommandModalComponent implements OnInit, OnDestroy {
ngOnInit(): void {
this._notifyMessage = this.dataSource.notifyMessage$.subscribe(message => {
-
+ if (message.type != 'info')
+ this.validationMessage = message.message;
});
- this._validationError = this.dataSource.validationError$.subscribe(validatorErrors => {
- console.log(validatorErrors);
+ this._validationError = this.dataSource.validationError$.subscribe(validatorErrors => {
+ let validationSummary = '';
+ Object.getOwnPropertyNames(validatorErrors.errors).forEach(property => {
+ const errors = validatorErrors.errors[property].join('\n');
+ validationSummary += errors + '\n';
+ });
+ this.validationMessage = validationSummary.trim();
});
}
- attemptSave() {
- debugger;
+ onSubmit(){
+
+
this.loading = true;
+ this.validationMessage = null;
+
this.dataSource.executeCommandByName(this.command, this.commandModel)
.pipe(
finalize(() => {
@@ -60,4 +72,8 @@ export class CommandModalComponent implements OnInit, OnDestroy {
});
}
+ attemptSave() {
+
+ }
+
}
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 78149f5..c7c7418 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
@@ -26,7 +26,7 @@ export class CommandModalDirective {
this.dataSource.resolveCommandModelByName({
command: this.command,
model: this.model
- }).subscribe(commandModel => {
+ }).subscribe(commandModel => {
const initialState = {
dataSource: this.dataSource,
command: this.command,
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/input-validator.directive.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/input-validator.directive.ts
new file mode 100644
index 0000000..8fb46d8
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/input-validator.directive.ts
@@ -0,0 +1,19 @@
+import { Directive } from '@angular/core';
+import { Validator, AbstractControl, ValidationErrors, NG_VALIDATORS } from '@angular/forms';
+
+@Directive({
+ selector: '[psbxInputValidator]',
+ providers: [{ provide: NG_VALIDATORS, useExisting: InputValidatorDirective, multi: true }]
+})
+export class InputValidatorDirective implements Validator{
+
+ constructor() { }
+
+ validate(control: AbstractControl): ValidationErrors {
+ throw new Error("Method not implemented.");
+ }
+ registerOnValidatorChange?(fn: () => void): void {
+ throw new Error("Method not implemented.");
+ }
+
+}
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal-components/confirm-modal/confirm-modal.component.html b/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal-components/confirm-modal/confirm-modal.component.html
new file mode 100644
index 0000000..52e165d
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal-components/confirm-modal/confirm-modal.component.html
@@ -0,0 +1,6 @@
+
+
{{ message }}
+
+
+
+
\ No newline at end of file
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal-components/confirm-modal/confirm-modal.component.scss b/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal-components/confirm-modal/confirm-modal.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal-components/confirm-modal/confirm-modal.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal-components/confirm-modal/confirm-modal.component.ts
new file mode 100644
index 0000000..288bb69
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal-components/confirm-modal/confirm-modal.component.ts
@@ -0,0 +1,50 @@
+import { Component, OnInit, TemplateRef } from '@angular/core';
+import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+import { ConfirmModalService } from '../../confirm-modal.service';
+import { Observer } from 'rxjs';
+
+
+@Component({
+ selector: 'psbx-confirm-modal',
+ templateUrl: './confirm-modal.component.html',
+ styleUrls: ['./confirm-modal.component.scss']
+})
+export class ConfirmModalComponent implements OnInit {
+
+
+ yesText: string;
+ noText: string;
+ message: string;
+ yesClass: string;
+ noClass: string;
+ observer: Observer;
+
+ constructor(private modelRef: BsModalRef, private actionService: ConfirmModalService) {
+
+ }
+
+ ngOnInit(): void {
+
+ }
+
+ get yesButtonClass() {
+ return `btn btn-sm btn-${this.yesClass}`
+ }
+
+ get noButtonClass() {
+ return `btn btn-sm btn-${this.noClass}`
+ }
+
+ confirm(): void {
+ this.modelRef.hide();
+ this.observer.next(true);
+ this.observer.complete();
+ }
+
+ decline(): void {
+ this.modelRef.hide();
+ this.observer.next(false);
+ this.observer.complete();
+ }
+
+}
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.directive.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.directive.ts
new file mode 100644
index 0000000..ce53863
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.directive.ts
@@ -0,0 +1,55 @@
+import { Directive, Input, TemplateRef, HostListener } from '@angular/core';
+import { ConfirmModalService } from './confirm-modal.service';
+import { IDataSource } from '@poweredsoft/data';
+
+@Directive({
+ selector: '[psbxConfirmModal]'
+})
+export class ConfirmModalDirective {
+
+ constructor(private confirmModalService: ConfirmModalService) { }
+
+
+ @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 => {
+ this.confirmModalService.confirm({
+ message: 'Do you want to delete this merchant?',
+ yesText: 'yes delete this merchant',
+ yesClass: 'danger',
+ noText: 'no please dont',
+ noClass: 'light'
+ }).subscribe(result => {
+ if(result){
+ this.dataSource.executeCommandByName(this.command, commandModel).subscribe(
+ res => {
+ this.dataSource.refresh();
+ },
+ err => {
+ console.log(err);
+ alert('failed');
+ }
+ );
+ }
+ })
+
+ }, error => {
+
+ });
+ }
+
+}
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.module.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.module.ts
new file mode 100644
index 0000000..fcfda3a
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ConfirmModalComponent } from './confirm-modal-components/confirm-modal/confirm-modal.component';
+import { ModalModule } from 'ngx-bootstrap/modal';
+import { ConfirmModalService } from './confirm-modal.service';
+import { ConfirmModalDirective } from './confirm-modal.directive';
+
+
+
+@NgModule({
+ declarations: [ConfirmModalComponent, ConfirmModalDirective],
+ imports: [
+ CommonModule,
+ ModalModule.forRoot(),
+
+ ],
+ exports:[ConfirmModalDirective],
+ providers: [ConfirmModalService]
+})
+export class ConfirmModalModule { }
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.service.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.service.ts
new file mode 100644
index 0000000..206e1d1
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.service.ts
@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import { ConfirmModalComponent } from './confirm-modal-components/confirm-modal/confirm-modal.component';
+import { Observable, Observer } from 'rxjs';
+
+export interface IConfirmModalOptions
+{
+ yesClass?: string;
+ noClass?: string;
+ message: string;
+ yesText?: string;
+ noText?: string;
+}
+
+@Injectable()
+export class ConfirmModalService {
+
+ constructor(private modalService: BsModalService) { }
+
+ confirm(options: IConfirmModalOptions) : Observable {
+ return Observable.create((o: Observer) => {
+
+
+ const initialState = {
+ message: options.message,
+ yesText: options.yesText || 'yes',
+ noText: options.noText || 'no',
+ yesClass: options.yesClass || 'primary',
+ noClass: options.noClass || 'light',
+ observer: o
+ };
+
+ const modal = this.modalService.show(ConfirmModalComponent, {
+ initialState: initialState,
+ animated: true,
+ keyboard: false
+ });
+ });
+ }
+}
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
index 90cfdb2..c037cd1 100644
--- 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
@@ -3,6 +3,7 @@ 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';
+import { ConfirmModalComponent } from '../../confirm-modal/confirm-modal-components/confirm-modal/confirm-modal.component';
export interface IModelFormCreateEvent
{
@@ -28,7 +29,7 @@ export class FormGroupCommandModalDirective {
@Input() refreshOnSuccess: boolean;
@Input() commandText: string;
@Input() cancelText: string;
-
+ @Input() isConfirmModal:boolean;
@Output() formCreate: EventEmitter = new EventEmitter();
constructor(private modalService: BsModalService) { }
@@ -39,9 +40,6 @@ export class FormGroupCommandModalDirective {
command: this.command,
model: this.model
}).subscribe(commandModel => {
-
-
-
const event = {
commandName: this.command,
viewModel: this.model,
@@ -49,60 +47,96 @@ export class FormGroupCommandModalDirective {
shouldSetCommandModel: true
}
- this.formCreate.emit(event);
+ if(this.isConfirmModal){
- 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
- };
+ 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',
+ commandModel:commandModel
+ };
- this.modalService.show(FormGroupCommandModalComponent, {
- animated: this.animated === undefined ? true : this.animated,
- initialState
- });
+ this.modalService.show(ConfirmModalComponent, {
+ animated: this.animated === undefined ? true : this.animated,
+ initialState
+ });
+ }else{
+ 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,
+ commandModel:commandModel
+ };
+
+ 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 => {
+ // @HostListener('click')
+ // wasClicked() {
+ // this.dataSource.resolveCommandModelByName({
+ // command: this.command,
+ // model: this.model
+ // }).subscribe(commandModel => {
+ // debugger;
+ // const event = {
+ // 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,
+ // commandModel:commandModel
+ // };
+
+ // 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/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 a509523..d7d60bf 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
@@ -11,17 +11,15 @@
-
- {{ errorMessage }}
-
+ {{ errorMessage }}