Phet/mirror-cathay
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[feat] - add delete kyc

Browse Source
This commit is contained in:
Phet
2024-08-13 17:14:28 +07:00
parent 288beac65d
commit 57b9371d2a
4 changed files with 196 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/pages/manage/kyc/container/kyc/kyc.container.html
View File

@@ -1,4 +1,2 @@
<app-list <app-list (edit)="edit($event)" (OnDelete)="onDelete($event)" [kycList]="kyc$ | async">
(edit)="edit($event)"
[kycList]="kyc$ | async">
</app-list> </app-list>

92
src/app/pages/manage/kyc/container/kyc/kyc.container.ts
View File

@@ -1,5 +1,5 @@
import { ChangeDetectorRef, Component } from '@angular/core'; 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 { IDialogConfig, CDialogConfig } from 'src/app/@common/interface/Dialog';
import { EAction, EText } from 'src/app/@config/app'; import { EAction, EText } from 'src/app/@config/app';
import { KycService } from 'src/app/core/service/common/kyc.service'; 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 { MatDialog } from '@angular/material/dialog';
import { AppService } from 'src/app/app.service'; import { AppService } from 'src/app/app.service';
@Component({ @Component({
selector: 'app-kyc', selector: 'app-kyc',
templateUrl: './kyc.container.html', templateUrl: './kyc.container.html',
styleUrls: ['./kyc.container.scss'] styleUrls: ['./kyc.container.scss']
}) })
export class KycContainer { export class KycContainer {
dialogConfig: IDialogConfig = CDialogConfig dialogConfig: IDialogConfig = CDialogConfig
kyc$ = new Observable(); kyc$ = new Observable();
constructor( constructor(
private kycService: KycService, private kycService: KycService,
private dialog: MatDialog, private dialog: MatDialog,
private appService: AppService, private appService: AppService,
private cdr: ChangeDetectorRef private cdr: ChangeDetectorRef
) { ) {
this.kyc$ = this.kycService.getAll(); this.kyc$ = this.kycService.getAll();
} }
edit(uid){ edit(uid) {
this.dialogConfig.data.action = EAction.UPDATE; this.dialogConfig.data.action = EAction.UPDATE;
this.dialogConfig.data.ids = uid this.dialogConfig.data.ids = uid
const dialogRef = this.dialog.open(DialogComponent,this.dialogConfig); const dialogRef = this.dialog.open(DialogComponent, this.dialogConfig);
const edit$ = dialogRef.afterClosed().pipe( const edit$ = dialogRef.afterClosed().pipe(
switchMap((res) => { switchMap((res) => {
if(res === 'success'){ if (res === 'success') {
return this.kyc$ = this.kycService.getAll().pipe( return this.kyc$ = this.kycService.getAll().pipe(
catchError((err) => { catchError((err) => {
this.appService.message(EAction.ERROR, EText.ERROR); this.appService.message(EAction.ERROR, EText.ERROR);
return throwError(() => err) return throwError(() => err)
}), }),
tap(() => this.cdr.detectChanges()) tap(() => this.cdr.detectChanges())
) )
} }
}) })
); );
return edit$.subscribe(); 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()
}
} }

184
src/app/pages/manage/kyc/presenter/list/list.component.html
View File

@@ -1,105 +1,107 @@
<div class="card card-table"> <div class="card card-table">
<div class="card-filter text-right"> <div class="card-filter text-right">
<div class="card-filter-section grid grid-cols-12 gap-4 md:gap-2 items-center"> <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"> <div class="col-span-3 md:col-span-5 md:order-2">
<mat-form-field> <mat-form-field>
<i matTextPrefix class="bi bi-search"></i> <i matTextPrefix class="bi bi-search"></i>
<input matInput placeholder="เลขบัตรประชาชน/เลขหลังบัตร" [(ngModel)]="query.card" (ngModelChange)="onFilterCard($event)"> <input matInput placeholder="เลขบัตรประชาชน/เลขหลังบัตร" [(ngModel)]="query.card"
</mat-form-field> (ngModelChange)="onFilterCard($event)">
</div> </mat-form-field>
<div class="col-span-5 md:col-span-7 md:order-2"> </div>
<mat-form-field> <div class="col-span-5 md:col-span-7 md:order-2">
<i matTextPrefix class="bi bi-search"></i> <mat-form-field>
<input matInput placeholder="ชื่อ-นามสกุล" [(ngModel)]="query.name" (ngModelChange)="onFilterName($event)"> <i matTextPrefix class="bi bi-search"></i>
</mat-form-field> <input matInput placeholder="ชื่อ-นามสกุล" [(ngModel)]="query.name" (ngModelChange)="onFilterName($event)">
</div> </mat-form-field>
</div> </div>
</div> </div>
</div>
<div class="card-body"> <div class="card-body">
<div class="table-wrap"> <div class="table-wrap">
<table class="" mat-table [dataSource]="kycList" matSort> <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-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> <tr mat-row *matRowDef="let row; columns: ['1','2','3','4','6','8','9','10','11','12'];"></tr>
<ng-container matColumnDef="1"> <ng-container matColumnDef="1">
<th mat-header-cell *matHeaderCellDef class="tac">ลำดับ</th> <th mat-header-cell *matHeaderCellDef class="tac">ลำดับ</th>
<td mat-cell *matCellDef="let item; let i = index;" width="100" class="tac">{{getIndex(i)}}</td> <td mat-cell *matCellDef="let item; let i = index;" width="100" class="tac">{{getIndex(i)}}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="2"> <ng-container matColumnDef="2">
<th mat-header-cell *matHeaderCellDef class="tac">เลขบัตรประชาชน</th> <th mat-header-cell *matHeaderCellDef class="tac">เลขบัตรประชาชน</th>
<td mat-cell *matCellDef="let item" class="tac" style="min-width: 200px;"> <td mat-cell *matCellDef="let item" class="tac" style="min-width: 200px;">
{{item.id_card}} {{item.id_card}}
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="3"> <ng-container matColumnDef="3">
<th mat-header-cell *matHeaderCellDef class="tac" width="200">เลขหลังบัตร</th> <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> <td mat-cell *matCellDef="let item" class="tac whitespace-nowrap">{{item.code_back_card}}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="4"> <ng-container matColumnDef="4">
<th mat-header-cell *matHeaderCellDef class="tal" width="150">วันหมดอายุ</th> <th mat-header-cell *matHeaderCellDef class="tal" width="150">วันหมดอายุ</th>
<td mat-cell *matCellDef="let item" class="whitespace-nowrap">{{item.exp_date | thaidate}}</td> <td mat-cell *matCellDef="let item" class="whitespace-nowrap">{{item.exp_date | thaidate}}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="5"> <ng-container matColumnDef="5">
<th mat-header-cell *matHeaderCellDef class="tac" width="100">คำนำหน้า</th> <th mat-header-cell *matHeaderCellDef class="tac" width="100">คำนำหน้า</th>
<td mat-cell *matCellDef="let item" class="tac">{{item.prefix_name}}</td> <td mat-cell *matCellDef="let item" class="tac">{{item.prefix_name}}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="6"> <ng-container matColumnDef="6">
<th mat-header-cell *matHeaderCellDef class="tal" width="200">ชื่อ - นามสกุล</th> <th mat-header-cell *matHeaderCellDef class="tal" width="200">ชื่อ - นามสกุล</th>
<td mat-cell *matCellDef="let item" class="text-ellipsis whitespace-nowrap"> <td mat-cell *matCellDef="let item" class="text-ellipsis whitespace-nowrap">
{{item.first_name}} {{item.first_name}}
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="7"> <ng-container matColumnDef="7">
<th mat-header-cell *matHeaderCellDef class="tal" width="200">นามสกุล</th> <th mat-header-cell *matHeaderCellDef class="tal" width="200">นามสกุล</th>
<td mat-cell *matCellDef="let item" class="whitespace-nowrap">{{item.last_name}}</td> <td mat-cell *matCellDef="let item" class="whitespace-nowrap">{{item.last_name}}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="8"> <ng-container matColumnDef="8">
<th mat-header-cell *matHeaderCellDef class="tal" width="150">วัน เดือน ปีเกิด</th> <th mat-header-cell *matHeaderCellDef class="tal" width="150">วัน เดือน ปีเกิด</th>
<td mat-cell *matCellDef="let item" class="whitespace-nowrap"> <td mat-cell *matCellDef="let item" class="whitespace-nowrap">
<div> {{item.birth_date | thaidate}}</div> <div> {{item.birth_date | thaidate}}</div>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="9"> <ng-container matColumnDef="9">
<th mat-header-cell *matHeaderCellDef class="tal" width="150">เบอร์โทรศัพท์</th> <th mat-header-cell *matHeaderCellDef class="tal" width="150">เบอร์โทรศัพท์</th>
<td mat-cell *matCellDef="let item" class=""> <td mat-cell *matCellDef="let item" class="">
<div> {{item.phone}}</div> <div> {{item.phone}}</div>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="10"> <ng-container matColumnDef="10">
<th mat-header-cell *matHeaderCellDef class="tal" width="150">E-mail</th> <th mat-header-cell *matHeaderCellDef class="tal" width="150">E-mail</th>
<td mat-cell *matCellDef="let item" class="tal whitespace-nowrap"> <td mat-cell *matCellDef="let item" class="tal whitespace-nowrap">
<div> {{item.email}}</div> <div> {{item.email}}</div>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="11"> <ng-container matColumnDef="11">
<th mat-header-cell *matHeaderCellDef class="tac" width="150">More Detail</th> <th mat-header-cell *matHeaderCellDef class="tac" width="150">More Detail</th>
<td mat-cell *matCellDef="let item" class="tac"> <td mat-cell *matCellDef="let item" class="tac">
<div class="action flex justify-center"> <div class="action flex justify-center">
<div class="item cursor-pointer"> <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-pencil-square icon-edit mr-2" (click)="onEdit(item.kyc_uid)"></i>
</div> <i class="bi bi-trash3 icon-delete mr-2" (click)="onDeleteKyc(item.kyc_uid)"></i>
</div> </div>
</td> </div>
</ng-container> </td>
<ng-container matColumnDef="12"> </ng-container>
<th mat-header-cell *matHeaderCellDef class="tac" width="150">สถานะ</th> <ng-container matColumnDef="12">
<td mat-cell *matCellDef="let item" class="tac"> <th mat-header-cell *matHeaderCellDef class="tac" width="150">สถานะ</th>
<div *ngIf="item.is_pass == true" class="status status-active">Approve</div> <td mat-cell *matCellDef="let item" class="tac">
<div *ngIf="item.is_pass == false" class="status status-disabled">Reject</div> <div *ngIf="item.is_pass == true" class="status status-active">Approve</div>
</td> <div *ngIf="item.is_pass == false" class="status status-disabled">Reject</div>
</ng-container> </td>
</table> </ng-container>
</div> </table>
<!-- <div *ngIf="dataSourceCount === 0" class="no-data"></div> -->
<mat-paginator [pageSizeOptions]="[5,10,20]" showFirstLastButtons></mat-paginator>
</div> </div>
<!-- <div *ngIf="dataSourceCount === 0" class="no-data"></div> -->
<mat-paginator [pageSizeOptions]="[5,10,20]" showFirstLastButtons></mat-paginator>
</div>
</div> </div>

80
src/app/pages/manage/kyc/presenter/list/list.component.ts
View File

@@ -3,49 +3,55 @@ import { Subject, debounceTime, distinctUntilChanged } from 'rxjs';
import { BaseList } from 'src/app/core/base/base-list'; import { BaseList } from 'src/app/core/base/base-list';
@Component({ @Component({
selector: 'app-list', selector: 'app-list',
templateUrl: './list.component.html', templateUrl: './list.component.html',
styleUrls: ['./list.component.scss'] styleUrls: ['./list.component.scss']
}) })
export class ListComponent extends BaseList implements OnChanges { export class ListComponent extends BaseList implements OnChanges {
@Input() kycList: any = []; @Input() kycList: any = [];
@Output() edit = new EventEmitter(); @Output() edit = new EventEmitter();
@Output() search = new EventEmitter(); @Output() search = new EventEmitter();
query = { @Output() OnDelete = new EventEmitter<string>()
name: null, query = {
card: null name: null,
} card: null
name: string; }
filterCard: Subject<string> = new Subject<string>(); name: string;
constructor() { filterCard: Subject<string> = new Subject<string>();
super() constructor() {
this.filterCard.pipe( super()
debounceTime(500), this.filterCard.pipe(
distinctUntilChanged() debounceTime(500),
).subscribe(() => this.onSearch()) distinctUntilChanged()
} ).subscribe(() => this.onSearch())
}
ngOnChanges(): void { ngOnChanges(): void {
this.kycList = this.updateMatTable(this.kycList? this.kycList:[]) this.kycList = this.updateMatTable(this.kycList ? this.kycList : [])
} }
onEdit(uid){ onEdit(uid) {
this.edit.emit(uid) this.edit.emit(uid)
} }
onFilterCard($event) { onDeleteKyc(uid: string) {
const filterValue = this.query.card; // console.log(uid)
this.kycList.filter = filterValue.trim().toLowerCase(); this.OnDelete.emit(uid)
} }
onFilterName($event){ onFilterCard($event) {
const filterValue = this.query.name; const filterValue = this.query.card;
this.kycList.filter = filterValue.trim().toLowerCase(); this.kycList.filter = filterValue.trim().toLowerCase();
} }
onSearch(){ onFilterName($event) {
const filterValue = this.query.card; const filterValue = this.query.name;
this.kycList.filter = filterValue.trim().toLowerCase(); this.kycList.filter = filterValue.trim().toLowerCase();
} }
onSearch() {
const filterValue = this.query.card;
this.kycList.filter = filterValue.trim().toLowerCase();
}
} }