Refactoring code module 02_organization

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

@@ -1,13 +1,28 @@
 <script setup lang="ts">
 import { ref, watch, computed } from "vue";
 import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import DialogHeader from "@/components/DialogHeader.vue";
-import type { FormDateTimeRef } from "@/modules/02_organization/interface/index/Main";
-import { useOrganizational } from "@/modules/02_organization/store/organizational";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useOrganizational } from "@/modules/02_organization/store/organizational";
 
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const store = useOrganizational();
+const {
+  dialogConfirm,
+  date2Thai,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+} = useCounterMixin();
+
+/**
+ * porps
+ */
 const props = defineProps({
   modal: Boolean,
   close: Function,
@@ -18,51 +33,20 @@ const props = defineProps({
   },
 });
 
-const store = useOrganizational();
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  dialogConfirm,
-  date2Thai,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-} = mixin;
+const dateTime = ref<Date | null>(null); //เวลาเผยแพร่
 
+/**
+ * กำหนดวันที่เผยแพร่ไม่ให้น้อยกว่าวันปัจจุบัน
+ */
 const minDate = computed(() => {
   const date = new Date();
   date.setDate(date.getDate() + 1);
   return date;
 });
-const dateTimeRef = ref<Object | null>(null);
 
-const dateTime = ref<Date | null>();
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const objectRef: FormDateTimeRef = {
-  dateTime: dateTimeRef,
-};
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-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();
-  } else {
-  }
-}
-
-/** ฟังชั่น บันทึก */
+/**
+ * ฟังก์ชันบันทึกการตั้งเวลาเผยแพร่
+ */
 function onSubmit() {
   dialogConfirm($q, () => {
     showLoader();
@@ -72,8 +56,8 @@ function onSubmit() {
       })
       .then(async () => {
         await props.fetchActive();
-        await props.close?.();
         await success($q, "บันทึกข้อมูลสำเร็จ");
+        props.close?.();
       })
       .catch((e) => {
         messageError($q, e);
@@ -84,6 +68,9 @@ function onSubmit() {
   });
 }
 
+/**
+ * ฟังก์ชันยืนยันการเผยแพร่โครงาสร้าง
+ */
 function onClickPublish() {
   dialogConfirm(
     $q,
@@ -106,20 +93,25 @@ function onClickPublish() {
     "ต้องการยืนยันการเผยเเพร่ข้อมูลนี้ใช่หรือไม่?"
   );
 }
+
+/**
+ * ดูการเปลี่ยนแปลงของ props.modal
+ */
 watch(
   () => props.modal,
   () => {
-    if (props.modal === true) {
+    if (props.modal) {
       dateTime.value = store.orgPublishDate ? store.orgPublishDate : null;
     }
   }
 );
 </script>
+
 <template>
   <template>
     <q-dialog v-model="props.modal" persistent>
       <q-card style="min-width: 18vw">
-        <form @submit.prevent="validateForm">
+        <q-form greedy @submit.prevent @validation-success="onSubmit">
           <DialogHeader :tittle="`ตั้งเวลาเผยแพร่`" :close="props.close" />
           <q-separator />
 
@@ -179,7 +171,7 @@ watch(
             <q-space />
             <q-btn type="submit" :label="`บันทึก`" color="public" />
           </q-card-actions>
-        </form>
+        </q-form>
       </q-card>
     </q-dialog>
   </template>