Refactoring code module 12_evaluatePersonal

src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardDirector.vue

@@ -1,27 +1,24 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
-import { checkPermission } from "@/utils/permissions";
-import http from "@/plugins/http";
-import config from "@/app.config";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 /** importType*/
 import type { QTableProps } from "quasar";
 import type { Director } from "@/modules/11_discipline/interface/request/Disciplinary";
+import type { Directors } from "@/modules/12_evaluatePersonal/interface/response/Main";
 
 /** importComponents*/
 import DialogDirector from "@/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogDirector.vue";
 
-/** import store*/
-import { useCounterMixin } from "@/stores/mixin";
-
 /**use*/
-const route = useRoute();
-const id = ref<string>(route.params.id as string);
-const mixin = useCounterMixin();
 const $q = useQuasar();
-
+const route = useRoute();
+const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, dialogConfirm, success } = mixin;
 
 const props = defineProps({
@@ -29,13 +26,16 @@ const props = defineProps({
     type: Array,
     default: [],
   },
-  fetchdata: {
+  fetchData: {
     type: Function,
     default: () => "",
   },
 });
 
-/** คอลัมน์ กรรมการ */
+const id = ref<string>(route.params.id as string);
+
+/** Table กรรมการ */
+const rows = ref<Director[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -83,20 +83,26 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const rows = ref<Director[]>([]);
 
-const modalAddDirector = ref<boolean>(false);
-const filter = ref<string>("");
-const page = ref<number>(1);
-const rowsPerPage = ref<number>(10);
-const maxPage = ref<number>(1);
-const listDirector = ref<any>([]);
+//เลือกรายชื่อกรรมการ
+const modalAddDirector = ref<boolean>(false); // popup เพิ่มรายชื่อกรรมการ
+const filter = ref<string>(""); //ค้นหารายชื่อกรรมการ
+const page = ref<number>(1); //หน้า
+const rowsPerPage = ref<number>(10); //จำนวนต่อหน้า
+const maxPage = ref<number>(1); //จำนนวนหน้าทั้งหมด
+const listDirector = ref<Directors[]>([]); //รายชื่อกรรมการ
 
+/**
+ * ฟังก์เปิด popup เพิ่มรายชื่อกรรมการ
+ */
 async function onClickAdd() {
   modalAddDirector.value = true;
   getList();
 }
 
+/**
+ * ฟังก์ปิด popup เพิ่มรายชื่อกรรมการ
+ */
 function onClickClose() {
   modalAddDirector.value = false;
 }
@@ -115,8 +121,8 @@ async function updatePaging(rpp: number, p: number) {
  * function return รายชื่อกรรมการที่เลือก
  * @param data รายชื่อกรรมการที่เลือก
  */
-function returnDirector(data: any) {
-  const dataList = data.map((item: any) => item.id);
+function returnDirector(data: Directors[]) {
+  const dataList = data.map((item: Directors) => item.id);
   dialogConfirm($q, () => {
     showLoader();
     http
@@ -124,7 +130,7 @@ function returnDirector(data: any) {
         directors: dataList,
       })
       .then(async () => {
-        await props.fetchdata();
+        await props.fetchData();
         await success($q, "บันทึกสำเร็จ");
         onClickClose();
       })
@@ -137,14 +143,16 @@ function returnDirector(data: any) {
   });
 }
 
-/** function เรียกรายชื่อกรรมการ*/
+/**
+ * function เรียกรายชื่อกรรมการ
+ */
 async function getList() {
   showLoader();
   await http
     .get(config.API.evaluateDirectorMain() + `/admin`)
-    .then((res) => {
-      const data = res.data.result;
-      listDirector.value = data.map((item: any) => ({
+    .then(async (res) => {
+      const data = await res.data.result;
+      listDirector.value = data.map((item: Directors) => ({
         id: item.id,
         name: `${item.prefix}${item.firstName} ${item.lastName}`,
         createdAt: item.createdAt,
@@ -168,6 +176,10 @@ async function getList() {
       hideLoader();
     });
 }
+
+/**
+ * ทำงานเมื่อ props.data มีการเปลี่ยนแปลง
+ */
 watch(
   () => props.data,
   () => {
@@ -245,16 +257,16 @@ watch(
   </q-card>
 
   <DialogDirector
-    v-model:Modal="modalAddDirector"
-    :clickClose="onClickClose"
-    :rows2="listDirector"
-    v-model:filterKeyword2="filter"
-    :rowsPerPage="rowsPerPage"
-    :page="page"
-    :maxPage="maxPage"
-    :selected-row="rows"
     @update:pagination="updatePaging"
-    @returnDirector="returnDirector"
+    @return-director="returnDirector"
+    v-model:Modal="modalAddDirector"
+    v-model:filter-keyword2="filter"
+    :click-close="onClickClose"
+    :rows2="listDirector"
+    :rows-per-page="rowsPerPage"
+    :page="page"
+    :max-page="maxPage"
+    :selected-row="rows"
   />
 </template>
 

src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardMeet.vue

@@ -10,27 +10,16 @@ import config from "@/app.config";
 /** importComponents*/
 import DialogMeet from "@/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogMeet.vue";
 
+import type { Meeting } from "@/modules/12_evaluatePersonal/interface/index/Main";
+import type { Meetings } from "@/modules/12_evaluatePersonal/interface/response/Main";
+
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
-const route = useRoute();
-const id = ref<string>(route.params.id as string);
-const mixin = useCounterMixin();
 const $q = useQuasar();
-
-/** props*/
-const props = defineProps({
-  data: {
-    type: Array,
-    default: [],
-  },
-  fetchdata: {
-    type: Function,
-    default: () => "",
-  },
-});
-
+const route = useRoute();
+const mixin = useCounterMixin();
 const {
   showLoader,
   hideLoader,
@@ -40,6 +29,21 @@ const {
   success,
 } = mixin;
 
+/** props*/
+const props = defineProps({
+  data: {
+    type: Array,
+    default: [],
+  },
+  fetchData: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+const id = ref<string>(route.params.id as string);
+
+const rows = ref<Meeting[]>([]); //รายการประชุม
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -109,26 +113,30 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const rows = ref<any[]>([]);
 
-const modalAdd = ref<boolean>(false);
-const filter = ref<string>("");
-const page = ref<number>(1);
-const rowsPerPage = ref<number>(10);
-const maxPage = ref<number>(1);
-const listMeet = ref<any>([]);
+const modalAdd = ref<boolean>(false); //เพิ่มรายการประชุม
+const filter = ref<string>(""); //ค้นหารายการประชุม
+const page = ref<number>(1); //หน้า
+const rowsPerPage = ref<number>(10); //จำนวนต่อหน้า
+const maxPage = ref<number>(1); //จำนนวนหน้าทั้งหมด
+const listMeet = ref<Meetings[]>([]); //รายชื่อประชุม
 
+/**
+ * ฟังก์เปิด popup เพิ่มการประชุม
+ */
 function onClickAdd() {
   modalAdd.value = true;
   getList();
 }
-
+/**
+ * ฟังก์ปิด popup เพิ่มการประชุม
+ */
 function onClickClose() {
   modalAdd.value = false;
 }
 
 /**
- * function อัดเดท Paging กรรมการ
+ * function อัดเดท Paging การประชุม
  * @param rpp ต่อหน้า
  * @param p หน้า
  */
@@ -141,8 +149,8 @@ async function updatePaging(rpp: number, p: number) {
  * function return รายชื่อกรรมการที่เลือก
  * @param data รายชื่อกรรมการที่เลือก
  */
-function returnData(data: any) {
-  const dataList = data.map((item: any) => item.id);
+function returnData(data: Meetings[]) {
+  const dataList = data.map((item: Meetings) => item.id);
   dialogConfirm($q, () => {
     showLoader();
     http
@@ -150,9 +158,9 @@ function returnData(data: any) {
         meetings: dataList,
       })
       .then(async () => {
-        await props.fetchdata();
+        await props.fetchData();
         await success($q, "บันทึกสำเร็จ");
-        await onClickClose();
+        onClickClose();
       })
       .catch((e) => {
         messageError($q, e);
@@ -170,7 +178,7 @@ async function getList() {
     .get(config.API.meeting() + `/admin`)
     .then((res) => {
       const data = res.data.result;
-      listMeet.value = data.map((item: any) => ({
+      listMeet.value = data.map((item: Meetings) => ({
         id: item.id,
         createdAt: item.createdAt,
         createdUserId: item.createdUserId,

src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogDirector.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watchEffect, watch, type PropType } from "vue";
+import { ref, watchEffect, watch, type PropType } from "vue";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -43,7 +43,7 @@ const props = defineProps({
   },
 });
 
-const currentPage = ref<number>(1);
+const currentPage = ref<number>(1); //หน้าปัจจุบัน
 
 /** ค้นหาคอลัม */
 const visibleColumns2 = ref<string[]>([
@@ -53,7 +53,6 @@ const visibleColumns2 = ref<string[]>([
   "email",
   "phone",
 ]);
-
 // หัวตาราง
 const columns2 = ref<QTableProps["columns"]>([
   {
@@ -109,13 +108,6 @@ const pagination = ref({
   page: Number(props.page),
   rowsPerPage: props.rowsPerPage,
 });
-
-const checkSelected = computed(() => {
-  if (selected.value.length === 0) {
-    return true;
-  }
-});
-
 const emit = defineEmits([
   "update:filterKeyword2",
   "update:selected",
@@ -128,21 +120,34 @@ async function directorSave() {
   emit("returnDirector", selected.value);
 }
 
+/**
+ * ฟังก์ชันอัปเดทคำค้นหา
+ * @param value  คำค้นหา
+ */
 function updateInput(value: any) {
   emit("update:filterKeyword2", value);
 }
 
-/**รีเซ็ตค่าในช่องค้นหา */
+/**
+ * รีเซ็ตค่าในช่องค้นหา
+ */
 function Reset() {
   emit("update:filterKeyword2", "");
 }
 
-function updateProp(newPagination: any, page: number) {
+/**
+ *
+ * @param newPagination
+ * @param page
+ */
+function updateProp(newPagination: number, page: number) {
   // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
   emit("update:pagination", newPagination, page);
 }
 
-/** เช็คค่า props.Modal === true */
+/**
+ * เช็คค่า props.Modal === true
+ */
 watchEffect(() => {
   if (props.Modal === true) {
     selected.value = props.selectedRow;
@@ -152,7 +157,9 @@ watchEffect(() => {
 watch(
   () => currentPage.value,
   () => {
-    updateProp(pagination.value.rowsPerPage, currentPage.value);
+    if (pagination.value.rowsPerPage) {
+      updateProp(pagination.value.rowsPerPage, currentPage.value);
+    }
   }
 );
 
@@ -160,7 +167,9 @@ watch(
   () => pagination.value.rowsPerPage,
   () => {
     currentPage.value = 1;
-    updateProp(pagination.value.rowsPerPage, currentPage.value);
+    if (pagination.value.rowsPerPage) {
+      updateProp(pagination.value.rowsPerPage, currentPage.value);
+    }
   }
 );
 </script>
@@ -241,7 +250,7 @@ watch(
         <q-btn
           label="เพิ่มรายชื่อกรรมการ"
           @click="directorSave"
-          :disable="checkSelected"
+          :disable="selected.length === 0"
           color="public"
         />
       </q-card-actions>

src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogMeet.vue

@@ -1,16 +1,13 @@
 <script setup lang="ts">
-import { ref, computed, watchEffect, watch, type PropType } from "vue";
+import { ref, watchEffect, watch, type PropType } from "vue";
 
 /** importType*/
 import type { QTableProps } from "quasar";
-import type { directorType } from "@/modules/11_discipline/interface/index/Main";
+import type { Meeting } from "@/modules/12_evaluatePersonal/interface/index/Main";
 
 /** importComponents*/
 import DialogHeader from "@/components/DialogHeader.vue";
 
-const selected = ref<directorType[]>([]);
-const currentPage = ref<number>(1);
-
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   Modal: Boolean,
@@ -39,7 +36,7 @@ const props = defineProps({
     default: () => "",
   },
   selectedRow: {
-    type: Array as PropType<directorType[]>,
+    type: Array as PropType<Meeting[]>,
     required: true,
   },
 });
@@ -52,6 +49,9 @@ const emit = defineEmits([
   "returnDirector",
 ]);
 
+const selected = ref<Meeting[]>([]);
+const currentPage = ref<number>(1);
+
 /**ข้อมูลหัว ตาราง*/
 const columns = ref<QTableProps["columns"]>([
   {
@@ -130,12 +130,6 @@ const pagination = ref({
   rowsPerPage: props.rowsPerPage,
 });
 
-const checkSelected = computed(() => {
-  if (selected.value.length === 0) {
-    return true;
-  }
-});
-
 /** เลือกกรรมการ */
 async function onClickAddMeet() {
   emit("returnDirector", selected.value);
@@ -150,7 +144,7 @@ function Reset() {
   emit("update:filterKeyword2", "");
 }
 
-function updateProp(newPagination: any, page: number) {
+function updateProp(newPagination: number, page: number) {
   // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
   emit("update:pagination", newPagination, page);
 }
@@ -165,7 +159,9 @@ watchEffect(() => {
 watch(
   () => currentPage.value,
   () => {
-    updateProp(pagination.value.rowsPerPage, currentPage.value);
+    if (pagination.value.rowsPerPage) {
+      updateProp(pagination.value.rowsPerPage, currentPage.value);
+    }
   }
 );
 
@@ -173,7 +169,9 @@ watch(
   () => pagination.value.rowsPerPage,
   () => {
     currentPage.value = 1;
-    updateProp(pagination.value.rowsPerPage, currentPage.value);
+    if (pagination.value.rowsPerPage) {
+      updateProp(pagination.value.rowsPerPage, currentPage.value);
+    }
   }
 );
 </script>
@@ -253,7 +251,7 @@ watch(
         <q-btn
           label="เพิ่มการประชุม"
           @click="onClickAddMeet"
-          :disable="checkSelected"
+          :disable="selected.length === 0"
           color="public"
         />
       </q-card-actions>