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
Download Patch File Download Diff File Expand all files Collapse all files
src/app/command-modal-demo/command-modal-demo.module.ts
+3 -2
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 { }
src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html
+12 -6
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>
</ng-container>
<ng-container *psDataGridFooter>
<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">
src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.ts
+19 -8
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();
}
}
src/app/data/services/IChangeMerchantNameCommand.ts
+4 -3
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;
}
src/app/data/services/merchant.service.ts
+8 -7
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?
})
);
src/app/form-group-modal-demo/form-group-modal-demo.module.ts
+3 -2
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
]
})
src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.html
+17 -5
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>
src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.ts
+8 -2
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]
});
}
src/app/pagination-demo/pagination-demo.module.ts
+2 -2
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({