Refactor Code ระบบลา

src/modules/09_leave/components/4_specialTime/DialogApprove.vue

@@ -1,28 +1,38 @@
 <script setup lang="ts">
-import { ref, reactive, watchEffect, watch } from "vue";
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
 import type {
   dataRowRound,
   MyObjectRoundRef,
 } from "@/modules/09_leave/interface/response/specialTime";
 import DialogHeader from "@/components/DialogHeader.vue";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
-import http from "@/plugins/http";
-import config from "@/app.config";
 
+/** importStores*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
+
+/** useStore*/
 const SpecialTimeStore = useSpecialTimeStore();
-const $q = useQuasar();
 const mixin = useCounterMixin();
-const {
-  dialogConfirm,
-  date2Thai,
-  showLoader,
-  success,
-  messageError,
-  hideLoader,
-} = mixin;
-const currentDate = ref<Date | null>(new Date());
+const { dialogConfirm, showLoader, success, messageError, hideLoader } = mixin;
+
+const $q = useQuasar();
+
+/** props*/
+const props = defineProps({
+  modal: { type: Boolean, default: "" },
+  editCheck: { type: String, default: "" },
+  date: { type: String, default: "" },
+  dateFix: { type: String, default: "" },
+  id: { type: String, default: "" },
+  closeDialog: { type: Function, default: () => {} },
+  detailData: Object,
+});
+
 const checkInRef = ref<Object | null>(null);
 const checkOutRef = ref<Object | null>(null);
 const checkInStatusRef = ref<Object | null>(null);
@@ -35,8 +45,8 @@ const formData = reactive<dataRowRound>({
   note: "",
   checkInStatus: "",
   checkOutStatus: "",
-  checkInEdit:false,
-  checkOutEdit:false
+  checkInEdit: false,
+  checkOutEdit: false,
 });
 
 const objectRound: MyObjectRoundRef = {
@@ -47,6 +57,7 @@ const objectRound: MyObjectRoundRef = {
   note: reasonRef,
 };
 
+/** function validateFom*/
 function validateForm() {
   const hasError = [];
   for (const key in objectRound) {
@@ -60,37 +71,26 @@ function validateForm() {
   }
   if (hasError.every((result) => result === true)) {
     onSubmit();
-    console.log(hasError);
   } else {
     console.log(hasError);
   }
 }
 
-const props = defineProps({
-  modal: { type: Boolean, default: "" },
-  editCheck: { type: String, default: "" },
-  date: { type: String, default: "" },
-  dateFix: { type: String, default: "" },
-  id: { type: String, default: "" },
-  closeDialog: { type: Function, default: () => {} },
-  detailData: Object,
-});
-
+/** function confrim*/
 function onSubmit() {
   dialogConfirm(
     $q,
     async () => {
-      props.closeDialog?.();
       await approveData();
+      props.closeDialog?.();
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
   );
-  console.log(props.dateFix);
-  console.log(props.id);
 }
 
-const approveData = async () => {
+/** function บันทึกข้อมูล*/
+async function approveData() {
   showLoader();
   const body = {
     checkInTime: formData.checkIn,
@@ -101,27 +101,28 @@ const approveData = async () => {
   };
   await http
     .put(config.API.specialTimeApprove(props.id), body)
-    .then((res) => {
+    .then(() => {
       success($q, "บันทึกข้อมูลสำเร็จ");
     })
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
     })
     .finally(async () => {
       SpecialTimeStore.fetchData();
       hideLoader();
     });
-};
+}
 
+/** function closeDialog*/
 function close() {
   if (props.closeDialog) {
     props.closeDialog();
   }
 }
+
 watch(
   () => props.modal,
-  (newDetailData, oldDetailData) => {
+  () => {
     if (props.editCheck === "APPROVE") {
       formData.checkIn = "";
       formData.checkOut = "";
@@ -202,8 +203,16 @@ watch(
               </template>
             </datepicker>
             <div class="column">
-              <q-checkbox disabled :model-value="formData.checkInEdit" label="ขอแก้ไขเวลาช่วงเช้า" />
-              <q-checkbox disabled :model-value="formData.checkOutEdit" label="ขอแก้ไขเวลาช่วงบ่าย" />
+              <q-checkbox
+                disabled
+                :model-value="formData.checkInEdit"
+                label="ขอแก้ไขเวลาช่วงเช้า"
+              />
+              <q-checkbox
+                disabled
+                :model-value="formData.checkOutEdit"
+                label="ขอแก้ไขเวลาช่วงบ่าย"
+              />
             </div>
           </div>
           <div