[faet] - add mroe detail in kyc list and popup
This commit is contained in:
@@ -1,103 +1,182 @@
|
||||
<form [formGroup]="form" class="dialog-main form-dialog" autocomplete="off">
|
||||
<div class="dialog-main">
|
||||
<div class="dialog-header flex justify-between">
|
||||
<h2>More Detail</h2>
|
||||
<mat-icon mat-dialog-close class="cursor-pointer">clear</mat-icon>
|
||||
</div>
|
||||
<div class="dialog-body">
|
||||
|
||||
<div class="grid gap-2 md:grid-cols-12">
|
||||
<div class="sm:col-span-12">
|
||||
<div class="flex justify-center ">
|
||||
<div class="overflow-hidden px-8 ">
|
||||
|
||||
<div class=" overflow-hidden">
|
||||
<img class="h-56 w-full object-contain" [src]="form.value.image_front_url ? form.value.image_front_url : 'assets/images/no_image.webp'" alt=""
|
||||
style="border: solid 1px #2D9CDB ;"
|
||||
(click)="viewImg1(form.value.image_front_url)">
|
||||
</div>
|
||||
<div class="flex justify-center">ข้างหน้า</div>
|
||||
|
||||
</div>
|
||||
<div class="overflow-hidden px-8 ml-2">
|
||||
<div class=" overflow-hidden">
|
||||
<img class="h-56 w-full object-contain" [src]="form.value.image_back_url ? form.value.image_back_url : 'assets/images/no_image.webp'" alt=""
|
||||
style="border: solid 1px #2D9CDB ;"
|
||||
(click)="viewImg2(form.value.image_back_url)">
|
||||
</div>
|
||||
<div class="flex justify-center">ข้างหลัง</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="grid grid-cols-12 gap-4 md:gap-2 ">
|
||||
<div class="col-span-full">
|
||||
<div class="lg:flex lg:flex-col grid grid-cols-9 gap-2">
|
||||
<mat-label
|
||||
class="col-span-1 lg:text-left lg:self-auto text-right self-center mr-4">เลขประจำตัวประชาชน</mat-label>
|
||||
<mat-form-field class="col-span-7">
|
||||
<input matInput formControlName="id_card" readonly type="text">
|
||||
</mat-form-field>
|
||||
<span class="col-span-1"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-full">
|
||||
<div class="lg:flex lg:flex-col grid grid-cols-9 gap-2">
|
||||
<mat-label class="col-span-1 lg:text-left lg:self-auto text-right self-center mr-4">ชื่อ -
|
||||
นามสกุล</mat-label>
|
||||
<mat-form-field class="col-span-7">
|
||||
<input matInput formControlName="first_name" readonly type="text">
|
||||
</mat-form-field>
|
||||
<span class="col-span-1"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-full">
|
||||
<div class="lg:flex lg:flex-col grid grid-cols-9 gap-2">
|
||||
<mat-label
|
||||
class="col-span-1 lg:text-left lg:self-auto text-right self-center mr-4">เกิดวันที่</mat-label>
|
||||
<mat-form-field class="col-span-7">
|
||||
<input matInput formControlName="birth_date" [matDatepicker]="birthdate" readonly />
|
||||
<mat-datepicker-toggle [for]="birthdate" disabled matSuffix></mat-datepicker-toggle>
|
||||
<mat-datepicker #birthdate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<span class="col-span-1"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-full">
|
||||
<div class="lg:flex lg:flex-col grid grid-cols-9 gap-2">
|
||||
<mat-label
|
||||
class="col-span-1 lg:text-left lg:self-auto text-right self-center mr-4">วันบัตรหมดอายุ</mat-label>
|
||||
<mat-form-field class="col-span-7">
|
||||
<input matInput formControlName="exp_date" [matDatepicker]="expdate" readonly />
|
||||
<mat-datepicker-toggle [for]="expdate" disabled matSuffix></mat-datepicker-toggle>
|
||||
<mat-datepicker #expdate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<span class="col-span-1"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-full">
|
||||
<div class="lg:flex lg:flex-col grid grid-cols-9 gap-2">
|
||||
<mat-label
|
||||
class="col-span-1 lg:text-left lg:self-auto text-right self-center mr-4">เลขหลังบัตร</mat-label>
|
||||
<mat-form-field class="col-span-7">
|
||||
<input matInput formControlName="code_back_card" readonly type="text">
|
||||
</mat-form-field>
|
||||
<span class="col-span-1"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-footer">
|
||||
<button type="submit" mat-raised-button class="btn btn-green cursor-pointer"
|
||||
(click)="status(true)">Approve</button>
|
||||
<button type="button" class="btn btn-red" (click)="status(false)">Reject</button>
|
||||
</div>
|
||||
<div class="dialog-main">
|
||||
<div class="dialog-header flex justify-between">
|
||||
<h2>More Detail</h2>
|
||||
<mat-icon mat-dialog-close class="cursor-pointer">clear</mat-icon>
|
||||
</div>
|
||||
<div class="dialog-body">
|
||||
|
||||
<div class="grid gap-2 md:grid-cols-12">
|
||||
<div class="sm:col-span-12">
|
||||
<div class="flex justify-center ">
|
||||
<div class="overflow-hidden px-8 ">
|
||||
|
||||
<div class=" overflow-hidden">
|
||||
<img class="h-56 w-full object-contain"
|
||||
[src]="form.value.image_front_url ? form.value.image_front_url : 'assets/images/no_image.webp'"
|
||||
alt="" style="border: solid 1px #2D9CDB ;" (click)="viewImg1(form.value.image_front_url)">
|
||||
</div>
|
||||
<div class="flex justify-center">ข้างหน้า</div>
|
||||
|
||||
</div>
|
||||
<div class="overflow-hidden px-8 ml-2">
|
||||
<div class=" overflow-hidden">
|
||||
<img class="h-56 w-full object-contain"
|
||||
[src]="form.value.image_back_url ? form.value.image_back_url : 'assets/images/no_image.webp'" alt=""
|
||||
style="border: solid 1px #2D9CDB ;" (click)="viewImg2(form.value.image_back_url)">
|
||||
</div>
|
||||
<div class="flex justify-center">ข้างหลัง</div>
|
||||
</div>
|
||||
<div class="overflow-hidden px-8 ml-2">
|
||||
<div class=" overflow-hidden">
|
||||
<img class="h-56 w-full object-contain"
|
||||
[src]="form.value.image_person_with_card_url ? form.value.image_person_with_card_url : 'assets/images/no_image.webp'"
|
||||
alt="" style="border: solid 1px #2D9CDB ;" (click)="viewImg2(form.value.image_person_with_card_url)">
|
||||
</div>
|
||||
<div class="flex justify-center">รูปถ่ายคู่กับบัตร</div>
|
||||
</div>
|
||||
<div class="overflow-hidden px-8 ml-2">
|
||||
<div class=" overflow-hidden">
|
||||
<img class="h-56 w-full object-contain"
|
||||
[src]="form.value.signature_url ? form.value.signature_url : 'assets/images/no_image.webp'" alt=""
|
||||
style="border: solid 1px #2D9CDB ;" (click)="viewImg2(form.value.signature_url)">
|
||||
</div>
|
||||
<div class="flex justify-center">ลายเซ็น</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="grid grid-cols-12 gap-4 md:gap-2 ">
|
||||
<div class="col-span-full">
|
||||
<div class="lg:flex lg:flex-col grid grid-cols-9 gap-2">
|
||||
<mat-label
|
||||
class="col-span-1 lg:text-left lg:self-auto text-right self-center mr-4">เลขประจำตัวประชาชน</mat-label>
|
||||
<mat-form-field class="col-span-7">
|
||||
<input matInput formControlName="id_card" readonly type="text">
|
||||
</mat-form-field>
|
||||
<span class="col-span-1"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-full">
|
||||
<div class="lg:flex lg:flex-col grid grid-cols-9 gap-2">
|
||||
<mat-label class="col-span-1 lg:text-left lg:self-auto text-right self-center mr-4">ชื่อ -
|
||||
นามสกุล</mat-label>
|
||||
<mat-form-field class="col-span-7">
|
||||
<input matInput formControlName="first_name" readonly type="text">
|
||||
</mat-form-field>
|
||||
<span class="col-span-1"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-full">
|
||||
<div class="lg:flex lg:flex-col grid grid-cols-9 gap-2">
|
||||
<mat-label class="col-span-1 lg:text-left lg:self-auto text-right self-center mr-4">สัญชาติ</mat-label>
|
||||
<mat-form-field class="col-span-7">
|
||||
<input matInput formControlName="nationality" readonly type="text">
|
||||
</mat-form-field>
|
||||
<span class="col-span-1"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-full">
|
||||
<div class="lg:flex lg:flex-col grid grid-cols-9 gap-2">
|
||||
<mat-label class="col-span-1 lg:text-left lg:self-auto text-right self-center mr-4">เกิดวันที่</mat-label>
|
||||
<mat-form-field class="col-span-7">
|
||||
<input matInput formControlName="birth_date" [matDatepicker]="birthdate" readonly />
|
||||
<mat-datepicker-toggle [for]="birthdate" disabled matSuffix></mat-datepicker-toggle>
|
||||
<mat-datepicker #birthdate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<span class="col-span-1"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-full">
|
||||
<div class="lg:flex lg:flex-col grid grid-cols-9 gap-2">
|
||||
<mat-label
|
||||
class="col-span-1 lg:text-left lg:self-auto text-right self-center mr-4">ที่อยู่ปัจจุบัน</mat-label>
|
||||
<mat-form-field class="col-span-7">
|
||||
<input matInput formControlName="current_address" readonly type="text">
|
||||
</mat-form-field>
|
||||
<span class="col-span-1"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-full">
|
||||
<div class="lg:flex lg:flex-col grid grid-cols-9 gap-2">
|
||||
<mat-label class="col-span-1 lg:text-left lg:self-auto text-right self-center mr-4">อาชีพ</mat-label>
|
||||
<mat-form-field class="col-span-7">
|
||||
<input matInput formControlName="occupation" readonly type="text">
|
||||
</mat-form-field>
|
||||
<span class="col-span-1"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-full">
|
||||
<div class="lg:flex lg:flex-col grid grid-cols-9 gap-2">
|
||||
<mat-label
|
||||
class="col-span-1 lg:text-left lg:self-auto text-right self-center mr-4">ชื่อสถานที่ทำงาน</mat-label>
|
||||
<mat-form-field class="col-span-7">
|
||||
<input matInput formControlName="name_of_workplace" readonly type="text">
|
||||
</mat-form-field>
|
||||
<span class="col-span-1"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-full">
|
||||
<div class="lg:flex lg:flex-col grid grid-cols-9 gap-2">
|
||||
<mat-label
|
||||
class="col-span-1 lg:text-left lg:self-auto text-right self-center mr-4">ที่อยู่ที่ทำงาน</mat-label>
|
||||
<mat-form-field class="col-span-7">
|
||||
<input matInput formControlName="work_address" readonly type="text">
|
||||
</mat-form-field>
|
||||
<span class="col-span-1"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-full">
|
||||
<div class="lg:flex lg:flex-col grid grid-cols-9 gap-2">
|
||||
<mat-label
|
||||
class="col-span-1 lg:text-left lg:self-auto text-right self-center mr-4">ที่อยู่ตามบัตรประชาชน</mat-label>
|
||||
<mat-form-field class="col-span-7">
|
||||
<input matInput formControlName="address_according_id_card" readonly type="text">
|
||||
</mat-form-field>
|
||||
<span class="col-span-1"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-full">
|
||||
<div class="lg:flex lg:flex-col grid grid-cols-9 gap-2">
|
||||
<mat-label
|
||||
class="col-span-1 lg:text-left lg:self-auto text-right self-center mr-4">วันบัตรหมดอายุ</mat-label>
|
||||
<mat-form-field class="col-span-7">
|
||||
<input matInput formControlName="exp_date" [matDatepicker]="expdate" readonly />
|
||||
<mat-datepicker-toggle [for]="expdate" disabled matSuffix></mat-datepicker-toggle>
|
||||
<mat-datepicker #expdate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<span class="col-span-1"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-full">
|
||||
<div class="lg:flex lg:flex-col grid grid-cols-9 gap-2">
|
||||
<mat-label class="col-span-1 lg:text-left lg:self-auto text-right self-center mr-4">เลขหลังบัตร</mat-label>
|
||||
<mat-form-field class="col-span-7">
|
||||
<input matInput formControlName="code_back_card" readonly type="text">
|
||||
</mat-form-field>
|
||||
<span class="col-span-1"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-footer">
|
||||
<button type="submit" mat-raised-button class="btn btn-green cursor-pointer"
|
||||
(click)="status(true)">Approve</button>
|
||||
<button type="button" class="btn btn-red" (click)="status(false)">Reject</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- <pre>{{form.getRawValue() | json}}</pre> -->
|
||||
@@ -17,81 +17,91 @@ import { KycService } from 'src/app/core/service/common/kyc.service';
|
||||
})
|
||||
export class DialogComponent extends BaseForm implements OnInit {
|
||||
|
||||
constructor(
|
||||
public dialogRef: MatDialogRef<DialogComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public dialog: IDialogConfigData,
|
||||
public router: Router,
|
||||
public activatedRoute: ActivatedRoute,
|
||||
public fb: FormBuilder,
|
||||
public location: Location,
|
||||
public kycService: KycService,
|
||||
public appService: AppService,
|
||||
public cdr: ChangeDetectorRef
|
||||
) {
|
||||
super(router, activatedRoute, fb, location)
|
||||
}
|
||||
constructor(
|
||||
public dialogRef: MatDialogRef<DialogComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public dialog: IDialogConfigData,
|
||||
public router: Router,
|
||||
public activatedRoute: ActivatedRoute,
|
||||
public fb: FormBuilder,
|
||||
public location: Location,
|
||||
public kycService: KycService,
|
||||
public appService: AppService,
|
||||
public cdr: ChangeDetectorRef
|
||||
) {
|
||||
super(router, activatedRoute, fb, location)
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
if (this.dialog.action === EAction.UPDATE){
|
||||
this.state = 'edit';
|
||||
this.getData();
|
||||
}
|
||||
ngOnInit(): void {
|
||||
if (this.dialog.action === EAction.UPDATE) {
|
||||
this.state = 'edit';
|
||||
this.getData();
|
||||
}
|
||||
}
|
||||
|
||||
createForm(): FormGroup<any> {
|
||||
return this.fb.group({
|
||||
kyc_uid: null,
|
||||
id_card: null,
|
||||
code_back_card: null,
|
||||
exp_date: null,
|
||||
prefix_name: null,
|
||||
first_name: null,
|
||||
last_name: null,
|
||||
birth_date: [null],
|
||||
phone: [null],
|
||||
email: null,
|
||||
image_front_url: [null],
|
||||
image_back_url: [null],
|
||||
is_pass: null,
|
||||
status_id: [null],
|
||||
created_by: null,
|
||||
created_datetime: null,
|
||||
updated_by: null,
|
||||
updated_datetime: null,
|
||||
owner_agency_uid: null
|
||||
})
|
||||
}
|
||||
createForm(): FormGroup<any> {
|
||||
return this.fb.group({
|
||||
kyc_uid: null,
|
||||
id_card: null,
|
||||
code_back_card: null,
|
||||
current_address: null,
|
||||
exp_date: null,
|
||||
prefix_name: null,
|
||||
first_name: null,
|
||||
last_name: null,
|
||||
birth_date: [null],
|
||||
phone: [null],
|
||||
email: null,
|
||||
image_front_url: [null],
|
||||
image_back_url: [null],
|
||||
is_pass: null,
|
||||
status_id: [null],
|
||||
created_by: null,
|
||||
created_datetime: null,
|
||||
updated_by: null,
|
||||
updated_datetime: null,
|
||||
owner_agency_uid: null,
|
||||
occupation: null,
|
||||
additional_occupation: null,
|
||||
nationality: null,
|
||||
max_card_no: null,
|
||||
name_of_workplace: null,
|
||||
work_address: null,
|
||||
signature_url: null,
|
||||
image_person_with_card_url: null,
|
||||
address_according_id_card: null
|
||||
})
|
||||
}
|
||||
|
||||
getData() {
|
||||
if (!this.dialog.ids) this.appService.message(EAction.INFO, EText.NO_DATA);
|
||||
return this.kycService.get(this.dialog.ids).pipe(
|
||||
tap((res) => this.form.patchValue(res)),
|
||||
tap(() => this.cdr.detectChanges()),
|
||||
catchError((err) => {
|
||||
this.appService.message(EAction.ERROR, EText.ERROR);
|
||||
return throwError(() => err)
|
||||
})
|
||||
).subscribe()
|
||||
}
|
||||
getData() {
|
||||
if (!this.dialog.ids) this.appService.message(EAction.INFO, EText.NO_DATA);
|
||||
return this.kycService.get(this.dialog.ids).pipe(
|
||||
tap((res) => this.form.patchValue(res)),
|
||||
tap(() => this.cdr.detectChanges()),
|
||||
catchError((err) => {
|
||||
this.appService.message(EAction.ERROR, EText.ERROR);
|
||||
return throwError(() => err)
|
||||
})
|
||||
).subscribe()
|
||||
}
|
||||
|
||||
status(isApprove: boolean){
|
||||
const form = this.form.getRawValue();
|
||||
form.is_pass = isApprove;
|
||||
const save$ = this.kycService.update2(form)
|
||||
return save$.pipe(
|
||||
tap(() => this.appService.message(EAction.SUCCESS, EText.UPDATE)),
|
||||
tap(() => this.dialogRef.close('success')),
|
||||
catchError((err) => {
|
||||
this.appService.message(EAction.ERROR, EText.ERROR);
|
||||
return throwError(() => err)
|
||||
})
|
||||
).subscribe()
|
||||
}
|
||||
status(isApprove: boolean) {
|
||||
const form = this.form.getRawValue();
|
||||
form.is_pass = isApprove;
|
||||
const save$ = this.kycService.update2(form)
|
||||
return save$.pipe(
|
||||
tap(() => this.appService.message(EAction.SUCCESS, EText.UPDATE)),
|
||||
tap(() => this.dialogRef.close('success')),
|
||||
catchError((err) => {
|
||||
this.appService.message(EAction.ERROR, EText.ERROR);
|
||||
return throwError(() => err)
|
||||
})
|
||||
).subscribe()
|
||||
}
|
||||
|
||||
viewImg1(url){
|
||||
window.open(url)
|
||||
}
|
||||
viewImg2(url){
|
||||
window.open(url)
|
||||
}
|
||||
viewImg1(url) {
|
||||
window.open(url)
|
||||
}
|
||||
viewImg2(url) {
|
||||
window.open(url)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,8 +21,8 @@
|
||||
<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>
|
||||
<tr mat-header-row *matHeaderRowDef="header"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: header;"></tr>
|
||||
|
||||
<ng-container matColumnDef="1">
|
||||
<th mat-header-cell *matHeaderCellDef class="tac">ลำดับ</th>
|
||||
@@ -81,6 +81,19 @@
|
||||
<div> {{item.email}}</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="register_no">
|
||||
<th mat-header-cell *matHeaderCellDef class="tal" width="150">เลขสมาชิก</th>
|
||||
<td mat-cell *matCellDef="let item" class="tal whitespace-nowrap">
|
||||
<div>{{item.max_card_no}} </div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="create_date">
|
||||
<th mat-header-cell *matHeaderCellDef class="tal" width="150">วันที่สมัคร</th>
|
||||
<td mat-cell *matCellDef="let item" class="tal whitespace-nowrap">
|
||||
<div> {{item.created_datetime | thaidate}}</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">
|
||||
|
||||
@@ -18,6 +18,8 @@ export class ListComponent extends BaseList implements OnChanges {
|
||||
}
|
||||
name: string;
|
||||
filterCard: Subject<string> = new Subject<string>();
|
||||
|
||||
header = ['1', '2', '3', '4', '6', '8', '9', '10', 'create_date', 'register_no', '11', '12']
|
||||
constructor() {
|
||||
super()
|
||||
this.filterCard.pipe(
|
||||
|
||||
Reference in New Issue
Block a user