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

This commit is contained in:
Chanikan Yenta
2024-06-25 10:58:51 +07:00
parent 9507ee8dc6
commit 5c0f742cf5
3 changed files with 45 additions and 6 deletions

View File

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

View File

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