simple remove works
This commit is contained in:
parent
7c67d81439
commit
dc0ec0cd9d
projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/directives
src/app
data/services
form-group-modal-demo/form-group-modal-demo
pagination-demo/pagination-demo/pagination
@ -39,9 +39,7 @@ export class FormGroupCommandModalDirective {
|
|||||||
command: this.command,
|
command: this.command,
|
||||||
model: this.model
|
model: this.model
|
||||||
}).subscribe(commandModel => {
|
}).subscribe(commandModel => {
|
||||||
|
debugger;
|
||||||
|
|
||||||
|
|
||||||
const event = <IModelFormCreateEvent>{
|
const event = <IModelFormCreateEvent>{
|
||||||
commandName: this.command,
|
commandName: this.command,
|
||||||
viewModel: this.model,
|
viewModel: this.model,
|
||||||
|
@ -6,3 +6,7 @@ export interface IAddMerchantCommand {
|
|||||||
name: string;
|
name: string;
|
||||||
address: string;
|
address: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface IRemoveMerchantCommand {
|
||||||
|
merchantId: string;
|
||||||
|
}
|
@ -4,7 +4,7 @@ import { IDataSource, DataSource } from '@poweredsoft/data';
|
|||||||
import { Apollo } from 'apollo-angular';
|
import { Apollo } from 'apollo-angular';
|
||||||
import gql from 'graphql-tag';
|
import gql from 'graphql-tag';
|
||||||
import { of } from 'rxjs';
|
import { of } from 'rxjs';
|
||||||
import { IChangeMerchantNameCommand, IAddMerchantCommand } from './IChangeMerchantNameCommand';
|
import { IChangeMerchantNameCommand, IAddMerchantCommand, IRemoveMerchantCommand } from './IChangeMerchantNameCommand';
|
||||||
import { IMerchant } from './IMerchant';
|
import { IMerchant } from './IMerchant';
|
||||||
|
|
||||||
@Injectable({
|
@Injectable({
|
||||||
@ -27,7 +27,7 @@ export class MerchantService {
|
|||||||
(model) => model.id,
|
(model) => model.id,
|
||||||
{
|
{
|
||||||
page: 1,
|
page: 1,
|
||||||
pageSize: 150,
|
pageSize: 15,
|
||||||
},
|
},
|
||||||
true
|
true
|
||||||
);
|
);
|
||||||
@ -83,6 +83,31 @@ export class MerchantService {
|
|||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
|
builder.addMutation<IRemoveMerchantCommand, string>(
|
||||||
|
'removeMerchant', //<-- command name
|
||||||
|
'removeMerchant', //<-- graph ql mutation name
|
||||||
|
|
||||||
|
// implementation of the command.
|
||||||
|
command => {
|
||||||
|
|
||||||
|
return this.apollo.use('command').mutate<string>({
|
||||||
|
mutation: gql`
|
||||||
|
mutation executeAddMerchant($command: RemoveMerchantCommandInput) {
|
||||||
|
removeMerchant(params: $command)
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
variables: {
|
||||||
|
command: command,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// viewModel -> transform to the form model for that command -> IChangeMerchantName
|
||||||
|
e => of(<IRemoveMerchantCommand>{
|
||||||
|
merchantId: e.model.id,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
const options = builder.create();
|
const options = builder.create();
|
||||||
return new DataSource<IMerchant>(options);
|
return new DataSource<IMerchant>(options);
|
||||||
}
|
}
|
||||||
|
@ -19,11 +19,15 @@
|
|||||||
<ng-container psDataGridCol="actions">
|
<ng-container psDataGridCol="actions">
|
||||||
<ng-container *psDataGridColHeader>Actions</ng-container>
|
<ng-container *psDataGridColHeader>Actions</ng-container>
|
||||||
<ng-container *psDataGridCell="let model">
|
<ng-container *psDataGridCell="let model">
|
||||||
<button class="btn btn-primary mr-2">{{model.name}}</button>
|
<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>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</ps-data-grid>
|
</ps-data-grid>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<ng-template #theModal let-form let-loading="loading">
|
<ng-template #theModal let-form let-loading="loading">
|
||||||
<form [formGroup]="form">
|
<form [formGroup]="form">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
|
|
||||||
<ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns"
|
<ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns"
|
||||||
tableClasses="table table-sm table-dark table-striped table-bordered">
|
tableClasses="table table-sm table-dark table-striped table-bordered">
|
||||||
<ng-container *psDataGridHeader>
|
<ng-container *psDataGridHeader>
|
||||||
@ -21,8 +20,9 @@
|
|||||||
<ng-container psDataGridCol="commands">
|
<ng-container psDataGridCol="commands">
|
||||||
<ng-container *psDataGridColHeader>Actions</ng-container>
|
<ng-container *psDataGridColHeader>Actions</ng-container>
|
||||||
<ng-container *psDataGridCell="let model">
|
<ng-container *psDataGridCell="let model">
|
||||||
<button class="btn-warning btn" psbxCommandModal [commandTitle]="'Change ' + model.name + ' name'" commandText="Update"
|
<!-- <button class="btn-warning btn" psbxCommandModal [commandTitle]="'Remove ' + model.name + ' ?'" commandText="Remove"
|
||||||
[dataSource]="merchantDataSource" command="changeMerchantName" [model]="model" [template]="changeName">Change name</button>
|
[dataSource]="merchantDataSource" command="removeMerchant" [model]="model" [template]="confirm">Remove Merchant</button> -->
|
||||||
|
<button class="btn-warning btn" (click)="removeMerchant(model.id)">Delete</button>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<ng-container *psDataGridFooter>
|
<ng-container *psDataGridFooter>
|
||||||
@ -30,10 +30,15 @@
|
|||||||
</ng-container>
|
</ng-container>
|
||||||
</ps-data-grid>
|
</ps-data-grid>
|
||||||
|
|
||||||
<ng-template #changeName let-command let-loading="loading">
|
<ng-template #confirm>
|
||||||
New Name
|
<div class="modal-body text-center">
|
||||||
<input type="text" [attr.disabled]="loading" [(ngModel)]="command.newName" placeholder="Entermerchant new name" class="form-control">
|
<p>Do you want to confirm?</p>
|
||||||
</ng-template>
|
<button type="button" class="btn btn-default" >Yes</button>
|
||||||
|
<button type="button" class="btn btn-primary" >No</button>
|
||||||
|
</div>
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<ng-template #theModal let-command let-loading="loading">
|
<ng-template #theModal let-command let-loading="loading">
|
||||||
Name
|
Name
|
||||||
|
@ -20,12 +20,12 @@ export class PaginationDemoComponent implements OnInit {
|
|||||||
|
|
||||||
pages:any;
|
pages:any;
|
||||||
|
|
||||||
newMerchant(name: string) {
|
removeMerchant(id: string) {
|
||||||
this.merchantDataSource.executeCommandByName('addMerchant', {
|
this.merchantDataSource.executeCommandByName('removeMerchant', {
|
||||||
name: name
|
id: id
|
||||||
}).subscribe(
|
}).subscribe(
|
||||||
res => {
|
res => {
|
||||||
alert('it worked!');
|
alert('removed!');
|
||||||
this.merchantDataSource.refresh();
|
this.merchantDataSource.refresh();
|
||||||
},
|
},
|
||||||
err => {
|
err => {
|
||||||
|
Loading…
Reference in New Issue
Block a user