ทะเบียนประวัติ: ข้อมูลอื่นๆ, เพิ่ม loader เอกสารหลักฐาน

src/api/registry/api.registry.ts

@@ -63,4 +63,12 @@ profileNewCertificateByCertificateId: (certificateId: string) =>
   `${registryNew}certificate/${certificateId}`,
 profileNewCertificateHisByCertificateId: (certificateId: string) =>
   `${registryNew}certificate/history/${certificateId}`,
+
+// ข้อมูลอื่นๆ
+profileNewOther: `${registryNew}other`,
+profileNewOtherByProfileId: (profileId: string) =>
+`${registryNew}other/${profileId}`,
+profileNewOtherById: (dataId: string) => `${registryNew}other/${dataId}`,
+profileNewOtherHisById: (dataId: string) =>
+`${registryNew}other/history/${dataId}`,
 };

src/modules/04_registryNew/components/detail/Other/01_OtherInformation.vue

@@ -7,6 +7,8 @@ import type {
   MyObjectRef,
 } from "@/modules/04_registryNew/interface/index/other";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import DialogHeader from "@/components/DialogHeader.vue";
 import { useRoute } from "vue-router";
@@ -14,7 +16,15 @@ import DialogHistory from "@/modules/04_registryNew/components/detail/Other/01_O
 const route = useRoute();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { date2Thai, showLoader, hideLoader, success, messageError } = mixin;
+const {
+  date2Thai,
+  showLoader,
+  hideLoader,
+  success,
+  messageError,
+  dialogRemove,
+  dialogConfirm,
+} = mixin;
 
 const id = ref<string>("");
 
@@ -45,6 +55,7 @@ const modal = ref<boolean>(false);
 const edit = ref<boolean>(false);
 const modalHistory = ref<boolean>(false);
 
+const isActive = ref<boolean>(true);
 const date = ref<Date | null>(null);
 const detail = ref<string>();
 
