ปรับ โหลดประเภทคำสั่ง

src/modules/18_command/components/Main/DialogFormCommand.vue

@@ -3,6 +3,8 @@ import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useCommandListStore } from "@/modules/18_command/store/ListStore";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -11,44 +13,34 @@ import type { DataCommandType } from "@/modules/18_command/interface/response/Ma
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
-import { useCounterMixin } from "@/stores/mixin";
-
 const $q = useQuasar();
 const router = useRouter();
+const store = useCommandListStore();
 const { dialogConfirm, showLoader, hideLoader, messageError, success } =
   useCounterMixin();
 
-const modal = defineModel<boolean>("modal", { required: true });
-const isCopy = defineModel<boolean>("isCopy", { required: true });
-const commandId = defineModel<string>("commandId", { default: "" });
+/** props*/
+const modal = defineModel<boolean>("modal", { required: true }); //เปิด,ปิด Popup
+const isCopy = defineModel<boolean>("isCopy", { required: true }); //สถานะทำสำเนา
+const commandId = defineModel<string>("commandId", { default: "" }); // id ประเภทคำสั่งที่คำสำเนา
 
-const commandType = ref<string>("");
-const commandNo = ref<string>("");
-const commandYear = ref<number>(new Date().getFullYear());
+const commandType = ref<string>(""); //ประเภทคำสั่ง
+const commandNo = ref<string>(""); //คำสั่งเลขที่
+const commandYear = ref<number>(new Date().getFullYear()); //ปี
 
-const listCommand = ref<DataCommandType[]>([]);
-const commandOp = ref<DataCommandType[]>([]);
+const listCommand = ref<DataCommandType[]>([]); //ข้อมูลรายการประเภทคำสั่ง
+const commandOp = ref<DataCommandType[]>([]); //ตัวเลือกประเภทคำสั่ง
 
+/** ฟังก์ชันดึงข้อมูลปรเภทคำสั่ง*/
 async function fetchCommandType() {
-  showLoader();
-  await http
-    .get(config.API.commandType)
-    .then(async (res) => {
-      const data = await res.data.result;
-      listCommand.value = data.map((e: DataCommandType) => ({
-        id: e.id,
-        name: e.subtitle ? `${e.name}(${e.subtitle})` : `${e.name}`,
-      }));
-      commandOp.value = listCommand.value;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+  const data = await store.fetchCommandType();
+  if (data) {
+    listCommand.value = data;
+    commandOp.value = data;
+  }
 }
 
+/** ฟังก์ชันยืนยันการบันทึกข้อมูล */
 function onSubmit() {
   dialogConfirm($q, () => {
     showLoader();
@@ -77,29 +69,36 @@ function onSubmit() {
   });
 }
 
-function filterSelector(val: string, update: Function, refData: string) {
-  switch (refData) {
-    case "OrderTypeOption":
-      update(() => {
-        commandType.value = val ? "" : commandType.value;
-        commandOp.value = listCommand.value.filter(
-          (v: any) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-
-    default:
-      break;
-  }
+/**
+ * ฟังก์ชันค้นหาข้อมูลรายการประเภทคำสั่ง
+ * @param val คำที่ค้องการค้นหา
+ * @param update function จาก quasar
+ */
+function filterSelector(val: string, update: Function) {
+  update(() => {
+    commandType.value = val ? "" : commandType.value;
+    commandOp.value = listCommand.value.filter(
+      (v: any) => v.name.indexOf(val) > -1
+    );
+  });
 }
 
+/**
+ * ฟังก์ชันปิด Popup
+ * และกำหนด  commandNo commandYear เป็นค่า Defult
+ * */
 function onClose() {
   modal.value = false;
   commandNo.value = "";
   commandYear.value = new Date().getFullYear();
 }
 
+/**
+ * ดูการเปลี่ยนแปลงของ modal
+ * เมื่อ  modal เป็น True และ isCopy เป็น False จะเรียก ฟังก์ชัน fetchCommandType เพื่อดึงข้อมูลปรเภทคำสั่ง
+ */
 watch(modal, () => {
+  //เช็คค่าของ modal และ isCopy
   if (modal.value && !isCopy.value) {
     fetchCommandType();
   }
@@ -134,8 +133,7 @@ watch(modal, () => {
                 outlined
                 :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
                 @filter="(inputValue:any,
-                    doneFn:Function) => filterSelector(inputValue, doneFn,'OrderTypeOption'
-                    ) "
+                    doneFn:Function) => filterSelector(inputValue, doneFn) "
               >
                 <template v-slot:no-option>
                   <q-item>

src/modules/18_command/store/ListStore.ts

@@ -1,7 +1,18 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
+import { useQuasar } from "quasar";
 
-import type { DataListCommand } from "@/modules/18_command/interface/response/Main";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  DataListCommand,
+  DataCommandType,
+} from "@/modules/18_command/interface/response/Main";
+
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
 
 export const useCommandListStore = defineStore("commandListStore", () => {
   const tabsMain = ref<string>("DRAFT");
@@ -9,10 +20,42 @@ export const useCommandListStore = defineStore("commandListStore", () => {
   const total = ref<number>(0);
   const maxPage = ref<number>(0);
 
+  const listCommand = ref<DataCommandType[]>([]); //รายการข้อมูลปรเภทคำสั่ง
+
+  /**
+   * ฟังก์ชันดึงข้อมูลปรเภทคำสั่งจาก API
+   * ถ้า 'listCommand' ยังไม่มีข้อมูล จะเรียก Call API เพื่อดึงข้อมูลประเภทคำสั่ง
+   * @returns รายการประเภทคำสั่ง
+   */
+  async function fetchCommandType() {
+    //เช็คค่าของ listCommand
+    if (listCommand.value.length === 0) {
+      showLoader();
+      try {
+        const res = await http.get(config.API.commandType);
+        const data = res.data.result;
+
+        listCommand.value = data.map((e: DataCommandType) => ({
+          id: e.id,
+          name: e.subtitle ? `${e.name} (${e.subtitle})` : e.name,
+        }));
+
+        return listCommand.value;
+      } catch (err) {
+        messageError($q, err);
+      } finally {
+        hideLoader();
+      }
+    } else {
+      return listCommand.value;
+    }
+  }
+
   return {
     tabsMain,
     rows,
     total,
     maxPage,
+    fetchCommandType,
   };
 });