keannu125/Borrowing-TrackerFrontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Borrowing-TrackerFrontend.git synced 2024-11-17 06:19:27 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Remove groups and added list filtering pages

Browse source
This commit is contained in:
Keannu Bernasol 2023-12-05 22:06:01 +08:00
parent ae5b8de094
commit ccf8262291
4 changed files with 178 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/App.tsx
View file

@ -15,6 +15,7 @@ import EquipmentInstancesListPage from "./Pages/EquipmentInstancesListPage/Equip
import EquipmentListPage from "./Pages/EquipmentListPage/EquipmentListPage";
import EquipmentLogsPage from "./Pages/EquipmentLogsPage/EquipmentLogsPage";
import EquipmentInstanceLogsPage from "./Pages/EquipmentInstanceLogsPage/EquipmentInstanceLogsPage";
import EquipmentInstancesFilteredListPage from "./Pages/EquipmentInstancesListPage/EquipmentInstancesFilteredListPage";
const queryClient = new QueryClient();
const router = createHashRouter([
@ -48,6 +49,16 @@ const router = createHashRouter([
),
errorElement: <ErrorPage />,
},
{
path: "/view/equipment_instances/filter/:filter_by",
element: (
<>
<Revalidator />
<EquipmentInstancesFilteredListPage />
</>
),
errorElement: <ErrorPage />,
},
{
path: "/view/equipment_instances/logs",
element: (

2
src/Components/API/API.tsx
View file

@ -17,7 +17,7 @@ import {
EquipmentInstanceLogListType,
} from "../Types/Types";
const debug = false;
const debug = true;
let backendURL;
if (debug) {

12
src/Pages/DashboardPage/DashboardPage.tsx
View file

@ -396,6 +396,9 @@ export default function Dashboard() {
marginLeft: "1rem",
marginRight: "1rem",
}}
onClick={() => {
navigate("/view/equipment_instances/filter/PC");
}}
/>
<p
style={{
@ -424,6 +427,9 @@ export default function Dashboard() {
marginLeft: "1rem",
marginRight: "1rem",
}}
onClick={() => {
navigate("/view/equipment_instances/filter/NETWORKING");
}}
/>
<p
style={{
@ -444,6 +450,9 @@ export default function Dashboard() {
flexWrap: "wrap",
},
}}
onClick={() => {
navigate("/view/equipment_instances/filter/CCTV");
}}
>
<CameraOutdoorIcon
style={{
@ -481,6 +490,9 @@ export default function Dashboard() {
marginLeft: "1rem",
marginRight: "1rem",
}}
onClick={() => {
navigate("/view/equipment_instances/filter/FURNITURE");
}}
/>
<p
style={{

154
src/Pages/EquipmentInstancesListPage/EquipmentInstancesFilteredListPage.tsx Normal file
View file

@ -0,0 +1,154 @@
import { useQuery } from "@tanstack/react-query";
import Header from "../../Components/Header/Header";
import styles from "../../styles";
import { EquipmentInstancesAPI } 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";
import EditItemModal from "../../Components/EditItemInstanceModal/EditItemInstanceModal";
import { useState } from "react";
import Popup from "reactjs-popup";
import { useParams } from "react-router-dom";
export default function EquipmentInstancesFilteredListPage() {
const { filter_by } = useParams();
const [editmodalOpen, SetEditModalOpen] = useState(false);
const [selectedItem, SetSelectedItem] = useState(0);
const equipment_instances = useQuery({
queryKey: ["equipment_instances"],
queryFn: EquipmentInstancesAPI,
});
if (equipment_instances.isLoading) {
return (
<div style={styles.background}>
<Header label={"Dashboard"} />
<div
style={{
...styles.flex_column,
...{
alignItems: "center",
justifyContent: "center",
paddingTop: "64px",
},
}}
>
<CircularProgress style={{ height: "128px", width: "128px" }} />
<p
style={{
...styles.text_dark,
...styles.text_L,
}}
>
Loading
</p>
</div>
</div>
);
}
return (
<div style={styles.background}>
<Header label={`Items List - ${filter_by}`} />
<div
style={{
...styles.flex_column,
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100%",
width: "100%",
minHeight: "100%",
minWidth: "100%",
flexWrap: "wrap",
}}
>
<div style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}>
<TableContainer component={Paper}>
<Table sx={{ minWidth: "32rem" }} size="medium">
<TableHead>
<TableRow style={{ backgroundColor: colors.header_color }}>
<TableCell style={styles.text_light}>ID</TableCell>
<TableCell align="center" style={styles.text_light}>
Name
</TableCell>
<TableCell align="center" style={styles.text_light}>
Status
</TableCell>
<TableCell align="center" style={styles.text_light}>
Category
</TableCell>
<TableCell align="center" style={styles.text_light}>
Last Modified
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{equipment_instances.data ? (
equipment_instances.data
.filter((equipment) => equipment.category === filter_by)
.map((equipment) => (
<TableRow
key={equipment.id}
sx={{
"&:last-child td, &:last-child th": { border: 0 },
}}
onClick={() => {
SetSelectedItem(equipment.id);
SetEditModalOpen(true);
}}
>
<TableCell align="center" component="th" scope="row">
{equipment.id}
</TableCell>
<TableCell align="center" component="th" scope="row">
{equipment.equipment_name}
</TableCell>
<TableCell align="center" component="th" scope="row">
{equipment.status}
</TableCell>
<TableCell align="center" component="th" scope="row">
{equipment.category}
</TableCell>
<TableCell align="right">
<div
style={{
...styles.flex_column,
...{ alignItems: "center" },
}}
>
<div>{equipment.last_updated}</div>
<div>
{equipment.last_updated_by
? "by " + equipment.last_updated_by
: ""}
</div>
</div>
</TableCell>
</TableRow>
))
) : (
<></>
)}
</TableBody>
</Table>
</TableContainer>
</div>
</div>
<Popup
open={editmodalOpen}
onClose={() => SetEditModalOpen(false)}
modal
position={"top center"}
contentStyle={styles.popup_center}
>
<EditItemModal id={selectedItem} setOpen={SetEditModalOpen} />
</Popup>
</div>
);
}