ทะเบียนประวัติ ==> ข้อมูลผลงาน

src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue

@@ -10,10 +10,9 @@ import { useInsigniaDataStore } from "@/modules/04_registryPerson/stores/insigni
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { QTableProps } from "quasar";
+import type { QTableColumn } from "quasar";
 import type {
   DataOption,
-  InsigniaOps,
   InsigniasType,
   InsigniasTypeSub,
   ResFileData,
@@ -22,6 +21,7 @@ import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/r
 import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Insignia";
 
 import DialogHeader from "@/components/DialogHeader.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -82,214 +82,7 @@ const insigniaOptionsName = ref<InsigniasTypeSub[]>([]);
 const insigniaOptionsNameMain = ref<InsigniasTypeSub[]>([]);
 
 //Table Main
-const rows = ref<ResponseObject[]>([]);
-const rowsMain = ref<ResponseObject[]>([]);
-const filterSearch = ref<string>("");
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "year",
-    align: "left",
-    label: "ปีที่ยื่นขอ",
-    sortable: true,
-    field: "year",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => v + 543,
-    sort: (a: string, b: string) =>
-      a.toString().localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "receiveDate",
-    align: "left",
-    label: "วันที่ได้รับ",
-    sortable: true,
-    field: "receiveDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => date2Thai(v),
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "insignia",
-    align: "left",
-    label: "ชื่อเครื่องราชฯ",
-    sortable: true,
-    field: "insigniaId",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => store.allNameInsignia.find((r) => r.id === v)?.name,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "insigniaType",
-    align: "left",
-    label: "ลำดับชั้น",
-    sortable: true,
-    field: "insigniaType",
-    format(val, row) {
-      return row.insignia.insigniaType.name;
-    },
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับที่",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "issue",
-    align: "left",
-    label: "ราชกิจจาฯ ฉบับที่",
-    sortable: true,
-    field: "issue",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "volumeNo",
-    align: "left",
-    label: "เล่มที่",
-    sortable: true,
-    field: "volumeNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "volume",
-    align: "left",
-    label: "เล่ม",
-    sortable: true,
-    field: "volume",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "section",
-    align: "left",
-    label: "ตอน",
-    sortable: true,
-    field: "section",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "page",
-    align: "left",
-    label: "หน้า",
-    sortable: true,
-    field: "page",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "dateAnnounce",
-    align: "left",
-    label: "วันที่ประกาศในราชกิจจาฯ",
-    sortable: true,
-    field: "dateAnnounce",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => date2Thai(v),
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "refCommandNo",
-    align: "left",
-    label: "เลขที่คำสั่ง",
-    sortable: true,
-    field: "refCommandNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "refCommandDate",
-    align: "left",
-    label: "เอกสารอ้างอิง (ลงวันที่)",
-    sortable: true,
-    field: "refCommandDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => date2Thai(v),
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "note",
-    align: "left",
-    label: "หมายเหตุ",
-    sortable: true,
-    field: "note",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    format: (v) => date2Thai(v, false, true),
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumns = ref<String[]>([
-  "insignia",
-  "insigniaType",
-  "year",
-  "no",
-  "issue",
-  "volumeNo",
-  "volume",
-  "section",
-  "page",
-  "receiveDate",
-  "dateAnnounce",
-  "refCommandNo",
-  "refCommandDate",
-  "note",
-  "lastUpdatedAt",
-]);
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});
-
-//Table ประวัติแก้ไข
-const rowsHistory = ref<RequestItemsObject[]>([]);
-const rowsHistoryMain = ref<RequestItemsObject[]>([]);
-const filterHistory = ref<string>("");
-const columnsHistory = ref<QTableProps["columns"]>([
+const baseColumns = ref<QTableColumn[]>([
   {
     name: "year",
     align: "left",
@@ -443,6 +236,17 @@ const columnsHistory = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "note",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "note",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "lastUpdateFullName",
     align: "left",
@@ -454,6 +258,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+
   {
     name: "lastUpdatedAt",
     align: "left",
@@ -467,7 +272,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const visibleColumnsHistory = ref<String[]>([
+const baseVisibleColumns = ref<string[]>([
   "insignia",
   "insigniaType",
   "year",
@@ -481,13 +286,29 @@ const visibleColumnsHistory = ref<String[]>([
   "dateAnnounce",
   "refCommandNo",
   "refCommandDate",
+  "note",
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-const historyPagination = ref({
+
+const rows = ref<ResponseObject[]>([]);
+const rowsMain = ref<ResponseObject[]>([]);
+const filterSearch = ref<string>("");
+const columns = ref<QTableColumn[]>(
+  baseColumns.value.filter((e: QTableColumn) => e.name !== "lastUpdateFullName")
+);
+const visibleColumns = ref<string[]>(
+  baseVisibleColumns.value.filter((e: string) => e !== "lastUpdateFullName")
+);
+const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
 
+//Table ประวัติแก้ไข
+const historyId = ref<string>("");
+const columnsHistory = ref<QTableColumn[]>(baseColumns.value);
+const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
+
 /** fetch ข้อมูลรายการเครื่องราชอิสริยาภรณ์*/
 async function fetchData() {
   if (!profileId.value) return;
@@ -713,13 +534,16 @@ function clickClose() {
 async function clickHistory(row: ResponseObject) {
   modalHistory.value = true;
   filterSearch.value = "";
+  historyId.value = row.id;
+}
+
+async function fetchDataHistory() {
   showLoader();
   try {
     const res = await http.get(
-      config.API.profileNewInsignHisById(row.id, empType.value)
+      config.API.profileNewInsignHisById(historyId.value, empType.value)
     );
-    rowsHistory.value = res.data.result;
-    rowsHistoryMain.value = res.data.result;
+    return res.data.result;
   } catch (e) {
     messageError($q, e);
   } finally {
@@ -818,14 +642,6 @@ function serchDataTable() {
   );
 }
 
-function serchDataTableHistory() {
-  rowsHistory.value = onSearchDataTable(
-    filterHistory.value,
-    rowsHistoryMain.value,
-    columnsHistory.value ? columnsHistory.value : []
-  );
-}
-
 /** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
 onMounted(async () => {
   await fetchData();
@@ -1475,79 +1291,13 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 
-  <q-dialog v-model="modalHistory" persistent>
-    <q-card style="min-width: 80%">
-      <DialogHeader
-        tittle="ประวัติแก้ไขเครื่องราชอิสริยาภรณ์"
-        :close="
-          () => (
-            (modalHistory = false), (rowsHistory = []), (filterHistory = '')
-          )
-        "
-      />
-      <q-separator />
-
-      <q-card-section style="max-height: 60vh" class="scroll">
-        <div class="row q-gutter-sm q-mb-sm">
-          <q-space />
-          <q-input
-            standout
-            dense
-            v-model="filterHistory"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            @keydown.enter.pervent="serchDataTableHistory"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-          <q-select
-            v-model="visibleColumnsHistory"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columnsHistory"
-            option-value="name"
-            style="min-width: 140px"
-          />
-        </div>
-        <d-table
-          ref="table"
-          flat
-          bordered
-          v-model:pagination="historyPagination"
-          dense
-          :columns="columnsHistory"
-          :rows="rowsHistory"
-          :visible-columns="visibleColumnsHistory"
-        >
-          >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :visible-columns="visibleColumnsHistory"
+    :title="`ประวัติแก้ไขเครื่องราชอิสริยาภรณ์`"
+    :columns="columnsHistory"
+    :fetch-data="fetchDataHistory"
+  />
 </template>
 
 <style lang="scss"></style>