Refactoring code module 03_logs

src/modules/03_logs/components/LogTable.vue

@@ -6,16 +6,40 @@ import { useDataStore } from "@/modules/03_logs/stores/main";
 import { storeToRefs } from "pinia";
 import { useRoute } from "vue-router";
 
+import type {
+  Pagination,
+  ItemsDropdown,
+} from "@/modules/03_logs/interface/index/Main";
+
 import DialogDataDiff from "@/modules/03_logs/components/DialogDataDiff.vue";
 
 const route = useRoute();
 
 import type { ResLog } from "@/modules/03_logs/interface/response/Main";
 
-/** importStore*/
+/** use*/
 const storeData = useDataStore();
-const { logData, size, searchAfter, systemName, date } = storeToRefs(storeData);
+const { logData, size, searchAfter, systemName } = storeToRefs(storeData);
 const { date2Thai } = useCounterMixin();
+
+const startTime = ref<Date | null>(null); // เวลาเริ่มต้น
+const endTime = ref<Date | null>(null); //เวลาสินสุด
+const startDate = ref<string>(""); // วันเริ่มต้น
+const endDate = ref<string>(""); // วันสินสุด
+const sortTime = ref<"desc" | "asc">("desc");
+const openDialog = ref<boolean>(false);
+const currentlogData =
+  ref<Omit<ResLog, "endTimeStamp" | "tId" | "processTime" | "systemName">>();
+const currentDataDiff = ref<{
+  before: string;
+  after: string;
+}>({
+  before: "",
+  after: "",
+});
+
+//table
+const inputSearch = defineModel<string>("inputSearch"); //คำค้หา
 const columns = ref<QTableProps["columns"]>([
   {
     name: "startTimeStamp",
@@ -108,25 +132,19 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-
+const visibleColumns = ref<string[]>([
-const startTime = ref<Date | null>(null);
+  "startTimeStamp",
-const endTime = ref<Date | null>(null);
+  "username",
-const startDate = ref<string>("");
+  "host",
-const endDate = ref<string>("");
+  "endpoint",
-const sortTime = ref<"desc" | "asc">("desc");
+  "method",
-const openDialog = ref<boolean>(false);
+  "responseCode",
-const currentlogData =
+  "logType",
-  ref<Omit<ResLog, "endTimeStamp" | "tId" | "processTime" | "systemName">>();
+  "responseDescription",
-const currentDataDiff = ref<{
+  "sequence",
-  before: string;
+  "dataDiff",
-  after: string;
+]);
-}>({
+const pagination = ref<Pagination>({
-  before: "",
-  after: "",
-});
-
-const inputSearch = defineModel<string>("inputSearch");
-const pagination = ref({
   page: 1,
   rowsPerPage: 0,
 });
@@ -135,7 +153,8 @@ const labelDropdown = ref<string>("วันนี้");
 const valDropdown = ref<string>("");
 const searchStatus = ref<string>("");
 
-const itemsDropdown = ref<any[]>([
+//รายการค้นหา
+const itemsDropdown = ref<ItemsDropdown[]>([
   {
     labal: "วันนี้",
     val: "today",
@@ -162,21 +181,12 @@ const itemsDropdown = ref<any[]>([
   },
 ]);
 
-const statusOpt = ref<any[]>(["info", "warning", "error"]);
+const statusOpt = ref<string[]>(["info", "warning", "error"]);
-
-const visibleColumns = ref<string[]>([
-  "startTimeStamp",
-  "username",
-  "host",
-  "endpoint",
-  "method",
-  "responseCode",
-  "logType",
-  "responseDescription",
-  "sequence",
-  "dataDiff",
-]);
 
+/**
+ * scroll และโหลดข้อมูลรายการ Logs เพิ่ม
+ */
+const infiniteScroll = handleScroll();
 function handleScroll() {
   let scrollFlag = false;
 
@@ -198,7 +208,6 @@ function handleScroll() {
           systemName: systemName.value ?? undefined,
           searchAfter: searchAfter.value ?? undefined,
           sort: sortTime.value,
-          // date: new Date(startDate.value),
           startDate: new Date(startDate.value) ?? undefined,
           endDate: new Date(endDate.value) ?? undefined,
         },
@@ -210,8 +219,9 @@ function handleScroll() {
   };
 }
 
-const infiniteScroll = handleScroll();
+/**
-
+ * ค้นหาข้อมูลรายการ Logs
+ */
 function selectedDate() {
   if (!startDate.value) {
     const startDateToday = new Date();
@@ -224,23 +234,6 @@ function selectedDate() {
     startDate.value = startDateToday.toISOString();
     endDate.value = endDateToday.toISOString();
   }
-  // startDate.value = date.value[0].toISOString();
-  // endDate.value = date.value[1].toISOString();
-
-  // if (!!startTime.value) {
-  //   replaceTimeInISOString(startDate.value, startTime.value, "start");
-  // } else {
-  //   const date = new Date(startDate.value);
-  //   date.setHours(0, 0, 0, 0);
-  //   startDate.value = date.toISOString();
-  // }
-  // if (!!endTime.value) {
-  //   replaceTimeInISOString(endDate.value, endTime.value, "end");
-  // } else {
-  //   const date = new Date(endDate.value);
-  //   date.setHours(23, 59, 59, 999);
-  //   endDate.value = date.toISOString();
-  // }
 
   logData.value = [];
   searchAfter.value = undefined;
@@ -252,7 +245,6 @@ function selectedDate() {
       searchAfter: searchAfter.value ?? undefined,
       sort: sortTime.value,
       searchStatus: searchStatus.value ?? undefined,
-      // date: new Date(startDate.value),
       startDate: new Date(startDate.value),
       endDate: new Date(endDate.value),
     },
@@ -260,7 +252,12 @@ function selectedDate() {
   );
 }
 
-function classColorMethod(val: any) {
+/**
+ * แปลงสึตาม method
+ * @param val ค่า method
+ * @returns ต่าสี
+ */
+function classColorMethod(val: string) {
   switch (val) {
     case "GET":
       return "blue";
@@ -278,6 +275,13 @@ function classColorMethod(val: any) {
   }
 }
 
+/**
+ * เลือกประเภทการค้นหาข้อมูล
+ * @param labal ชื่อประเภทการค้นหาข้อมูล
+ * @param type ประเภทการค้นหาข้อมูล
+ *
+ * และค้นหาข้อมูลรายการ Logs ใหม่
+ */
 function onItemClick(labal: string, type: string) {
   labelDropdown.value = labal;
   valDropdown.value = type;
@@ -295,13 +299,15 @@ function onItemClick(labal: string, type: string) {
   };
 
   if (type === "today") {
+    //วันนี้
     startDate.value = setDateRange(0);
     endDate.value = setDateRange(0, true);
   } else if (type === "yesterday") {
+    //เมื่อวาน
     startDate.value = setDateRange(1);
     endDate.value = setDateRange(1, true);
   } else if (type === "past24hours") {
-    // ตั้งค่า startDate เป็น 24 ชั่วโมงที่แล้ว
+    // ย้อนหลัง 24 ชั่วโมง
     const startDatePast24Hours = new Date();
     startDatePast24Hours.setHours(startDatePast24Hours.getHours() - 24);
     startDate.value = startDatePast24Hours.toISOString();
@@ -309,6 +315,7 @@ function onItemClick(labal: string, type: string) {
     // ตั้งค่า endDate เป็นเวลาปัจจุบัน
     endDate.value = new Date().toISOString();
   } else if (["past7days", "past30days"].includes(type)) {
+    // ย้อนหลัง 7 วัน และ 30 วัน
     const days = { past7days: 7, past30days: 30 }[type];
     startDate.value = setDateRange(days);
     endDate.value = new Date().toISOString();
@@ -320,11 +327,15 @@ function onItemClick(labal: string, type: string) {
   endTime.value = null;
 }
 
+/**
+ * อัปเดทวันที่ต้องการค้นหาข้อมูลรายการ Logs
+ *
+ * และค้นหาข้อมูลรายการ Logs ใหม่
+ */
 function updateDate() {
   if (startTime.value && endTime.value) {
     startDate.value = startTime.value.toISOString();
     endDate.value = endTime.value.toISOString();
-
     selectedDate();
   }
 }
@@ -611,7 +622,7 @@ onMounted(() => {
               </div>
               <div v-else-if="col.name === 'method'">
                 <q-badge
-                  :text-color="classColorMethod(col.value)"
+                  :text-color="classColorMethod(col.value as string)"
                   style="background-color: #f0ecec"
                   >{{ col.value ?? "-" }}</q-badge
                 >
@@ -742,7 +753,7 @@ onMounted(() => {
           </div>
           <div class="self-center" v-if="key === 'method'">
             <q-badge
-              :text-color="classColorMethod(item)"
+              :text-color="classColorMethod(item as string)"
               style="background-color: #f0ecec"
             >
               {{ item ?? "-" }}

src/modules/03_logs/interface/index/Main.ts

@@ -1,5 +1,11 @@
 interface Pagination {
+  page: number;
   rowsPerPage: number;
 }
 
-export type { Pagination };
+interface ItemsDropdown {
+  labal: string;
+  val: string;
+}
+
+export type { Pagination, ItemsDropdown };

src/modules/03_logs/router.ts

@@ -1,8 +1,8 @@
-const ListsPage = () => import("@/modules/03_logs/views/lists.vue");
+const ListsPage = () => import("@/modules/03_logs/views/mainView.vue");
 
 export default [
   {
-    path: "/lists",
+    path: "/logs",
     name: "viewLogs",
     component: ListsPage,
     meta: {

src/modules/03_logs/views/mainView.vue

@@ -1,117 +1,102 @@
 <script setup lang="ts">
-/** importType*/
-
-/** 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 { useDataStore } from "@/modules/03_logs/stores/main";
+import { useQuasar } from "quasar";
 import { storeToRefs } from "pinia";
 
-/** importStore*/
+import { useRoute } from "vue-router";
-const storeData = useDataStore();
+import { useDataStore } from "@/modules/03_logs/stores/main";
-const { logData, size, searchAfter, systemName, date } = storeToRefs(storeData);
-const route = useRoute();
-/** use*/
-const title = ref<string>("");
 
+/** importComponents*/
+import CardComponents from "@/modules/03_logs/components/CardComponents.vue"; // card เมนูระบบ
+import LogTable from "@/modules/03_logs/components/LogTable.vue"; // Table
+
+/** use*/
+const route = useRoute();
 const $q = useQuasar();
+const storeData = useDataStore();
+const { size, systemName, date } = storeToRefs(storeData);
+
+const title = ref<string>(""); //ชื่อระบบ
+
+// รายการเมนูระบบ
 const menuList = ref<{ icon: string; label: string; path: string }[]>([
   {
     icon: "mdi-file-account-outline",
     label: "ระบบทะเบียนประวัติ",
-    path: "/lists?system=registry",
+    path: "/logs?system=registry",
   },
   {
     icon: "mdi-account-group",
     label: "ระบบโครงสร้างหน่วยงานและกรอบอัตรากำลัง",
-    path: "/lists?system=organization",
+    path: "/logs?system=organization",
   },
   {
     icon: "mdi-calendar",
     label: "ระบบบันทึกเวลาปฏิบัติงานและการลา",
-    path: "/lists?system=leave",
+    path: "/logs?system=leave",
   },
   {
     icon: "mdi-magnify",
     label: "ระบบการสรรหาบุคคล",
-    path: "/lists?system=recruiting",
+    path: "/logs?system=recruiting",
   },
   {
     icon: "mdi-account-check-outline",
     label: "ระบบการประเมินบุคคล",
-    path: "/lists?system=evaluation",
+    path: "/logs?system=evaluation",
   },
   {
     icon: "mdi-account-cancel-outline",
     label: "ระบบพ้นจากราชการ",
-    path: "/lists?system=retirement",
+    path: "/logs?system=retirement",
   },
   {
     icon: "mdi-cash",
     label: "ระบบการเลื่อนเงินเดือน/ค่าจ้าง",
-    path: "/lists?system=salary",
+    path: "/logs?system=salary",
   },
   {
     icon: "mdi-account-check-outline",
     label: "ระบบการบรรจุ แต่งตั้ง ย้าย โอน",
-    path: "/lists?system=placement",
+    path: "/logs?system=placement",
   },
   {
     icon: "mdi-account-convert",
     label: "ระบบทดลองปฏิบัติหน้าที่ราชการ",
-    path: "/lists?system=probation",
+    path: "/logs?system=probation",
   },
   {
     icon: "mdi-account-star",
     label: "ระบบการประเมินผลการปฏิบัติราชการระดับบุคคล",
-    path: "/lists?system=KPI",
+    path: "/logs?system=KPI",
   },
   {
     icon: "mdi-briefcase-account",
     label: "ระบบการพัฒนาบุคลากร /การศึกษาต่อ",
-    path: "/lists?system=development",
+    path: "/logs?system=development",
   },
   {
     icon: "mdi-medal-outline",
     label: "ระบบงานเครื่องราชอิสริยาภรณ์",
-    path: "/lists?system=insignia",
+    path: "/logs?system=insignia",
   },
-  // {
+
-  //   icon: "mdi-monitor-dashboard",
-  //   label: "ระบบการรายงานและ Dashboard",
-  //   path: "/lists?system=report",
-  // },
   {
     icon: "mdi-scale-balance",
     label: "ระบบดำเนินการทางวินัย",
-    path: "/lists?system=discipline",
+    path: "/logs?system=discipline",
   },
-  // {
+
-  //   icon: "mdi-briefcase-account",
-  //   label: "ระบบบริการเจ้าของข้อมูลบุคคล",
-  //   path: "/lists?system=owner",
-  // },
   {
     icon: "mdi-account-settings-outline",
     label: "ระบบข้อมูลหลัก",
-    path: "/lists?system=master",
+    path: "/logs?system=master",
   },
   {
     icon: "mdi-account-child-circle",
     label: "ระบบ Admin",
-    path: "/lists?system=admin",
+    path: "/logs?system=admin",
   },
-  // {
-  //   icon: "mdi-shield-key",
-  //   label: "ระบบ Single Sign-On",
-  //   path: "/lists?system=sso",
-  // },
 ]);
 
 onMounted(async () => {
@@ -140,7 +125,7 @@ onMounted(async () => {
       color="primary"
       icon="mdi-arrow-left"
       dense
-      to="lists"
+      to="logs"
     >
     </q-btn>
     <div class="row items-center">