Refactoring code module 16_positionEmployee

src/modules/16_positionEmployee/components/DialogAddPosition.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 /**
  * importType
@@ -11,7 +13,6 @@ import type {
   ResGroup,
   ResLevel,
 } from "@/modules/01_masterdata/interface/response/positionEmployee/Main";
-import type { ObjectPosRef } from "@/modules/01_masterdata/interface/index/positionEmployee";
 import type { DataOption } from "@/modules/16_positionEmployee/interface/index/Main";
 import type { OptionType } from "@/modules/16_positionEmployee/interface/response/organizational";
 
@@ -20,11 +21,6 @@ import type { OptionType } from "@/modules/16_positionEmployee/interface/respons
  */
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-
 /**
  * use
  */
@@ -44,86 +40,58 @@ const props = defineProps({
   levelOp: Object,
 });
 
-const isDisValidate = ref<boolean>(false);
-const isSpecial = ref<boolean>(false);
+//ข้อมูลตำแหน่ง
 const formDataPos = reactive({
-  posName: "",
-  posTypeName: "",
-  posLevelName: "",
+  posName: "", //ชือตำแหน่ง
+  posTypeName: "", //กลุ่มงาน
+  posLevelName: "", //ระดับชั้นงาน
 });
 
-const posNameRef = ref<object | null>(null);
-const posTypeNameRef = ref<object | null>(null);
-const posLevelNameRef = ref<object | null>(null);
-const objectRef: ObjectPosRef = {
-  posName: posNameRef,
-  posTypeName: posTypeNameRef,
-  posLevelName: posLevelNameRef,
-};
-const posTypeMain = ref<ResGroup[]>([]);
-const posTypeOp = ref<DataOption[]>([]);
-const posLevelOp = ref<DataOption[]>([]);
+const posTypeMain = ref<ResGroup[]>([]); //ข้อมูลกลุ่มงาน
+const posTypeOp = ref<DataOption[]>([]); //รายการกลุ่มงาน
+const posLevelOp = ref<DataOption[]>([]); //รายการระดับชั้นงาน
 
 /**
- * ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม
+ * ฟังก์ชันยืนยันการบันทึกข้อมุล
  */
-function validateFormPositionEdit() {
-  isDisValidate.value = false;
-  const hasError = [];
-  for (const key in objectRef) {
-    if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
-      const property = objectRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
+async function onSubmit() {
+  dialogConfirm($q, async () => {
+    const body = {
+      posDictName: formDataPos.posName,
+      posTypeId: formDataPos.posTypeName,
+      posLevelId: formDataPos.posLevelName,
+    };
+    showLoader();
+    try {
+      const url = !isEditCheck.value
+        ? config.API.orgEmployeePos
+        : config.API.orgEmployeePosById(props?.data?.id);
+      await http[!isEditCheck.value ? "post" : "put"](url, body);
+      await props.emitSearch?.(formDataPos.posName, "positionName");
+      await success($q, "บันทีกข้อมูลสำเร็จ");
+      close();
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
     }
-  }
-  if (hasError.every((result) => result === true)) {
-    dialogConfirm($q, () => {
-      submit();
-    });
-  }
-}
-async function submit() {
-  const body = {
-    posDictName: formDataPos.posName,
-    posTypeId: formDataPos.posTypeName,
-    posLevelId: formDataPos.posLevelName,
-  };
-  showLoader();
-  try {
-    const url = !isEditCheck.value
-      ? config.API.orgEmployeePos
-      : config.API.orgEmployeePosById(props?.data?.id);
-    await http[!isEditCheck.value ? "post" : "put"](url, body);
-    await props.emitSearch?.(formDataPos.posName, "positionName");
-    await success($q, "บันทีกข้อมูลสำเร็จ");
-    await close();
-  } catch (err) {
-    messageError($q, err);
-  } finally {
-    hideLoader();
-  }
+  });
 }
 
-async function clearFormPositionSelect() {
+/**
+ * ฟังก์ชันปิด popup
+ */
+function close() {
+  modal.value = false;
   isEditCheck.value = false;
-  isDisValidate.value = true;
   formDataPos.posName = "";
   formDataPos.posTypeName = "";
   formDataPos.posLevelName = "";
-  isSpecial.value = false;
-  setTimeout(() => {
-    isDisValidate.value = false;
-  }, 1000);
-}
-
-function close() {
-  modal.value = false;
-  clearFormPositionSelect();
 }
 
+/**
+ * ฟังก์ชันดึงข้อมุลกลุ่มงาน
+ */
 async function fetchType() {
   showLoader();
   await http
@@ -143,6 +111,10 @@ async function fetchType() {
     });
 }
 
+/**
+ * ฟังก์ชันหาข้อมูลระดับชั้นงานตามกลุ่มงาน
+ * @param id  กลุ่มงาน
+ */
 function updatePosTypeName(id: string) {
   const posLevel = posTypeMain.value.find((e: ResGroup) => e.id === id);
   posLevelOp.value =
@@ -153,6 +125,9 @@ function updatePosTypeName(id: string) {
   formDataPos.posLevelName = "";
 }
 
+/**
+ * ทำงานเมื่อ modal เป็น true
+ */
 watch(
   () => modal.value,
   async () => {
@@ -175,14 +150,16 @@ watch(
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card style="min-width: 50vw">
-      <DialogHeader
-        :tittle="`${isEditCheck ? `แก้ไขข้อมูลตำแหน่ง` : `เพิ่มข้อมูลตำแหน่ง`}`"
-        :close="close"
-      />
-      <q-separator />
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="`${
+            isEditCheck ? `แก้ไขข้อมูลตำแหน่ง` : `เพิ่มข้อมูลตำแหน่ง`
+          }`"
+          :close="close"
+        />
+        <q-separator />
 
-      <q-card-section class="q-pa-none">
-        <form @submit.prevent="validateFormPositionEdit">
+        <q-card-section class="q-pa-none">
           <div class="row q-col-gutter-sm col-12 q-pa-md">
             <div class="col-12">
               <q-input
@@ -194,7 +171,8 @@ watch(
                 label="ชื่อตำแหน่ง"
                 lazy-rules
                 hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณากรอกชื่อตำแหน่ง'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อตำแหน่ง'}`]"
+                class="inputgreen"
               />
             </div>
 
@@ -212,8 +190,9 @@ watch(
                 option-value="id"
                 lazy-rules
                 hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
                 @update:model-value="updatePosTypeName"
+                class="inputgreen"
               />
             </div>
 
@@ -232,7 +211,8 @@ watch(
                 option-value="id"
                 lazy-rules
                 hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`]"
+                class="inputgreen"
               />
             </div>
           </div>
@@ -245,8 +225,8 @@ watch(
               color="public"
             />
           </q-card-actions>
-        </form>
-      </q-card-section>
+        </q-card-section>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>