Open-Harbor/ngx-data-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

form group modal

Browse Source
This commit is contained in:
Yubing325 2020-06-10 16:42:33 -05:00
parent 02dc911925
commit 46b6d0948c
12 changed files with 310 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts
View File

@ -42,6 +42,7 @@ export class CommandModalComponent implements OnInit, OnDestroy {
}
attemptSave() {
debugger;
this.loading = true;
this.dataSource.executeCommandByName(this.command, this.commandModel)
.pipe(

2
projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts
View File

@ -23,10 +23,12 @@ export class CommandModalDirective {
@HostListener('click')
wasClicked() {
debugger;
this.dataSource.resolveCommandModelByName({
command: this.command,
model: this.model
}).subscribe(commandModel => {
debugger;
const initialState = {
dataSource: this.dataSource,
command: this.command,

108
projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/directives/form-group-command-modal.directive.ts Normal file
View File

@ -0,0 +1,108 @@
import { Directive, Input, TemplateRef, HostListener, Output, EventEmitter } from '@angular/core';
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';
export interface IModelFormCreateEvent
{
shouldSetCommandModel: boolean;
viewModel: any;
commandName: string;
commandModel: any;
formGroup?: FormGroup;
}
@Directive({
selector: '[psbxFormGroupCommandModal]'
})
export class FormGroupCommandModalDirective {
@Input() dataSource: IDataSource<any>;
@Input() command: string;
@Input() model: any;
@Input() template: TemplateRef<any>;
@Input() commandTitle: string;
@Input() animated: boolean;
@Input() refreshOnSuccess: boolean;
@Input() commandText: string;
@Input() cancelText: string;
@Output() formCreate: EventEmitter<IModelFormCreateEvent> = new EventEmitter<IModelFormCreateEvent>();
constructor(private modalService: BsModalService) { }
@HostListener('click')
wasClicked() {
this.dataSource.resolveCommandModelByName({
command: this.command,
model: this.model
}).subscribe(commandModel => {
const event = <IModelFormCreateEvent>{
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
};
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 => {
// });
// })
// }
}

11
projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal.module.ts
View File

@ -1,13 +1,20 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormGroupCommandModalComponent } from './form-group-command-modal/form-group-command-modal.component';
import { FormGroupCommandModalDirective } from './directives/form-group-command-modal.directive';
import { ModalModule } from 'ngx-bootstrap/modal';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
CommonModule
CommonModule,
ModalModule.forRoot(),
ReactiveFormsModule
],
declarations: [FormGroupCommandModalComponent]
declarations: [FormGroupCommandModalComponent, FormGroupCommandModalDirective],
exports: [FormGroupCommandModalDirective]
})
export class FormGroupCommandModalModule { }

32
projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.html
View File

@ -1 +1,31 @@
<p>form-group-command-modal works!</p>
<div class="modal-header">
<h4 class="modal-title pull-left">{{ title }}</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="model-body">
<ng-container [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ $implicit: modelForm, loading: loading }">
</ng-container>
<div *ngIf="errorMessage" class="alert alert-danger mt-2">
{{ errorMessage }}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" (click)="modalRef.hide()"
[attr.disabled]="loading">{{ cancelText }}</button>
<button type="button" class="btn btn-primary" (click)="attemptSave()" [attr.disabled]="loading">Creat</button>
<br>
<div class="progress" style="width: 100%" *ngIf="loading">
<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>
</div>
</div>

68
projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts
View File

@ -1,4 +1,9 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, TemplateRef } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal';
import { IDataSource } from '@poweredsoft/data';
import { finalize } from 'rxjs/operators';
import { Subscription } from 'rxjs'
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'ps-form-group-command-modal',
@ -7,9 +12,66 @@ import { Component, OnInit } from '@angular/core';
})
export class FormGroupCommandModalComponent implements OnInit {
constructor() { }
ngOnInit(): void {
modelForm: FormGroup;
title: string;
template: TemplateRef<any>;
command: string;
dataSource: IDataSource<any>;
refreshOnSuccess: boolean;
loading: boolean;
commandText: string;
cancelText: string;
errorMessage: string;
private _notifyMessage: Subscription;
private _validationError: Subscription;
constructor(public modalRef: BsModalRef) { }
ngOnDestroy(): void {
/*
this._notifyMessage.unsubscribe();
this._validationError.unsubscribe();
*/
}
ngOnInit(): void {
this.errorMessage = null;
// this._notifyMessage = this.dataSource.notifyMessage$.subscribe(message => {
// });
// this._validationError = this.dataSource.validationError$.subscribe(validatorErrors => {
// console.log(validatorErrors);
// });
}
attemptSave() {
this.errorMessage = null;
if (!this.modelForm.valid)
{
this.errorMessage = 'Form is not valid, please enter all required fields';
return;
}
const finalModel = this.modelForm.value;
//this.modelForm.setValue(this.commandModel)
this.loading = true;
this.dataSource.executeCommandByName(this.command, finalModel)
.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..
});
}
}

2
projects/poweredsoft/ngx-bootstrap/src/public-api.ts
View File

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

3
src/app/command-modal-demo/command-modal-demo.module.ts
View File

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

2
src/app/data/services/merchant.service.ts
View File

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

10
src/app/form-group-modal-demo/form-group-modal-demo.module.ts
View File

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

37
src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.html
View File

@ -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>

43
src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.ts
View File

@ -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',
@ -7,9 +12,41 @@ import { Component, OnInit } from '@angular/core';
})
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');
}
);
}
}