From 0a4aa8384adb5bcb59e1d2e350f6fe43a6ff3367 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Fri, 26 Jan 2024 15:20:32 +0700
Subject: [PATCH 1/4] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20popu?=
 =?UTF-8?q?p=20=20history?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DialogHistory.vue              | 270 ++++++++++++------
 .../interface/index/Main.ts                   |  24 +-
 2 files changed, 207 insertions(+), 87 deletions(-)

diff --git a/src/modules/02_organizationalNew/components/DialogHistory.vue b/src/modules/02_organizationalNew/components/DialogHistory.vue
index d00af4e58..a0b481838 100644
--- a/src/modules/02_organizationalNew/components/DialogHistory.vue
+++ b/src/modules/02_organizationalNew/components/DialogHistory.vue
@@ -3,7 +3,14 @@ import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps } from "quasar";
+import type { HistoryType } from "@/modules/02_organizationalNew/interface/index/Main";
+
 import DialogHeader from "@/components/DialogHeader.vue";
+import Modal from "@/modules/05_placement/components/AppointEmployee/Modal.vue";
+import { getDateMeta } from "@fullcalendar/core/internal";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const props = defineProps({
   modal: Boolean,
@@ -12,102 +19,193 @@ const props = defineProps({
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { dialogConfirm } = mixin;
-
-const rows = ref<any[]>([]);
-
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+const rows = ref<HistoryType[]>([]);
 
 const columns = ref<QTableProps["columns"]>([
-    {
-      name: "no",
-      align: "left",
-      label: "ลำดับ",
-      sortable: false,
-      field: "no",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "name",
-      align: "left",
-      label: "ชื่อ",
-      sortable: true,
-      field: "name",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "lastUpdatedAt",
-      align: "left",
-      label: "วันที่แก้ไข",
-      sortable: true,
-      field: "lastUpdatedAt",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-
-  ]);
-  const visibleColumns = ref<string[]>([
-    "no",
-    "name",
-    "lastUpdatedAt",
-  ]);
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "orgRevisionName",
+    align: "left",
+    label: "ชื่อโครงสร้าง",
+    sortable: true,
+    field: "orgRevisionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "orgRevisionIsCurrent",
+    align: "center",
+    label: "โครงสร้างที่ใช้อยู่",
+    sortable: false,
+    field: "orgRevisionIsCurrent",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "orgRevisionIsDraft",
+    align: "center",
+    label: "โครงสร้างแบบร่าง",
+    sortable: false,
+    field: "orgRevisionIsDraft",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "orgRevisionCreatedAt",
+    align: "left",
+    label: "วันเริ่มใช้โครงสร้าง",
+    sortable: true,
+    field: "orgRevisionCreatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "orgRevisionName",
+  "orgRevisionIsCurrent",
+  "orgRevisionIsDraft",
+  "orgRevisionCreatedAt",
+]);
 
+function getDate() {
+  const dataDraft: HistoryType[] = [
+    {
+      orgRevisionId: "00000000-0000-0000-0000-000000000000",
+      orgRevisionName: "xxxx",
+      orgRevisionIsCurrent: true,
+      orgRevisionIsDraft: false,
+      orgRevisionCreatedAt: date2Thai(new Date(),false,true),
+    },
+    {
+      orgRevisionId: "00000000-0000-0000-0000-000000000001",
+      orgRevisionName: "xxx1",
+      orgRevisionIsCurrent: false,
+      orgRevisionIsDraft: true,
+      orgRevisionCreatedAt: date2Thai(new Date(),false,true),
+    },
+  ];
+  rows.value = dataDraft;
+  // รอ API
+  // showLoader()
+  // http
+  // .get(config.API.organizationHistoryNew)
+  // .then((res)=>{
+  //     const dataList = res.data.result
+  //     dataList.map((item:HistoryType)=>(
+  //       {
+  //         orgRevisionId:item.orgRevisionId ? item.orgRevisionId:'-',
+  //         orgRevisionName:item.orgRevisionName ? item.orgRevisionName:'-',
+  //         orgRevisionIsCurrent:item.orgRevisionIsCurrent ? item.orgRevisionIsCurrent:'-',
+  //         orgRevisionIsDraft:item.orgRevisionIsDraft ? item.orgRevisionIsDraft:'-',
+  //         orgRevisionCreatedAt:item.orgRevisionCreatedAt ? date2Thai(item.orgRevisionCreatedAt):'-',
+  //       }
+  //     ))
+  //     rows.value = dataList
+  // }).catch((e)=>{
+  //   messageError($q,e)
+  // })
+  // .finally(()=>{
+  //   hideLoader()
+  // })
+}
+watch(
+  () => props.modal,
+  () => {
+    if (props.modal == true) {
+      getDate();
+    }
+  }
+);
 </script>
 <template>
   <template>
     <q-dialog v-model="props.modal" persistent>
       <q-card style="min-width: 40vw">
-          <DialogHeader :tittle="`ประวัติโครงสร้าง`" :close="props.close" />
-          <q-separator />
+        <DialogHeader :tittle="`ประวัติโครงสร้าง`" :close="props.close" />
+        <q-separator />
 
-          <q-card-section>
-            <div class="row q-col-gutter-sm">
-              <div class="col-12">
-                <d-table
-                  ref="table"
-                  :columns="columns"
-                  :rows="rows"
-                  row-key="idcard"
-                  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"
-                        style="color: #000000; font-weight: 500"
-                      >
-                        <span class="text-weight-medium">{{ col.label }}</span>
-                      </q-th>
-                    </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.name"
-                        :props="props"
-                      >
-                        <div v-if="col.name == 'no'">
-                          {{ props.rowIndex + 1 }}
-                        </div>
-                        <div v-else>
-                          {{ col.value }}
-                        </div>
-                      </q-td>
-                    </q-tr>
-                  </template>
-                </d-table>
-              </div>
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-12">
+              <d-table
+                ref="table"
+                :columns="columns"
+                :rows="rows"
+                row-key="idcard"
+                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"
+                      style="color: #000000; font-weight: 500"
+                    >
+                      <span class="text-weight-medium">{{ col.label }}</span>
+                    </q-th>
+                  </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.name"
+                      :props="props"
+                    >
+                      <div v-if="col.name == 'no'">
+                        {{ props.rowIndex + 1 }}
+                      </div>
+
+                      <div v-else-if="col.name == 'orgRevisionIsCurrent'">
+                        <q-icon
+                          :name="props.row.orgRevisionIsCurrent == true ? 'mdi-check':'mdi-close'"
+                          :color="props.row.orgRevisionIsCurrent == true ? 'positive':'red'"
+                          class="text-h5"
+                        />
+                      </div>
+                      <div v-else-if="col.name == 'orgRevisionIsDraft'">
+                        <q-icon
+                          :name="props.row.orgRevisionIsDraft == true ? 'mdi-check':'mdi-close'"
+                          :color="props.row.orgRevisionIsDraft == true ? 'positive':'red'"
+                          class="text-h5"
+                        />
+                      </div>
+
+                      <div v-else>
+                        {{ col.value }}
+                      </div>
+                    </q-td>
+                  </q-tr>
+                </template>
+              </d-table>
             </div>
-          </q-card-section>
+          </div>
+        </q-card-section>
       </q-card>
     </q-dialog>
   </template>
diff --git a/src/modules/02_organizationalNew/interface/index/Main.ts b/src/modules/02_organizationalNew/interface/index/Main.ts
index 249170468..37302deba 100644
--- a/src/modules/02_organizationalNew/interface/index/Main.ts
+++ b/src/modules/02_organizationalNew/interface/index/Main.ts
@@ -40,18 +40,40 @@ interface FormAgencyRef {
   tel: object | null;
   [key: string]: any;
 }
+
 interface FormPositionRef {
   prefixNo: object | null;
   positionNo: object | null;
   [key: string]: any;
 }
+
 interface FormDateTimeRef {
   dateTime: object | null;
   [key: string]: any;
 }
+
 interface FormNewStructureRef {
   orgRevisionName: object | null;
   type: object | null;
   [key: string]: any;
 }
-export type { Pagination, DataOption, FormDataAgency, FormDataPosition, FormAgencyRef, FormPositionRef, FormDateTimeRef,FormDataNewStructure,FormNewStructureRef };
+
+interface HistoryType {
+  orgRevisionId: string
+  orgRevisionName: string
+  orgRevisionIsCurrent: boolean
+  orgRevisionIsDraft: boolean
+  orgRevisionCreatedAt: any
+}
+export type { 
+  Pagination, 
+  DataOption, 
+  FormDataAgency, 
+  FormDataPosition, 
+  FormAgencyRef, 
+  FormPositionRef, 
+  FormDateTimeRef, 
+  FormDataNewStructure, 
+  FormNewStructureRef, 
+  HistoryType 
+};

From e6bc92e736fece2d60e8d154db4e86c8ab0456ea Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Fri, 26 Jan 2024 15:24:49 +0700
Subject: [PATCH 2/4] API history

---
 src/api/02_organizational/api.organization.ts                 | 2 ++
 src/modules/02_organizationalNew/components/DialogHistory.vue | 1 +
 2 files changed, 3 insertions(+)

diff --git a/src/api/02_organizational/api.organization.ts b/src/api/02_organizational/api.organization.ts
index 18173d3b1..1f82f9d08 100644
--- a/src/api/02_organizational/api.organization.ts
+++ b/src/api/02_organizational/api.organization.ts
@@ -6,4 +6,6 @@ export default {
   /** โครงสร้างอัตรากำลัง*/
   activeOrganization: `${organization}/active`,
   createOrganization: `${organization}/draft`,
+
+  organizationHistoryNew:`${organization}/history`,
 };
diff --git a/src/modules/02_organizationalNew/components/DialogHistory.vue b/src/modules/02_organizationalNew/components/DialogHistory.vue
index a0b481838..e2d243a9f 100644
--- a/src/modules/02_organizationalNew/components/DialogHistory.vue
+++ b/src/modules/02_organizationalNew/components/DialogHistory.vue
@@ -104,6 +104,7 @@ function getDate() {
     },
   ];
   rows.value = dataDraft;
+  
   // รอ API
   // showLoader()
   // http

From 0dd2915db78a8000f204bc5fbd4180ad30bec636 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Fri, 26 Jan 2024 15:29:48 +0700
Subject: [PATCH 3/4] row key

---
 src/modules/02_organizationalNew/components/DialogHistory.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/02_organizationalNew/components/DialogHistory.vue b/src/modules/02_organizationalNew/components/DialogHistory.vue
index e2d243a9f..f036d55e0 100644
--- a/src/modules/02_organizationalNew/components/DialogHistory.vue
+++ b/src/modules/02_organizationalNew/components/DialogHistory.vue
@@ -151,7 +151,7 @@ watch(
                 ref="table"
                 :columns="columns"
                 :rows="rows"
-                row-key="idcard"
+                row-key="orgRevisionId"
                 flat
                 bordered
                 :paging="true"

From 8cd40e69aa9c66a0f62a6d2ea6d6a6560bb29353 Mon Sep 17 00:00:00 2001
From: oat <oatkub402@gmail.com>
Date: Fri, 26 Jan 2024 16:32:52 +0700
Subject: [PATCH 4/4] =?UTF-8?q?API=20=E0=B9=80=E0=B8=84=E0=B8=A3=E0=B8=B7?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=87=E0=B8=A3=E0=B8=B2=E0=B8=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/manage/api.insignia.ts                |   3 +
 .../components/insignia/InsigniaDetail.vue    | 137 ++++--------------
 .../components/insignia/InsigniaList.vue      | 102 +++++++++++--
 .../components/insignia/InsigniaType.vue      |  90 ++++++++----
 .../01_metadataNew/stores/InsigniaStore.ts    |   7 +-
 5 files changed, 183 insertions(+), 156 deletions(-)

diff --git a/src/api/manage/api.insignia.ts b/src/api/manage/api.insignia.ts
index cabf1a9a6..1084b38c9 100644
--- a/src/api/manage/api.insignia.ts
+++ b/src/api/manage/api.insignia.ts
@@ -32,4 +32,7 @@ export default {
   //   listInsigniaHistoryId: (id: string) => `${insignia}history/${id}`,
   //   listInsigniaPublished: `${insignia}history/published`,
   //   listInsigniaPublishedHistory: `${insignia}history/published-history`,
+  insigniaTypeNew: `${insigniaType}draft`,
+  insigniaTypeNewId: (id: string) => `${insigniaType}${id}`,
+  insigniaNewId: (id: string) => `${insignia}${id}`,
 };
diff --git a/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue b/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue
index 075bf3125..db71f6c5e 100644
--- a/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue
+++ b/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue
@@ -2,118 +2,45 @@
 import { ref, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import InsigniaList from "@/modules/01_metadataNew/components/insignia/InsigniaList.vue";
-const router = useRouter();
-const route = useRoute();
-const nameType = ref<string>("");
 import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+import { useInsigniaDataStore } from "@/modules/01_metadataNew/stores/InsigniaStore";
 import type {
   DetailResponse,
   DetailRow,
 } from "@/modules/01_metadataNew/interface/response/insignia/Insignia";
 
+const nameType = ref<string>("");
+const router = useRouter();
+const route = useRoute();
+const $q = useQuasar();
+const store = useInsigniaDataStore();
 const row = ref<DetailRow[]>();
 const mixin = useCounterMixin();
-const { date2Thai } = mixin;
+const { date2Thai, messageError, hideLoader, showLoader } = mixin;
 const id = ref<string>(route.params.id.toString());
-function fetchName(name: string) {
-  nameType.value = name;
+const insigniaTypeId = ref<string>("");
+
+async function fetchData(id: string) {
+  showLoader();
+  await http
+    .get(config.API.insigniaTypeNewId(id))
+    .then(async (res) => {
+      insigniaTypeId.value = res.data.result.name;
+      store.fetchData(res.data.result.insignias, res.data.result.name);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
-const data = ref<DetailResponse[]>([
-  {
-    id: "1",
-    level: 1,
-    shortName: "จ.ม.",
-    insigniaType: "ชั้นต่ำกว่าสายสะพาย",
-    insigniaTypeId: "1",
-    note: "-",
-    name: "จัตุรถาภรณ์มงกุฎไทย",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "System Administrator",
-    isActive: true,
-  },
-  {
-    id: "2",
-    level: 1,
-    shortName: "จ.ช.",
-    insigniaType: "ชั้นต่ำกว่าสายสะพาย",
-    insigniaTypeId: "1",
-    note: "-",
-    name: "จัตุรถาภรณ์ช้างเผือก",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-    isActive: false,
-  },
-  {
-    id: "1",
-    level: 1,
-    shortName: "บ.ม.",
-    insigniaType: "ชั้นสายสะพาย",
-    insigniaTypeId: "2",
-    note: "-",
-    name: "เบญจมาภรณ์มงกุฎไทย",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-    isActive: true,
-  },
-  {
-    id: "2",
-    level: 1,
-    shortName: "ท.ม.",
-    insigniaType: "ชั้นสายสะพาย",
-    insigniaTypeId: "2",
-    note: "-",
-    name: "ทวีติยาภรณ์มงกุฎไทย",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-    isActive: true,
-  },
-  {
-    id: "1",
-    level: 1,
-    shortName: "บ.ช.",
-    insigniaType: "เหรียญบำเหน็จในราชการ",
-    insigniaTypeId: "3",
-    note: "-",
-    name: "เบญจมาภรณ์ช้างเผือก",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "สาวิตรี ศรีสมัย",
-    isActive: true,
-  },
-  {
-    id: "2",
-    level: 1,
-    shortName: "ท.ม.",
-    insigniaType: "เหรียญบำเหน็จในราชการ",
-    insigniaTypeId: "3",
-    note: "-",
-    name: "ทวีติยาภรณ์มงกุฎไทย",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "System Administrator",
-    isActive: true,
-  },
-]);
-
-function fetchData() {
-  const datafilter = data.value.find((e) => e.insigniaTypeId === id.value);
-  console.log(datafilter);
-  datafilter && fetchName(datafilter.insigniaType);
-  const list = data.value.map((e) => ({
-    ...e,
-    createdAt: e.createdAt ? date2Thai(e.createdAt) : "",
-    lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "",
-  }));
-  row.value = list.filter((e) => e.insigniaTypeId === id.value);
-}
-
-onMounted(() => {
-  fetchData();
+onMounted(async () => {
+  fetchData(id.value);
 });
 </script>
 <template>
@@ -128,15 +55,11 @@ onMounted(() => {
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-    รายละเอียดข้อมูลเครื่องราชอิสริยาภรณ์ {{ nameType }}
+    รายการข้อมูลเครื่องราชอิสริยาภรณ์ {{ insigniaTypeId }}
   </div>
 
   <q-card flat bordered>
-    <InsigniaList
-      :data="row"
-      @update:fetchName="fetchName"
-      :nameType="nameType"
-    />
+    <InsigniaList :data="row" />
   </q-card>
 </template>
 
diff --git a/src/modules/01_metadataNew/components/insignia/InsigniaList.vue b/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
index 846725371..a77a1fe19 100644
--- a/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
+++ b/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
@@ -2,13 +2,23 @@
 import { ref, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
+import { useInsigniaDataStore } from "@/modules/01_metadataNew/stores/InsigniaStore";
 import dialogHeader from "@/components/DialogHeader.vue";
 import { useQuasar } from "quasar";
-
+import http from "@/plugins/http";
+import config from "@/app.config";
+const store = useInsigniaDataStore();
 const router = useRouter();
 const mixin = useCounterMixin();
-const { date2Thai, dialogRemove, dialogConfirm } = mixin;
+const {
+  date2Thai,
+  dialogRemove,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+} = mixin;
 const $q = useQuasar();
 const columns = ref<QTableProps["columns"]>([
   {
@@ -119,7 +129,8 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-
+const route = useRoute();
+const id = ref<string>(route.params.id.toString());
 const filterKeyword = ref<string>("");
 const dialog = ref<boolean>(false);
 const isActive = ref<boolean>(false);
@@ -130,6 +141,7 @@ const insigniaTypeId = ref<string>("");
 const nameRef = ref<any>(null);
 const shortNameRef = ref<any>(null);
 const dialogStatus = ref<string>("");
+const editId = ref<string>("");
 const visibleColumns = ref<string[]>([
   "level",
   "name",
@@ -142,11 +154,6 @@ const visibleColumns = ref<string[]>([
   "note",
 ]);
 
-const props = defineProps({
-  data: { type: Object },
-  nameType: { type: String },
-});
-
 function closeDialog() {
   dialog.value = false;
 }
@@ -157,21 +164,78 @@ function validateForm() {
   onSubmit();
 }
 
+async function fetchData(id: string) {
+  showLoader();
+  await http
+    .get(config.API.insigniaTypeNewId(id))
+    .then(async (res) => {
+      insigniaTypeId.value = res.data.result.name;
+      store.fetchData(res.data.result.insignias, res.data.result.name);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+onMounted(async () => {
+  fetchData(id.value);
+  console.log(id.value);
+});
+
 async function onSubmit() {
   if (name.value.length > 0 && shortName.value.length > 0) {
     dialogConfirm(
       $q,
       async () => {
-        console.log("สำเร็จ");
+        dialogStatus.value === "create" ? addData() : editData(editId.value);
         closeDialog();
         name.value = "";
         shortName.value = "";
+        isActive.value = false;
+        note.value = "";
       },
       "ยืนยันการบันทึกข้อมูล",
       "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
     );
   }
 }
+
+async function addData() {
+  await http.post(config.API.insignia, {
+    name: name.value,
+    isActive: isActive.value,
+    shortName: shortName.value,
+    note: note.value == "" ? "-" : "",
+    insigniaTypeId: id.value,
+  });
+  fetchData(id.value);
+}
+
+async function editData(idData: string) {
+  await http.put(config.API.insigniaNewId(idData), {
+    name: name.value,
+    isActive: isActive.value,
+    shortName: shortName.value,
+    note: note.value == "" ? "-" : "",
+    insigniaTypeId: id.value,
+  });
+  fetchData(id.value);
+}
+
+async function deleteData(idData: string) {
+  await http.delete(config.API.insigniaNewId(idData));
+  fetchData(id.value);
+}
+
+import { defineEmits } from "vue";
+
+const emit = defineEmits(["nameType"]);
+
+const nameType = () => {
+  emit("nameType", insigniaTypeId.value);
+};
 </script>
 
 <template>
@@ -214,7 +278,7 @@ async function onSubmit() {
     <d-table
       ref="table"
       :columns="columns"
-      :rows="props.data"
+      :rows="store.row"
       :filter="filterKeyword"
       row-key="name"
       flat
@@ -272,6 +336,11 @@ async function onSubmit() {
                       () => {
                         dialogStatus = 'edit';
                         dialog = true;
+                        editId = props.row.id;
+                        name = props.row.name;
+                        shortName = props.row.shortName;
+                        note = props.row.note;
+                        isActive = props.row.isActive;
                       }
                     "
                   >
@@ -284,7 +353,12 @@ async function onSubmit() {
                   </q-item>
                   <q-item clickable>
                     <q-item-section
-                      @click="dialogRemove($q, async () => {})"
+                      @click="
+                        dialogRemove(
+                          $q,
+                          async () => await deleteData(props.row.id)
+                        )
+                      "
                       v-close-popup
                     >
                       <div class="row items-center white">
@@ -315,7 +389,7 @@ async function onSubmit() {
           <q-card-section class="q-pa-none">
             <q-input
               outlined
-              :model-value="nameType"
+              :model-value="insigniaTypeId"
               label="ลำดับชั้นเครื่องราชฯ"
               dense
               lazy-rules
@@ -328,7 +402,7 @@ async function onSubmit() {
               ref="nameRef"
               outlined
               v-model="name"
-              label="ชื่อเครื่องราช"
+              label="ชื่อเครื่องราชฯ"
               dense
               lazy-rules
               borderless
diff --git a/src/modules/01_metadataNew/components/insignia/InsigniaType.vue b/src/modules/01_metadataNew/components/insignia/InsigniaType.vue
index 00b0f97b9..684fe5740 100644
--- a/src/modules/01_metadataNew/components/insignia/InsigniaType.vue
+++ b/src/modules/01_metadataNew/components/insignia/InsigniaType.vue
@@ -6,11 +6,20 @@ import { useRouter } from "vue-router";
 import { useInsigniaDataStore } from "@/modules/01_metadataNew/stores/InsigniaStore";
 import dialogHeader from "@/components/DialogHeader.vue";
 import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const store = useInsigniaDataStore();
 const router = useRouter();
 const mixin = useCounterMixin();
-const { dialogRemove, dialogConfirm } = mixin;
+const {
+  dialogRemove,
+  dialogConfirm,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
 const columns = ref<QTableProps["columns"]>([
   {
     name: "name",
@@ -71,6 +80,7 @@ const columns = ref<QTableProps["columns"]>([
 
 const $q = useQuasar();
 
+const editId = ref<string>("");
 const filterKeyword = ref<string>("");
 const dialog = ref<boolean>(false);
 const isActive = ref<boolean>(false);
@@ -87,34 +97,20 @@ const visibleColumns = ref<string[]>([
 
 // const row = ref([]);
 
-function fetchData() {
-  const data = [
-    {
-      id: "1",
-      name: "ชั้นต่ำกว่าสายสะพาย",
-      createdAt: new Date(),
-      lastUpdatedAt: new Date(),
-      lastUpdateFullName: "สาวิตรี ศรีสมัย",
-      isActive: true,
-    },
-    {
-      id: "2",
-      name: "ชั้นสายสะพาย",
-      createdAt: new Date(),
-      lastUpdatedAt: new Date(),
-      lastUpdateFullName: "System Administrator",
-      isActive: false,
-    },
-    {
-      id: "3",
-      name: "เหรียญบำเหน็จในราชการ",
-      createdAt: new Date(),
-      lastUpdatedAt: new Date(),
-      lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-      isActive: false,
-    },
-  ];
-  store.fetchData(data);
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.insigniaTypeNew)
+    .then(async (res) => {
+      console.log(res.data.result);
+      store.fetchData(res.data.result);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 onMounted(async () => {
@@ -129,6 +125,27 @@ function onclickDetail(id: string) {
   router.push(`/master-data/insignia/detail/${id}`);
 }
 
+async function addData() {
+  await http.post(config.API.insigniaType, {
+    name: name.value,
+    isActive: isActive.value,
+  });
+  fetchData();
+}
+
+async function editData(id: string) {
+  await http.put(config.API.insigniaTypeNewId(id), {
+    name: name.value,
+    isActive: isActive.value,
+  });
+  fetchData();
+}
+
+async function deleteData(id: string) {
+  await http.delete(config.API.insigniaTypeNewId(id));
+  fetchData();
+}
+
 function validateForm() {
   nameRef.value.validate();
   onSubmit();
@@ -139,9 +156,10 @@ async function onSubmit() {
     dialogConfirm(
       $q,
       async () => {
-        console.log("สำเร็จ");
+        dialogStatus.value === "create" ? addData() : editData(editId.value);
         closeDialog();
         name.value = "";
+        isActive.value = false;
       },
       "ยืนยันการบันทึกข้อมูล",
       "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
@@ -246,6 +264,9 @@ async function onSubmit() {
                     () => {
                       dialogStatus = 'edit';
                       dialog = true;
+                      editId = props.row.id;
+                      name = props.row.name;
+                      isActive = props.row.isActive;
                     }
                   "
                 >
@@ -258,7 +279,12 @@ async function onSubmit() {
                 </q-item>
                 <q-item clickable>
                   <q-item-section
-                    @click="dialogRemove($q, async () => {})"
+                    @click="
+                      dialogRemove(
+                        $q,
+                        async () => await deleteData(props.row.id)
+                      )
+                    "
                     v-close-popup
                   >
                     <div class="row items-center white">
@@ -280,7 +306,7 @@ async function onSubmit() {
       <form @submit.prevent="validateForm">
         <q-card-section class="flex justify-between" style="padding: 0">
           <dialog-header
-            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+            :tittle="dialogStatus === 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
             :close="closeDialog"
           />
         </q-card-section>
diff --git a/src/modules/01_metadataNew/stores/InsigniaStore.ts b/src/modules/01_metadataNew/stores/InsigniaStore.ts
index 55ca005ed..b5b7873bd 100644
--- a/src/modules/01_metadataNew/stores/InsigniaStore.ts
+++ b/src/modules/01_metadataNew/stores/InsigniaStore.ts
@@ -10,14 +10,15 @@ const { date2Thai } = useCounterMixin();
 
 export const useInsigniaDataStore = defineStore("insigniaData", () => {
   const row = ref<DataRow[]>();
-  function fetchData(data: DataResponse[]) {
-    console.log(data);
+  const name1 = ref<string>("");
+  function fetchData(data: DataResponse[], insigniaType?: string) {
     const list = data.map((e) => ({
       ...e,
+      insigniaType: insigniaType,
       createdAt: e.createdAt ? date2Thai(e.createdAt) : "",
       lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "",
     }));
-    console.log(list);
+    console.log("test");
     row.value = list;
   }