[faet] - add mroe detail in kyc list and popup

src/app/pages/manage/kyc/presenter/dialog/dialog.component.html

@@ -12,21 +12,37 @@
             <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=""
+                <img class="h-56 w-full object-contain"
-                                        style="border: solid 1px #2D9CDB ;"
+                  [src]="form.value.image_front_url ?  form.value.image_front_url : 'assets/images/no_image.webp'"
-                                        (click)="viewImg1(form.value.image_front_url)">
+                  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=""
+                <img class="h-56 w-full object-contain"
-                                        style="border: solid 1px #2D9CDB ;"
+                  [src]="form.value.image_back_url ? form.value.image_back_url : 'assets/images/no_image.webp'" alt=""
-                                        (click)="viewImg2(form.value.image_back_url)">
+                  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>
@@ -56,8 +72,17 @@
 
         <div class="col-span-full">
           <div class="lg:flex lg:flex-col grid grid-cols-9 gap-2">
-                        <mat-label
+            <mat-label class="col-span-1 lg:text-left lg:self-auto text-right self-center mr-4">สัญชาติ</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>
@@ -66,6 +91,58 @@
             <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">
@@ -82,14 +159,16 @@
 
         <div class="col-span-full">
           <div class="lg:flex lg:flex-col grid grid-cols-9 gap-2">
-                        <mat-label
+            <mat-label class="col-span-1 lg:text-left lg:self-auto text-right self-center mr-4">เลขหลังบัตร</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">

src/app/pages/manage/kyc/presenter/dialog/dialog.component.ts

@@ -32,7 +32,7 @@ export class DialogComponent extends BaseForm implements OnInit {
   }
 
   ngOnInit(): void {
-        if (this.dialog.action === EAction.UPDATE){
+    if (this.dialog.action === EAction.UPDATE) {
       this.state = 'edit';
       this.getData();
     }
@@ -43,6 +43,7 @@ export class DialogComponent extends BaseForm implements OnInit {
       kyc_uid: null,
       id_card: null,
       code_back_card: null,
+      current_address: null,
       exp_date: null,
       prefix_name: null,
       first_name: null,
@@ -58,7 +59,16 @@ export class DialogComponent extends BaseForm implements OnInit {
       created_datetime: null,
       updated_by: null,
       updated_datetime: null,
-            owner_agency_uid: 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
     })
   }
 
@@ -74,7 +84,7 @@ export class DialogComponent extends BaseForm implements OnInit {
     ).subscribe()
   }
 
-    status(isApprove: boolean){
+  status(isApprove: boolean) {
     const form = this.form.getRawValue();
     form.is_pass = isApprove;
     const save$ = this.kycService.update2(form)
@@ -88,10 +98,10 @@ export class DialogComponent extends BaseForm implements OnInit {
     ).subscribe()
   }
 
-    viewImg1(url){
+  viewImg1(url) {
     window.open(url)
   }
-    viewImg2(url){
+  viewImg2(url) {
     window.open(url)
   }
 }

src/app/pages/manage/kyc/presenter/list/list.component.html

@@ -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-header-row *matHeaderRowDef="header"></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: 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">

src/app/pages/manage/kyc/presenter/list/list.component.ts

@@ -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(