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

change & delete for command modal

Browse Source
This commit is contained in:
Yubing325 2020-06-12 14:33:50 -05:00
parent dc0ec0cd9d
commit 4d73c7c608
13 changed files with 85 additions and 41 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,7 +42,6 @@ export class CommandModalComponent implements OnInit, OnDestroy {
}
attemptSave() {
debugger;
this.loading = true;
this.dataSource.executeCommandByName(this.command, this.commandModel)
.pipe(

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

@ -20,6 +20,7 @@ export class CommandModalDirective {
@Input() commandText: string;
@Input() cancelText: string;
@Input() animated: boolean;
@Input() isConfirmModal: boolean;
@HostListener('click')
wasClicked() {
@ -37,6 +38,12 @@ export class CommandModalDirective {
commandText: this.commandText || 'OK',
cancelText: this.cancelText || 'Cancel'
};
if(this.isConfirmModal){
this.modalService.show(CommandModalComponent, {
animated: this.animated === undefined ? true : this.animated,
initialState
});
}
this.modalService.show(CommandModalComponent, {
animated: this.animated === undefined ? true : this.animated,
initialState

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

@ -21,7 +21,7 @@
<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>
<button type="button" class="btn btn-primary" (click)="attemptSave()" [attr.disabled]="loading">Create</button>
<br>
<div class="progress" style="width: 100%" *ngIf="loading">

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

@ -48,7 +48,6 @@ export class FormGroupCommandModalComponent implements OnInit {
}
attemptSave() {
this.errorMessage = null;
if (!this.modelForm.valid)
{

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

@ -5,7 +5,7 @@ import { CommandModalDemoRoutingModule } from './command-modal-demo-routing.modu
import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
import {FormsModule} from '@angular/forms';
import { CommandModalModule } from '@poweredsoft/ngx-bootstrap';
import { CommandModalModule, psbxPaginationModule } from '@poweredsoft/ngx-bootstrap';
@NgModule({
declarations: [CommandModalDemoComponent],
imports: [
@ -13,7 +13,8 @@ import { CommandModalModule } from '@poweredsoft/ngx-bootstrap';
CommandModalDemoRoutingModule,
DataGridModule,
CommandModalModule,
FormsModule
FormsModule,
psbxPaginationModule
]
})
export class CommandModalDemoModule { }

14
src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html
View File

@ -25,18 +25,24 @@
<ng-container *psDataGridColHeader>Actions</ng-container>
<ng-container *psDataGridCell="let model">
<button class="btn-primary btn" psbxCommandModal [commandTitle]="'Change ' + model.name + ' name'" commandText="Update"
[dataSource]="merchantDataSource" command="changeMerchantName" [model]="model" [template]="changeName">Change name</button>
[dataSource]="merchantDataSource" command="changeMerchant" [model]="model" [template]="changeName">Change</button>
<button class="btn-danger btn" psbxCommandModal [commandTitle]="'Are you sure you wnat to remove ' + model.name + '?'" commandText="Remove"
[dataSource]="merchantDataSource" command="removeMerchant" [model]="model" >Remove</button>
</ng-container>
</ng-container>
<ng-container *psDataGridFooter>
<button class="btn-primary btn" psbxCommandModal commandTitle="Adding a new merchant" commandText="Add"
[dataSource]="merchantDataSource" command="addMerchant" [template]="theModal">Create a new record</button>
<psbx-ds-pagination [dataSource]="merchantDataSource" [pages]="pages"></psbx-ds-pagination>
</ng-container>
</ps-data-grid>
<ng-template #changeName let-command let-loading="loading">
New Name
<input type="text" [attr.disabled]="loading" [(ngModel)]="command.newName" placeholder="Entermerchant new name" class="form-control">
<input type="text" [attr.disabled]="loading" [(ngModel)]="command.name" placeholder="Entermerchant new name" class="form-control">
New Address
<input type="text" [attr.disabled]="loading" [(ngModel)]="command.address" placeholder="Entermerchant new Address" class="form-control">
</ng-template>
<ng-template #theModal let-command let-loading="loading">

27
src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.ts
View File

@ -2,6 +2,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';
import { BsModalRef } from 'ngx-bootstrap/modal';
@Component({
selector: 'ps-command-modal-demo',
@ -10,7 +11,8 @@ import { MerchantService } from 'src/app/data/services/merchant.service';
})
export class CommandModalDemoComponent implements OnInit {
columns = ['id','name', 'address', 'commands']
columns = ['id','name', 'address', 'commands'];
pages:any;
merchantDataSource: IDataSource<IMerchant>;
constructor(private merchantService: MerchantService){
this.merchantDataSource = this.createDataSource();
@ -37,14 +39,23 @@ export class CommandModalDemoComponent implements OnInit {
}
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();
this.merchantDataSource.data$.subscribe(newData => {
if (newData)
this.pages = new Array(newData.numberOfPages);
});
}
message: string;
modalRef: BsModalRef;
confirm(): void {
this.message = 'Confirmed!';
this.modalRef.hide();
}
decline(): void {
this.message = 'Declined!';
this.modalRef.hide();
}
}

7
src/app/data/services/IChangeMerchantNameCommand.ts
View File

@ -1,6 +1,7 @@
export interface IChangeMerchantNameCommand {
merchantId: string;
newName: string;
id: string;
name: string;
address: string;
}
export interface IAddMerchantCommand {
name: string;
@ -8,5 +9,5 @@ export interface IAddMerchantCommand {
}
export interface IRemoveMerchantCommand {
merchantId: string;
id: string;
}

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

@ -33,15 +33,15 @@ export class MerchantService {
);
builder.addMutation<IChangeMerchantNameCommand, string>(
'changeMerchantName', //<-- command name
'changeMerchantName', //<-- graph ql mutation name
'changeMerchant', //<-- command name
'changeMerchant', //<-- graph ql mutation name
// implementation of the command.
command => {
return this.apollo.use('command').mutate<string>({
mutation: gql`
mutation executeChangeName($command: changeMerchantNameInput) {
changeMerchantName(params: $command)
mutation executeChangeName($command: ChangeMerchantCommandInput) {
changeMerchant(params: $command)
}
`,
variables: {
@ -52,8 +52,9 @@ export class MerchantService {
// viewModel -> transform to the form model for that command -> IChangeMerchantName
e => of(<IChangeMerchantNameCommand>{
merchantId: e.model.id,
newName: e.model.name,
id: e.model.id,
name: e.model.name,
address: e.model.address
})
);
@ -104,7 +105,7 @@ export class MerchantService {
// viewModel -> transform to the form model for that command -> IChangeMerchantName
e => of(<IRemoveMerchantCommand>{
merchantId: e.model.id,
id: e.model.id, //should be id?
})
);

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

@ -3,7 +3,7 @@ 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 { FormGroupCommandModalModule,CommandModalModule, psbxPaginationModule } from '@poweredsoft/ngx-bootstrap';
import { ReactiveFormsModule } from '@angular/forms';
@ -15,7 +15,8 @@ import { ReactiveFormsModule } from '@angular/forms';
FormGroupModalDemoRoutingModule,
DataGridModule,
FormGroupCommandModalModule,
ReactiveFormsModule
ReactiveFormsModule,
psbxPaginationModule
]
})

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

@ -1,8 +1,10 @@
<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">
<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>
<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>
@ -19,10 +21,15 @@
<ng-container psDataGridCol="actions">
<ng-container *psDataGridColHeader>Actions</ng-container>
<ng-container *psDataGridCell="let model">
<button class="btn-primary btn" psbxFormGroupCommandModal [commandTitle]="'remove ' + model.name + ' name'" commandText="delete"
[dataSource]="merchantDataSource" command="removeMerchant" [model]="model" (formCreate)="onFormCreate($event)">Remove Merchant</button>
<button class="btn-success btn" psbxFormGroupCommandModal
[commandTitle]="'remove ' + model.name + ' name'" commandText="delete"
[dataSource]="merchantDataSource" command="removeMerchant"
[model]="model" (formCreate)="onFormCreate($event)">Remove Merchant</button>
</ng-container>
</ng-container>
<ng-container *psDataGridFooter>
<psbx-ds-pagination [dataSource]="merchantDataSource" [pages]="pages"></psbx-ds-pagination>
</ng-container>
</ps-data-grid>
@ -35,6 +42,11 @@
<div class="col-sm-8">
<input id="name" type="text" class="form-control" formControlName="name">
</div>
<label for="address" class="col-sm-2 control-label">Address</label>
<div class="col-sm-8">
<input id="address" type="text" class="form-control" formControlName="address">
</div>
</div>
</form>
</ng-template>

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

@ -16,7 +16,7 @@ export class FormGroupModalDemoComponent implements OnInit {
return this.merchantService.createDataSource();
}
pages:any;
merchantDataSource: IDataSource<IMerchant>;
columns = ['id','name', 'address', 'actions'];
constructor(private merchantService: MerchantService, private fb: FormBuilder) {
@ -25,12 +25,18 @@ export class FormGroupModalDemoComponent implements OnInit {
ngOnInit(): void {
this.merchantDataSource.refresh();
this.merchantDataSource.data$.subscribe(newData => {
if (newData)
this.pages = new Array(newData.numberOfPages);
});
}
onFormCreate(event: IModelFormCreateEvent) {
debugger;
event.shouldSetCommandModel = false;
event.formGroup = this.fb.group({
'name': [event.commandModel.name, Validators.required]
'name': [event.commandModel.name, Validators.required],
'address': [event.commandModel.address, Validators.required]
});
}

4
src/app/pagination-demo/pagination-demo.module.ts
View File

@ -4,8 +4,8 @@ import { CommonModule } from '@angular/common';
import { PaginationDemoRoutingModule } from './pagination-demo-routing.module';
import { PaginationDemoComponent } from './pagination-demo/pagination/pagination-demo.component';
import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
import { FormGroupCommandModalModule,psbxPaginationModule, CommandModalModule } from '@poweredsoft/ngx-bootstrap';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { psbxPaginationModule, CommandModalModule } from '@poweredsoft/ngx-bootstrap';
import { FormsModule } from '@angular/forms';
@NgModule({