From dd27104a881061b71ba6f64cd3b7522db1639b19 Mon Sep 17 00:00:00 2001
From: watcharanondh <champion460@gmail.com>
Date: Thu, 15 Jun 2023 16:07:44 +0700
Subject: [PATCH] Add ExamResult and Qualification

---
 .../components/exams_other/Detail.vue         |  10 +-
 .../components/exams_other/ExamResult.vue     | 101 ++++++++++++++++++
 .../components/exams_other/Qualification.vue  |  84 +++++++++++++++
 .../components/pass/TableDetail.vue           |   7 +-
 .../05_placement/interface/index/Main.ts      |   8 +-
 5 files changed, 203 insertions(+), 7 deletions(-)
 create mode 100644 src/modules/05_placement/components/exams_other/ExamResult.vue
 create mode 100644 src/modules/05_placement/components/exams_other/Qualification.vue

diff --git a/src/modules/05_placement/components/exams_other/Detail.vue b/src/modules/05_placement/components/exams_other/Detail.vue
index 569fd064d..f77c1728b 100644
--- a/src/modules/05_placement/components/exams_other/Detail.vue
+++ b/src/modules/05_placement/components/exams_other/Detail.vue
@@ -8,6 +8,8 @@ import Informationvue from "@/modules/05_placement/components/exams_other/Inform
 import EducationVue from "@/modules/05_placement/components/exams_other/Education.vue";
 import Certicate from "@/modules/05_placement/components/exams_other/Information/Certicate.vue";
 import InsigniaVue from "@/modules/05_placement/components/exams_other/Insignia.vue";
+import ExamResult from "@/modules/05_placement/components/exams_other/ExamResult.vue";
+import Qualification from "@/modules/05_placement/components/exams_other/Qualification.vue";
 
 const store = useDataStore();
 const { changeTab } = store;
