From 6fab5b90f3b35e50351da62dc129041488482203 Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Thu, 11 Jul 2024 16:23:25 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=84=E0=B9=89=E0=B8=99=E0=B8=AB=E0=B8=B2=E0=B8=88=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=81=E0=B8=A7=E0=B8=B1=E0=B8=99=20+=20=E0=B9=80=E0=B8=9E?=
 =?UTF-8?q?=E0=B8=B4=E0=B9=88=E0=B8=A1=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=81?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=94=E0=B8=87username?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/03_logs/components/LogTable.vue | 48 ++++++++++++++-------
 src/modules/03_logs/stores/main.ts          | 12 +++++-
 src/modules/03_logs/views/lists.vue         |  3 +-
 3 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/src/modules/03_logs/components/LogTable.vue b/src/modules/03_logs/components/LogTable.vue
index 0a4f3372..2c1950a6 100644
--- a/src/modules/03_logs/components/LogTable.vue
+++ b/src/modules/03_logs/components/LogTable.vue
@@ -7,7 +7,7 @@ import { storeToRefs } from "pinia";
 
 /** importStore*/
 const storeData = useDataStore();
-const { logData, size, searchAfter, systemName } = storeToRefs(storeData);
+const { logData, size, searchAfter, systemName, date } = storeToRefs(storeData);
 const { date2Thai } = useCounterMixin();
 const columns = ref<QTableProps["columns"]>([
   {
@@ -25,7 +25,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "username",
     align: "left",
-    label: "username",
+    label: "ผู้ใช้",
     sortable: true,
     field: "username",
     headerStyle: "font-size: 14px",
@@ -36,7 +36,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "host",
     align: "left",
-    label: "host",
+    label: "Host",
     sortable: true,
     field: "host",
     headerStyle: "font-size: 14px",
@@ -47,7 +47,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "endpoint",
     align: "left",
-    label: "endpoint",
+    label: "Endpoint",
     sortable: true,
     field: "endpoint",
     headerStyle: "font-size: 14px",
@@ -58,7 +58,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "method",
     align: "left",
-    label: "method",
+    label: "Method",
     sortable: true,
     field: "method",
     headerStyle: "font-size: 14px",
@@ -69,7 +69,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "responseCode",
     align: "left",
-    label: "responseCode",
+    label: "Response Code",
     sortable: true,
     field: "responseCode",
     headerStyle: "font-size: 14px",
@@ -102,7 +102,6 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 const inputSearch = defineModel<string>("inputSearch");
-const selectDate = ref<Date>(new Date());
 const pagination = ref({
   page: 1,
   rowsPerPage: 0,
@@ -128,12 +127,28 @@ function handleScroll(event: any) {
         search: inputSearch.value ?? undefined,
         systemName: systemName.value ?? undefined,
         searchAfter: searchAfter.value ?? undefined,
+        date: date.value,
       },
       true
     );
     setTimeout(() => {}, 500);
   }
 }
+
+function selectedDate() {
+  logData.value = [];
+  searchAfter.value = undefined;
+  storeData.fetchLog(
+    {
+      size: size.value ?? undefined,
+      search: inputSearch.value ?? undefined,
+      systemName: systemName.value ?? undefined,
+      searchAfter: searchAfter.value ?? undefined,
+      date: date.value,
+    },
+    true
+  );
+}
 </script>
 
 <template>
@@ -141,11 +156,11 @@ function handleScroll(event: any) {
     <div class="row q-pa-md">
       <datepicker
         menu-class-name="modalfix"
-        v-model="selectDate"
+        v-model="date"
         :locale="'th'"
         autoApply
         :enableTimePicker="false"
-        @update:modelValue="console.log('date')"
+        @update:modelValue="selectedDate"
         week-start="0"
       >
         <template #year="{ year }">{{ year + 543 }}</template>
@@ -156,7 +171,7 @@ function handleScroll(event: any) {
           <q-input
             outlined
             dense
-            :model-value="date2Thai(selectDate)"
+            :model-value="date2Thai(date ?? new Date())"
             hide-bottom-space
           >
             <template v-slot:prepend>
@@ -240,10 +255,13 @@ function handleScroll(event: any) {
             >
               <q-td v-for="col in props.cols" :key="col.id">
                 <div v-if="col.name === 'username'">
-                  {{ props.row.user }}
-                  <div class="text-grey" style="font-size: 65%">
-                    {{ props.row.userId }}
-                  </div>
+                  <template v-if="props.row.userName && props.row.user">
+                    {{ props.row.userName ?? "-" }}
+                    <div class="text-grey" style="font-size: 65%">
+                      {{ props.row.user ?? "-" }}
+                    </div>
+                  </template>
+                  <template v-else> - </template>
                 </div>
                 <div v-else-if="col.name === 'method'">
                   <q-badge
@@ -278,7 +296,7 @@ function handleScroll(event: any) {
                   {{ col.value ?? "-" }}
                 </div>
 
-                <div v-else class="ellipsis" style="max-width: 15vw">
+                <div v-else class="ellipsis" style="max-width: 10vw">
                   {{ col.value === "" || col.value === null ? "-" : col.value }}
                   <q-tooltip> {{ col.value }} </q-tooltip>
                 </div>
diff --git a/src/modules/03_logs/stores/main.ts b/src/modules/03_logs/stores/main.ts
index 59fae5a2..96c6b86a 100644
--- a/src/modules/03_logs/stores/main.ts
+++ b/src/modules/03_logs/stores/main.ts
@@ -22,21 +22,28 @@ const {
 export const useDataStore = defineStore("storeData", () => {
   const size = ref<number>(30);
   const logData = ref<ResLog[]>([]);
-  const systemName = ref<string>();
+  const systemName = ref<string>("JWS-SOS");
   const searchAfter = ref<number>();
+  const date = ref<Date>(new Date());
   async function fetchLog(
     opts?: {
       size?: number;
       search?: string;
       searchAfter?: number;
       systemName?: string;
+      date?: Date;
     },
     isBottom?: boolean
   ) {
     const params = new URLSearchParams();
 
     for (const [k, v] of Object.entries(opts || {})) {
-      v !== undefined && params.append(k, v.toString());
+      if (v !== undefined)
+        if (v instanceof Date) {
+          params.append(k, v.toISOString());
+        } else {
+          params.append(k, v.toString());
+        }
     }
 
     const query = params.toString();
@@ -67,6 +74,7 @@ export const useDataStore = defineStore("storeData", () => {
     logData,
     searchAfter,
     systemName,
+    date,
     fetchLog,
   };
 });
diff --git a/src/modules/03_logs/views/lists.vue b/src/modules/03_logs/views/lists.vue
index fe5ae7b4..35b3c199 100644
--- a/src/modules/03_logs/views/lists.vue
+++ b/src/modules/03_logs/views/lists.vue
@@ -15,7 +15,7 @@ import { storeToRefs } from "pinia";
 
 /** importStore*/
 const storeData = useDataStore();
-const { logData, size, searchAfter, systemName } = storeToRefs(storeData);
+const { logData, size, searchAfter, systemName, date } = storeToRefs(storeData);
 const route = useRoute();
 /** use*/
 const title = ref<string>("");
@@ -113,6 +113,7 @@ onMounted(async () => {
   await storeData.fetchLog({
     size: size.value,
     systemName: systemName.value ?? undefined,
+    date: date.value,
   });
   if (route.query.system) {
     const a = menuList.value.find((v) => {