@@ -65,6 +76,7 @@ const columns = ref<QTableProps["columns"]>([
     field: "date",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px; width: 50px;",
+    format: (v) => date2Thai(v),
   },
   {
     name: "detail",
@@ -91,6 +103,7 @@ function openDialogEdit(props: RowList) {
   modal.value = true;
   edit.value = true;
 
+  id.value = props.id;
   date.value = props.date;
   detail.value = props.detail;
 }
@@ -112,107 +125,118 @@ function closeDialog() {
 
 /** validate check*/
 function validateForm() {
-  const hasError = [];
+  dialogConfirm(
-  for (const key in objectRef) {
+    $q,
-    if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
+    async () => {
-      const property = objectRef[key];
+      const hasError = [];
-      if (property.value && typeof property.value.validate === "function") {
+      for (const key in objectRef) {
-        const isValid = property.value.validate();
+        if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
-        hasError.push(isValid);
+          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)) {
-  }
+        if (edit.value) {
-  if (hasError.every((result) => result === true)) {
+          editData();
-    if ((edit.value = false)) {
+        } else {
-      saveData();
+          saveData();
-    } else {
+        }
-      editData();
+      }
-    }
+    },
-  }
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
 }
 
 /**
  * บันทึกเพิ่มข้อมูล
  */
-function saveData() {
+async function saveData() {
-  // showLoader();
+  showLoader();
-  //   await http
+  await http
-  //     .post(config.API.profileOtherId(profileId.value), {
+    .post(config.API.profileNewOther, {
-  //       id: id.value,
+      profileId: profileId.value,
-  //       date: date.value,
+      isActive: isActive.value,
-  //       detail: detail.value,
+      date: date.value,
-  //     })
+      detail: detail.value,
-  //     .then((res) => {
+    })
-  //       success($q, "บันทึกข้อมูลสำเร็จ");
+    .then((res) => {
-  //       modal.value = false;
+      success($q, "บันทึกข้อมูลสำเร็จ");
-  //     })
+      getData();
-  //     .catch((e) => {
+      closeDialog();
-  //       messageError($q, e);
+    })
-  //     })
+    .catch((e) => {
-  //     .finally(async () => {
+      messageError($q, e);
-  //       await fetchData();
+    })
-  //     });
+    .finally(() => {
-  closeDialog();
+      hideLoader();
+    });
 }
 
 /**
  * บันทึกแก้ไขข้อมูล
  */
-const editData = async () => {
+async function editData() {
-  // showLoader();
+  showLoader();
-  // await http
+  await http
-  //   .put(config.API.profileOtherId(id.value), {
+    .patch(config.API.profileNewOtherById(id.value), {
-  //     id: id.value,
+      isActive: isActive.value,
-  //     date: date.value,
+      date: date.value,
-  //     detail: detail.value,
+      detail: detail.value,
-  //   })
+    })
-  //   .then((res) => {
+    .then((res) => {
-  //     success($q, "บันทึกข้อมูลสำเร็จ");
+      success($q, "บันทึกข้อมูลสำเร็จ");
-  //     modal.value = false;
+      getData();
-  //   })
+      closeDialog();
-  //   .catch((e) => {
+    })
-  //     messageError($q, e);
+    .catch((e) => {
-  //   })
+      messageError($q, e);
-  //   .finally(async () => {
+    })
-  //     await fetchData();
+    .finally(() => {
-  //   });
+      hideLoader();
-  closeDialog();
+    });
-};
+}
 
-function getData() {
+async function getData() {
-  const data: RowList[] = [
+  showLoader();
-    {
+  await http
-      id: "08dc3c0e-b6ef-4e6c-8c84-787447416450",
+    .get(config.API.profileNewOtherByProfileId(profileId.value))
-      date: null,
+    .then((res) => {
-      detail: "ทดสอบ 1",
+      rows.value = res.data.result;
-      createdFullName: "สาวิตรี ศรีสมัย",
+    })
-      createdAt: new Date("2024-03-04T05:48:27.615Z"),
+    .catch((e) => {
-    },
+      messageError($q, e);
-    {
+    })
-      id: "08dc3c0e-bd30-48e8-8d14-31bcaf92b3a2",
+    .finally(() => {
-      date: null,
+      hideLoader();
-      detail: "ทดสอบ 2",
+    });
-      createdFullName: "สาวิตรี ศรีสมัย",
+}
-      createdAt: new Date("2024-03-04T05:48:38.105Z"),
-    },
-    {
-      id: "08dc3c0e-c874-41fe-8b55-7c992ebf99b2",
-      date: new Date("2024-03-03T17:00:00.000Z"),
-      detail: "ข้อมูลอื่นๆ",
-      createdFullName: "สาวิตรี ศรีสมัย",
-      createdAt: new Date("2024-03-04T05:48:57.002Z"),
-    },
-  ];
 
-  rows.value = data;
+async function deleteData(id: string) {
+  showLoader();
+  await http
+    .delete(config.API.profileNewOtherById(id))
+    .then((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
+      getData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 const infoRows = [
-  { title: 'รายละเอียด', value: '' },
+  { title: "รายละเอียด", value: "" },
-  { title: 'ล้างมลทิน', value: '' },
+  { title: "ล้างมลทิน", value: "" },
-  { title: 'เลขที่คำสั่ง', value: '' },
+  { title: "เลขที่คำสั่ง", value: "" },
-  { title: 'เอกสารอ้างอิง (ลงวันที่)', value: '' }
+  { title: "เอกสารอ้างอิง (ลงวันที่)", value: "" },
-]
+];
 onMounted(() => {
   getData();
 });
@@ -318,24 +342,24 @@ onMounted(() => {
     </template>
     <template v-slot:body="props" v-if="mode === 'table'">
       <q-tr :props="props" class="cursor-pointer">
-        <q-td
+        <q-td v-for="col in props.cols" :key="col.id">
-          v-for="col in props.cols"
+          <div>
-          :key="col.id"
-          @click="openDialogEdit(props.row)"
-        >
-          <div v-if="col.name === 'no'">
-            {{
-              (formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
-            }}
-          </div>
-          <div v-else-if="col.name == 'date'" class="table_ellipsis">
-            {{ col.value ? date2Thai(col.value) : "-" }}
-          </div>
-          <div v-else>
             {{ col.value ? col.value : "-" }}
           </div>
         </q-td>
         <q-td auto-width>
+          <q-btn
+            flat
+            dense
+            round
+            class="q-mr-xs"
+            size="14px"
+            color="primary"
+            icon="mdi-pencil-outline"
+            @click="openDialogEdit(props.row)"
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
           <q-btn
             color="info"
             flat
@@ -347,6 +371,19 @@ onMounted(() => {
           >
             <q-tooltip>ประวัติแก้ไขอื่นๆ</q-tooltip>
           </q-btn>
+          <!-- <q-btn
+            flat
+            dense
+            round
+            size="14px"
+            color="red"
+            icon="mdi-delete"
+            @click="
+              dialogRemove($q, async () => await deleteData(props.row.id))
+            "
+          >
+            <q-tooltip>ลบข้อมูล</q-tooltip>
+          </q-btn> -->
         </q-td>
       </q-tr>
     </template>
@@ -376,36 +413,23 @@ onMounted(() => {
           </div>
           <q-separator />
           <q-card-section class="q-pa-none">
-            <div class="row q-pa-sm">
+            <q-item
-              <div class="col text-grey-6 text-weight-medium">รายละเอียด</div>
+              v-for="(col, index) in props.cols.filter(
-              <div class="col">
+                (col) => col.name !== 'desc'
-                {{ props.row.detail !== "" ? props.row.detail : "-" }}
+              )"
-              </div>
+              :key="col.name"
-              <div class="col text-grey-6 text-weight-medium">ล้างมลทิน</div>
+              :class="index % 2 !== 0 ? 'bg-grey-1' : ''"
-              <div class="col">
+            >
-                {{ props.row.unStigma ? props.row.unStigma : "-" }}
+              <q-item-section class="text-grey-6">
-              </div>
+                <q-item-label>{{ col.label }}</q-item-label>
-            </div>
+              </q-item-section>
-            <q-separator />
-            <div class="row bg-grey-2 q-pa-sm">
-              <div class="col text-grey-6 text-weight-medium">เลขที่คำสั่ง</div>
-              <div class="col">
-                {{
-                  props.row.refCommandNo ? props.row.refCommandNo : "-"
-                }}
-              </div>
-              <div class="col text-grey-6 text-weight-medium">
-                เอกสารอ้างอิง (ลงวันที่)
-              </div>
-              <div class="col">
-                {{
-                  props.row.refCommandDate
-                    ? date2Thai(props.row.refCommandDate)
-                    : "-"
-                }}
-              </div>
-            </div>
 
+              <q-item-section class="text-dark">
+                <q-item-label>
+                  {{ col.value ? col.value : "-" }}
+                </q-item-label>
+              </q-item-section>
+            </q-item>
           </q-card-section>
         </q-card>
       </div>

src/modules/04_registryNew/components/detail/Other/01_OtherInformationHistory.vue

@@ -91,8 +91,7 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 function getHistory() {
   showLoader();
-  http
+  http.get(config.API.profileNewOtherHisById(id.value))
-    .get(config.API.profileOtherHisId(id.value))
     .then((res) => {
       let data = res.data.result;
       rows.value = [];

src/modules/04_registryNew/components/detail/Other/02_Document.vue

@@ -26,6 +26,7 @@ const profileId = ref<string>(
 );
 
 async function getData() {
+  showLoader()
   await http
     .get(
       config.API.file("ระบบทะเบียนประวัติ", "เอกสารหลักฐาน", profileId.value)
@@ -36,7 +37,9 @@ async function getData() {
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(() => {});
+    .finally(() => {
+      hideLoader()
+    });
 }
 
 /**