From 23a743ce2b70eaed3f4df6d427d0f341bdadd522 Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Sun, 3 Dec 2023 13:19:08 +0800 Subject: [PATCH] Fixed table rendering being broken when there are too many records and added logs pages --- src/App.tsx | 22 +++ src/Components/API/API.tsx | 25 ++++ src/Components/Types/Types.tsx | 26 ++++ src/Pages/DashboardPage/DashboardPage.tsx | 82 ++++++++++ .../EquipmentInstanceLogsPage.tsx | 140 ++++++++++++++++++ .../EquipmentInstancesListPage.tsx | 3 +- .../EquipmentListPage/EquipmentListPage.tsx | 3 +- .../EquipmentLogsPage/EquipmentLogsPage.tsx | 138 +++++++++++++++++ 8 files changed, 435 insertions(+), 4 deletions(-) create mode 100644 src/Pages/EquipmentInstanceLogsPage/EquipmentInstanceLogsPage.tsx create mode 100644 src/Pages/EquipmentLogsPage/EquipmentLogsPage.tsx diff --git a/src/App.tsx b/src/App.tsx index 76e1368..013db34 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -13,6 +13,8 @@ import ActivationPage from "./Pages/ActivationPage/ActivationPage"; import ResetPasswordPage from "./Pages/ResetPasswordPage/ResetPasswordPage"; import EquipmentInstancesListPage from "./Pages/EquipmentInstancesListPage/EquipmentInstancesListPage"; import EquipmentListPage from "./Pages/EquipmentListPage/EquipmentListPage"; +import EquipmentLogsPage from "./Pages/EquipmentLogsPage/EquipmentLogsPage"; +import EquipmentInstanceLogsPage from "./Pages/EquipmentInstanceLogsPage/EquipmentInstanceLogsPage"; const queryClient = new QueryClient(); const router = createHashRouter([ @@ -46,6 +48,16 @@ const router = createHashRouter([ ), errorElement: , }, + { + path: "/view/equipment_instances/logs", + element: ( + <> + + + + ), + errorElement: , + }, { path: "/view/equipments", element: ( @@ -56,6 +68,16 @@ const router = createHashRouter([ ), errorElement: , }, + { + path: "/view/equipments/logs", + element: ( + <> + + + + ), + errorElement: , + }, { path: "/activation/:uid/:token", element: ( diff --git a/src/Components/API/API.tsx b/src/Components/API/API.tsx index 3279505..d410b8e 100644 --- a/src/Components/API/API.tsx +++ b/src/Components/API/API.tsx @@ -13,6 +13,8 @@ import { EquipmentInstanceType, PatchEquipmentInstanceType, PatchEquipmentType, + EquipmentLogListType, + EquipmentInstanceLogListType, } from "../Types/Types"; const debug = false; @@ -246,8 +248,31 @@ export async function EquipmentCreateAPI(equipment: AddEquipmentType) { }); } +export async function EquipmentLogsAPI() { + const config = await GetConfig(); + return instance + .get("api/v1/equipments/equipments/logs", config) + .then((response) => { + return response.data as EquipmentLogListType; + }) + .catch(() => { + console.log("Error retrieving equipment logs"); + }); +} + // Equipment Instances APIs +export async function EquipmentInstanceLogsAPI() { + const config = await GetConfig(); + return instance + .get("api/v1/equipments/equipment_instances/logs", config) + .then((response) => { + return response.data as EquipmentInstanceLogListType; + }) + .catch(() => { + console.log("Error retrieving equipment logs"); + }); +} export async function EquipmentInstanceAPI(id: number) { const config = await GetConfig(); return instance diff --git a/src/Components/Types/Types.tsx b/src/Components/Types/Types.tsx index c7b6040..b2af722 100644 --- a/src/Components/Types/Types.tsx +++ b/src/Components/Types/Types.tsx @@ -46,6 +46,18 @@ export type EquipmentType = { export type EquipmentListType = Array; +export type EquipmentLogType = { + history_id: number; + id: number; + name: string; + category: string; + description: string; + history_date: string; + history_user: string; +}; + +export type EquipmentLogListType = Array; + export type AddEquipmentInstanceType = { equipment: number; status: string; @@ -70,3 +82,17 @@ export type EquipmentInstanceType = { }; export type EquipmentInstanceListType = Array; + +export type EquipmentInstanceLogType = { + history_id: number; + id: number; + equipment: number; + equipment_name: string; + category: string; + status: string; + remarks: string; + history_date: string; + history_user: string; +}; + +export type EquipmentInstanceLogListType = Array; diff --git a/src/Pages/DashboardPage/DashboardPage.tsx b/src/Pages/DashboardPage/DashboardPage.tsx index 62e3df3..92cf0f1 100644 --- a/src/Pages/DashboardPage/DashboardPage.tsx +++ b/src/Pages/DashboardPage/DashboardPage.tsx @@ -11,6 +11,7 @@ import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted"; import AddToQueueIcon from "@mui/icons-material/AddToQueue"; import NoteAddIcon from "@mui/icons-material/NoteAdd"; import NoteIcon from "@mui/icons-material/Note"; +import ManageSearchIcon from "@mui/icons-material/ManageSearch"; import { colors } from "../../styles"; import { useNavigate } from "react-router-dom"; import { useState } from "react"; @@ -491,6 +492,87 @@ export default function Dashboard() {

+

+ Logs +

+
+ + +
SetAddSKUModalOpen(false)} diff --git a/src/Pages/EquipmentInstanceLogsPage/EquipmentInstanceLogsPage.tsx b/src/Pages/EquipmentInstanceLogsPage/EquipmentInstanceLogsPage.tsx new file mode 100644 index 0000000..80dd527 --- /dev/null +++ b/src/Pages/EquipmentInstanceLogsPage/EquipmentInstanceLogsPage.tsx @@ -0,0 +1,140 @@ +import { useQuery } from "@tanstack/react-query"; +import Header from "../../Components/Header/Header"; +import styles from "../../styles"; +import { EquipmentInstanceLogsAPI } from "../../Components/API/API"; +import { CircularProgress } from "@mui/material"; +import Table from "@mui/material/Table"; +import TableBody from "@mui/material/TableBody"; +import TableCell from "@mui/material/TableCell"; +import TableContainer from "@mui/material/TableContainer"; +import TableHead from "@mui/material/TableHead"; +import TableRow from "@mui/material/TableRow"; +import Paper from "@mui/material/Paper"; +import { colors } from "../../styles"; + +export default function EquipmentInstanceLogsPage() { + const equipment_instance_logs = useQuery({ + queryKey: ["equipment_instance_logs"], + queryFn: EquipmentInstanceLogsAPI, + }); + if (equipment_instance_logs.isLoading) { + return ( +
+
+
+ +

+ Loading +

+
+
+ ); + } + return ( +
+
+
+
+ + + + + + Transaction ID + + + Item ID + + + SKU + + + Remarks + + + Status + + + Date Modified + + + + + {equipment_instance_logs.data ? ( + equipment_instance_logs.data.map((equipment_instance_log) => ( + + + {equipment_instance_log.history_id} + + + {equipment_instance_log.id} + + + {`SKU #${equipment_instance_log.equipment} - ${equipment_instance_log.equipment_name}`} + + + + {equipment_instance_log.remarks} + + + {equipment_instance_log.status} + + +
+
{equipment_instance_log.history_date}
+
+ {equipment_instance_log.history_user + ? "by " + equipment_instance_log.history_user + : ""} +
+
+ + + )) + ) : ( + <> + )} + +
+ +
+
+
+ ); +} diff --git a/src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx b/src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx index e6d15fc..5762f60 100644 --- a/src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx +++ b/src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx @@ -63,10 +63,9 @@ export default function EquipmentInstancesListPage() { minHeight: "100%", minWidth: "100%", flexWrap: "wrap", - overflowY: "scroll", }} > -
+
diff --git a/src/Pages/EquipmentListPage/EquipmentListPage.tsx b/src/Pages/EquipmentListPage/EquipmentListPage.tsx index 6d6149f..c2033e8 100644 --- a/src/Pages/EquipmentListPage/EquipmentListPage.tsx +++ b/src/Pages/EquipmentListPage/EquipmentListPage.tsx @@ -63,10 +63,9 @@ export default function EquipmentListPage() { minHeight: "100%", minWidth: "100%", flexWrap: "wrap", - overflowY: "scroll", }} > -
+
diff --git a/src/Pages/EquipmentLogsPage/EquipmentLogsPage.tsx b/src/Pages/EquipmentLogsPage/EquipmentLogsPage.tsx new file mode 100644 index 0000000..8f30b2b --- /dev/null +++ b/src/Pages/EquipmentLogsPage/EquipmentLogsPage.tsx @@ -0,0 +1,138 @@ +import { useQuery } from "@tanstack/react-query"; +import Header from "../../Components/Header/Header"; +import styles from "../../styles"; +import { EquipmentLogsAPI } from "../../Components/API/API"; +import { CircularProgress } from "@mui/material"; +import Table from "@mui/material/Table"; +import TableBody from "@mui/material/TableBody"; +import TableCell from "@mui/material/TableCell"; +import TableContainer from "@mui/material/TableContainer"; +import TableHead from "@mui/material/TableHead"; +import TableRow from "@mui/material/TableRow"; +import Paper from "@mui/material/Paper"; +import { colors } from "../../styles"; + +export default function EquipmentLogsPage() { + const equipment_logs = useQuery({ + queryKey: ["equipment_logs"], + queryFn: EquipmentLogsAPI, + }); + if (equipment_logs.isLoading) { + return ( +
+
+
+ +

+ Loading +

+
+
+ ); + } + return ( +
+
+
+
+ +
+ + + + Transaction ID + + + SKU ID + + + Name + + + Description + + + Category + + + Date Modified + + + + + {equipment_logs.data ? ( + equipment_logs.data.map((equipment_log) => ( + + + {equipment_log.history_id} + + + {equipment_log.id} + + + {equipment_log.name} + + + + {equipment_log.description} + + + {equipment_log.category} + + +
+
{equipment_log.history_date}
+
+ {equipment_log.history_user + ? "by " + equipment_log.history_user + : ""} +
+
+ + + )) + ) : ( + <> + )} + +
+ +
+
+ + ); +}