keannu125/EquipmentTracker-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/EquipmentTracker-Frontend.git synced 2024-11-17 06:09:25 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Finalize equipment instances list page

Browse source
This commit is contained in:
Keannu Bernasol 2023-12-02 22:04:46 +08:00
parent a94831fbe1
commit f6a1810740
3 changed files with 132 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/Components/Revalidator/Revalidator.tsx
View file

@ -36,7 +36,6 @@ export default function Revalidator() {
JWTRefreshAPI().then(async (response) => {
if (response) {
await dispatch(auth_toggle());
navigate("/dashboard");
toast("User session restored", {
position: "top-right",
autoClose: 2000,

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

@ -48,11 +48,13 @@ export type AddEquipmentInstanceType = {
export type EquipmentInstanceType = {
id: number;
equipment: string;
equipment_name: string;
status: string;
remarks: string;
last_updated: string;
last_updated_by: string;
date_added: string;
category: string;
};
export type EquipmentInstanceListType = Array<EquipmentInstanceType>;

131
src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx
View file

@ -1,5 +1,134 @@
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";
export default function EquipmentInstancesListPage() {
return <div style={styles.background}>{"EquipmentInstancesListPage"}</div>;
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"} />
<div
style={{
...styles.flex_column,
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100%",
width: "100%",
minHeight: "100%",
minWidth: "100%",
flexWrap: "wrap",
overflowY: "scroll",
}}
>
<div style={{ width: "90%" }}>
<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.map((equipment) => (
<TableRow
key={equipment.id}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
onClick={() => {
console.log("HEH");
}}
>
<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>
</div>
);
}