[Update] เพิ่มรูปภาพ

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

@@ -5,10 +5,37 @@
             <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-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>
@@ -18,7 +45,8 @@
 
                 <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-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>
@@ -28,7 +56,8 @@
 
                 <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-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>
@@ -40,7 +69,8 @@
 
                 <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-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>
@@ -52,7 +82,8 @@
 
                 <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-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>
@@ -62,7 +93,8 @@
             </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="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>

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

@@ -87,4 +87,11 @@ export class DialogComponent extends BaseForm implements OnInit {
             })
         ).subscribe()
     }
+
+    viewImg1(url){
+        window.open(url)
+    }
+    viewImg2(url){
+        window.open(url)
+    }
 }