Refactoring code module 12_evaluatePersonal

src/modules/12_evaluatePersonal/components/Director/AddPage.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import Form from "@/modules/12_evaluatePersonal/components/Director/Form.vue";
+import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
-import { useRoute, useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useQuasar } from "quasar";
-// import type { FormDataPost } from "@/modules/11_discipline/interface/request/director";
+
 import type { DataForm } from "@/modules/12_evaluatePersonal/interface/index/director";
+
+import Form from "@/modules/12_evaluatePersonal/components/Director/Form.vue";
+
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader, dialogConfirm, success } = mixin;
@@ -17,31 +19,28 @@ const router = useRouter();
  * @param id ระบุ บุคคล
  */
 function onSubmit(formData: DataForm) {
-  dialogConfirm($q, () => addData(formData));
-}
-
-function addData(formData: DataForm) {
-  console.log(formData);
-  showLoader();
-  http
-    .post(config.API.evaluateDirectorMain(), {
-      // personalId:formData.personalId ?? '',
-      prefix: formData.prefix,
-      firstName: formData.firstname,
-      lastName: formData.lastname,
-      position: formData.position,
-      email: formData.email,
-      phone: formData.phone,
-    })
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      router.push(`/evaluate/director`);
-    });
+  dialogConfirm($q, () => {
+    showLoader();
+    http
+      .post(config.API.evaluateDirectorMain(), {
+        prefix: formData.prefix,
+        firstName: formData.firstname,
+        lastName: formData.lastname,
+        position: formData.position,
+        email: formData.email,
+        phone: formData.phone,
+      })
+      .then(() => {
+        router.push(`/evaluate/director`);
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }
 </script>
 <template>

src/modules/12_evaluatePersonal/components/Director/DialogDetail.vue

@@ -50,7 +50,6 @@ const dataDettail = reactive<FormData>({
   position: "",
   phone: "",
   email: "",
-  qualification: "",
 });
 
 /**
@@ -81,9 +80,9 @@ function fetchData() {
  * @param formData ข้อมุลชื่อกรรมการ
  */
 function onSubmit(formData: FormData) {
-  dialogConfirm($q, () => {
+  dialogConfirm($q, async () => {
     showLoader();
-    http
+    await http
       .put(config.API.evaluateDirectorById(directorId.value), {
         prefix: formData.prefix,
         firstName: formData.firstname,
@@ -92,10 +91,10 @@ function onSubmit(formData: FormData) {
         email: formData.email,
         phone: formData.phone,
       })
-      .then(() => {
-        props.fetchDataList?.();
-        onCloseDialog();
+      .then(async () => {
+        await props.fetchDataList?.();
         success($q, "บันทึกข้อมูลสำเร็จ");
+        onCloseDialog();
       })
       .catch((e) => {
         messageError($q, e);
@@ -128,7 +127,7 @@ watch(
       <Form
         :on-submit="onSubmit"
         :data="dataDettail"
-        :actionType="actionType"
+        :action-type="actionType"
       />
     </q-card>
   </q-dialog>

src/modules/12_evaluatePersonal/components/Director/EditPage.vue

@@ -1,114 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, reactive } from "vue";
-import Form from "@/modules/12_evaluatePersonal/components/Director/Form.vue";
-import type { FormData } from "@/modules/11_discipline/interface/request/Director";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-import { useRoute } from "vue-router";
-import router from "@/router";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const route = useRoute();
-const id = ref<string>(route.params.id.toString());
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader, dialogConfirm, success } = mixin;
-
-/**เมื่อเริ่มโหลดหน้า
- * เรียกใช้งาน fetchData เพื่อดึงข้อมูล
- */
-onMounted(() => {
-  fetchData();
-});
-
-/**
- * get ข้อมูลเก่ากรณีแก้ไขข้อมูล
- */
-const data = reactive<FormData>({
-  personalId: "",
-  prefix: "",
-  firstname: "",
-  lastname: "",
-  position: "",
-  phone: "",
-  email: "",
-  qualification: "",
-});
-
-/**
- * ดึงค่าจาก api
- */
-const fetchData = async () => {
-  showLoader();
-  await http
-    // .get(config.API.evaluateDirectorById(personalId.value))
-    .get(config.API.evaluateDirectorById(id.value))
-    .then((res) => {
-      const dataApi = res.data.result;
-      data.personalId = dataApi.Id;
-      data.prefix = dataApi.prefix;
-      data.firstname = dataApi.firstName;
-      data.lastname = dataApi.lastName;
-      data.position = dataApi.position;
-      data.phone = dataApi.phone;
-      data.email = dataApi.email;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-/**
- * บันทึกข้อมูลที่เเก้ไข
- * @param id ระบุ บุคคล
- */
-function onSubmit(formData: FormData) {
-  dialogConfirm($q, () => putData(formData));
-}
-
-function putData(formData: FormData) {
-  showLoader();
-  http
-    // .put(config.API.evaluateDirectorById(personalId.value), {
-    .put(config.API.evaluateDirectorById(id.value), {
-      prefix: formData.prefix,
-      firstName: formData.firstname,
-      lastName: formData.lastname,
-      position: formData.position,
-      email: formData.email,
-      phone: formData.phone,
-    })
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      router.push(`/evaluate/director`);
-    });
-}
-</script>
-<template>
-  <div class="col-xs-12 col-sm-12 col-md-11">
-    <div class="toptitle col-12 row items-center">
-      <q-btn
-        icon="mdi-arrow-left"
-        unelevated
-        round
-        dense
-        flat
-        color="primary"
-        class="q-mr-sm"
-        @click="router.push(`/evaluate/director`)"
-      />
-      แก้ไขรายชื่อกรรมการ
-    </div>
-
-    <Form :on-submit="onSubmit" :data="data" />
-  </div>
-</template>

src/modules/12_evaluatePersonal/components/Director/Form.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, watch, onMounted, computed } from "vue";
+import { ref, reactive, watch, onMounted, computed, type PropType } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -14,6 +14,7 @@ import type {
   ResponsePreson,
   tableType,
 } from "@/modules/11_discipline/interface/request/Director";
+import type { Pagination } from "@/modules/12_evaluatePersonal/interface/index/Main";
 
 /**
  * importComponenst
@@ -37,7 +38,7 @@ const { showLoader, hideLoader, messageError } = useCounterMixin();
 const actionType = defineModel<string>("actionType", { default: "" });
 const props = defineProps({
   data: {
-    type: Object,
+    type: Object as PropType<FormData>,
     default: null,
   },
   onSubmit: {
@@ -47,7 +48,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["formDataReturn"]);
 
-const isReadonly = computed(() => (actionType.value === "VIEW" ? true : false));
+const isReadonly = computed(() => (actionType.value === "VIEW" ? true : false)); //อ่านอย่างเดียว
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
 const type = ref<string>("citizenId");
@@ -63,13 +64,12 @@ const typeOps = ref<typeOp[]>([
  */
 const formData = reactive<FormData>({
   personalId: "",
-  prefix: "",
-  firstname: "",
-  lastname: "",
-  position: "",
-  phone: "",
-  email: "",
-  qualification: "",
+  prefix: "", //คำนำหน้า
+  firstname: "", //ชื่อ
+  lastname: "", //นามสกุล
+  position: "", //ตำแหน่ง
+  phone: "", //เบอร์โทร
+  email: "", //อีเมล
 });
 
 /**
@@ -207,7 +207,7 @@ function searchInput() {
 /**
  * เลืือกชื่อกรรมการ
  */
-function returnDetail(data: any) {
+function returnDetail(data: ResponsePreson) {
   formData.prefix = data.prefix;
   formData.firstname = data.firstName;
   formData.lastname = data.lastName;
@@ -232,7 +232,7 @@ function updatemodalPersonal(modal: boolean) {
   modalPersonal.value = modal;
 }
 
-function updatePagination(newPagination: any) {
+function updatePagination(newPagination: Pagination) {
   pagination.value.page = 1;
   pagination.value.rowsPerPage = newPagination.rowsPerPage;
 }
@@ -244,7 +244,7 @@ watch(
   }
 );
 
-function fetchForm(data: any) {
+async function fetchForm(data: FormData) {
   formData.prefix = data.prefix;
   formData.firstname = data.firstname;
   formData.lastname = data.lastname;
@@ -265,7 +265,7 @@ onMounted(() => {
     showLoader();
     setTimeout(async () => {
       await fetchForm(props.data);
-      await hideLoader();
+      hideLoader();
     }, 1000);
   }
 });
@@ -273,9 +273,9 @@ onMounted(() => {
 <template>
   <q-form greedy @submit.prevent @validation-success="onSubmit">
     <q-card bordered>
-      <div class="col-12 row q-pa-md">
+      <q-card-section>
         <div class="row col-12 q-col-gutter-md">
-          <div class="col-12 q-gutter-y-sm" v-if="data === null">
+          <div class="col-12 q-col-gutter-y-sm" v-if="data === null">
             <div class="row q-col-gutter-md items-start">
               <div class="col-12 col-sm-6 col-md-3">
                 <q-select
@@ -390,7 +390,7 @@ onMounted(() => {
                       </div>
 
                       <div v-else>
-                        {{ col.value }}
+                        {{ col.value ?? "-" }}
                       </div>
                     </q-td>
                   </q-tr>
@@ -398,6 +398,7 @@ onMounted(() => {
               </d-table>
             </div>
           </div>
+
           <div :class="actionType !== '' ? 'col-12' : 'col-3'">
             <q-input
               :class="inputEdit(isReadonly)"
@@ -413,6 +414,7 @@ onMounted(() => {
               lazy-rules
             />
           </div>
+
           <div :class="actionType !== '' ? 'col-12' : 'col-3'">
             <q-input
               :class="inputEdit(isReadonly)"
@@ -428,6 +430,7 @@ onMounted(() => {
               lazy-rules
             />
           </div>
+
           <div :class="actionType !== '' ? 'col-12' : 'col-3'">
             <q-input
               :class="inputEdit(isReadonly)"
@@ -443,6 +446,7 @@ onMounted(() => {
               lazy-rules
             />
           </div>
+
           <div :class="actionType !== '' ? 'col-12' : 'col-3'">
             <q-input
               :class="inputEdit(isReadonly)"
@@ -458,6 +462,7 @@ onMounted(() => {
               lazy-rules
             />
           </div>
+
           <div :class="actionType !== '' ? 'col-12' : 'col-3'">
             <q-input
               :class="inputEdit(isReadonly)"
@@ -473,6 +478,7 @@ onMounted(() => {
               hide-bottom-space
             />
           </div>
+
           <div :class="actionType !== '' ? 'col-12' : 'col-3'">
             <q-input
               :class="inputEdit(isReadonly)"
@@ -487,10 +493,11 @@ onMounted(() => {
             />
           </div>
         </div>
-      </div>
+      </q-card-section>
+
       <q-separator v-if="!isReadonly" />
-      <div class="row col-12 q-pa-sm" v-if="!isReadonly">
-        <q-space />
+
+      <q-card-actions align="right" v-if="!isReadonly">
         <q-btn
           for="ButtonOnSubmit"
           id="formSubmit"
@@ -499,7 +506,7 @@ onMounted(() => {
           type="onSubmit"
           ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
         >
-      </div>
+      </q-card-actions>
     </q-card>
   </q-form>
 

src/modules/12_evaluatePersonal/components/Director/MainPage.vue

@@ -25,9 +25,9 @@ const dataStore = useEvaluateDirectorDataStore();
 const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader, dialogRemove, success } = mixin;
 
-const modalDetail = ref<boolean>(false);
-const directorId = ref<string>("");
-const actionType = ref<string>("");
+const modalDetail = ref<boolean>(false); //แสดงรายละเอียด
+const directorId = ref<string>(""); //id กรรมการ
+const actionType = ref<string>(""); //แก้ไข ,รายละเอียด
 
 /**
  *pagination ของตาราง
@@ -41,12 +41,12 @@ const pagination = ref({
 /**
  * function fetch ข้อมูลรายการชื่อกรรมการ
  */
-function getList() {
+async function getList() {
   showLoader();
-  http
+  await http
     .get(config.API.evaluateDirectorMain())
-    .then((res) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       dataStore.fetchData(data);
     })
     .catch((e) => {
@@ -64,10 +64,10 @@ function getList() {
 function clickDelete(id: string) {
   dialogRemove($q, async () => {
     showLoader();
-    http
+    await http
       .delete(config.API.evaluateDirectorById(id))
       .then(async () => {
-        getList();
+        await getList();
         success($q, "ลบข้อมูลสำเร็จ");
       })
       .catch((e) => {
@@ -104,6 +104,7 @@ function resetFilter() {
 }
 
 onMounted(() => {
+  dataStore.rows = [];
   getList();
 });
 </script>
@@ -242,8 +243,8 @@ onMounted(() => {
   <!-- รายละเอียด -->
   <DialogDetail
     v-model:modal="modalDetail"
-    :directorId="directorId"
-    :actionType="actionType"
-    :fetchDataList="getList"
+    :director-id="directorId"
+    :action-type="actionType"
+    :fetch-data-list="getList"
   />
 </template>