From b03f5e21aedba2c746ed6996d5eb3342ddee6246 Mon Sep 17 00:00:00 2001
From: Kittapath <kittapath@frappet.com>
Date: Fri, 17 Mar 2023 12:08:47 +0700
Subject: [PATCH] =?UTF-8?q?ui=20=E0=B9=83=E0=B8=9A=E0=B8=AA=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=84=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../01_exam/components/ExamFinished.vue       | 89 ++++++++++++++-----
 1 file changed, 69 insertions(+), 20 deletions(-)

diff --git a/src/modules/01_exam/components/ExamFinished.vue b/src/modules/01_exam/components/ExamFinished.vue
index 021adab..52c78f4 100644
--- a/src/modules/01_exam/components/ExamFinished.vue
+++ b/src/modules/01_exam/components/ExamFinished.vue
@@ -1,43 +1,92 @@
 <template>
   <div>
     <div class="q-pa-md row items-center justify-center">
-      <q-card class="my-card" style="max-width: 480px; width: 100%" bordered>
+      <q-card class="my-card" style="max-width: 600px; width: 100%" bordered>
+        <q-card-actions class="q-pa-md" :class="getClass(status)">
+          <div v-if="status == false" class="text-black text-bold">
+            เจ้าหน้าที่กำลังตรวจเอกสารชำระเงิน
+          </div>
+          <div v-else class="text-black text-bold">สมัครสอบสำเร็จ</div>
+          <q-space />
+          <q-btn size="12px" flat round color="primary" @click="download" icon="mdi-download">
+            <q-tooltip>พิมพ์บัตรประจำตัวผู้สอบ</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+
+        <q-separator />
+
         <q-card-section horizontal>
-          <q-card-section class="q-pt-xs">
-            <div class="text-caption text-bold text-h5">บัตรประจำตัวผู้สอบ</div>
-            <div class="text-h5 q-mt-sm q-mb-xs">{{ candidateFullName }}</div>
-            <div class="text-caption text-black text-bold">ชื่อ : นางพิมพ์ภา วงศ์สวัสดิ์</div>
-            <div class="text-caption text-black text-bold">เลขประจำตัวสอบ : CDE-004</div>
-            <div class="text-caption text-black">เลขประจำตัวประชาชน : 1100700954521</div>           
-            <div class="text-caption text-black">เวลาสอบ : 09:00-12:00</div>
-            <div class="text-caption text-black">สถานที่สอบ : ศูนย์สอบ 01 กรุงเทพฯและนนทบุรี</div>
-            <div class="text-caption text-black">ชั้นที่ : 4</div>
-            <div class="text-caption text-black">ห้องสอบ : CB-706</div>
-            <div class="text-caption text-black">เลขที่นั่ง : 75</div>
+          <q-card-section class="col-8 q-pt-xs">
+            <div class="text-bold">บัตรประจำตัวผู้สอบ</div>
+            <div class="q-pt-xs row">
+              <div class="">ชื่อ :</div>
+              <div class="text-black text-bold">{{ fullName }}</div>
+            </div>
+            <div class="q-pt-xs row">
+              <div class="">เลขประจำตัวสอบ :</div>
+              <div class="text-black text-bold">{{ examNumber }}</div>
+            </div>
+            <div class="q-pt-xs row">
+              <div class="">เลขประจำตัวประชาชน :</div>
+              <div class="">{{ citizenId }}</div>
+            </div>
+            <div class="q-pt-xs row">
+              <div class="">เวลาสอบ :</div>
+              <div class="">{{ examTime }}</div>
+            </div>
+            <div class="q-pt-xs row">
+              <div class="">สถานที่สอบ :</div>
+              <div class="">{{ examLocation }}</div>
+            </div>
+            <div class="q-pt-xs row">
+              <div class="">ชั้นที่ :</div>
+              <div class="">{{ floor }}</div>
+            </div>
+            <div class="q-pt-xs row">
+              <div class="">ห้องสอบ :</div>
+              <div class="">{{ examRoom }}</div>
+            </div>
+            <div class="q-pt-xs row">
+              <div class="">เลขที่นั่ง :</div>
+              <div class="">{{ seatNumber }}</div>
+            </div>
           </q-card-section>
 
-          <q-card-section class="col-5 flex flex-center">
+          <q-card-section class="col-4 flex flex-center">
             <q-img
               class="rounded-borders"
               src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cGVyc29ufGVufDB8fDB8fA%3D%3D&w=1000&q=80"
               :ratio="1"
-              style="max-width: 100px; max-height: 100px"
+              style="max-width: 300px; max-height: 300px"
             />
           </q-card-section>
         </q-card-section>
-
-        <q-separator />
-
-        <q-card-actions class="row justify-end">
-          <q-btn flat color="white" class="bg-primary"> พิมพ์บัตรประจำตัวผู้สอบ </q-btn>
-        </q-card-actions>
       </q-card>
+      <q-btn size="12px" flat round color="primary" @click="testChangeStatus" icon="mdi-download">
+      </q-btn>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+const fullName = ref<string>('นางพิมพ์ภา วงศ์สวัสดิ์')
+const examNumber = ref<string>('CDE-004')
+const citizenId = ref<string>('1100700954521')
+const examTime = ref<string>('09:00-12:00')
+const examLocation = ref<string>('ศูนย์สอบ 01 กรุงเทพฯและนนทบุรี')
+const floor = ref<string>('4')
+const examRoom = ref<string>('CB-706')
+const seatNumber = ref<string>('75')
+const status = ref<boolean>(false)
+
+const download = () => {}
+const testChangeStatus = () => {
+  status.value = true
+}
+const getClass = (val: boolean) => {
+  return val == true ? 'bg-green-4' : 'bg-yellow-3'
+}
 </script>
 
 <style lang="scss" scoped></style>