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

add confirm modal directive

Browse Source
This commit is contained in:
Yubing325 2020-06-17 11:41:18 -05:00
parent 1cd6e16ce4
commit 96be2876b8
5 changed files with 85 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.directive.ts Normal file
View File

@ -0,0 +1,55 @@
import { Directive, Input, TemplateRef, HostListener } from '@angular/core';
import { ConfirmModalService } from './confirm-modal.service';
import { IDataSource } from '@poweredsoft/data';
@Directive({
selector: '[psbxConfirmModal]'
})
export class ConfirmModalDirective {
constructor(private confirmModalService: ConfirmModalService) { }
@Input() dataSource: IDataSource<any>;
@Input() command: string;
@Input() model: any;
@Input() template: TemplateRef<any>;
@Input() commandTitle: string;
@Input() refreshOnSuccess: boolean;
@Input() commandText: string;
@Input() cancelText: string;
@Input() animated: boolean;
@HostListener('click')
wasClicked() {
this.dataSource.resolveCommandModelByName({
command: this.command,
model: this.model
}).subscribe(commandModel => {
this.confirmModalService.confirm({
message: 'Do you want to delete this merchant?',
yesText: 'yes delete this merchant',
yesClass: 'danger',
noText: 'no please dont',
noClass: 'light'
}).subscribe(result => {
if(result){
this.dataSource.executeCommandByName(this.command, commandModel).subscribe(
res => {
this.dataSource.refresh();
},
err => {
console.log(err);
alert('failed');
}
);
}
})
}, error => {
});
}
}

4
projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.module.ts
View File

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

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

@ -10,5 +10,6 @@ export * from './lib/pagination/psbxPagination.module';
export * from './lib/pagination/data-source-pagination/data-source-pagination.component';
export * from './lib/confirm-modal/confirm-modal.module';
export * from './lib/confirm-modal/confirm-modal.service';
export * from './lib/confirm-modal/confirm-modal.directive';
export * from './lib/spinner/spinner.module';
export * from './lib/spinner/spinner/spinner.component';

6
src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.html
View File

@ -42,9 +42,9 @@
<ng-container psDataGridCol="commands">
<ng-container *psDataGridColHeader>Actions</ng-container>
<ng-container *psDataGridCell="let model">
<!-- <button class="btn-warning btn" psbxCommandModal [commandTitle]="'Change ' + model.name + ' name'" commandText="Update"
[dataSource]="merchantDataSource" command="changeMerchant" [model]="model" [template]="changeName">Change</button> -->
<button class="btn-danger btn" (click)="removeMerchant(model.id)">Remove</button>
<button class="btn-danger btn" psbxConfirmModal [commandTitle]="'Are you sure you wnat to remove ' + model.name + '?'" commandText="Remove"
[dataSource]="merchantDataSource" command="removeMerchant" [model]="model" >Remove</button>
<!-- <button class="btn-danger btn" (click)="removeMerchant(model.id)">Remove</button> -->
</ng-container>
</ng-container>

46
src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.ts
View File

@ -20,29 +20,29 @@ export class PaginationDemoComponent implements OnInit {
pages:any;
removeMerchant(id:string) {
this.confirmModalService.confirm({
message: 'Do you want to delete this merchant?',
yesText: 'yes delete this merchant',
yesClass: 'danger',
noText: 'no please dont',
noClass: 'light'
}).subscribe(result => {
if(result){
this.merchantDataSource.executeCommandByName('removeMerchant', {
id: id
}).subscribe(
res => {
this.merchantDataSource.refresh();
},
err => {
console.log(err);
alert('failed');
}
);
}
})
}
// removeMerchant(id:string) {
// this.confirmModalService.confirm({
// message: 'Do you want to delete this merchant?',
// yesText: 'yes delete this merchant',
// yesClass: 'danger',
// noText: 'no please dont',
// noClass: 'light'
// }).subscribe(result => {
// if(result){
// this.merchantDataSource.executeCommandByName('removeMerchant', {
// id: id
// }).subscribe(
// res => {
// this.merchantDataSource.refresh();
// },
// err => {
// console.log(err);
// alert('failed');
// }
// );
// }
// })
// }
createDataSource(): IDataSource<IMerchant> {