จัดโค้ดบรรจุ รายชื่อผู้สอบผ่าน

src/modules/05_placement/components/PersonalList/TableDetail.vue

@@ -1,15 +1,23 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
-import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
 import { useQuasar } from "quasar";
-import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+
+const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const { showLoader, hideLoader, date2Thai, messageError } = mixin;
-const $q = useQuasar();
 
+const rows = ref<any[]>([]);
+const myForm = ref<any>([]);
+const selection = ref<any>([]);
+const personalForm = ref<any>([]);
+
+/** รับค่ามาจากหน้าหลัก */
 const props = defineProps({
   Modal: Boolean,
   close: {
@@ -26,13 +34,7 @@ const props = defineProps({
   },
 });
 
-const rows = ref<any[]>([]);
-//--------------------(แปลงวันที่เป็นไทย)------------------------------------//
-// const graduationDate = new Date(graduationExample);
-// rows.value[0].graduation = date2Thai(graduationDate, false, false);
-
-//--------------------------------------------------------------------//
-
+/**หัวตาราง */
 const columns = ref<QTableProps["columns"]>([
   {
     name: "university",
@@ -75,17 +77,9 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const myForm = ref<any>([]);
-const personalForm = ref<any>([]);
-const selection = ref<any>([]);
-// เมื่อ props.Modal จะเรียกข้อมูลการศึกษา
-watch(props, () => {
-  if (props.Modal === true) {
-    fetchData();
-  }
-});
-// ข้อมูลการศึกษา
-const fetchData = async () => {
+
+/** get ข้อมูลการศึกษา */
+async function fetchData(){
   showLoader();
   await http
     .get(config.API.getDatapersonal(props.personalId))
@@ -108,7 +102,11 @@ const fetchData = async () => {
     });
 };
 
-const formBmaofficer = (val: string) => {
+/**
+ * convert text
+ * @param val type
+ */
+function formBmaofficer(val: string){
   switch (val) {
     case "OFFICER":
       return "ขรก.กทม. สามัญ";
@@ -120,12 +118,20 @@ const formBmaofficer = (val: string) => {
       return "";
   }
 };
-// ปิด POPUP ข้อมูล
-const close = async () => {
+
+/** ปิด POPUP ข้อมูล */
+async function close(){
   props.close();
   selection.value = [];
   rows.value = [];
 };
+
+/** เมื่อ props.Modal จะเรียกข้อมูลการศึกษา */ 
+watch(props, () => {
+  if (props.Modal === true) {
+    fetchData();
+  }
+});
 </script>
 <template>
   <q-dialog v-model="props.Modal" persistent>
@@ -137,6 +143,7 @@ const close = async () => {
             @click="close"
           />
         </div>
+
         <q-separator />
 
         <div class="contanier-box-main">
@@ -152,11 +159,13 @@ const close = async () => {
                   {{ formBmaofficer(personalForm.bmaOfficer) }}
                 </span>
               </div>
+
               <div class="row q-pa-xs">
                 <div class="col-3 header-sub-text">
                   <div class="q-pb-md">เลขประจำตัวประชาชน</div>
                   <div>วัน/เดือน/ปีเกิด</div>
                 </div>
+
                 <div class="col-4 sub-text">
                   <div class="q-pb-md">
                     {{ personalForm.idCard }}
@@ -165,6 +174,7 @@ const close = async () => {
                     {{ date2Thai(personalForm.dateOfBirth) }}
                   </div>
                 </div>
+
                 <div class="col-2 header-sub-text">
                   <div class="q-pb-md">ชื่อ-นามสกุล</div>
                   <div>เพศ</div>
@@ -177,9 +187,11 @@ const close = async () => {
                     {{ personalForm.gender }}
                   </div>
                 </div>
+                
               </div>
             </q-card>
           </div>
+
           <div class="contanier-box-mini">
             <q-card bordered class="card-panding">
               <div class="row items-center q-pa-xs header-text">ภูมิลำเนา</div>
@@ -191,6 +203,7 @@ const close = async () => {
               </div>
             </q-card>
           </div>
+
           <div class="contanier-box-mini">
             <q-card bordered class="card-panding">
               <div class="row items-center q-pa-xs header-text">การศึกษา</div>
@@ -209,58 +222,11 @@ const close = async () => {
               </q-table>
             </q-card>
           </div>
+          
           <div class="contanier-box-mini">
             <q-card bordered class="card-panding">
               <div class="row items-center q-pa-xs header-text">การสอบ</div>
               <div class="row q-pa-xs">
-                <!-- <div class="col-6">
-                  <q-card class="card-exam q-pa-sm">
-                    <div class="row">
-                      <div class="col-4 q-pa-xs header-sub-text-exam">
-                        <div>ประเภท</div>
-                        <div>ภาค ก</div>
-                        <div>ภาค ข</div>
-                        <div>ภาค ค</div>
-                        <div>รวมทั้งหมด</div>
-                      </div>
-                      <div class="col-4 q-pa-xs text-right">
-                        <div class="header-sub-text-exam-2">คะแนนที่ได้</div>
-                        <div class="sub-text-exam">
-                          {{ personalForm.pointTotalA }}
-                        </div>
-                        <div class="sub-text-exam">
-                          {{ personalForm.pointTotalB }}
-                        </div>
-                        <div class="sub-text-exam">
-                          {{ personalForm.pointTotalC }}
-                        </div>
-                        <div class="sub-text-exam">
-                          {{ personalForm.pointTotal }}
-                        </div>
-                      </div>
-                      <div
-                        class="col-4 q-pa-xs header-sub-text-exam-2 text-right"
-                      >
-                        <div class="header-sub-text-exam-2 text-right">
-                          ผลการสอบ
-                        </div>
-                        <div class="sub-text-exam">
-                          {{ personalForm.pointA }}
-                        </div>
-                        <div class="sub-text-exam">
-                          {{ personalForm.pointB }}
-                        </div>
-                        <div class="sub-text-exam">
-                          {{ personalForm.pointC }}
-                        </div>
-                        <div class="sub-text-exam">
-                          {{ personalForm.point }}
-                        </div>
-                      </div>
-                    </div>
-                  </q-card>
-                </div>
-                <div class="col-1"></div> -->
                 <div class="col-6 q-pt-sm q-pl-lg">
                   <div class="row">
                     <div class="col-7 header-sub-text">