From 02ea3431e72d4fb492b81585f93bf5fb347e5831 Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Fri, 29 Mar 2024 10:51:05 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4:=20clean=20code+=E0=B9=81=E0=B8=81=E0=B9=89?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=9B=E0=B8=A3=E0=B8=B0?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=B1=E0=B8=95=E0=B8=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../02_NameChangeHistory.vue                  | 206 +++++++++------
 .../detail/PersonalInformation/04_Family.vue  |   8 +
 .../PersonalInformation/05_Education.vue      | 244 +++++++++++++++++-
 .../PersonalInformation/06_SpecialSkill.vue   | 120 ++++++++-
 4 files changed, 496 insertions(+), 82 deletions(-)

diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
index d8b272d21..3bc2c0643 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
@@ -36,8 +36,8 @@ const dialog = ref<boolean>(false);
 const dialogStatus = ref<string>("create");
 const filterSearch = ref("");
 const filterHistory = ref<string>("");
-
-const modalHistory = ref<boolean>(false);
+const historyDialog = ref<boolean>(false);
+const historyKeyword = ref<string>("");
 const rowsHistory = ref<RequestItemsObject[]>([]);
 const changeNameData = reactive<any>({
   profileId: profileId.value,
@@ -77,7 +77,7 @@ const visibleColumns = ref<string[]>([
   "lastName",
   "status",
 ]);
-const visibleColumnsHistory = ref<String[]>([
+const historyVisibleColumns = ref<String[]>([
   "prefix",
   "firstName",
   "lastName",
@@ -87,42 +87,7 @@ const visibleColumnsHistory = ref<String[]>([
 ]);
 const rows = ref<ResponseObject[]>([]);
 const historyRows = ref<ResponseObject[]>([]);
-// mock data
-// const rows = ref<RequestItemsObject[]>([
-//   {
-//     id: "08dc2c65-c0e9-4692-8494-ab39e09aec24",
-//     prefix: "นางสาว",
-//     prefixId: "71ed89df-8257-43e8-8fba-0b42fb2c55e0",
-//     firstName: "อรัญญาวินัย",
-//     lastName: "พรไชยะสาร",
-//     status: "all",
-//     file: null,
-//     createdFullName: "",
-//     createdAt: new Date("2024-02-13T14:31:11.959404"),
-//   },
-//   {
-//     id: "08dc2c65-c0e9-4692-8494-ab39e09aec24",
-//     prefix: "นางสาว",
-//     prefixId: "71ed89df-8257-43e8-8fba-0b42fb2c55e0",
-//     firstName: "อรัญญาวินัย",
-//     lastName: "พรไชยะสาร",
-//     status: "lastName",
-//     file: null,
-//     createdFullName: "",
-//     createdAt: new Date("2024-02-13T14:30:34.660735"),
-//   },
-//   {
-//     id: "08dc2c65-c0e9-4692-8494-ab39e09aec24",
-//     prefix: "นางสาว",
-//     prefixId: "71ed89df-8257-43e8-8fba-0b42fb2c55e0",
-//     firstName: "อรัญญาวินัย",
-//     lastName: "พรไชยะสาร",
-//     status: "lastName",
-//     file: null,
-//     createdFullName: "",
-//     createdAt: new Date("2024-02-13T14:30:14.562741"),
-//   },
-// ]);
+
 const columns = ref<QTableProps["columns"]>([
   {
     name: "prefix",
@@ -169,7 +134,7 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const columnsHistory = ref<QTableProps["columns"]>([
+const historyColumns = ref<QTableProps["columns"]>([
   {
     name: "prefix",
     align: "left",
@@ -244,6 +209,10 @@ const initialPagination = ref<Pagination>({
 });
 const subId = ref<string>("");
 const fileUpload = ref<File>();
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
 
 function editForm(row: any) {
   dialogStatus.value = "edit";
@@ -473,8 +442,8 @@ async function openFile(val: string | null) {
   if (val != null) window.open(val);
 }
 
-async function clickHistory(row: RequestItemsObject) {
-  modalHistory.value = true;
+function closeHistoryDialog() {
+  historyDialog.value = false;
 }
 
 async function fetchData(id: string) {
@@ -529,7 +498,7 @@ function filterSelector(val: string, update: Function, refData: string) {
 </script>
 
 <template>
-  <q-toolbar style="padding: 0px" class="text-primary row justify-end">
+  <q-toolbar style="padding: 0px" class="text-primary row justify-end q-mb-xs">
     <q-btn
       round
       flat
@@ -646,7 +615,7 @@ function filterSelector(val: string, update: Function, refData: string) {
             size="14px"
             icon="mdi-history"
             @click="
-              () => (fetchHistoryData(props.row.id), clickHistory(props.row))
+              () => (fetchHistoryData(props.row.id), (historyDialog = true))
             "
           />
           <q-btn
@@ -665,41 +634,27 @@ function filterSelector(val: string, update: Function, refData: string) {
         </q-td>
       </q-tr>
     </template>
-  </d-table>
+    <template v-slot:no-data="{ icon, message, filter }">
+      <div class="full-width row flex-center text-accent q-gutter-sm">
+        <span
+          ><div
+            style="
+              height: 50vh;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+            "
+            class="text-grey-5"
+          >
+            <q-icon name="search" size="4rem" />
 
-  <history-table
-    :rows="historyRows"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-    :history="true"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div class="table_ellipsis">
-            {{ col.value }}
+            <span>ไม่พบข้อมูล</span>
           </div>
-        </q-td>
-        <q-td auto-width>
-          <q-btn
-            v-if="props.row.file !== null"
-            color="green"
-            flat
-            dense
-            round
-            size="14px"
-            icon="mdi-file-document-outline"
-            @click="openFile(props.row.file)"
-          />
-        </q-td>
-      </q-tr>
+        </span>
+      </div>
     </template>
-  </history-table>
+  </d-table>
 
   <q-dialog v-model="dialog" class="dialog" persistent>
     <q-card style="min-width: 50%" class="bg-white">
@@ -910,6 +865,105 @@ function filterSelector(val: string, update: Function, refData: string) {
       </q-form>
     </q-card>
   </q-dialog>
+
+  <q-dialog v-model="historyDialog" class="dialog" persistent>
+    <q-card style="min-width: 70%" class="bg-white">
+      <q-card-section class="flex justify-between" style="padding: 0">
+        <dialog-header
+          tittle="ประวัติแก้ไขประวัติการศึกษา"
+          :close="closeHistoryDialog"
+        />
+      </q-card-section>
+      <q-separator color="grey-4" />
+      <q-card-section>
+        <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
+          <q-space />
+          <q-input
+            dense
+            outlined
+            bg-color="white"
+            v-model="historyKeyword"
+            label="ค้นหา"
+            class="q-mr-sm"
+          >
+            <template v-slot:append>
+              <q-icon name="search" />
+            </template>
+          </q-input>
+
+          <q-select
+            v-model="historyVisibleColumns"
+            multiple
+            outlined
+            dense
+            bg-color="white"
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="historyColumns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </q-toolbar>
+        <d-table
+          ref="table"
+          :columns="historyColumns"
+          :rows="historyRows"
+          row-key="name"
+          flat
+          bordered
+          :paging="true"
+          dense
+          :filter="historyKeyword"
+          v-model:pagination="pagination"
+          :rows-per-page-options="[20, 50, 100]"
+          class="custom-header-table"
+          :visible-columns="historyVisibleColumns"
+        >
+          <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-th auto-width />
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div>
+                  {{ col.value === "" ? "-" : col.value }}
+                </div>
+              </q-td>
+              <q-td auto-width> </q-td>
+            </q-tr>
+          </template>
+          <template v-slot:no-data="{ icon, message, filter }">
+            <div class="full-width row flex-center text-accent q-gutter-sm">
+              <span
+                ><div
+                  style="
+                    height: 50vh;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                  class="text-grey-5"
+                >
+                  <q-icon name="search" size="4rem" />
+
+                  <span>ไม่พบข้อมูล</span>
+                </div>
+              </span>
+            </div>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
index 700d0ac85..b79e3f85e 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
@@ -1015,6 +1015,14 @@ onMounted(async () => {
       <q-separator color="grey-4" />
       <div class="q-pa-md scroll" style="max-height: 70vh">
         <div>
+          <div class="row text-right">
+            <div class="col-12">
+              แก้ไขโดย {{ historyRows[index - 1].lastUpdateFullName }}
+            </div>
+            <div class="col-12">
+              วันที่แก้ไข {{ date2Thai(historyRows[index - 1].lastUpdatedAt) }}
+            </div>
+          </div>
           <div class="col-12 row q-pb-sm">
             <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
               • บิดา
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
index 948d4a3d4..39cdc6528 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
@@ -198,6 +198,202 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const historyColumns = ref<QTableProps["columns"]>([
+  {
+    name: "educationLevel",
+    align: "left",
+    label: "ระดับศึกษา",
+    sortable: true,
+    field: "educationLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "institute",
+    align: "left",
+    label: "สถานศึกษา",
+    sortable: true,
+    field: "institute",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "startDate",
+    align: "left",
+    label: "ตั้งแต่",
+    sortable: true,
+    field: (v) =>
+      v.isDate
+        ? date2Thai(v.startDate)
+        : new Date(v.startDate).getFullYear() + 543,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "endDate",
+    align: "left",
+    label: "ถึง",
+    sortable: true,
+    field: (v) =>
+      v.isDate ? date2Thai(v.endDate) : new Date(v.endDate).getFullYear() + 543,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "finishDate",
+    align: "left",
+    label: "วันที่สำเร็จการศึกษา",
+    sortable: true,
+    field: "finishDate",
+    format: (v) => date2Thai(v),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isEducation",
+    align: "left",
+    label: "เป็นวุฒิการศึกษาในตำแหน่ง",
+    sortable: true,
+    field: "isEducation",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => (v === true ? "ใช่" : "ไม่ใช่"),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "degree",
+    align: "left",
+    label: "วุฒิการศึกษา",
+    sortable: true,
+    field: "degree",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "field",
+    align: "left",
+    label: "สาขาวิชา/ทาง",
+    sortable: true,
+    field: "field",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "fundName",
+    align: "left",
+    label: "ทุน",
+    sortable: true,
+    field: "fundName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "gpa",
+    align: "left",
+    label: "เกรดเฉลี่ย",
+    sortable: true,
+    field: "gpa",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "country",
+    align: "left",
+    label: "ประเทศ",
+    sortable: true,
+    field: "country",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "other",
+    align: "left",
+    label: "ข้อมูลการติดต่อ",
+    sortable: true,
+    field: "other",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "duration",
+    align: "left",
+    label: "ระยะเวลา",
+    sortable: true,
+    field: "duration",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "durationYear",
+    align: "left",
+    label: "ระยะเวลาหลักสูตร (ปี)",
+    sortable: true,
+    field: "durationYear",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    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",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    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),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
 
 const rows = ref<ResponseObject[]>([]);
 const historyRows = ref<ResponseObject[]>([]);
@@ -285,6 +481,8 @@ const historyVisibleColumns = ref<string[]>([
   "startDate",
   "finishDate",
   "note",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
 ]);
 
 async function onSubmit() {
@@ -487,7 +685,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <q-toolbar style="padding: 0px">
+  <q-toolbar style="padding: 0px" class="q-mb-xs">
     <q-btn
       round
       flat
@@ -748,6 +946,26 @@ onMounted(async () => {
         </q-card>
       </div>
     </template>
+    <template v-slot:no-data="{ icon, message, filter }">
+      <div class="full-width row flex-center text-accent q-gutter-sm">
+        <span
+          ><div
+            style="
+              height: 50vh;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+            "
+            class="text-grey-5"
+          >
+            <q-icon name="search" size="4rem" />
+
+            <span>ไม่พบข้อมูล</span>
+          </div>
+        </span>
+      </div>
+    </template>
   </d-table>
 
   <q-dialog v-model="dialog" class="dialog" persistent>
@@ -1212,7 +1430,7 @@ onMounted(async () => {
             :display-value="$q.lang.table.columns"
             emit-value
             map-options
-            :options="columns"
+            :options="historyColumns"
             option-value="name"
             options-cover
             style="min-width: 150px"
@@ -1220,7 +1438,7 @@ onMounted(async () => {
         </q-toolbar>
         <d-table
           ref="table"
-          :columns="columns"
+          :columns="historyColumns"
           :rows="historyRows"
           row-key="name"
           flat
@@ -1251,6 +1469,26 @@ onMounted(async () => {
               <q-td auto-width> </q-td>
             </q-tr>
           </template>
+          <template v-slot:no-data="{ icon, message, filter }">
+            <div class="full-width row flex-center text-accent q-gutter-sm">
+              <span
+                ><div
+                  style="
+                    height: 50vh;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                  class="text-grey-5"
+                >
+                  <q-icon name="search" size="4rem" />
+
+                  <span>ไม่พบข้อมูล</span>
+                </div>
+              </span>
+            </div>
+          </template>
         </d-table>
       </q-card-section>
     </q-card>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
index c1e11e9e6..9ff6d10c0 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
@@ -20,6 +20,7 @@ const {
   hideLoader,
   messageError,
   success,
+  date2Thai,
 } = mixin;
 const columns = ref<QTableProps["columns"]>([
   {
@@ -68,6 +69,76 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+const historyColumns = ref<QTableProps["columns"]>([
+  {
+    name: "field",
+    align: "left",
+    label: "ด้าน",
+    sortable: true,
+    field: "field",
+    headerStyle: "font-size: 14px; width: 50px;",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "remark",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "remark",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reference",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "reference",
+    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",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    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),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
 const historyDialog = ref<boolean>(false);
 const dialog = ref<boolean>(false);
 const dialogStatus = ref<string>("create");
@@ -106,6 +177,8 @@ const historyVisibleColumns = ref<string[]>([
   "detail",
   "remark",
   "reference",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
 ]);
 function closeDialog() {
   dialog.value = false;
@@ -165,6 +238,7 @@ async function fetchHistoryData(id: string) {
     .get(config.API.profileNewAbilityHisByAbilityId(id))
     .then(async (res) => {
       historyRows.value = res.data.result;
+      console.log(res.data.result);
     })
     .catch((err) => {
       messageError($q, err);
@@ -235,7 +309,7 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <q-toolbar style="padding: 0px" class="text-primary">
+  <q-toolbar style="padding: 0px" class="text-primary q-mb-xs">
     <q-btn
       flat
       round
@@ -427,6 +501,26 @@ onMounted(async () => {
         </q-card>
       </div>
     </template>
+    <template v-slot:no-data="{ icon, message, filter }">
+      <div class="full-width row flex-center text-accent q-gutter-sm">
+        <span
+          ><div
+            style="
+              height: 50vh;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+            "
+            class="text-grey-5"
+          >
+            <q-icon name="search" size="4rem" />
+
+            <span>ไม่พบข้อมูล</span>
+          </div>
+        </span>
+      </div>
+    </template>
   </d-table>
 
   <q-dialog v-model="dialog" class="dialog" persistent>
@@ -533,7 +627,7 @@ onMounted(async () => {
             :display-value="$q.lang.table.columns"
             emit-value
             map-options
-            :options="columns"
+            :options="historyColumns"
             option-value="name"
             options-cover
             style="min-width: 150px"
@@ -541,7 +635,7 @@ onMounted(async () => {
         </q-toolbar>
         <d-table
           ref="table"
-          :columns="columns"
+          :columns="historyColumns"
           :rows="historyRows"
           row-key="name"
           flat
@@ -570,6 +664,26 @@ onMounted(async () => {
               <q-td auto-width> </q-td>
             </q-tr>
           </template>
+          <template v-slot:no-data="{ icon, message, filter }">
+            <div class="full-width row flex-center text-accent q-gutter-sm">
+              <span
+                ><div
+                  style="
+                    height: 50vh;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                  class="text-grey-5"
+                >
+                  <q-icon name="search" size="4rem" />
+
+                  <span>ไม่พบข้อมูล</span>
+                </div>
+              </span>
+            </div>
+          </template>
         </d-table>
       </q-card-section>
     </q-card>