@@ -26,7 +28,7 @@ onMounted(async () => {
 
 </script>
 <template>
-    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row">
+    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row q-pb-sm">
         <div class="header-text">
             <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm"
                 @click="router.go(-1)" />
@@ -47,6 +49,12 @@ onMounted(async () => {
             <div id="insignia" name="4" class="row col-12 q-mt-md">
                 <InsigniaVue v-model:statusEdit="statusEdit" />
             </div>
+            <div id="examresult" name="0" class="q-px-lg q-py-lg">
+                <ExamResult />
+            </div>
+            <div id="qualification" name="0" class="q-px-lg q-py-lg">
+                <Qualification />
+            </div>
         </q-card>
     </div>
 </template>
diff --git a/src/modules/05_placement/components/exams_other/ExamResult.vue b/src/modules/05_placement/components/exams_other/ExamResult.vue
new file mode 100644
index 000000000..ae4564dc4
--- /dev/null
+++ b/src/modules/05_placement/components/exams_other/ExamResult.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+</script>
+<template>
+    <div class="row">
+        <q-icon name="mdi-briefcase-edit" size="1.5em" color="grey-5" class="q-pr-md" />
+        <span class="text-bold text-subtitle2 ">ผลการสอบ</span>
+    </div>
+    <div class="row">
+        <div class="col-7 q-pl-xl">
+            <q-card class="card-exam">
+                <div class="row">
+                    <div class="col q-pa-xs header-sub-text-exam">
+                        <div class="q-pb-xs"> ประเภท </div>
+                        <div class="q-pb-xs"> ภาค ก </div>
+                        <div class="q-pb-xs"> ภาค ข </div>
+                        <div class="q-pb-xs"> ภาค ค </div>
+                        <div> รวมทั้งหมด </div>
+                    </div>
+                    <div class="col q-pa-xs">
+                        <div class="header-sub-text-exam-2 q-pb-xs">คะแนนเต็ม</div>
+                        <div class="sub-text-exam q-pb-xs">200</div>
+                        <div class="sub-text-exam q-pb-xs">200</div>
+                        <div class="sub-text-exam q-pb-xs">100</div>
+                        <div class="sub-text-exam ">500</div>
+                    </div>
+                    <div class="col q-pa-xs header-sub-text-exam-2">
+                        <div class="header-sub-text-exam-2 q-pb-xs">คะแนนที่ได้</div>
+                        <div class="sub-text-exam q-pb-xs">133</div>
+                        <div class="sub-text-exam q-pb-xs">149</div>
+                        <div class="sub-text-exam q-pb-xs">100</div>
+                        <div class="sub-text-exam q-pb-xs">382</div>
+                    </div>
+                </div>
+            </q-card>
+        </div>
+        <div class="col q-pl-xl">
+            <q-card class="q-pt-xs">
+                <div class="header-text-right">ผลการสอบ</div>
+                <div class="sub-text-right q-pb-xs">ผ่าน</div>
+                <div class="header-text-right">ลำดับที่สอบได้</div>
+                <div class="sub-text-right q-pb-xs">3</div>
+                <div class="header-text-right">จำนวนครั้งที่สมัครสอบ</div>
+                <div class="sub-text-right q-pb-xs">5</div>
+            </q-card>
+        </div>
+    </div>
+</template>
+<style lang="scss" scoped>
+.header-text {
+    font-size: 18px;
+    font-weight: 600;
+    color: #4F4F4F;
+}
+
+.header-text-right {
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 150%;
+    color: #818181;
+}
+
+.sub-text-right {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 150%;
+    color: #000000;
+}
+
+.sub-text {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 22px;
+    letter-spacing: 0.0025em;
+    color: #35373C;
+}
+
+.card-exam {
+    border-radius: 5px;
+    background: #FAFAFA;
+}
+
+.header-sub-text-exam {
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 150%;
+    color: #818181;
+}
+
+.header-sub-text-exam-2 {
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 150%;
+    color: #00AA86;
+}
+
+.sub-text-exam {
+    font-size: 15px;
+    font-weight: 500;
+    color: #000000;
+}
+</style>
\ No newline at end of file
diff --git a/src/modules/05_placement/components/exams_other/Qualification.vue b/src/modules/05_placement/components/exams_other/Qualification.vue
new file mode 100644
index 000000000..83337eaa3
--- /dev/null
+++ b/src/modules/05_placement/components/exams_other/Qualification.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { CheckboxItem } from "@/modules/05_placement/interface/index/Main";
+
+const selection = ref([]);
+const checkboxItems: CheckboxItem[] = [
+    { id: 1, label: 'ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง' },
+    { id: 2, label: 'ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.' },
+    { id: 3, label: 'ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
+    { id: 4, label: 'ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม' },
+    { id: 5, label: 'ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง' },
+    { id: 6, label: 'ไม่เป็นบุคคลล้มละลาย' },
+    { id: 7, label: 'ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ' },
+    { id: 8, label: 'ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ' },
+    { id: 9, label: 'เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
+    { id: 10, label: 'เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
+    { id: 11, label: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ' },
+]
+</script>
+<template>
+    <div class="row">
+        <q-icon name="mdi-briefcase-edit" size="1.5em" color="grey-5" class="q-pr-md" />
+        <span class="text-bold text-subtitle2 ">การคัดกรองคุณสมบัติ</span>
+    </div>
+    <div class="contanier-box-mini">
+        <q-card bordered class="card-panding">
+            <div class="col-12 row items-center q-pa-sm header-text">
+                การคัดกรองคุณสมบัติ
+            </div>
+            <div v-for="item of checkboxItems" :key="item.id" class="q-pa-sm">
+                <q-checkbox size="xs" v-model="selection" :val="item.id" :label="item.label" keep-color color="teal"
+                    class="checkbox-group" />
+                <q-separator />
+            </div>
+        </q-card>
+    </div>
+</template>
+<style lang="scss" scoped>
+.header-text {
+    font-size: 18px;
+    font-weight: 600;
+    color: #4F4F4F;
+}
+
+.sub-text-right {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 150%;
+    color: #000000;
+}
+
+.sub-text {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 22px;
+    letter-spacing: 0.0025em;
+    color: #35373C;
+}
+
+.card-exam {
+    border-radius: 5px;
+    background: #FAFAFA;
+}
+
+.header-sub-text-exam {
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 150%;
+    color: #818181;
+}
+
+.header-sub-text-exam-2 {
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 150%;
+    color: #00AA86;
+}
+
+.sub-text-exam {
+    font-size: 15px;
+    font-weight: 500;
+    color: #000000;
+}
+</style>
\ No newline at end of file
diff --git a/src/modules/05_placement/components/pass/TableDetail.vue b/src/modules/05_placement/components/pass/TableDetail.vue
index 4524d7486..b4250883a 100644
--- a/src/modules/05_placement/components/pass/TableDetail.vue
+++ b/src/modules/05_placement/components/pass/TableDetail.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-
 import { ref } from "vue";
 import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
 import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
+import type { CheckboxItem } from "@/modules/05_placement/interface/index/Main";
 
 const save = ref<boolean>(true);
 const props = defineProps({
@@ -17,10 +17,7 @@ const props = defineProps({
     }
 });
 
-interface CheckboxItem {
-    id: number;
-    label: string;
-}
+
 
 const selection = ref([]);
 const checkboxItems: CheckboxItem[] = [
diff --git a/src/modules/05_placement/interface/index/Main.ts b/src/modules/05_placement/interface/index/Main.ts
index a6df537f6..438d71ab3 100644
--- a/src/modules/05_placement/interface/index/Main.ts
+++ b/src/modules/05_placement/interface/index/Main.ts
@@ -49,6 +49,11 @@ interface treeTab {
   children: treeTab[];
 }
 
+interface CheckboxItem {
+  id: number;
+  label: string;
+}
+
 export type { 
   DataOption, 
   DataOptionInsignia, 
@@ -57,5 +62,6 @@ export type {
   AddressOps, 
   Pagination, 
   EduOps, 
-  InsigniaOps 
+  InsigniaOps,
+  CheckboxItem
 };