Refactoring code module 04_registryPerson

src/modules/04_registryPerson/components/requestEdit/DialogStatus.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { reactive, ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
+import { useCounterMixin } from "@/stores/mixin";
 
 import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
 
@@ -11,12 +14,6 @@ import type { DataOption } from "@/modules/04_registryPerson/interface/index/Mai
  */
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/**
- * importStore
- */
-import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
-import { useCounterMixin } from "@/stores/mixin";
-
 /**
  * use
  */
@@ -28,40 +25,43 @@ const { dialogConfirm, showLoader, hideLoader, messageError, success } =
 /**
  *  props
  */
-const modal = defineModel<boolean>("modal", { required: true });
-const requestId = defineModel<string>("requestId", { required: true });
+const modal = defineModel<boolean>("modal", { required: true }); //เปิด,ปิด popup แก้ไขสถานะคำร้อง
+const requestId = defineModel<string>("requestId", { required: true }); // id ที่ต้องการแก้ไข
 const props = defineProps({
-  fetchData: { type: Function, requied: true },
+  fetchData: { type: Function, requied: true }, // ดึงข้อมูลรายการคำร้องขอแก้ไขทะเบียนประวัติ
 });
-
-const isReadOnly = ref<boolean>(false);
+const isReadOnly = ref<boolean>(false); //อ่ายได้อย่างเดียว
+//ฟอร์มสถานะคำร้อง
 const formData = reactive({
-  status: "",
-  remark: "",
+  status: "", //สถานะ
+  remark: "", //หมายเหตุ
 });
+//ข้อมูลรายการสถานะ
 const statusOptionMain = ref<DataOption[]>(
   store.optionStatus.filter((e) => e.id !== "")
 );
-const statusOption = ref<DataOption[]>(statusOptionMain.value);
+const statusOption = ref<DataOption[]>(statusOptionMain.value); //ตัวเลือกรายการสถานะ
 
 /**
  * function บันทึกรายการคำร้อง
  */
 function onSubmit() {
-  dialogConfirm($q, () => {
+  dialogConfirm($q, async () => {
     showLoader();
-    http
+    await http
       .patch(config.API.requestEdit + `${requestId.value}`, {
         status: formData.status,
         remark: formData.remark,
       })
       .then(async () => {
         await props.fetchData?.();
-        closeDialog();
         await success($q, "บันทึกข้อมูลสำเร็จ");
+        closeDialog();
       })
       .catch((err) => {
         messageError($q, err);
+      })
+      .finally(() => {
         hideLoader();
       });
   });
@@ -76,13 +76,6 @@ function closeDialog() {
   formData.remark = "";
 }
 
-function classInput(val: boolean) {
-  return {
-    "full-width cursor-pointer ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
-
 /**
  * function ค้นหาคำใน select  สถานะคำร้อง
  * @param val คำค้น
@@ -121,6 +114,22 @@ function fetchDataRequest() {
     });
 }
 
+/**
+ * class inpui
+ * @param val ค่าสถานะ
+ */
+function classInput(val: boolean) {
+  return {
+    "full-width cursor-pointer ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+/**
+ * ดูการเปลี่ยนแปลงของ modal
+ *
+ * เมื่อ modal เป็น true ทำการดึงข้อมูลคำร้องแก้ไข
+ */
 watch(
   () => modal.value,
   () => {