From 2e9bbe3dd1033864c82250b3eba77197d10079bf Mon Sep 17 00:00:00 2001 From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" Date: Mon, 9 Sep 2024 15:28:53 +0700 Subject: [PATCH] Refactoring code module 03_logs --- src/modules/03_logs/components/LogTable.vue | 135 ++++++++++-------- src/modules/03_logs/components/index.vue | 0 src/modules/03_logs/interface/index/Main.ts | 8 +- src/modules/03_logs/router.ts | 4 +- .../03_logs/views/{lists.vue => mainView.vue} | 81 +++++------ 5 files changed, 115 insertions(+), 113 deletions(-) delete mode 100644 src/modules/03_logs/components/index.vue rename src/modules/03_logs/views/{lists.vue => mainView.vue} (75%) diff --git a/src/modules/03_logs/components/LogTable.vue b/src/modules/03_logs/components/LogTable.vue index 2bbc88b0..f0aef010 100644 --- a/src/modules/03_logs/components/LogTable.vue +++ b/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(null); // เวลาเริ่มต้น +const endTime = ref(null); //เวลาสินสุด +const startDate = ref(""); // วันเริ่มต้น +const endDate = ref(""); // วันสินสุด +const sortTime = ref<"desc" | "asc">("desc"); +const openDialog = ref(false); +const currentlogData = + ref>(); +const currentDataDiff = ref<{ + before: string; + after: string; +}>({ + before: "", + after: "", +}); + +//table +const inputSearch = defineModel("inputSearch"); //คำค้หา const columns = ref([ { name: "startTimeStamp", @@ -108,25 +132,19 @@ const columns = ref([ style: "font-size: 14px", }, ]); - -const startTime = ref(null); -const endTime = ref(null); -const startDate = ref(""); -const endDate = ref(""); -const sortTime = ref<"desc" | "asc">("desc"); -const openDialog = ref(false); -const currentlogData = - ref>(); -const currentDataDiff = ref<{ - before: string; - after: string; -}>({ - before: "", - after: "", -}); - -const inputSearch = defineModel("inputSearch"); -const pagination = ref({ +const visibleColumns = ref([ + "startTimeStamp", + "username", + "host", + "endpoint", + "method", + "responseCode", + "logType", + "responseDescription", + "sequence", + "dataDiff", +]); +const pagination = ref({ page: 1, rowsPerPage: 0, }); @@ -135,7 +153,8 @@ const labelDropdown = ref("วันนี้"); const valDropdown = ref(""); const searchStatus = ref(""); -const itemsDropdown = ref([ +//รายการค้นหา +const itemsDropdown = ref([ { labal: "วันนี้", val: "today", @@ -162,21 +181,12 @@ const itemsDropdown = ref([ }, ]); -const statusOpt = ref(["info", "warning", "error"]); - -const visibleColumns = ref([ - "startTimeStamp", - "username", - "host", - "endpoint", - "method", - "responseCode", - "logType", - "responseDescription", - "sequence", - "dataDiff", -]); +const statusOpt = ref(["info", "warning", "error"]); +/** + * 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(() => {
{{ col.value ?? "-" }} @@ -742,7 +753,7 @@ onMounted(() => {
{{ item ?? "-" }} diff --git a/src/modules/03_logs/components/index.vue b/src/modules/03_logs/components/index.vue deleted file mode 100644 index e69de29b..00000000 diff --git a/src/modules/03_logs/interface/index/Main.ts b/src/modules/03_logs/interface/index/Main.ts index 1aeb5a4b..6232f2f7 100644 --- a/src/modules/03_logs/interface/index/Main.ts +++ b/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 }; diff --git a/src/modules/03_logs/router.ts b/src/modules/03_logs/router.ts index b24b492b..9b5725a1 100644 --- a/src/modules/03_logs/router.ts +++ b/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: { diff --git a/src/modules/03_logs/views/lists.vue b/src/modules/03_logs/views/mainView.vue similarity index 75% rename from src/modules/03_logs/views/lists.vue rename to src/modules/03_logs/views/mainView.vue index 0cbc25a2..77086c18 100644 --- a/src/modules/03_logs/views/lists.vue +++ b/src/modules/03_logs/views/mainView.vue @@ -1,117 +1,102 @@