From bffe7f5568aed1bcb42b24d3029096037ae4579a Mon Sep 17 00:00:00 2001
From: Kittapath <kittapath@frappet.com>
Date: Fri, 17 Mar 2023 10:38:54 +0700
Subject: [PATCH] =?UTF-8?q?ui=20=E0=B8=84=E0=B8=B3=E0=B8=8A=E0=B8=B5?=
 =?UTF-8?q?=E0=B9=89=E0=B9=81=E0=B8=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/01_exam/components/ExamDetail.vue | 88 +++++++++++--------
 1 file changed, 53 insertions(+), 35 deletions(-)

diff --git a/src/modules/01_exam/components/ExamDetail.vue b/src/modules/01_exam/components/ExamDetail.vue
index 5088497..4741ff6 100644
--- a/src/modules/01_exam/components/ExamDetail.vue
+++ b/src/modules/01_exam/components/ExamDetail.vue
@@ -1,44 +1,41 @@
 <template>
-  <div class="q-pa-md">
-    <div class="text-h4 text-center text-primary q-pb-lg">รายละเอียดการสอบ</div>
-    <div>
-      <q-card v-for="exam in examPost" :key="exam.contentItemId" class="q-pa-md">
-        <q-card-section>
-          <div class="text-h6 q-py-sm">{{ exam.displayText }} ({{ exam.description }})</div>
-          <div class="text-subtitle2 q-py-sm">ประกาศวันที่ {{ date2Thai(exam.createdUtc) }}</div>
-          <div class="text-subtitle2 q-py-sm">ประจำปีงบประมาณ {{ exam.budgetYear }}</div>
-          <div class="text-subtitle2 q-py-sm">
-            เปิดรับสมัครวันที่ {{ date2Thai(exam.startDate) }} - {{ date2Thai(exam.endDate) }}
-          </div>
-          <div class="text-subtitle2 q-py-sm">ค่าธรรมเนียมการสมัคร {{ exam.fee }} บาท</div>
-          <div v-html="exam.htmlBody.html"></div>
-        </q-card-section>
-
-        <div class="text-subtitle1 text-center text-primary">ประกาศเกี่ยวกับการสอบนี้</div>
-        <div class="row justify-start q-pa-md q-col-gutter-md">
-          <div
-            v-for="file in exam.bag.contentItems"
-            :key="file.contentItemId"
-            class="col-12"
-            :href="`https://localhost:5001${file.file.urls[0]}`"
-          >
-            <p>
-              <a :href="`https://localhost:5001${file.file.urls[0]}`" target="_blank">{{
-                file.displayText
-              }}</a
-              ><br />
-            </p>
-          </div>
+  <div class="q-px-md">
+    <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
+      <q-card-section>
+        <div class="text-h6 q-py-sm">{{ exam.displayText }} ({{ exam.description }})</div>
+        <div class="text-subtitle2 q-py-sm">ประกาศวันที่ {{ date2Thai(exam.createdUtc) }}</div>
+        <div class="text-subtitle2 q-py-sm">ประจำปีงบประมาณ {{ exam.budgetYear }}</div>
+        <div class="text-subtitle2 q-py-sm">
+          เปิดรับสมัครวันที่ {{ date2Thai(exam.startDate) }} - {{ date2Thai(exam.endDate) }}
         </div>
-        <template v-slot:body-cell-name="props">
+        <div class="text-subtitle2 q-py-sm">ค่าธรรมเนียมการสมัคร {{ exam.fee }} บาท</div>
+        <!-- <div v-html="exam.htmlBody.html"></div> -->
+      </q-card-section>
+
+      <div class="text-subtitle1 text-center text-primary">เอกสารเกี่ยวกับการสอบนี้</div>
+      <div class="row justify-start q-pa-md q-col-gutter-md">
+        <div
+          v-for="file in exam.document"
+          :key="file.contentItemId"
+          class="col-12"
+          :href="`https://localhost:5001${file.file}`"
+        >
+          <p>
+            <a :href="`https://localhost:5001${file.file}`" target="_blank">{{
+              file.displayText
+            }}</a
+            ><br />
+          </p>
+        </div>
+      </div>
+      <!-- <template v-slot:body-cell-name="props">
           <q-td :props="props">
             <div>
               <a href="https://quasar.dev/vue-components/table#QTable-API" />
             </div>
           </q-td>
-        </template>
-      </q-card>
-    </div>
+        </template> -->
+    </q-card>
     <div class="col-12">
       <div class="text-h6 q-py-sm">ข้อควรระวัง</div>
       <div class="text-warning q-pb-md">1. ผู้สมัครสามารถสมัครได้เพียงครั้งเดียว</div>
@@ -59,7 +56,28 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
+import { useCounterMixin } from '@/stores/mixin'
+
+const mixin = useCounterMixin()
+const { date2Thai } = mixin
+const exam = ref<any>({
+  contentItemId: null,
+  displayText: 'การสอบภาค ข.พิเศษ สำหรับผู้สอบผ่านของ่วนราชการแล้ว',
+  description: 'ครั้งที่2',
+  createdUtc: new Date(),
+  budgetYear: 2566,
+  startDate: new Date(),
+  endDate: new Date(),
+  fee: 200,
+  document: [
+    {
+      contentItemId: 111,
+      file: '111',
+      displayText: 'เอกสารเพิ่มเติมเกี่ยวกับการสอบ'
+    }
+  ]
+})
 </script>
 
 <style scoped></style>