ทะเบียนประวัติ: ประกาศเกียรติคุณ (refactor)

src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue

@@ -10,7 +10,6 @@ import { useCounterMixin } from "@/stores/mixin";
 import HistoryTable from "@/components/TableHistory.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 import type { RequestItemsObject } from "@/modules/04_registryNew/interface/request/DeclarationHonor";
-import type { FormData } from "@/modules/04_registryNew/interface/request/DeclarationHonor";
 import type { ResponseObject } from "@/modules/04_registryNew/interface/response/DeclarationHonor";
 
 const $q = useQuasar();
@@ -29,20 +28,18 @@ const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
 
-const declHonorData = reactive<FormData>({
-  id: "",
-  isActive: true,
+const id = ref<string>("");
+const issueDateYear = ref<number>(0);
+const declHonorForm = reactive<RequestItemsObject>({
   isDate: "false",
   issuer: "",
   detail: "",
   issueDate: null,
-  issueDateYear: 0,
   refCommandNo: "",
   refCommandDate: null,
 });
 
 const isEdit = ref<boolean>(false);
-const editRow = ref<boolean>(false);
 const myForm = ref<QForm>();
 const modal = ref<boolean>(false);
 const modelView = ref<string>("table");
@@ -234,21 +231,17 @@ async function addEditData(editStatus: boolean = false) {
   if (!profileId.value) return;
 
   const url = editStatus
-    ? config.API.profileNewHonorById(declHonorData.id)
+    ? config.API.profileNewHonorById(id.value)
     : config.API.profileNewHonor;
   const method = editStatus ? "patch" : "post";
   const reqBody: RequestItemsObject = {
+    ...declHonorForm,
     profileId: editStatus ? undefined : profileId.value,
-    isActive: declHonorData.isActive,
-    detail: declHonorData.detail,
+    isDate: declHonorForm.isDate === "true" ? true : false,
     issueDate:
-      declHonorData.isDate === "true"
-        ? declHonorData.issueDate
-        : new Date(`${declHonorData.issueDateYear}-01-01`),
-    issuer: declHonorData.issuer,
-    refCommandDate: declHonorData.refCommandDate,
-    refCommandNo: declHonorData.refCommandNo,
-    isDate: declHonorData.isDate === "true" ? true : false,
+      declHonorForm.isDate === true
+        ? declHonorForm.issueDate
+        : new Date(`${issueDateYear.value}-01-01`),
   };
 
   try {
@@ -262,57 +255,41 @@ async function addEditData(editStatus: boolean = false) {
   }
 }
 
-async function clickDelete(dataId: string) {
-  try {
-    await http.delete(config.API.profileNewHonorById(dataId));
-    success($q, "ลบข้อมูลสำเร็จ");
-    await fetchData();
-    modal.value = false;
-  } catch (error) {
-    messageError($q, error);
-  } finally {
-    hideLoader();
-  }
-}
+// async function clickDelete(dataId: string) {
+//   try {
+//     await http.delete(config.API.profileNewHonorById(dataId));
+//     success($q, "ลบข้อมูลสำเร็จ");
+//     await fetchData();
+//     modal.value = false;
+//   } catch (error) {
+//     messageError($q, error);
+//   } finally {
+//     hideLoader();
+//   }
+// }
 
 function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
   modal.value = true;
-  editRow.value = false;
   isEdit.value = editStatus;
 
   if (editStatus && row) {
-    Object.assign(declHonorData, row);
-    declHonorData.isDate = row.isDate.toString();
-    declHonorData.issueDate = row.issueDate;
-    declHonorData.issueDateYear = new Date(row.issueDate).getFullYear();
-    declHonorData.refCommandDate = row.refCommandDate;
+    id.value = row.id;
+
+    issueDateYear.value = new Date(row.issueDate).getFullYear();
+    declHonorForm.issuer = row.issuer;
+    declHonorForm.detail = row.detail;
+    declHonorForm.issueDate = row.issueDate;
+    declHonorForm.refCommandNo = row.refCommandNo;
+    declHonorForm.refCommandDate = row.refCommandDate;
+    declHonorForm.isDate = row.isDate ? "true" : "false";
   } else {
-    declHonorData.id = "";
-    declHonorData.isActive = true;
-    declHonorData.issuer = "";
-    declHonorData.detail = "";
-    declHonorData.issueDate = null;
-    declHonorData.issueDateYear = 0;
-    declHonorData.refCommandNo = "";
-    declHonorData.refCommandDate = null;
-    declHonorData.isDate = "false";
+    clearData();
   }
 }
 
 async function clickClose() {
-  if (editRow.value == true) {
-    dialogConfirm(
-      $q,
-      async () => {
-        modal.value = false;
-        editRow.value = false;
-      },
-      "ข้อมูลมีการแก้ไข",
-      "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?"
-    );
-  } else {
-    modal.value = false;
-  }
+  clearData();
+  modal.value = false;
 }
 
 async function clickHistory(row: ResponseObject) {
@@ -334,30 +311,37 @@ function onSubmit() {
   dialogConfirm(
     $q,
     async () => {
-      myForm.value?.validate().then(async (result: boolean) => {
-        if (result) {
-          addEditData(isEdit.value);
-          modal.value = false;
-        }
-      });
+      addEditData(isEdit.value);
+      modal.value = false;
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
   );
 }
 
+function clearData() {
+  id.value = "";
+  issueDateYear.value = 0;
+  declHonorForm.issuer = "";
+  declHonorForm.detail = "";
+  declHonorForm.issueDate = null;
+  declHonorForm.refCommandNo = "";
+  declHonorForm.refCommandDate = null;
+  declHonorForm.isDate = "false";
+}
+
 onMounted(async () => {
   await fetchData();
 });
 
 watch(
-  () => declHonorData.isDate,
+  () => declHonorForm.isDate,
   () => {
-    if (declHonorData.isDate === "true") {
-      declHonorData.issueDateYear = 0;
+    if (declHonorForm.isDate === "true") {
+      issueDateYear.value = 0;
     }
-    if (declHonorData.isDate === "false") {
-      declHonorData.issueDate = null;
+    if (declHonorForm.isDate === "false") {
+      declHonorForm.issueDate = null;
     }
   }
 );
@@ -557,14 +541,14 @@ watch(
 
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 600px">
-      <q-form greedy ref="myForm" @submit="onSubmit">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader tittle="ประกาศเกียรติคุณ" :close="clickClose" />
         <q-separator />
         <q-card-section class="q-p-sm">
           <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
             <div class="row col-12 q-gutter-md q-py-sm text-grey-7">
               <q-radio
-                v-model="declHonorData.isDate"
+                v-model="declHonorForm.isDate as string"
                 checked-icon="task_alt"
                 unchecked-icon="panorama_fish_eye"
                 val="false"
@@ -572,7 +556,7 @@ watch(
                 dense
               />
               <q-radio
-                v-model="declHonorData.isDate"
+                v-model="declHonorForm.isDate as string"
                 checked-icon="task_alt"
                 unchecked-icon="panorama_fish_eye"
                 val="true"
@@ -584,12 +568,12 @@ watch(
               <datepicker
                 autoApply
                 year-picker
-                v-model="declHonorData.issueDateYear"
+                v-model="issueDateYear"
                 week-start="0"
                 menu-class-name="modalfix"
                 :locale="'th'"
                 :enableTimePicker="false"
-                v-if="declHonorData.isDate === 'false'"
+                v-if="declHonorForm.isDate === 'false'"
               >
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{
@@ -599,21 +583,15 @@ watch(
                   <q-input
                     dense
                     outlined
-                    lazy-rules
                     hide-bottom-space
                     class="inputgreen"
-                    :model-value="
-                      declHonorData.issueDateYear
-                        ? declHonorData.issueDateYear + 543
-                        : null
-                    "
+                    :model-value="issueDateYear ? issueDateYear + 543 : null"
                     :rules="[
                       (val:string) =>
                         !!val ||
                         `${'กรุณาเลือกปีที่ได้รับ'}`,
                     ]"
                     :label="`${'ปีที่ได้รับ'}`"
-                    @update:modelValue="() => (editRow = true)"
                   >
                     <template v-slot:prepend>
                       <q-icon
@@ -630,7 +608,7 @@ watch(
                 borderless
                 week-start="0"
                 menu-class-name="modalfix"
-                v-model="declHonorData.issueDate"
+                v-model="declHonorForm.issueDate"
                 :locale="'th'"
                 :enableTimePicker="false"
                 v-else
@@ -649,10 +627,9 @@ watch(
                     for="inputDatereceive"
                     ref="dateReceivedRef"
                     class="inputgreen"
-                    :model-value="date2Thai(declHonorData.issueDate as Date)"
+                    :model-value="date2Thai(declHonorForm.issueDate as Date)"
                     :label="`${'วันที่ได้รับ'}`"
                     :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
-                    @update:modelValue="() => (editRow = true)"
                   >
                     <template v-slot:prepend>
                       <q-icon
@@ -672,9 +649,8 @@ watch(
                 lazy-rules
                 hide-bottom-space
                 class="inputgreen"
-                v-model="declHonorData.issuer"
+                v-model="declHonorForm.issuer"
                 :label="`${'ผู้มีอำนาจลงนาม'}`"
-                @update:modelValue="() => (editRow = true)"
               />
             </div>
             <div class="col-12">
@@ -684,10 +660,9 @@ watch(
                 lazy-rules
                 hide-bottom-space
                 class="inputgreen"
-                v-model="declHonorData.detail"
+                v-model="declHonorForm.detail"
                 :label="`${'รายละเอียด'}`"
                 :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-                @update:modelValue="() => (editRow = true)"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -697,9 +672,8 @@ watch(
                 lazy-rules
                 hide-bottom-space
                 class="inputgreen"
-                v-model="declHonorData.refCommandNo"
+                v-model="declHonorForm.refCommandNo"
                 :label="`${'เลขที่คำสั่ง'}`"
-                @update:modelValue="() => (editRow = true)"
               >
                 <template v-slot:append>
                   <q-icon name="mdi-file" class="cursor-pointer" />
@@ -712,7 +686,7 @@ watch(
                 borderless
                 week-start="0"
                 menu-class-name="modalfix"
-                v-model="declHonorData.refCommandDate"
+                v-model="declHonorForm.refCommandDate"
                 :locale="'th'"
                 :enableTimePicker="false"
               >
@@ -730,13 +704,12 @@ watch(
                     hide-bottom-space
                     class="inputgreen"
                     :model-value="
-                      declHonorData.refCommandDate == null
+                      declHonorForm.refCommandDate == null
                         ? null
-                        : date2Thai(declHonorData.refCommandDate)
+                        : date2Thai(declHonorForm.refCommandDate)
                     "
                     :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
-                    @clear="declHonorData.refCommandDate = null"
-                    @update:modelValue="() => (editRow = true)"
+                    @clear="declHonorForm.refCommandDate = null"
                   >
                     <template v-slot:prepend>
                       <q-icon

src/modules/04_registryNew/interface/request/DeclarationHonor.ts

@@ -1,37 +1,11 @@
 interface RequestItemsObject {
   profileId?: string;
-  isActive: boolean;
   detail: string;
   issueDate: Date | null;
   issuer: string;
   refCommandDate: Date | null;
   refCommandNo: string;
-  isDate: boolean;
+  isDate: boolean | string;
 }
 
-interface FormData {
-  id: string;
-  isActive: boolean;
-  isDate: string | null;
-  issuer: string;
-  detail: string;
-  issueDate: Date | null;
-  issueDateYear: number;
-  refCommandNo: string;
-  refCommandDate: Date | null;
-}
-
-//columns
-interface Columns {
-  [index: number]: {
-    name: String;
-    align: String;
-    label: String;
-    sortable: Boolean;
-    field: String;
-    headerStyle: String;
-    style: String;
-  };
-}
-
-export type { RequestItemsObject, FormData, Columns };
+export type { RequestItemsObject };