From c0139fc2ce25b4899103c7ff938cb3781b05c058 Mon Sep 17 00:00:00 2001
From: oat <oatkub402@gmail.com>
Date: Wed, 24 Jan 2024 18:02:46 +0700
Subject: [PATCH] =?UTF-8?q?UI=20=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B9=80?=
 =?UTF-8?q?=E0=B8=84=E0=B8=A3=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=87=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/insignia/InsigniaList.vue      | 1052 ++++-------------
 .../components/insignia/InsigniaType.vue      |  730 +++---------
 src/modules/01_metadataNew/views/insignia.vue |    4 +-
 3 files changed, 372 insertions(+), 1414 deletions(-)

diff --git a/src/modules/01_metadataNew/components/insignia/InsigniaList.vue b/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
index 744899b7a..aba244496 100644
--- a/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
+++ b/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
@@ -1,51 +1,12 @@
-<!-- tab ชื่อเครื่องราช หน้าจัดการข้อมูลหลัก/ข้อมูลเครื่องราชอิสริยาภรณ์ -->
 <script setup lang="ts">
-import { useQuasar } from "quasar";
-import { useRoute } from "vue-router";
-import { onMounted, ref } from "vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
-
-/** impoerType*/
+import { ref } from "vue";
 import type { QTableProps } from "quasar";
