added command-modal service

fix issue with command modal showing success command error message
publish new version
This commit is contained in:
Mathias Beaulieu-Duncan 2023-02-28 19:23:10 -05:00
parent 0bf06fd9bc
commit d46e97f0df
8 changed files with 79 additions and 26 deletions

View File

@ -1,7 +1,7 @@
{ {
"name": "@poweredsoft/ngx-bootstrap", "name": "@poweredsoft/ngx-bootstrap",
"version": "0.0.13", "version": "0.0.15",
"description": "an internal use libary for handling data souces grid filtering sorting, add commands etc", "description": "an internal use library for handling data sources grid filtering sorting, add commands etc",
"keywords": [ "keywords": [
"angular", "angular",
"ngx-bootstrap" "ngx-bootstrap"

View File

@ -3,8 +3,8 @@ import { CommonModule } from '@angular/common';
import { ModalModule } from 'ngx-bootstrap/modal'; import { ModalModule } from 'ngx-bootstrap/modal';
import { CommandModalDirective } from './directives/command-modal.directive'; import { CommandModalDirective } from './directives/command-modal.directive';
import { CommandModalComponent } from './command-modal/command-modal.component'; import { CommandModalComponent } from './command-modal/command-modal.component';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import {CommandModalService} from './command-modal.service';
@NgModule({ @NgModule({
imports: [ imports: [
@ -12,6 +12,7 @@ import { FormsModule } from '@angular/forms';
ModalModule.forRoot(), ModalModule.forRoot(),
FormsModule FormsModule
], ],
providers: [CommandModalService],
declarations: [CommandModalDirective, CommandModalComponent], declarations: [CommandModalDirective, CommandModalComponent],
exports: [CommandModalDirective] exports: [CommandModalDirective]
}) })

View File

@ -0,0 +1,58 @@
import {CommandModalComponent} from './command-modal/command-modal.component';
import {EventEmitter, Injectable, TemplateRef} from '@angular/core';
import {IDataSource} from '@poweredsoft/data';
import {BsModalService} from 'ngx-bootstrap/modal';
@Injectable()
export class CommandModalService {
constructor(private modalService: BsModalService) {
}
spawn<TModel>(options: {
dataSource: IDataSource<TModel>
command: string,
model: TModel,
template: TemplateRef<any>,
commandTitle?: string,
refreshOnSuccess?: boolean,
commandText?: string,
cancelText?: string,
animated?: boolean,
btnClass?: string,
modalSize?: string,
disableValidationSummary?: boolean,
backdrop?: boolean,
ignoreBackdropClick?: boolean,
params?: any,
success?: EventEmitter<any>
}) {
options.dataSource.resolveCommandModelByName({
command: options.command,
model: options.model,
params: options.params
}).subscribe(commandModel => {
const initialState = {
dataSource: options.dataSource,
command: options.command,
commandModel,
template: options.template,
title: options.commandTitle,
disableValidationSummary: options.disableValidationSummary === undefined ? false : options.disableValidationSummary,
refreshOnSuccess: options.refreshOnSuccess === undefined ? true : options.refreshOnSuccess,
commandText: options.commandText || 'OK',
cancelText: options.cancelText || 'Cancel',
successEmitter: options.success,
btnClass: options.btnClass || 'primary'
};
this.modalService.show(CommandModalComponent, {
animated: options.animated === undefined ? true : options.animated,
class: options.modalSize,
initialState,
backdrop: options.backdrop === undefined ? true : options.backdrop,
ignoreBackdropClick: options.ignoreBackdropClick === undefined ? false : options.ignoreBackdropClick
});
}, error => {
});
}
}

View File

@ -20,6 +20,5 @@
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" <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> aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div> </div>
</div> </div>

View File

@ -45,7 +45,7 @@ export class CommandModalComponent implements OnInit, OnDestroy {
ngOnInit(): void { ngOnInit(): void {
this._notifyMessage = this.dataSource.notifyMessage$.subscribe(message => { this._notifyMessage = this.dataSource.notifyMessage$.subscribe(message => {
if (message.type != 'info') if (message.type !== 'info' && message.type !== 'success')
this.errorMessage = message.message; this.errorMessage = message.message;
}); });

View File

@ -20,7 +20,7 @@ export class CommandModalDirective {
@Input() commandText: string; @Input() commandText: string;
@Input() cancelText: string; @Input() cancelText: string;
@Input() animated: boolean; @Input() animated: boolean;
@Input() btnClass:string; @Input() btnClass: string;
@Input() modalSize: string; @Input() modalSize: string;
@Input() disableValidationSummary: boolean; @Input() disableValidationSummary: boolean;
@Input() backdrop: boolean; @Input() backdrop: boolean;
@ -39,7 +39,7 @@ export class CommandModalDirective {
const initialState = { const initialState = {
dataSource: this.dataSource, dataSource: this.dataSource,
command: this.command, command: this.command,
commandModel: commandModel, commandModel,
template: this.template, template: this.template,
title: this.commandTitle, title: this.commandTitle,
disableValidationSummary: this.disableValidationSummary === undefined ? false : this.disableValidationSummary, disableValidationSummary: this.disableValidationSummary === undefined ? false : this.disableValidationSummary,

View File

@ -1,22 +1,16 @@
import { NgModule } from '@angular/core'; import {NgModule} from '@angular/core';
import { CommonModule } from '@angular/common'; import {CommonModule} from '@angular/common';
import { ConfirmModalComponent } from './confirm-modal-components/confirm-modal/confirm-modal.component'; import {ConfirmModalComponent} from './confirm-modal-components/confirm-modal/confirm-modal.component';
import { ModalModule } from 'ngx-bootstrap/modal'; import {ModalModule} from 'ngx-bootstrap/modal';
import { ConfirmModalService } from './confirm-modal.service'; import {ConfirmModalService} from './confirm-modal.service';
import { CommandModule } from '../command/command.module';
@NgModule({ @NgModule({
declarations: [ConfirmModalComponent], declarations: [ConfirmModalComponent],
imports: [ imports: [
CommonModule, CommonModule,
//CommandModule,
ModalModule.forRoot(), ModalModule.forRoot(),
], ],
exports:[], exports: [],
providers: [ConfirmModalService] providers: [ConfirmModalService]
}) })
export class ConfirmModalModule { } export class ConfirmModalModule { }

View File

@ -3,6 +3,7 @@
*/ */
export * from './lib/command-modal/command-modal.module'; export * from './lib/command-modal/command-modal.module';
export * from './lib/command-modal/command-modal.service';
export * from './lib/command-modal/directives/command-modal.directive'; 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/form-group-command-modal.module';
export * from './lib/form-group-command-modal/directives/form-group-command-modal.directive'; export * from './lib/form-group-command-modal/directives/form-group-command-modal.directive';