Refactoring code module 05_placement

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

@@ -1,22 +1,24 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import type { QTableProps } from "quasar";
-import DialogHeader from "@/components/DialogHeader.vue";
 
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import type { QTableProps } from "quasar";
+import type { DataEducation } from "@/modules/05_placement/interface/index/Main";
+import type {
+  DataPerson,
+  Education,
+} from "@/modules/05_placement/interface/response/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const { showLoader, hideLoader, date2Thai, messageError } = mixin;
 
-const rows = ref<any[]>([]);
-const myForm = ref<any>([]);
-const selection = ref<any>([]);
-const personalForm = ref<any>([]);
-
 /** รับค่ามาจากหน้าหลัก */
 const props = defineProps({
   Modal: Boolean,
@@ -34,6 +36,9 @@ const props = defineProps({
   },
 });
 
+const rows = ref<DataEducation[]>([]);
+const personalForm = ref<DataPerson>();
+
 /**หัวตาราง */
 const columns = ref<QTableProps["columns"]>([
   {
@@ -78,16 +83,18 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-/** get ข้อมูลการศึกษา */
+/**
+ * ฟังก์ชันดึงข้อมูลรายละเอียด
+ */
 async function fetchData() {
   showLoader();
   await http
     .get(config.API.getDatapersonal(props.personalId))
     .then((res) => {
       personalForm.value = res.data.result;
-      personalForm.value.education.map((e: any) => {
+      personalForm.value?.education.map((e: Education) => {
         rows.value.push({
-          university: e.name,
+          university: e.institute,
           degree: e.degree,
           major: e.field,
           graduation: date2Thai(e.finishDate),
@@ -103,8 +110,8 @@ async function fetchData() {
 }
 
 /**
- * convert text
- * @param val type
+ * ฟังก์ชันแปลงประเภทข้าราชการ เป็นไทย
+ * @param val ประเภทข้าราชการ
  */
 function formBmaofficer(val: string) {
   switch (val) {
@@ -119,14 +126,17 @@ function formBmaofficer(val: string) {
   }
 }
 
-/** ปิด POPUP ข้อมูล */
+/**
+ * ปิด POPUP ข้อมูล
+ */
 async function close() {
   props.close();
-  selection.value = [];
   rows.value = [];
 }
 
-/** เมื่อ props.Modal จะเรียกข้อมูลการศึกษา */
+/**
+ * เมื่อ props.Modal เป็น true จะเรียกข้อมูลการศึกษา
+ */
 watch(props, () => {
   if (props.Modal === true) {
     fetchData();
@@ -136,9 +146,9 @@ watch(props, () => {
 <template>
   <q-dialog v-model="props.Modal" persistent>
     <q-card style="max-width: 100%; width: 80%">
-      <q-form ref="myForm">
+      <q-form>
         <DialogHeader
-          :tittle="`รายละเอียดของ ${personalForm.fullName}`"
+          :tittle="`รายละเอียดของ ${personalForm?.fullName}`"
           :close="close"
         />
 
@@ -150,7 +160,7 @@ watch(props, () => {
               <div class="row items-center q-pa-xs header-text">
                 ข้อมูลทั่วไป
                 <span
-                  v-if="personalForm.bmaOfficer != null"
+                  v-if="personalForm?.bmaOfficer != null"
                   class="check-officer"
                 >
                   <q-icon name="mdi-check" />
@@ -166,10 +176,10 @@ watch(props, () => {
 
                 <div class="col-4 sub-text">
                   <div class="q-pb-md">
-                    {{ personalForm.idCard }}
+                    {{ personalForm?.idCard }}
                   </div>
                   <div>
-                    {{ date2Thai(personalForm.dateOfBirth) }}
+                    {{ date2Thai(personalForm?.dateOfBirth) }}
                   </div>
                 </div>
 
@@ -179,10 +189,10 @@ watch(props, () => {
                 </div>
                 <div class="col-3 sub-text">
                   <div class="q-pb-md">
-                    {{ personalForm.fullName }}
+                    {{ personalForm?.fullName }}
                   </div>
                   <div>
-                    {{ personalForm.gender }}
+                    {{ personalForm?.gender }}
                   </div>
                 </div>
               </div>
@@ -195,7 +205,7 @@ watch(props, () => {
               <div class="row q-pa-xs">
                 <div class="col-3 header-sub-text">ที่อยู่</div>
                 <div class="col-9 sub-text">
-                  {{ personalForm.address }}
+                  {{ personalForm?.registAddress }}
                 </div>
               </div>
             </q-card>
@@ -233,10 +243,10 @@ watch(props, () => {
                     </div>
                     <div class="col-5 sub-text-exam">
                       <div class="q-pb-sm">
-                        {{ personalForm.pass }}
+                        {{ personalForm?.pass }}
                       </div>
-                      <div class="q-pb-sm">{{ personalForm.examNumber }}</div>
-                      <div class="q-pb-sm">{{ personalForm.examRound }}</div>
+                      <div class="q-pb-sm">{{ personalForm?.examNumber }}</div>
+                      <div class="q-pb-sm">{{ personalForm?.examRound }}</div>
                     </div>
                   </div>
                 </div>