From 85fa54088d41522de16316b23e210df06456319f Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Thu, 11 Jul 2024 11:39:04 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=95=E0=B9=88=E0=B8=AD=E0=B8=9F=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=87=E0=B8=81=E0=B9=8C=E0=B8=8A=E0=B8=B1=E0=B9=88=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/03_logs/components/LogTable.vue | 236 ++++++++++----------
 src/modules/03_logs/views/lists.vue         | 124 +++++-----
 2 files changed, 196 insertions(+), 164 deletions(-)

diff --git a/src/modules/03_logs/components/LogTable.vue b/src/modules/03_logs/components/LogTable.vue
index 63b6ce6c..0a4f3372 100644
--- a/src/modules/03_logs/components/LogTable.vue
+++ b/src/modules/03_logs/components/LogTable.vue
@@ -1,15 +1,21 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { cloneVNode, ref } from "vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/modules/03_logs/stores/main";
+import { storeToRefs } from "pinia";
+
+/** importStore*/
+const storeData = useDataStore();
+const { logData, size, searchAfter, systemName } = storeToRefs(storeData);
 const { date2Thai } = useCounterMixin();
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "timestamp",
+    name: "startTimeStamp",
     align: "left",
     label: "เวลา",
     sortable: true,
-    field: "timestamp",
+    field: "startTimeStamp",
     headerStyle: "font-size: 14px",
     format: (v) => date2Thai(v, false, true),
     style: "font-size: 14px",
@@ -72,22 +78,22 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "status",
+    name: "logType",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "status",
+    field: "logType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "message",
+    name: "responseDescription",
     align: "left",
     label: "ข้อความ",
     sortable: true,
-    field: "message",
+    field: "responseDescription",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -95,54 +101,39 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+const inputSearch = defineModel<string>("inputSearch");
 const selectDate = ref<Date>(new Date());
 const pagination = ref({
   page: 1,
-  rowsPerPage: 10,
+  rowsPerPage: 0,
 });
-const inputSearch = ref<string>("");
+
 const visibleColumns = ref<string[]>([
-  "timestamp",
+  "startTimeStamp",
   "username",
   "host",
   "endpoint",
   "method",
   "responseCode",
-  "status",
-  "message",
+  "logType",
+  "responseDescription",
 ]);
-const rows = [
-  {
-    timestamp: new Date(),
-    username: "สมรักษ์ จงใจรักชาติ",
-    host: "http://localhost:3005/lists",
-    endpoint: "registry-employee",
-    method: "Put",
-    responseCode: 401,
-    status: "Error",
-    message: "Unknow value Found",
-  },
-  {
-    timestamp: new Date(),
-    username: "สมรักษ์ จงใจรักชาติ",
-    host: "http://localhost:3005/lists",
-    endpoint: "registry-employee",
-    method: "Delete",
-    responseCode: 200,
-    status: "Warning",
-    message: "Balance getting below",
-  },
-  {
-    timestamp: new Date(),
-    username: "สมรักษ์ จงใจรักชาติ",
-    host: "http://localhost:3005/lists",
-    endpoint: "registry-employee",
-    method: "Get",
-    responseCode: 200,
-    status: "Info",
-    message: "Backup success",
-  },
-];
+
+function handleScroll(event: any) {
+  const element = event.target;
+  if (element.scrollHeight - element.scrollTop === element.clientHeight) {
+    storeData.fetchLog(
+      {
+        size: size.value ?? undefined,
+        search: inputSearch.value ?? undefined,
+        systemName: systemName.value ?? undefined,
+        searchAfter: searchAfter.value ?? undefined,
+      },
+      true
+    );
+    setTimeout(() => {}, 500);
+  }
+}
 </script>
 
 <template>
