[feat] - add delete kyc
This commit is contained in:
@@ -1,4 +1,2 @@
|
||||
<app-list
|
||||
(edit)="edit($event)"
|
||||
[kycList]="kyc$ | async">
|
||||
<app-list (edit)="edit($event)" (OnDelete)="onDelete($event)" [kycList]="kyc$ | async">
|
||||
</app-list>
|
||||
@@ -1,5 +1,5 @@
|
||||
import { ChangeDetectorRef, Component } from '@angular/core';
|
||||
import { Observable, catchError, switchMap, tap, throwError } from 'rxjs';
|
||||
import { Observable, catchError, concatMap, filter, switchMap, tap, throwError } from 'rxjs';
|
||||
import { IDialogConfig, CDialogConfig } from 'src/app/@common/interface/Dialog';
|
||||
import { EAction, EText } from 'src/app/@config/app';
|
||||
import { KycService } from 'src/app/core/service/common/kyc.service';
|
||||
@@ -7,40 +7,66 @@ import { DialogComponent } from '../../presenter/dialog/dialog.component';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { AppService } from 'src/app/app.service';
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-kyc',
|
||||
templateUrl: './kyc.container.html',
|
||||
styleUrls: ['./kyc.container.scss']
|
||||
selector: 'app-kyc',
|
||||
templateUrl: './kyc.container.html',
|
||||
styleUrls: ['./kyc.container.scss']
|
||||
})
|
||||
export class KycContainer {
|
||||
dialogConfig: IDialogConfig = CDialogConfig
|
||||
kyc$ = new Observable();
|
||||
constructor(
|
||||
private kycService: KycService,
|
||||
private dialog: MatDialog,
|
||||
private appService: AppService,
|
||||
private cdr: ChangeDetectorRef
|
||||
) {
|
||||
this.kyc$ = this.kycService.getAll();
|
||||
}
|
||||
dialogConfig: IDialogConfig = CDialogConfig
|
||||
kyc$ = new Observable();
|
||||
constructor(
|
||||
private kycService: KycService,
|
||||
private dialog: MatDialog,
|
||||
private appService: AppService,
|
||||
private cdr: ChangeDetectorRef
|
||||
) {
|
||||
this.kyc$ = this.kycService.getAll();
|
||||
}
|
||||
|
||||
edit(uid){
|
||||
this.dialogConfig.data.action = EAction.UPDATE;
|
||||
this.dialogConfig.data.ids = uid
|
||||
const dialogRef = this.dialog.open(DialogComponent,this.dialogConfig);
|
||||
const edit$ = dialogRef.afterClosed().pipe(
|
||||
switchMap((res) => {
|
||||
if(res === 'success'){
|
||||
return this.kyc$ = this.kycService.getAll().pipe(
|
||||
catchError((err) => {
|
||||
this.appService.message(EAction.ERROR, EText.ERROR);
|
||||
return throwError(() => err)
|
||||
}),
|
||||
tap(() => this.cdr.detectChanges())
|
||||
)
|
||||
}
|
||||
})
|
||||
);
|
||||
return edit$.subscribe();
|
||||
}
|
||||
edit(uid) {
|
||||
this.dialogConfig.data.action = EAction.UPDATE;
|
||||
this.dialogConfig.data.ids = uid
|
||||
const dialogRef = this.dialog.open(DialogComponent, this.dialogConfig);
|
||||
const edit$ = dialogRef.afterClosed().pipe(
|
||||
switchMap((res) => {
|
||||
if (res === 'success') {
|
||||
return this.kyc$ = this.kycService.getAll().pipe(
|
||||
catchError((err) => {
|
||||
this.appService.message(EAction.ERROR, EText.ERROR);
|
||||
return throwError(() => err)
|
||||
}),
|
||||
tap(() => this.cdr.detectChanges())
|
||||
)
|
||||
}
|
||||
})
|
||||
);
|
||||
return edit$.subscribe();
|
||||
}
|
||||
|
||||
|
||||
|
||||
onDelete(uid) {
|
||||
// console.log(uid)
|
||||
this.appService.confirm(
|
||||
EAction.DELETE
|
||||
).pipe(
|
||||
filter(event => event.isConfirmed),
|
||||
switchMap(event => {
|
||||
return this.kycService.deleteData(uid).pipe(
|
||||
concatMap(() => {
|
||||
return this.kyc$ = this.kycService.getAll().pipe(
|
||||
catchError((err) => {
|
||||
this.appService.message(EAction.ERROR, EText.ERROR);
|
||||
return throwError(() => err)
|
||||
}),
|
||||
tap(() => this.cdr.detectChanges())
|
||||
)
|
||||
})
|
||||
)
|
||||
})
|
||||
).subscribe()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,105 +1,107 @@
|
||||
<div class="card card-table">
|
||||
|
||||
<div class="card-filter text-right">
|
||||
<div class="card-filter-section grid grid-cols-12 gap-4 md:gap-2 items-center">
|
||||
<div class="col-span-3 md:col-span-5 md:order-2">
|
||||
<mat-form-field>
|
||||
<i matTextPrefix class="bi bi-search"></i>
|
||||
<input matInput placeholder="เลขบัตรประชาชน/เลขหลังบัตร" [(ngModel)]="query.card" (ngModelChange)="onFilterCard($event)">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-span-5 md:col-span-7 md:order-2">
|
||||
<mat-form-field>
|
||||
<i matTextPrefix class="bi bi-search"></i>
|
||||
<input matInput placeholder="ชื่อ-นามสกุล" [(ngModel)]="query.name" (ngModelChange)="onFilterName($event)">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-filter text-right">
|
||||
<div class="card-filter-section grid grid-cols-12 gap-4 md:gap-2 items-center">
|
||||
<div class="col-span-3 md:col-span-5 md:order-2">
|
||||
<mat-form-field>
|
||||
<i matTextPrefix class="bi bi-search"></i>
|
||||
<input matInput placeholder="เลขบัตรประชาชน/เลขหลังบัตร" [(ngModel)]="query.card"
|
||||
(ngModelChange)="onFilterCard($event)">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-span-5 md:col-span-7 md:order-2">
|
||||
<mat-form-field>
|
||||
<i matTextPrefix class="bi bi-search"></i>
|
||||
<input matInput placeholder="ชื่อ-นามสกุล" [(ngModel)]="query.name" (ngModelChange)="onFilterName($event)">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="table-wrap">
|
||||
<table class="" mat-table [dataSource]="kycList" matSort>
|
||||
<tr mat-header-row *matHeaderRowDef="['1','2','3','4','6','8','9','10','11','12']"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: ['1','2','3','4','6','8','9','10','11','12'];"></tr>
|
||||
<div class="card-body">
|
||||
<div class="table-wrap">
|
||||
<table class="" mat-table [dataSource]="kycList" matSort>
|
||||
<tr mat-header-row *matHeaderRowDef="['1','2','3','4','6','8','9','10','11','12']"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: ['1','2','3','4','6','8','9','10','11','12'];"></tr>
|
||||
|
||||
<ng-container matColumnDef="1">
|
||||
<th mat-header-cell *matHeaderCellDef class="tac">ลำดับ</th>
|
||||
<td mat-cell *matCellDef="let item; let i = index;" width="100" class="tac">{{getIndex(i)}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="1">
|
||||
<th mat-header-cell *matHeaderCellDef class="tac">ลำดับ</th>
|
||||
<td mat-cell *matCellDef="let item; let i = index;" width="100" class="tac">{{getIndex(i)}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="2">
|
||||
<th mat-header-cell *matHeaderCellDef class="tac">เลขบัตรประชาชน</th>
|
||||
<td mat-cell *matCellDef="let item" class="tac" style="min-width: 200px;">
|
||||
{{item.id_card}}
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="2">
|
||||
<th mat-header-cell *matHeaderCellDef class="tac">เลขบัตรประชาชน</th>
|
||||
<td mat-cell *matCellDef="let item" class="tac" style="min-width: 200px;">
|
||||
{{item.id_card}}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="3">
|
||||
<th mat-header-cell *matHeaderCellDef class="tac" width="200">เลขหลังบัตร</th>
|
||||
<td mat-cell *matCellDef="let item" class="tac whitespace-nowrap">{{item.code_back_card}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="3">
|
||||
<th mat-header-cell *matHeaderCellDef class="tac" width="200">เลขหลังบัตร</th>
|
||||
<td mat-cell *matCellDef="let item" class="tac whitespace-nowrap">{{item.code_back_card}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="4">
|
||||
<th mat-header-cell *matHeaderCellDef class="tal" width="150">วันหมดอายุ</th>
|
||||
<td mat-cell *matCellDef="let item" class="whitespace-nowrap">{{item.exp_date | thaidate}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="4">
|
||||
<th mat-header-cell *matHeaderCellDef class="tal" width="150">วันหมดอายุ</th>
|
||||
<td mat-cell *matCellDef="let item" class="whitespace-nowrap">{{item.exp_date | thaidate}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="5">
|
||||
<th mat-header-cell *matHeaderCellDef class="tac" width="100">คำนำหน้า</th>
|
||||
<td mat-cell *matCellDef="let item" class="tac">{{item.prefix_name}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="5">
|
||||
<th mat-header-cell *matHeaderCellDef class="tac" width="100">คำนำหน้า</th>
|
||||
<td mat-cell *matCellDef="let item" class="tac">{{item.prefix_name}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="6">
|
||||
<th mat-header-cell *matHeaderCellDef class="tal" width="200">ชื่อ - นามสกุล</th>
|
||||
<td mat-cell *matCellDef="let item" class="text-ellipsis whitespace-nowrap">
|
||||
{{item.first_name}}
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="6">
|
||||
<th mat-header-cell *matHeaderCellDef class="tal" width="200">ชื่อ - นามสกุล</th>
|
||||
<td mat-cell *matCellDef="let item" class="text-ellipsis whitespace-nowrap">
|
||||
{{item.first_name}}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="7">
|
||||
<th mat-header-cell *matHeaderCellDef class="tal" width="200">นามสกุล</th>
|
||||
<td mat-cell *matCellDef="let item" class="whitespace-nowrap">{{item.last_name}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="7">
|
||||
<th mat-header-cell *matHeaderCellDef class="tal" width="200">นามสกุล</th>
|
||||
<td mat-cell *matCellDef="let item" class="whitespace-nowrap">{{item.last_name}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="8">
|
||||
<th mat-header-cell *matHeaderCellDef class="tal" width="150">วัน เดือน ปีเกิด</th>
|
||||
<td mat-cell *matCellDef="let item" class="whitespace-nowrap">
|
||||
<div> {{item.birth_date | thaidate}}</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="9">
|
||||
<th mat-header-cell *matHeaderCellDef class="tal" width="150">เบอร์โทรศัพท์</th>
|
||||
<td mat-cell *matCellDef="let item" class="">
|
||||
<div> {{item.phone}}</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="10">
|
||||
<th mat-header-cell *matHeaderCellDef class="tal" width="150">E-mail</th>
|
||||
<td mat-cell *matCellDef="let item" class="tal whitespace-nowrap">
|
||||
<div> {{item.email}}</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="11">
|
||||
<th mat-header-cell *matHeaderCellDef class="tac" width="150">More Detail</th>
|
||||
<td mat-cell *matCellDef="let item" class="tac">
|
||||
<div class="action flex justify-center">
|
||||
<div class="item cursor-pointer">
|
||||
<i class="bi bi-pencil-square icon-edit mr-2" (click)="onEdit(item.kyc_uid)"></i>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="12">
|
||||
<th mat-header-cell *matHeaderCellDef class="tac" width="150">สถานะ</th>
|
||||
<td mat-cell *matCellDef="let item" class="tac">
|
||||
<div *ngIf="item.is_pass == true" class="status status-active">Approve</div>
|
||||
<div *ngIf="item.is_pass == false" class="status status-disabled">Reject</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
</table>
|
||||
</div>
|
||||
<!-- <div *ngIf="dataSourceCount === 0" class="no-data"></div> -->
|
||||
<mat-paginator [pageSizeOptions]="[5,10,20]" showFirstLastButtons></mat-paginator>
|
||||
<ng-container matColumnDef="8">
|
||||
<th mat-header-cell *matHeaderCellDef class="tal" width="150">วัน เดือน ปีเกิด</th>
|
||||
<td mat-cell *matCellDef="let item" class="whitespace-nowrap">
|
||||
<div> {{item.birth_date | thaidate}}</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="9">
|
||||
<th mat-header-cell *matHeaderCellDef class="tal" width="150">เบอร์โทรศัพท์</th>
|
||||
<td mat-cell *matCellDef="let item" class="">
|
||||
<div> {{item.phone}}</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="10">
|
||||
<th mat-header-cell *matHeaderCellDef class="tal" width="150">E-mail</th>
|
||||
<td mat-cell *matCellDef="let item" class="tal whitespace-nowrap">
|
||||
<div> {{item.email}}</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="11">
|
||||
<th mat-header-cell *matHeaderCellDef class="tac" width="150">More Detail</th>
|
||||
<td mat-cell *matCellDef="let item" class="tac">
|
||||
<div class="action flex justify-center">
|
||||
<div class="item cursor-pointer">
|
||||
<i class="bi bi-pencil-square icon-edit mr-2" (click)="onEdit(item.kyc_uid)"></i>
|
||||
<i class="bi bi-trash3 icon-delete mr-2" (click)="onDeleteKyc(item.kyc_uid)"></i>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="12">
|
||||
<th mat-header-cell *matHeaderCellDef class="tac" width="150">สถานะ</th>
|
||||
<td mat-cell *matCellDef="let item" class="tac">
|
||||
<div *ngIf="item.is_pass == true" class="status status-active">Approve</div>
|
||||
<div *ngIf="item.is_pass == false" class="status status-disabled">Reject</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
</table>
|
||||
</div>
|
||||
<!-- <div *ngIf="dataSourceCount === 0" class="no-data"></div> -->
|
||||
<mat-paginator [pageSizeOptions]="[5,10,20]" showFirstLastButtons></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
@@ -3,49 +3,55 @@ import { Subject, debounceTime, distinctUntilChanged } from 'rxjs';
|
||||
import { BaseList } from 'src/app/core/base/base-list';
|
||||
|
||||
@Component({
|
||||
selector: 'app-list',
|
||||
templateUrl: './list.component.html',
|
||||
styleUrls: ['./list.component.scss']
|
||||
selector: 'app-list',
|
||||
templateUrl: './list.component.html',
|
||||
styleUrls: ['./list.component.scss']
|
||||
})
|
||||
export class ListComponent extends BaseList implements OnChanges {
|
||||
@Input() kycList: any = [];
|
||||
@Output() edit = new EventEmitter();
|
||||
@Output() search = new EventEmitter();
|
||||
query = {
|
||||
name: null,
|
||||
card: null
|
||||
}
|
||||
name: string;
|
||||
filterCard: Subject<string> = new Subject<string>();
|
||||
constructor() {
|
||||
super()
|
||||
this.filterCard.pipe(
|
||||
debounceTime(500),
|
||||
distinctUntilChanged()
|
||||
).subscribe(() => this.onSearch())
|
||||
}
|
||||
@Input() kycList: any = [];
|
||||
@Output() edit = new EventEmitter();
|
||||
@Output() search = new EventEmitter();
|
||||
@Output() OnDelete = new EventEmitter<string>()
|
||||
query = {
|
||||
name: null,
|
||||
card: null
|
||||
}
|
||||
name: string;
|
||||
filterCard: Subject<string> = new Subject<string>();
|
||||
constructor() {
|
||||
super()
|
||||
this.filterCard.pipe(
|
||||
debounceTime(500),
|
||||
distinctUntilChanged()
|
||||
).subscribe(() => this.onSearch())
|
||||
}
|
||||
|
||||
ngOnChanges(): void {
|
||||
this.kycList = this.updateMatTable(this.kycList? this.kycList:[])
|
||||
}
|
||||
ngOnChanges(): void {
|
||||
this.kycList = this.updateMatTable(this.kycList ? this.kycList : [])
|
||||
}
|
||||
|
||||
onEdit(uid){
|
||||
this.edit.emit(uid)
|
||||
}
|
||||
onEdit(uid) {
|
||||
this.edit.emit(uid)
|
||||
}
|
||||
|
||||
onFilterCard($event) {
|
||||
const filterValue = this.query.card;
|
||||
this.kycList.filter = filterValue.trim().toLowerCase();
|
||||
}
|
||||
onDeleteKyc(uid: string) {
|
||||
// console.log(uid)
|
||||
this.OnDelete.emit(uid)
|
||||
}
|
||||
|
||||
onFilterName($event){
|
||||
const filterValue = this.query.name;
|
||||
this.kycList.filter = filterValue.trim().toLowerCase();
|
||||
}
|
||||
onFilterCard($event) {
|
||||
const filterValue = this.query.card;
|
||||
this.kycList.filter = filterValue.trim().toLowerCase();
|
||||
}
|
||||
|
||||
onSearch(){
|
||||
const filterValue = this.query.card;
|
||||
this.kycList.filter = filterValue.trim().toLowerCase();
|
||||
}
|
||||
onFilterName($event) {
|
||||
const filterValue = this.query.name;
|
||||
this.kycList.filter = filterValue.trim().toLowerCase();
|
||||
}
|
||||
|
||||
onSearch() {
|
||||
const filterValue = this.query.card;
|
||||
this.kycList.filter = filterValue.trim().toLowerCase();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user