From a43789fd8b9c1a0b46eb8862cdd07ed4b847c5c5 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Mon, 11 Nov 2024 14:46:07 +0700
Subject: [PATCH] UI

---
 .../03_logs/components/DialogDataDiff.vue     | 12 ++++++++
 src/modules/03_logs/components/LogTable.vue   | 30 +++++++++++++++++--
 src/modules/03_logs/stores/main.ts            | 10 +++++--
 3 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/src/modules/03_logs/components/DialogDataDiff.vue b/src/modules/03_logs/components/DialogDataDiff.vue
index 23c7dead..319bc963 100644
--- a/src/modules/03_logs/components/DialogDataDiff.vue
+++ b/src/modules/03_logs/components/DialogDataDiff.vue
@@ -9,6 +9,7 @@ const openDialog = defineModel<boolean>("openDialog", {
 defineProps<{
   title: string;
   close?: (...args: unknown[]) => void;
+  onSend: Function;
 }>();
 </script>
 
@@ -25,6 +26,17 @@ defineProps<{
       <q-card-section class="scroll" style="height: 80vh">
         <slot />
       </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn
+          label="ส่งออกเป็นไฟล์ TXT"
+          color="blue"
+          type="submit"
+          icon-right="send"
+          @click="onSend"
+          ><q-tooltip>ส่งออกเป็นไฟล์ TXT</q-tooltip></q-btn
+        >
+      </q-card-actions>
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/03_logs/components/LogTable.vue b/src/modules/03_logs/components/LogTable.vue
index 6a2da252..2ce8dbc4 100644
--- a/src/modules/03_logs/components/LogTable.vue
+++ b/src/modules/03_logs/components/LogTable.vue
@@ -129,6 +129,16 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "id",
+    align: "left",
+    label: "ID",
+    field: "id",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "dataDiff",
     align: "left",
@@ -425,6 +435,13 @@ function updateDate() {
   }
 }
 
+function onSendCSV() {
+  console.log(1);
+}
+function onSend() {
+  console.log(1);
+}
+
 onBeforeMount(async () => {
   await fetchOrganizationActive(); // ดึงข้อมูลโครงสร้างปัจจุบัน
 });
@@ -501,9 +518,9 @@ onMounted(async () => {
 
       <div class="col-md-9">
         <div class="row">
-          <div class="q-col-gutter-xs">
+          <div class="row q-gutter-sm">
             <div>
-              <q-btn-dropdown outline color="grey-5">
+              <q-btn-dropdown outline color="grey-5" class="full-height">
                 <template v-slot:label>
                   <div class="row items-center no-wrap">
                     <div class="text-black">{{ labelDropdown }}</div>
@@ -524,6 +541,14 @@ onMounted(async () => {
                 </q-list>
               </q-btn-dropdown>
             </div>
+            <q-btn
+              label="ส่งออกเป็นไฟล์ CSV"
+              color="green"
+              type="submit"
+              icon-right="send"
+              @click="onSendCSV"
+              ><q-tooltip>ส่งออกเป็นไฟล์ CSV</q-tooltip></q-btn
+            >
           </div>
 
           <q-space />
@@ -863,6 +888,7 @@ onMounted(async () => {
   <DialogDataDiff
     v-model:open-dialog="openDialog"
     title="รายละเอียดข้อมูล"
+    :onSend="onSend"
     :close="
       () => {
         openDialog = false;
diff --git a/src/modules/03_logs/stores/main.ts b/src/modules/03_logs/stores/main.ts
index 7f8ffe18..32ba7696 100644
--- a/src/modules/03_logs/stores/main.ts
+++ b/src/modules/03_logs/stores/main.ts
@@ -58,10 +58,16 @@ export const useDataStore = defineStore("logStore", () => {
       .then((res) => {
         const data = res.data;
         if (isBottom) {
-          const test = data.map((v: any) => v._source);
+          const test = data.map((item: any) => ({
+            ...item._source,
+            id: item._id,
+          }));
           logData.value.push(...test);
         } else {
-          logData.value = data.map((v: any) => v._source);
+          logData.value = data.map((item: any) => ({
+            ...item._source,
+            id: item._id,
+          }));
         }
         if (data.length > 0) {
           const lastDataSort = data[data.length - 1].sort;