@@ -154,7 +145,7 @@ const rows = [
         :locale="'th'"
         autoApply
         :enableTimePicker="false"
-        @update:modelValue="console.log('test')"
+        @update:modelValue="console.log('date')"
         week-start="0"
       >
         <template #year="{ year }">{{ year + 543 }}</template>
@@ -182,11 +173,17 @@ const rows = [
           standout
           dense
           clearable
-          :model-value="inputSearch"
+          v-model="inputSearch"
           ref="filterRef"
-          @update:model-value="console.log('update')"
+          @update:model-value="
+            storeData.fetchLog({
+              size: size ?? undefined,
+              search: inputSearch ?? undefined,
+              systemName: systemName ?? undefined,
+            })
+          "
           outlined
-          debounce="300"
+          debounce="500"
           placeholder="ค้นหา"
           style="max-width: 200px"
           class="q-ml-sm"
@@ -212,72 +209,85 @@ const rows = [
         />
       </div>
     </div>
-    <d-table
-      ref="table"
-      :columns="columns"
-      :rows="rows"
-      row-key="name"
-      flat
-      bordered
-      :paging="true"
-      :filter="inputSearch"
-      dense
-      v-model:pagination="pagination"
-      :rows-per-page-options="[20, 50, 100]"
-      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-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.id">
-            <div v-if="col.name === 'username'">
-              {{ col.value }}
-              <div class="text-grey">{{ 12421321334 }}</div>
-            </div>
-            <div v-else-if="col.name === 'method'">
-              <q-badge text-color="blue" style="background-color: #f0ecec">{{
-                col.value
-              }}</q-badge>
-            </div>
-            <div v-else-if="col.name === 'status'">
-              <q-badge
-                text-color="white"
-                :color="
-                  col.value === 'Error'
-                    ? 'red'
-                    : col.value === 'Info'
-                    ? 'primary'
-                    : 'warning'
-                "
-                >{{ col.value }}</q-badge
-              >
-            </div>
-            <div
-              v-else-if="col.name === 'message'"
-              :class="`text-${
-                props.row.status === 'Error'
-                  ? 'red'
-                  : props.row.status === 'Info'
-                  ? 'primary'
-                  : 'warning'
-              }`"
+    <div class="q-pa-md">
+      <div style="max-height: 70vh; overflow: scroll" @scroll="handleScroll">
+        <d-table
+          ref="table"
+          :columns="columns"
+          :rows="storeData.logData"
+          row-key="name"
+          flat
+          bordered
+          hide-pagination
+          v-model:pagination="pagination"
+          dense
+          :rows-per-page-options="[0]"
+          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-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr
+              :props="props"
+              class="cursor-pointer"
+              style="overflow: scroll"
             >
-              {{ col.value }}
-            </div>
-            <div v-else>
-              {{ col.value === "" || col.value === null ? "-" : col.value }}
-            </div>
-          </q-td>
-        </q-tr>
-      </template>
-    </d-table>
+              <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>
+                </div>
+                <div v-else-if="col.name === 'method'">
+                  <q-badge
+                    text-color="blue"
+                    style="background-color: #f0ecec"
+                    >{{ col.value ?? "-" }}</q-badge
+                  >
+                </div>
+                <div v-else-if="col.name === 'logType'">
+                  <q-badge
+                    text-color="white"
+                    :color="
+                      col.value === 'error'
+                        ? 'red'
+                        : col.value === 'info'
+                        ? 'primary'
+                        : 'warning'
+                    "
+                    >{{ col.value ?? "-" }}</q-badge
+                  >
+                </div>
+                <div
+                  v-else-if="col.name === 'responseDescription'"
+                  :class="`text-${
+                    props.row.logType === 'Error'
+                      ? 'red'
+                      : props.row.logType === 'info'
+                      ? 'primary'
+                      : 'warning'
+                  }`"
+                >
+                  {{ col.value ?? "-" }}
+                </div>
+
+                <div v-else class="ellipsis" style="max-width: 15vw">
+                  {{ col.value === "" || col.value === null ? "-" : col.value }}
+                  <q-tooltip> {{ col.value }} </q-tooltip>
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </div>
+    </div>
   </div>
 </template>
 
diff --git a/src/modules/03_logs/views/lists.vue b/src/modules/03_logs/views/lists.vue
index 00e67f21..fe5ae7b4 100644
--- a/src/modules/03_logs/views/lists.vue
+++ b/src/modules/03_logs/views/lists.vue
@@ -3,147 +3,169 @@
 
 /** importComponents*/
 import CardComponents from "@/modules/03_logs/components/CardComponents.vue";
+import { useCounterMixin } from "@/stores/mixin";
 import LogTable from "@/modules/03_logs/components/LogTable.vue";
 import { useRoute } from "vue-router";
 import http from "@/plugins/http";
+import { useQuasar } from "quasar";
 import config from "@/app.config";
 import { ref, onMounted } from "vue";
-import { useCurrencyInput } from "vue-currency-input";
+import { useDataStore } from "@/modules/03_logs/stores/main";
+import { storeToRefs } from "pinia";
 
 /** importStore*/
+const storeData = useDataStore();
+const { logData, size, searchAfter, systemName } = storeToRefs(storeData);
 const route = useRoute();
 /** use*/
+const title = ref<string>("");
 
+const $q = useQuasar();
 const menuList = ref<{ icon: string; label: string; path: string }[]>([
   {
     icon: "mdi-file-account-outline",
     label: "ระบบทะเบียนประวัติ",
-    path: "lists?system=register",
+    path: "/lists?system=register",
   },
   {
     icon: "mdi-account-group",
     label: "ระบบโครงสร้างหน่วยงานและกรอบอัตรากำลัง",
-    path: "lists?system=organization",
+    path: "/lists?system=organization",
   },
   {
     icon: "mdi-calendar",
     label: "ระบบบันทึกเวลาปฏิบัติงานและการลา",
-    path: "lists?system=timekeeping",
+    path: "/lists?system=timekeeping",
   },
   {
     icon: "mdi-magnify",
     label: "ระบบการสรรหาบุคคล",
-    path: "lists?system=search",
+    path: "/lists?system=search",
   },
   {
     icon: "mdi-account-check-outline",
     label: "ระบบการประเมินบุคคล",
-    path: "lists?system=evaluation",
+    path: "/lists?system=evaluation",
   },
   {
     icon: "mdi-account-cancel-outline",
     label: "ระบบพ้นจากราชการ",
-    path: "lists?system=recruit",
+    path: "/lists?system=recruit",
   },
   {
     icon: "mdi-cash",
     label: "ระบบการเลื่อนเงินเดือน/ค่าจ้าง",
-    path: "lists?system=payroll",
+    path: "/lists?system=payroll",
   },
   {
     icon: "mdi-account-check-outline",
     label: "ระบบการบรรจุ แต่งตั้ง ย้าย โอน",
-    path: "lists?system=transfer",
+    path: "/lists?system=transfer",
   },
   {
     icon: "mdi-account-star",
     label: "ระบบการประเมินผลการปฏิบัติราชการระดับบุคคล",
-    path: "lists?system=assessment",
+    path: "/lists?system=assessment",
   },
   {
     icon: "mdi-briefcase-account",
     label: "ระบบการพัฒนาบุคลากร /การศึกษาต่อ",
-    path: "lists?system=development",
+    path: "/lists?system=development",
   },
   {
     icon: "mdi-medal-outline",
     label: "ระบบงานเครื่องราชอิสริยาภรณ์",
-    path: "lists?system=machine",
+    path: "/lists?system=machine",
   },
   {
     icon: "mdi-monitor-dashboard",
     label: "ระบบการรายงานและ Dashboard",
-    path: "lists?system=report",
+    path: "/lists?system=report",
   },
   {
     icon: "mdi-scale-balance",
     label: "ระบบดำเนินการทางวินัย",
-    path: "lists?system=cybersecurity",
+    path: "/lists?system=cybersecurity",
   },
   {
     icon: "mdi-briefcase-account",
     label: "ระบบบริการเจ้าของข้อมูลบุคคล",
-    path: "lists?system=owner",
+    path: "/lists?system=owner",
   },
   {
     icon: "mdi-account-settings-outline",
     label: "ระบบข้อมูลหลัก",
-    path: "lists?system=master",
+    path: "/lists?system=master",
   },
   {
     icon: "mdi-account-child-circle",
     label: "ระบบ Admin",
-    path: "lists?system=admin",
+    path: "/lists?system=admin",
   },
   {
     icon: "mdi-shield-key",
     label: "ระบบ Single Sign-On",
-    path: "lists?system=sso",
+    path: "/lists?system=sso",
   },
 ]);
 
 onMounted(async () => {
-  console.log("");
+  await storeData.fetchLog({
+    size: size.value,
+    systemName: systemName.value ?? undefined,
+  });
+  if (route.query.system) {
+    const a = menuList.value.find((v) => {
+      if (v.path.includes(route.fullPath)) {
+        title.value = v.label;
+      }
+    });
+  }
 });
 </script>
 
 <template>
-  <div>
-    <div class="row q-mb-lg">
-      <q-btn
-        flat
-        v-if="route.query.system"
-        round
-        class="q-mr-sm"
-        color="primary"
-        icon="mdi-arrow-left"
-        dense
-        to="lists"
+  <div class="row q-mb-lg">
+    <q-btn
+      flat
+      v-if="route.query.system"
+      round
+      class="q-mr-sm"
+      color="primary"
+      icon="mdi-arrow-left"
+      dense
+      to="lists"
+    >
+    </q-btn>
+    <div class="row items-center">
+      <span
+        class="text-bold text-h6 text-dark items-center q-mr-md"
+        :class="!route.query.system ? 'q-ml-lg' : ''"
       >
-      </q-btn>
-      <div class="row items-center">
-        <span class="toptitle text-dark items-center q-mr-md">
-          ประวัติกิจกรรม (Logs)
-        </span>
-        <div
-          v-if="route.query.system"
-          class="toptitle text-primary items-center"
-        >
-          ระบบทะเบียนประวัติ
-        </div>
+        ประวัติกิจกรรม (Logs)
+      </span>
+      <div
+        v-if="route.query.system"
+        class="text-bold text-h6 text-primary items-center"
+      >
+        {{ title }}
       </div>
     </div>
+  </div>
 
-    <div v-if="!route.query.system" class="row q-col-gutter-lg full-width">
-      <div class="col-3" :key="index" v-for="(item, index) in menuList">
-        <CardComponents
-          class="cursor-pointer"
-          @click="$router.push(item.path)"
-          :index="index"
-          :icon="item.icon"
-          :label="item.label"
-        />
-      </div>
+  <div v-if="!route.query.system" class="row q-col-gutter-lg full-width">
+    <div
+      :class="$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-4' : 'col-6'"
+      :key="index"
+      v-for="(item, index) in menuList"
+    >
+      <CardComponents
+        class="cursor-pointer"
+        @click="() => $router.push(item.path)"
+        :index="index"
+        :icon="item.icon"
+        :label="item.label"
+      />
     </div>
   </div>