เพิ่มค้นหาจากวัน + เพิ่มการแสดงusername

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>

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,
   };
 });

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) => {