-import type {
-  RequestItemsHistoryObject,
-  RequestItemsPublishHistoryObject,
-} from "@/modules/01_metadataNew/interface/request/insignia/Insignia";
-import type { ResponseHistoryObject } from "@/modules/01_metadataNew/interface/response/insignia/Insignia";
-import type { DataOption } from "@/modules/01_metadataNew/interface/index/Main";
-
-/** impoerComponents*/
-import HistoryTable from "@/components/TableHistory.vue";
-
-/** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
-const route = useRoute();
-const paramsID = ref<string>(route.params.id.toString());
-const nameType = ref<string>("");
-const $q = useQuasar();
+import { useRouter } from "vue-router";
+
+const router = useRouter();
 const mixin = useCounterMixin();
-const { success, dateText, messageError, showLoader, hideLoader } = mixin;
-
-const emit = defineEmits(["update:fetchName"]);
-
-const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
-const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
-const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
-const tittleHistory = ref<string>("ประวัติแก้ไขชื่อเครื่องราชฯ"); //
-const myForm = ref<any>(null); //ref สำหรับเช็คข้อมูลว่ามีช่องว่างไหม
-const filter = ref<string>(""); //search data table
-const filterHistory = ref<string>(""); //search data table history
-const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
-const edit = ref<boolean>(false); //ตรวจสอบการกดปุ่มแก้ไขข้อมูล
-const idVersion = ref<string>(""); //id data ใน mongodb
-const version = ref<string>("published"); //รายการข้อมูลล่าสุดได้เผยแพร่หรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-const updateData = ref<boolean>(false); //ตรวจสอบการแก้ไขข้อมูลว่าได้แก้ไขหรือไม่
-const checkValidate = ref<boolean>(false);
-const insigniaTypeOption = ref<DataOption[]>([]); //ราชการลำดับเครื่องราชฯ
-
-/** ข้อมูล Table*/
+const { date2Thai, dialogRemove } = mixin;
 const columns = ref<QTableProps["columns"]>([
   {
     name: "level",
@@ -156,7 +117,16 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-const visibleColumns = ref<String[]>([
+const filterKeyword = ref<string>("");
+const dialog = ref<boolean>(false);
+const isActive = ref<boolean>(false);
+const name = ref<string>("");
+const shortName = ref<string>("");
+const note = ref<string>("");
+const insigniaTypeId = ref<string>("บำเหน็จ");
+
+const dialogStatus = ref<string>("");
+const visibleColumns = ref<string[]>([
   "level",
   "name",
   "shortName",
@@ -168,822 +138,206 @@ const visibleColumns = ref<String[]>([
   "note",
 ]);
 
-const columnsHistory = ref<QTableProps["columns"]>([
+const row = ref([
   {
-    name: "level",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "level",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    level: 1,
+    shortName: "เทส",
+    insigniaType: "บำเหน็จ",
+    note: "-",
+    name: "testInside1",
+    createdAt: date2Thai(new Date()),
+    lastUpdatedAt: date2Thai(new Date()),
+    lastUpdateFullName: "TestTest",
+    isActive: true,
   },
-
   {
-    name: "name",
-    align: "left",
-    label: "ชื่อเครื่องราชฯ",
-    sortable: true,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-
-  {
-    name: "shortName",
-    align: "left",
-    label: "ชื่อย่อ",
-    sortable: true,
-    field: "shortName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-
-  {
-    name: "insigniaType",
-    align: "left",
-    label: "ลำดับชั้นเครื่องราชฯ",
-    sortable: true,
-    field: "insigniaType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-
-  {
-    name: "lastUpdatedAt",
-    align: "center",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    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: "isActive",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "isActive",
-    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" }),
+    level: 2,
+    shortName: "เทส2",
+    insigniaType: "บำนาญ",
+    note: "-",
+    name: "testInside2",
+    createdAt: date2Thai(new Date()),
+    lastUpdatedAt: date2Thai(new Date()),
+    lastUpdateFullName: "TestTest",
+    isActive: false,
   },
 ]);
-
-const visibleColumnsHistory = ref<String[]>([
-  "level",
-  "name",
-  "shortName",
-  "insigniaType",
-  "lastUpdatedAt",
-  "lastUpdateFullName",
-  "isActive",
-  "note",
-]);
-
-/**
- * เมื่อเข้าหน้านี้จะเรียกฟังชันนี้ก่อน(get list data)
- */
-onMounted(async () => {
-  await fetchData();
-  await fetchHistory();
-});
-
-/**
- * ฟังก์ชัน get data ล่าสุด
- */
-const fetchData = async () => {
-  // await props.fetchDataComponent();
-  // const result = await getInsignia(false, load);
-  // version.value = result.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-  // idVersion.value = result.idversion; //เลข id ใน mongodb
-
-  // updateData.value = false;
-  // rows.value = result.data;
-  // rows.value.sort(
-  //   (
-  //     firstItem: RequestItemsHistoryObject,
-  //     secondItem: RequestItemsHistoryObject
-  //   ) => firstItem.level - secondItem.level
-  // );
-  // const data = rows.value;
-  // let option: DataOption[] = [];
-  // data.map((r: RequestItemsHistoryObject) => {
-  //   option.push({ id: r.id.toString(), name: r.name.toString() });
-  // });
-  // insigniaTypeOption.value = option;
-  // fetchinsigniaType();
-  // updateData.value = true;
-
-  // const data = rows.value.filter((e) => e.insigniaType.id === paramsID.value);
-  // rows.value = data;
-  //   rows.value.splice(0);
-  showLoader();
-  await http
-    .get(config.API.listInsigniaHistory)
-    .then((res) => {
-      let data = res.data.result;
-      version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-      idVersion.value = data.id; //เลข id ใน mongodb
-      const list: any[] = [];
-      data.items.map((e: RequestItemsHistoryObject) => {
-        list.push({
-          id: e.id,
-          name: e.name,
-          shortName: e.shortName,
-          level: e.level,
-          createdAt: e.createdAt,
-          lastUpdatedAt: e.lastUpdatedAt,
-          lastUpdateFullName: e.lastUpdateFullName,
-          isActive: e.isActive,
-          createdFullName: e.createdFullName,
-          createdUserId: e.createdUserId,
-          lastUpdateUserId: e.lastUpdateUserId,
-          insigniaType: e.insigniaType,
-          note: e.note,
-        });
-      });
-      list.sort(
-        (
-          firstItem: RequestItemsHistoryObject,
-          secondItem: RequestItemsHistoryObject
-        ) => firstItem.level - secondItem.level
-      );
-
-      rows.value = list.filter((e) => e.insigniaType.id === paramsID.value);
-      const name =
-        list.find((e) => e.insigniaType.id === paramsID.value)?.insigniaType
-          .name ?? "";
-
-      emit("update:fetchName", name);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      updateData.value = true;
-      await fetchinsigniaType();
-    });
-};
-
-/**
- * รายการลำดับเครื่องราชฯ
- */
-const fetchinsigniaType = async () => {
-  showLoader();
-  await http
-    .get(config.API.insigniaType)
-    .then((res) => {
-      const data = res.data.result;
-      let option: DataOption[] = [];
-      data.map((r: RequestItemsHistoryObject) => {
-        option.push({ id: r.id.toString(), name: r.name.toString() });
-      });
-      insigniaTypeOption.value = option;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      updateData.value = false;
-      hideLoader();
-    });
-};
-
-/**
- * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลทั้งหมด
- */
-const fetchHistory = async () => {
-  showLoader();
-  await http
-    .get(config.API.listInsigniaPublishedHistory)
-    .then((res) => {
-      const data = res.data.result;
-      rawHistory.value = [];
-      if (data.length > 0) {
-        data.map((e: RequestItemsPublishHistoryObject) => {
-          e.items.map((i: RequestItemsHistoryObject) => {
-            rawHistory.value.push({
-              createdAt: i.createdAt,
-              createdFullName: i.createdFullName,
-              createdUserId: i.createdUserId,
-              id: i.id,
-              isActive: i.isActive,
-              lastUpdateFullName: i.lastUpdateFullName,
-              lastUpdateUserId: i.lastUpdateUserId,
-              lastUpdatedAt: i.lastUpdatedAt,
-              level: i.level,
-              name: i.name,
-              shortName: i.shortName,
-              insigniaType: i.insigniaType,
-              note: i.note,
-            });
-          });
-        });
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-    });
-};
-
-/**
- * ฟังก์ชัน clear data แบบร่าง
- * เมื่อเรียก api เสร็จแล้วจะ get data มาใหม่
- */
-const clearPublishedData = async () => {
-  showLoader();
-  await http
-    .delete(config.API.listInsigniaHistory)
-    .then((res) => {
-      success($q, "ลบข้อมูลร่างสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchHistory();
-      await fetchData();
-    });
-};
-
-/**
- * ฟังก์ชันเผยแพร่แบบร่าง
- * เมื่อเรียก api เสร็จแล้วจะ get data มาใหม่
- */
-const publishedData = async () => {
-  showLoader();
-  await http
-    .get(config.API.listInsigniaPublished)
-    .then((res) => {
-      success($q, "เผยแพร่ข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-    });
-};
-
-/**
- * ฟังก์ชันเพิ่มข้อมูล
- */
-const clickAdd = async () => {
-  const filterRowNull = rows.value.filter(
-    (f: RequestItemsHistoryObject) =>
-      f.id === "00000000-0000-0000-0000-000000000000" &&
-      (f.name == "" || f.shortName == "") //เช็คข้อมูลใน array ว่าเป็นข้อมูลที่เพิ่มมาใหม่และยังไม่มีการกรอกข้อมูล
-  );
-  if (filterRowNull.length == 0) {
-    //ถ้าไม่เจอค่าจะให้เพิ่มข้อมูลใหม่ได้
-    rows.value.push({
-      createdAt: new Date(),
-      createdFullName: "",
-      createdUserId: "",
-      id: "00000000-0000-0000-0000-000000000000",
-      isActive: true,
-      lastUpdateFullName:
-        keycloak.tokenParsed == null ? "" : keycloak.tokenParsed.name,
-      lastUpdateUserId: "",
-      lastUpdatedAt: new Date(),
-      name: "",
-      shortName: "",
-      level: rows.value[rows.value.length - 1].level + 1,
-      note: "",
-    });
-    updateData.value = true;
-  }
-};
-
-/**
- * ฟังก์ชันบันทึกแบบร่าง
- * เมื่อเรียก api เสร็จแล้วจะ get data มาใหม่
- * publish เมื่อบันทึกแบบร่างแล้วจะเผยแพร่เลยไหม true=บันทึกและเผยแพร่ false=บันทึกอย่างเดียว
- */
-const save = async (publish: boolean) => {
-  await validateData();
-  if (checkValidate.value == false) return;
-  rows.value.map((e: ResponseHistoryObject) => ({
-    //จัด data ก่อนส่งไป backend
-    id: e.id,
-    createdAt: e.createdAt,
-    lastUpdatedAt: e.lastUpdatedAt,
-    name: e.name,
-    shortName: e.shortName,
-    level: e.level,
-    isActive: e.isActive,
-    createdFullName: e.createdFullName,
-    createdUserId: e.createdUserId,
-    lastUpdateFullName: e.lastUpdateFullName,
-    lastUpdateUserId: e.lastUpdateUserId,
-    insigniaType: e.insigniaType,
-  }));
-  showLoader();
-  await http
-    .post(config.API.listInsigniaHistoryId(idVersion.value), {
-      id: idVersion.value,
-      version: "draft",
-      items: rows.value,
-    })
-    .then(async () => {
-      if (publish === false) {
-        success($q, "บันทึกข้อมูลร่างสำเร็จ");
-        await fetchData(); //ไม่เผยแพร่และ get data ล่าสุดมาใหม่
-      } else {
-        await publishedData(); //เผยแพร่ข้อมูลต
-      }
-      edit.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-      await fetchData();
-    });
-};
-
-/**
- * เช็คชื่อซ้ำกับข้อมูลที่มีอยู่แล้ว
- * @param val input ชื่อ
- */
-const checkDupDataName = (val: string) => {
-  const filterNameNull = rows.value.filter(
-    (f: RequestItemsHistoryObject) => f.name == val
-  ); //เช็คข้อมูลว่ากรอกชื่อซ้ำไหม
-  if (filterNameNull.length > 1) {
-    return false;
-  }
-  return true;
-};
-
-/**
- * เช็คชื่อย่อซ้ำกับข้อมูลที่มีอยู่แล้ว
- * @param val input ชื่อย่อ
- */
-const checkDupDataShortName = (val: string) => {
-  const filterShortNameNull = rows.value.filter(
-    (f: RequestItemsHistoryObject) => f.shortName == val
-  ); //เช็คข้อมูลว่ากรอกชื่อซ้ำไหม
-  if (filterShortNameNull.length > 1) {
-    return false;
-  }
-  return true;
-};
-
-/**
- * ฟังก์ชันปุ่มแก้ไข ให้ get data มาใหม่
- */
-const clickEdit = async () => {
-  await fetchData();
-};
-
-/**
- * ฟังก์ชันปุ่มบันทึกแบบร่าง
- */
-const clickSave = async () => {
-  await save(false);
-  await fetchData();
-};
-
-/**
- * ฟังก์ชันปุ่มลบแบบร่าง
- */
-const clickDelete = async () => {
-  await clearPublishedData();
-  await fetchData();
-};
-
-/**
- * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
- */
-const clickCancel = async () => {
-  edit.value = false;
-  await fetchData();
-};
-
-/**
- * ฟังก์ชันปุ่มเผยแพร่ข้อมูล
- * เช็คข้อมูลก่อนว่าใน array กรอกข้อมูลครบไหมถ้าครบก็ให้เผยแพร่ได้
- * ถ้าค่าใน array ไม่มีข้อมูลใน row ก้จะให้บันทึกได้
- */
-const clickPublish = async () => {
-  if (myForm.value !== null) {
-    myForm.value.validate().then(async (result: boolean) => {
-      if (result) {
-        save(true);
-      }
-    });
-  } else {
-    await save(true);
-  }
-};
-
-/**
- * ฟังก์ชันปุ่มลบ row data
- * @param val data ใน row ที่จะลบ
- */
-const clickDeleteRow = (val: RequestItemsHistoryObject) => {
-  rows.value = rows.value.filter((x: RequestItemsHistoryObject) => x !== val);
-  updateData.value = true;
-};
-
-/**
- * ฟังก์ชันเช็ค input ว่ามีการแก้ไขหรือยัง
- */
-const clickEditRow = () => {
-  myForm.value.validate(false);
-  updateData.value = true;
-};
-
-/**
- * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
- * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
- */
-const clickHistory = async (row: RequestItemsHistoryObject) => {
-  modalHistory.value = true;
-  rowsHistory.value = rawHistory.value.filter(
-    (f: RequestItemsHistoryObject) => f.id == row.id
-  );
-};
-
-/**
- * ฟังก์ชันแปลง date เป็นภาษาไทย
- * @param value วันที่ type datetime ที่จะแปลงเป็นไทย
- */
-const textDate = (value: Date) => {
-  return dateText(value);
-};
-
-/**
- * validate component
- */
-const validateData = async () => {
-  checkValidate.value = true;
-  await myForm.value.validate().then((result: boolean) => {
-    if (result == false) {
-      checkValidate.value = false;
-    }
-  });
-};
-
-/**
- * ย้ายลำดับ data
- * @param row ค่าใน row
- * @param type ย้ายตำแหน่งแบบไหน up=ขึ้น down=ลง
- */
-const directionItem = (row: RequestItemsHistoryObject, type: string) => {
-  clickEditRow();
-  if (type === "up") {
-    rows.value[
-      rows.value.findIndex((object: RequestItemsHistoryObject) => {
-        return object === row;
-      })
-    ].level -= 1;
-    rows.value[
-      rows.value.findIndex((object: RequestItemsHistoryObject) => {
-        return object === row;
-      }) - 1
-    ].level += 1;
-  } else {
-    rows.value[
-      rows.value.findIndex((object: RequestItemsHistoryObject) => {
-        return object === row;
-      })
-    ].level += 1;
-    rows.value[
-      rows.value.findIndex((object: RequestItemsHistoryObject) => {
-        return object === row;
-      }) + 1
-    ].level -= 1;
-  }
-  rows.value.sort(
-    (
-      firstItem: RequestItemsHistoryObject,
-      secondItem: RequestItemsHistoryObject
-    ) => firstItem.level - secondItem.level
-  );
-};
 </script>
 
 <template>
-  <div>
-    <q-form ref="myForm">
-      <data-table
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        v-model:editvisible="edit"
-        :add="clickAdd"
-        :edit="clickEdit"
-        :save="clickSave"
-        :deleted="clickDelete"
-        :cancel="clickCancel"
-        :publish="clickPublish"
-        :validate="validateData"
-        :publicData="version === 'published'"
-        :updateData="updateData"
-        :history="true"
+  <div class="q-pa-md">
+    <q-toolbar style="padding: 0">
+      <q-btn
+        flat
+        round
+        color="primary"
+        icon="add"
+        @click.stop="
+          () => {
+            dialogStatus = 'create';
+            dialog = true;
+          }
+        "
       >
-        <template #columns="props">
-          <q-tr :props="props" v-if="edit == false">
-            <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <div v-if="col.name == 'isActive'" class="">
-                <q-icon
-                  v-if="col.value == false"
-                  name="mdi-close"
-                  color="red"
-                  class="text-h5"
-                />
-                <q-icon
-                  v-else
-                  name="mdi-check"
-                  color="positive"
-                  class="text-h5"
-                />
-              </div>
-              <div v-else-if="col.name == 'createdAt'" class="">
-                {{ textDate(col.value) }}
-              </div>
-              <div v-else-if="col.name == 'lastUpdatedAt'" class="">
-                {{ textDate(col.value) }}
-              </div>
-              <div v-else-if="col.name == 'insigniaType'" class="">
-                {{ col.value == null ? "" : col.value.name }}
-              </div>
-              <div v-else class="">
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-history"
-                @click="clickHistory(props.row)"
-              />
-            </q-td>
-          </q-tr>
-          <q-tr :props="props" v-if="edit == true">
-            <q-td
-              key="level"
-              :props="props"
-              v-if="props.row.level !== undefined"
-            >
-              <div class="">
-                {{ props.row.level }}
-              </div>
-            </q-td>
-            <q-td key="name" :props="props" v-if="props.row.name !== undefined">
-              <q-input
-                class=""
-                outlined
-                @update:model-value="clickEditRow"
-                v-model="props.row.name"
-                dense
-                lazy-rules
-                autofocus
-                hide-bottom-space
-                :rules="[
-                  (val) => (val && val.length > 0) || 'กรุณากรอกข้อมูลให้ครบ',
-                  (val) =>
-                    checkDupDataName(val) || 'ชื่อซ้ำกันกับข้อมูลที่มีอยู่แล้ว',
-                ]"
-              ></q-input>
-            </q-td>
-            <q-td
-              key="shortName"
-              :props="props"
-              v-if="props.row.shortName !== undefined"
-            >
-              <q-input
-                class=""
-                outlined
-                @update:model-value="clickEditRow"
-                v-model="props.row.shortName"
-                dense
-                lazy-rules
-                hide-bottom-space
-                :rules="[
-                  (val) => (val && val.length > 0) || 'กรุณากรอกข้อมูลให้ครบ',
-                  (val) =>
-                    checkDupDataShortName(val) ||
-                    'ชื่อซ้ำกันกับข้อมูลที่มีอยู่แล้ว',
-                ]"
-              ></q-input>
-            </q-td>
-            <q-td
-              key="insigniaType"
-              :props="props"
-              v-if="props.row.shortName !== undefined"
-            >
-              <q-select
-                :options="insigniaTypeOption"
-                outlined
-                @update:model-value="clickEditRow"
-                v-model="props.row.insigniaType"
-                dense
-                lazy-rules
-                hide-bottom-space
-                option-label="name"
-                option-value="id"
-                :rules="[(val) => val || 'กรุณาเลือกลำดับชั้นเครื่องราชฯ']"
-              />
-            </q-td>
-            <q-td
-              key="createdAt"
-              :props="props"
-              v-if="props.row.createdAt !== undefined"
-            >
-              <div class="">
-                {{ textDate(props.row.createdAt) }}
-              </div>
-            </q-td>
-            <q-td key="lastUpdatedAt" :props="props">
-              <div class="">
-                {{ textDate(props.row.lastUpdatedAt) }}
-              </div>
-            </q-td>
-            <q-td
-              key="lastUpdateFullName"
-              :props="props"
-              v-if="props.row.lastUpdateFullName !== undefined"
-              class=""
-            >
-              {{ props.row.lastUpdateFullName }}
-            </q-td>
-            <q-td
-              key="isActive"
-              :props="props"
-              v-if="props.row.isActive !== undefined"
-            >
-              <q-toggle
-                v-model="props.row.isActive"
-                dense
-                size="34px"
-                color="positive"
-                @update:model-value="clickEditRow"
-              />
-            </q-td>
-            <q-td key="note" :props="props" v-if="props.row.note !== undefined">
-              <q-input
-                class=""
-                outlined
-                @update:model-value="clickEditRow"
-                v-model="props.row.note"
-                dense
-                lazy-rules
-                autofocus
-                hide-bottom-space
-              ></q-input>
-            </q-td>
+        <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+      </q-btn>
+      <q-space />
+      <div class="row q-gutter-sm">
+        <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></q-input>
+        <q-select
+          v-model="visibleColumns"
+          multiple
+          outlined
+          dense
+          options-dense
+          :display-value="$q.lang.table.columns"
+          emit-value
+          map-options
+          :options="columns"
+          option-value="name"
+          options-cover
+          style="min-width: 150px"
+        />
+      </div>
+    </q-toolbar>
 
-            <q-td auto-width>
-              <div class="row">
-                <q-btn
-                  :disable="props.row.level <= 1"
-                  flat
-                  dense
-                  size="12px"
-                  icon="mdi-menu-up"
-                  style="
-                    padding-top: 0em;
-                    padding-right: 0.5em;
-                    padding-bottom: 0em;
-                    padding-left: 0.5em;
-                    min-height: 0em;
-                  "
-                  @click="directionItem(props.row, 'up')"
-                />
-                <q-btn
-                  :disable="props.row.level >= rows.length"
-                  flat
-                  dense
-                  size="12px"
-                  icon="mdi-menu-down"
-                  style="
-                    padding-top: 0em;
-                    padding-right: 0.5em;
-                    padding-bottom: 0em;
-                    padding-left: 0.5em;
-                    min-height: 0em;
-                  "
-                  @click="directionItem(props.row, 'down')"
-                />
-              </div>
-              <q-btn
-                v-if="props.row.id !== '00000000-0000-0000-0000-000000000000'"
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-history"
-                @click="clickHistory(props.row)"
-              />
-              <q-btn
-                v-if="props.row.id === '00000000-0000-0000-0000-000000000000'"
+    <d-table
+      ref="table"
+      :columns="columns"
+      :rows="row"
+      :filter="filterKeyword"
+      row-key="name"
+      flat
+      bordered
+      :paging="true"
+      dense
+      class="custom-header-table"
+      :visible-columns="visibleColumns"
+    >
+      <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-bold">{{ 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 v-if="col.name == 'isActive'">
+              <q-icon
+                v-if="col.value == false"
+                name="mdi-close"
                 color="red"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-trash-can-outline"
-                @click="clickDeleteRow(props.row)"
+                class="text-h5"
               />
-            </q-td>
-          </q-tr>
-        </template>
-      </data-table>
-    </q-form>
+              <q-icon
+                v-else
+                name="mdi-check"
+                color="positive"
+                class="text-h5"
+              />
+            </div>
+            <div v-else>
+              {{ col.value }}
+            </div>
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              color="grey"
+              flat
+              dense
+              round
+              size="14px"
+              icon="more_vert"
+              @click.stop
+            >
+              <q-menu>
+                <q-list dense>
+                  <q-item
+                    v-close-popup
+                    clickable
+                    @click.stop="
+                      () => {
+                        dialogStatus = 'edit';
+                        dialog = true;
+                      }
+                    "
+                  >
+                    <q-item-section>
+                      <div class="row items-center white">
+                        <q-icon name="o_edit" color="positive" />
+                        <span class="q-ml-sm">แก้ไข</span>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                  <q-item clickable>
+                    <q-item-section
+                      @click="dialogRemove($q, async () => {})"
+                      v-close-popup
+                    >
+                      <div class="row items-center white">
+                        <q-icon name="mdi-trash-can-outline" color="negative" />
+                        <span class="q-ml-sm">ลบ</span>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+    </d-table>
+
+    <q-dialog v-model="dialog" class="dialog" persistent>
+      <q-card style="width: 400px">
+        <q-card-section class="flex justify-between">
+          <div v-if="dialogStatus == 'edit'" class="text-h6">แก้ไข</div>
+          <div v-else class="text-h6">เพิ่ม</div>
+          <q-btn flat v-close-popup round dense icon="close" color="red" />
+        </q-card-section>
+
+        <q-card-section class="q-pt-none q-gutter-md">
+          <q-input
+            outlined
+            v-model="insigniaTypeId"
+            label="ลำดับชั้นเครื่องราชฯ"
+            dense
+            readonly
+          />
+          <q-input outlined v-model="name" label="ชื่อเครื่องราชฯ" dense />
+          <q-input outlined v-model="shortName" label="ชื่อย่อ" dense />
+          <q-input
+            outlined
+            v-model="note"
+            type="textarea"
+            label="หมายเหตุ"
+            dense
+          />
+          <div class="row justify-between q-mt-md">
+            <span class="text-bold"> สถานะการใช้งาน </span>
+            <q-toggle v-model="isActive" dense />
+          </div>
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn
+            flat
+            label="ตกลง"
+            color="primary"
+            v-close-popup
+            @click="
+              () => {
+                (name = ''), (isActive = false);
+              }
+            "
+          />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
   </div>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div v-if="col.name == 'isActive'" class="">
-            <q-icon
-              v-if="col.value == false"
-              name="mdi-close"
-              color="red"
-              class="text-h5"
-            />
-            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
-          </div>
-          <div v-else-if="col.name == 'lastUpdatedAt'" class="">
-            {{ textDate(col.value) }}
-          </div>
-          <div v-else-if="col.name == 'insigniaType'" class="">
-            {{ col.value == null ? "" : col.value.name }}
-          </div>
-          <div v-else class="">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
 </template>
 
-<style>
-/* สีของnoti */
-.my-notif-class {
-  background: rgba(33, 186, 69, 0.5) !important;
-  color: #008f17 !important;
-}
-</style>
+<style></style>
diff --git a/src/modules/01_metadataNew/components/insignia/InsigniaType.vue b/src/modules/01_metadataNew/components/insignia/InsigniaType.vue
index d00c6394d..bd6d020a5 100644
--- a/src/modules/01_metadataNew/components/insignia/InsigniaType.vue
+++ b/src/modules/01_metadataNew/components/insignia/InsigniaType.vue
@@ -1,47 +1,12 @@
-<!-- tab ลำดับชั้นเครื่องราชฯ หน้าจัดการข้อมูลหลัก/ข้อมูลเครื่องราชอิสริยาภรณ์ -->
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
-import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
-
-/** importType*/
-
+import { ref } from "vue";
 import type { QTableProps } from "quasar";
-import type {
-  RequestItemsHistoryObject,
-  RequestItemsPublishHistoryObject,
-} from "@/modules/01_metadataNew/interface/request/insignia/InsigniaType";
-import type { ResponseHistoryObject } from "@/modules/01_metadataNew/interface/response/insignia/InsigniaType";
-
-/** importComponents*/
-import HistoryTable from "@/components/TableHistory.vue";
-
-/** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
+import { useRouter } from "vue-router";
 
-const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
-const { success, dateText, messageError, showLoader, hideLoader } = mixin;
-
-const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
-const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
-const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
-const tittleHistory = ref<string>("ประวัติแก้ไขลำดับชั้นเครื่องราชฯ"); //
-const myForm = ref<any>(null); //ref สำหรับเช็คข้อมูลว่ามีช่องว่างไหม
-const filter = ref<string>(""); //search data table
-const filterHistory = ref<string>(""); //search data table history
-const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
-const edit = ref<boolean>(false); //ตรวจสอบการกดปุ่มแก้ไขข้อมูล
-const idVersion = ref<string>(""); //id data ใน mongodb
-const version = ref<string>("published"); //รายการข้อมูลล่าสุดได้เผยแพร่หรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-const updateData = ref<boolean>(false); //ตรวจสอบการแก้ไขข้อมูลว่าได้แก้ไขหรือไม่
-const checkValidate = ref<boolean>(false);
-
-/** ข้อมูล Table*/
+const { date2Thai, dialogRemove } = mixin;
 const columns = ref<QTableProps["columns"]>([
   {
     name: "name",
@@ -99,539 +64,111 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const visibleColumns = ref<String[]>([
+
+const filterKeyword = ref<string>("");
+const dialog = ref<boolean>(false);
+const isActive = ref<boolean>(false);
+const name = ref<string>("");
+
+const dialogStatus = ref<string>("");
+const visibleColumns = ref<string[]>([
   "name",
   "createdAt",
   "lastUpdatedAt",
   "lastUpdateFullName",
   "isActive",
 ]);
-const columnsHistory = ref<QTableProps["columns"]>([
+
+const row = ref([
   {
-    name: "name",
-    align: "left",
-    label: "ลำดับชั้นเครื่องราชฯ",
-    sortable: true,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    id: "",
+    name: "test",
+    createdAt: date2Thai(new Date()),
+    lastUpdatedAt: date2Thai(new Date()),
+    lastUpdateFullName: "TestTest",
+    isActive: true,
   },
   {
-    name: "lastUpdatedAt",
-    align: "center",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    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: "isActive",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "isActive",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    id: "",
+    name: "test2",
+    createdAt: date2Thai(new Date()),
+    lastUpdatedAt: date2Thai(new Date()),
+    lastUpdateFullName: "TestTest",
+    isActive: false,
   },
 ]);
-const visibleColumnsHistory = ref<String[]>([
-  "name",
-  "lastUpdatedAt",
-  "lastUpdateFullName",
-  "isActive",
-]);
 
-/**
- * เมื่อเข้าหน้านี้จะเรียกฟังชันนี้ก่อน(get list data)
- */
-onMounted(async () => {
-  await fetchData();
-  await fetchHistory();
-});
-
-/**
- * ฟังก์ชัน get data ล่าสุด
- */
-const fetchData = async () => {
-  // await props.fetchDataComponent();
-  // const result = await getInsigniaType(false, load);
-  // version.value = result.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-  // idVersion.value = result.idversion; //เลข id ใน mongodb
-
-  // rows.value = result.data;
-  // updateData.value = false;
-  //   rows.value.splice(0);
-  //   showLoader();
-  await http
-    .get(config.API.listInsigniaTypeHistory)
-    .then((res) => {
-      let data = res.data.result;
-      version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-      idVersion.value = data.id; //เลข id ใน mongodb
-      rows.value = [];
-      data.items.map((e: RequestItemsHistoryObject) => {
-        rows.value.push({
-          id: e.id,
-          name: e.name,
-          createdAt: e.createdAt,
-          lastUpdatedAt: e.lastUpdatedAt,
-          lastUpdateFullName: e.lastUpdateFullName,
-          isActive: e.isActive,
-          createdFullName: e.createdFullName,
-          createdUserId: e.createdUserId,
-          lastUpdateUserId: e.lastUpdateUserId,
-        });
-      });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      updateData.value = false;
-      hideLoader();
-    });
-};
-
-/**
- * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลทั้งหมด
- */
-const fetchHistory = async () => {
-  showLoader();
-  await http
-    .get(config.API.listInsigniaTypePublishedHistory)
-    .then((res) => {
-      const data = res.data.result;
-      rawHistory.value = [];
-      if (data.length > 0) {
-        data.map((e: RequestItemsPublishHistoryObject) => {
-          e.items.map((i: RequestItemsHistoryObject) => {
-            rawHistory.value.push({
-              createdAt: i.createdAt,
-              createdFullName: i.createdFullName,
-              createdUserId: i.createdUserId,
-              id: i.id,
-              isActive: i.isActive,
-              lastUpdateFullName: i.lastUpdateFullName,
-              lastUpdateUserId: i.lastUpdateUserId,
-              lastUpdatedAt: i.lastUpdatedAt,
-              name: i.name,
-            });
-          });
-        });
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-    });
-};
-
-/**
- * ฟังก์ชัน clear data แบบร่าง
- * เมื่อเรียก api เสร็จแล้วจะ get data มาใหม่
- */
-const clearPublishedData = async () => {
-  showLoader();
-  await http
-    .delete(config.API.listInsigniaTypeHistory)
-    .then((res) => {
-      success($q, "ลบข้อมูลร่างสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchHistory();
-      await fetchData();
-    });
-};
-
-/**
- * ฟังก์ชันเผยแพร่แบบร่าง
- * เมื่อเรียก api เสร็จแล้วจะ get data มาใหม่
- */
-const publishedData = async () => {
-  showLoader();
-  await http
-    .get(config.API.listInsigniaTypePublished)
-    .then((res) => {
-      success($q, "เผยแพร่ข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-    });
-};
-
-/**
- * ฟังก์ชันเพิ่มข้อมูล
- */
-const clickAdd = async () => {
-  const filterRowNull = rows.value.filter(
-    (f: RequestItemsHistoryObject) =>
-      f.id === "00000000-0000-0000-0000-000000000000" && f.name == "" //เช็คข้อมูลใน array ว่าเป็นข้อมูลที่เพิ่มมาใหม่และยังไม่มีการกรอกข้อมูล
-  );
-  if (filterRowNull.length == 0) {
-    //ถ้าไม่เจอค่าจะให้เพิ่มข้อมูลใหม่ได้
-    rows.value.push({
-      createdAt: new Date(),
-      createdFullName: "",
-      createdUserId: "",
-      id: "00000000-0000-0000-0000-000000000000",
-      isActive: true,
-      lastUpdateFullName:
-        keycloak.tokenParsed == null ? "" : keycloak.tokenParsed.name,
-      lastUpdateUserId: "",
-      lastUpdatedAt: new Date(),
-      name: "",
-    });
-    updateData.value = true;
-  }
-};
-
-/**
- * ฟังก์ชันบันทึกแบบร่าง
- * เมื่อเรียก api เสร็จแล้วจะ get data มาใหม่
- * publish เมื่อบันทึกแบบร่างแล้วจะเผยแพร่เลยไหม true=บันทึกและเผยแพร่ false=บันทึกอย่างเดียว
- */
-const save = async (publish: boolean) => {
-  await validateData();
-  if (checkValidate.value == false) return;
-  rows.value.map((e: ResponseHistoryObject) => ({
-    //จัด data ก่อนส่งไป backend
-    id: e.id,
-    createdAt: e.createdAt,
-    lastUpdatedAt: e.lastUpdatedAt,
-    name: e.name,
-    isActive: e.isActive,
-    createdFullName: e.createdFullName,
-    createdUserId: e.createdUserId,
-    lastUpdateFullName: e.lastUpdateFullName,
-    lastUpdateUserId: e.lastUpdateUserId,
-  }));
-  showLoader();
-  await http
-    .post(config.API.listInsigniaTypeHistoryId(idVersion.value), {
-      id: idVersion.value,
-      version: "draft",
-      items: rows.value,
-    })
-    .then(async (res) => {
-      if (publish === false) {
-        success($q, "บันทึกข้อมูลร่างสำเร็จ");
-        await fetchData(); //ไม่เผยแพร่และ get data ล่าสุดมาใหม่
-      } else {
-        await publishedData(); //เผยแพร่ข้อมูลต
-      }
-      edit.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-      await fetchData();
-    });
-};
-
-/**
- * เช็คชื่อซ้ำกับข้อมูลที่มีอยู่แล้ว
- * @param val input ชื่อ
- */
-const checkDupDataName = (val: string) => {
-  const filterNameNull = rows.value.filter(
-    (f: RequestItemsHistoryObject) => f.name == val
-  ); //เช็คข้อมูลว่ากรอกชื่อซ้ำไหม
-  if (filterNameNull.length > 1) {
-    return false;
-  }
-  return true;
-};
-
-/**
- * ฟังก์ชันปุ่มแก้ไข ให้ get data มาใหม่
- */
-const clickEdit = async () => {
-  await fetchData();
-};
-
-/**
- * ฟังก์ชันปุ่มบันทึกแบบร่าง
- */
-const clickSave = async () => {
-  await save(false);
-  await fetchData();
-};
-
-/**
- * ฟังก์ชันปุ่มลบแบบร่าง
- */
-const clickDelete = async () => {
-  await clearPublishedData();
-  await fetchData();
-};
-
-/**
- * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
- */
-const clickCancel = async () => {
-  edit.value = false;
-  await fetchData();
-};
-
-/**
- * ฟังก์ชันปุ่มเผยแพร่ข้อมูล
- * เช็คข้อมูลก่อนว่าใน array กรอกข้อมูลครบไหมถ้าครบก็ให้เผยแพร่ได้
- * ถ้าค่าใน array ไม่มีข้อมูลใน row ก้จะให้บันทึกได้
- */
-const clickPublish = async () => {
-  if (myForm.value !== null) {
-    myForm.value.validate().then(async (result: boolean) => {
-      if (result) {
-        await save(true);
-      }
-    });
-  } else {
-    await save(true);
-  }
-};
-
-/**
- * ฟังก์ชันปุ่มลบ row data
- * @param val data ใน row ที่จะลบ
- */
-const clickDeleteRow = (val: RequestItemsHistoryObject) => {
-  rows.value = rows.value.filter((x: RequestItemsHistoryObject) => x !== val);
-  updateData.value = true;
-};
-
-/**
- * ฟังก์ชันเช็ค input ว่ามีการแก้ไขหรือยัง
- */
-const clickEditRow = () => {
-  myForm.value.validate(false);
-  updateData.value = true;
-};
-
-/**
- * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
- * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
- */
-const clickHistory = async (row: RequestItemsHistoryObject) => {
-  modalHistory.value = true;
-  rowsHistory.value = rawHistory.value.filter(
-    (f: RequestItemsHistoryObject) => f.id == row.id
-  );
-};
-
-/**
- * ฟังก์ชันแปลง date เป็นภาษาไทย
- * @param value วันที่ type datetime ที่จะแปลงเป็นไทย
- */
-const textDate = (value: Date) => {
-  return dateText(value);
-};
-
-/**
- * validate component
- */
-const validateData = async () => {
-  checkValidate.value = true;
-  await myForm.value.validate().then((result: boolean) => {
-    if (result == false) {
-      checkValidate.value = false;
-    }
-  });
-};
-
-function onclickDetail(data: any) {
+function onclickDetail(data: (typeof row)["value"][number]) {
   const id = data.id;
-  router.push(`/master-data/insignia/detail/${id}`);
+  router.push(`/master-data/insignia/detail/test`);
 }
 </script>
 
 <template>
-  <div>
-    <q-form ref="myForm">
-      <data-table
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        v-model:editvisible="edit"
-        :add="clickAdd"
-        :edit="clickEdit"
-        :save="clickSave"
-        :deleted="clickDelete"
-        :cancel="clickCancel"
-        :publish="clickPublish"
-        :validate="validateData"
-        :publicData="version === 'published'"
-        :updateData="updateData"
-        :history="true"
-      >
-        <template #columns="props">
-          <q-tr
-            :props="props"
-            v-if="edit == false"
-            @click.stop="onclickDetail(props.row)"
-          >
-            <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <div v-if="col.name == 'isActive'" class="">
-                <q-icon
-                  v-if="col.value == false"
-                  name="mdi-close"
-                  color="red"
-                  class="text-h5"
-                />
-                <q-icon
-                  v-else
-                  name="mdi-check"
-                  color="positive"
-                  class="text-h5"
-                />
-              </div>
-              <div v-else-if="col.name == 'createdAt'" class="">
-                {{ textDate(col.value) }}
-              </div>
-              <div v-else-if="col.name == 'lastUpdatedAt'" class="">
-                {{ textDate(col.value) }}
-              </div>
-              <div v-else class="">
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-history"
-                @click.stop="clickHistory(props.row)"
-              />
-            </q-td>
-          </q-tr>
-          <q-tr :props="props" v-if="edit == true">
-            <q-td key="name" :props="props" v-if="props.row.name !== undefined">
-              <q-input
-                class=""
-                outlined
-                @update:model-value="clickEditRow"
-                v-model="props.row.name"
-                dense
-                lazy-rules
-                autofocus
-                hide-bottom-space
-                :rules="[
-                  (val) => (val && val.length > 0) || 'กรุณากรอกข้อมูลให้ครบ',
-                  (val) =>
-                    checkDupDataName(val) || 'ชื่อซ้ำกันกับข้อมูลที่มีอยู่แล้ว',
-                ]"
-              ></q-input>
-            </q-td>
-            <q-td
-              key="createdAt"
-              :props="props"
-              v-if="props.row.createdAt !== undefined"
-            >
-              <div class="">
-                {{ textDate(props.row.createdAt) }}
-              </div>
-            </q-td>
-            <q-td key="lastUpdatedAt" :props="props">
-              <div class="">
-                {{ textDate(props.row.lastUpdatedAt) }}
-              </div>
-            </q-td>
-            <q-td
-              key="lastUpdateFullName"
-              :props="props"
-              v-if="props.row.lastUpdateFullName !== undefined"
-              class=""
-            >
-              {{ props.row.lastUpdateFullName }}
-            </q-td>
-            <q-td
-              key="isActive"
-              :props="props"
-              v-if="props.row.isActive !== undefined"
-            >
-              <q-toggle
-                v-model="props.row.isActive"
-                dense
-                size="34px"
-                color="positive"
-                @update:model-value="clickEditRow"
-              />
-            </q-td>
+  <q-toolbar style="padding: 0">
+    <q-btn
+      flat
+      round
+      color="primary"
+      icon="add"
+      @click.stop="
+        () => {
+          dialogStatus = 'create';
+          dialog = true;
+        }
+      "
+    >
+      <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+    </q-btn>
+    <q-space />
+    <div class="row q-gutter-sm">
+      <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></q-input>
+      <q-select
+        v-model="visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="columns"
+        option-value="name"
+        options-cover
+        style="min-width: 150px"
+      />
+    </div>
+  </q-toolbar>
 
-            <q-td auto-width>
-              <q-btn
-                v-if="props.row.id === '00000000-0000-0000-0000-000000000000'"
-                color="red"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-trash-can-outline"
-                @click.stop="clickDeleteRow(props.row)"
-              />
-              <q-btn
-                v-if="props.row.id !== '00000000-0000-0000-0000-000000000000'"
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-history"
-                @click.stop="clickHistory(props.row)"
-              />
-            </q-td>
-          </q-tr>
-        </template>
-      </data-table>
-    </q-form>
-  </div>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
+  <d-table
+    ref="table"
+    :columns="columns"
+    :rows="row"
+    :filter="filterKeyword"
+    row-key="name"
+    flat
+    bordered
+    :paging="true"
+    dense
+    class="custom-header-table"
+    :visible-columns="visibleColumns"
   >
-    <template #columns="props">
+    <template v-slot:header="props">
       <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div v-if="col.name == 'isActive'" class="">
+        <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"
+        @click.stop="onclickDetail(props.row)"
+      >
+        <q-td v-for="col in props.cols" :key="col.id">
+          <div v-if="col.name == 'isActive'">
             <q-icon
               v-if="col.value == false"
               name="mdi-close"
@@ -640,22 +177,89 @@ function onclickDetail(data: any) {
             />
             <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
           </div>
-          <div v-else-if="col.name == 'lastUpdatedAt'" class="">
-            {{ textDate(col.value) }}
-          </div>
-          <div v-else class="">
+          <div v-else>
             {{ col.value }}
           </div>
         </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="grey"
+            flat
+            dense
+            round
+            size="14px"
+            icon="more_vert"
+            @click.stop
+          >
+            <q-menu>
+              <q-list dense>
+                <q-item
+                  v-close-popup
+                  clickable
+                  @click.stop="
+                    () => {
+                      dialogStatus = 'edit';
+                      dialog = true;
+                    }
+                  "
+                >
+                  <q-item-section>
+                    <div class="row items-center white">
+                      <q-icon name="o_edit" color="positive" />
+                      <span class="q-ml-sm">แก้ไข</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable>
+                  <q-item-section
+                    @click="dialogRemove($q, async () => {})"
+                    v-close-popup
+                  >
+                    <div class="row items-center white">
+                      <q-icon name="mdi-trash-can-outline" color="negative" />
+                      <span class="q-ml-sm">ลบ</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-td>
       </q-tr>
     </template>
-  </HistoryTable>
+  </d-table>
+
+  <q-dialog v-model="dialog" class="dialog" persistent>
+    <q-card style="width: 400px">
+      <q-card-section class="flex justify-between">
+        <div v-if="dialogStatus == 'edit'" class="text-h6">แก้ไข</div>
+        <div v-else class="text-h6">เพิ่ม</div>
+        <q-btn flat v-close-popup round dense icon="close" color="red" />
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">
+        <q-input outlined v-model="name" label="ลำดับชั้นเครื่องราชฯ" dense />
+        <div class="row justify-between q-mt-md">
+          <span class="text-bold"> สถานะการใช้งาน </span>
+          <q-toggle v-model="isActive" dense />
+        </div>
+      </q-card-section>
+
+      <q-card-actions align="right">
+        <q-btn
+          flat
+          label="ตกลง"
+          color="primary"
+          v-close-popup
+          @click="
+            () => {
+              (name = ''), (isActive = false);
+            }
+          "
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 
-<style>
-/* สีของnoti */
-.my-notif-class {
-  background: rgba(33, 186, 69, 0.5) !important;
-  color: #008f17 !important;
-}
-</style>
+<style></style>
diff --git a/src/modules/01_metadataNew/views/insignia.vue b/src/modules/01_metadataNew/views/insignia.vue
index fa9e3ef1e..d16a9b3e5 100644
--- a/src/modules/01_metadataNew/views/insignia.vue
+++ b/src/modules/01_metadataNew/views/insignia.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import InsigniaType from "@/modules/01_metadataNew/components/insignia/InsigniaType.vue";
+import InsigniaType from "@/modules/01_metadataNew/components/insignia/NewInsigniaType.vue";
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     ข้อมูลเครื่องราชอิสริยาภรณ์
   </div>
 
-  <q-card flat bordered> <InsigniaType /> </q-card>
+  <q-card flat bordered class="q-pa-md"> <InsigniaType /> </q-card>
 </template>
 
 <style scoped></style>