Refactoring code module 02_organization

src/modules/02_organization/components/DialogNewStructure.vue

@@ -1,8 +1,11 @@
 <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";
+import { useOrganizational } from "@/modules/02_organization/store/organizational";
 
 /**
  * importType
@@ -17,12 +20,6 @@ import type {
 /** importComponents*/
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-import { useOrganizational } from "@/modules/02_organization/store/organizational";
-
 /**
  * use
  */
@@ -45,6 +42,7 @@ const props = defineProps({
   },
 });
 
+//ตัวเลือกการเพิ่มโครงสร้าง
 const typeOp = ref<DataOption[]>([
   {
     id: "NEW",
@@ -64,10 +62,7 @@ const typeOp = ref<DataOption[]>([
   },
 ]);
 
-const orgRevisionNameRef = ref<Object | null>(null);
-const typeRef = ref<Object | null>(null);
-const orgRevisionIdRef = ref<Object | null>(null);
-
+//ฟอร์มเพิ่มโครงสร้าง
 const formData = reactive<FormDataNewStructure>({
   orgRevisionId: "",
   orgRevisionName: "",
@@ -75,42 +70,14 @@ const formData = reactive<FormDataNewStructure>({
 });
 
 /**
- * maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ
- */
-const objectRef: FormNewStructureRef = {
-  orgRevisionName: orgRevisionNameRef,
-  type: typeRef,
-  orgRevisionId: orgRevisionIdRef,
-};
-
-/**
- * ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม
- */
-function validateForm() {
-  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);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    onSubmit();
-  }
-}
-
-/**
- * ฟังชั่น บันทึก
+ * ฟังก์ชันยืนยันการบันทึกการกสร้างโครงสร้าง
  */
 function onSubmit() {
   dialogConfirm(
     $q,
-    () => {
+    async () => {
       showLoader();
-      http
+      await http
         .post(config.API.createOrganization, formData)
         .then(async (res) => {
           await props.fetchActive();
@@ -119,14 +86,13 @@ function onSubmit() {
           store.draftId = res.data.result.id;
           store.statusView = "list";
           success($q, "บันทึกข้อมูลสำเร็จ");
+          close();
         })
         .catch((err) => {
           messageError($q, err);
         })
         .finally(() => {
-          modal.value = false;
           hideLoader();
-          close();
         });
     },
     "ยืนยันการเพิ่มโครงสร้าง",
@@ -137,7 +103,7 @@ function onSubmit() {
 }
 
 /**
- * ฟังชั่น ปิด popup
+ * ฟังก์ชัน ปิด popup และกำหนดฟอร์มเพิ่มโครงสร้างเป็น Default
  */
 function close() {
   modal.value = false;
@@ -147,7 +113,7 @@ function close() {
 }
 
 /**
- * เรียกข้อมูล
+ * ฟังก์ชันเรียกข้อมูลประวัติโครงสร้าง
  */
 function fetchOrgRevision() {
   showLoader();
@@ -159,7 +125,7 @@ function fetchOrgRevision() {
       );
       if (data) {
         const currentStr = await data.find(
-          (x: any) => x.orgRevisionIsCurrent === true
+          (x: HistoryType) => x.orgRevisionIsCurrent === true
         );
         formData.orgRevisionId = currentStr ? currentStr.orgRevisionId : null;
       }
@@ -172,6 +138,11 @@ function fetchOrgRevision() {
     });
 }
 
+/**
+ * ดูการเปลี่ยนแปลง  modal เมื่อเป็น true
+ *
+ * type ไม่เป็นการสร้างใหม่ให้เรียกข้อมูลประวัติโครงสร้าง
+ */
 watch(
   () => modal.value,
   () => {
@@ -184,7 +155,7 @@ watch(
   <template>
     <q-dialog v-model="modal" persistent>
       <q-card style="min-width: 50vw">
-        <form @submit.prevent="validateForm">
+        <q-form greedy @submit.prevent @validation-success="onSubmit">
           <DialogHeader :tittle="`เพิ่มโครงสร้าง`" :close="close" />
           <q-separator />
 
@@ -227,7 +198,7 @@ watch(
           <q-card-actions align="right" class="bg-white text-teal">
             <q-btn type="submit" :label="`บันทึก`" color="public" />
           </q-card-actions>
-        </form>
+        </q-form>
       </q-card>
     </q-dialog>
   </template>