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

Add SKU list page

Browse source
This commit is contained in:
Keannu Bernasol 2023-12-02 22:09:20 +08:00
parent f6a1810740
commit dc0d339f27
2 changed files with 139 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/App.tsx
View file

@ -12,6 +12,7 @@ import Revalidator from "./Components/Revalidator/Revalidator";
import ActivationPage from "./Pages/ActivationPage/ActivationPage"; import ActivationPage from "./Pages/ActivationPage/ActivationPage";
import ResetPasswordPage from "./Pages/ResetPasswordPage/ResetPasswordPage"; import ResetPasswordPage from "./Pages/ResetPasswordPage/ResetPasswordPage";
import EquipmentInstancesListPage from "./Pages/EquipmentInstancesListPage/EquipmentInstancesListPage"; import EquipmentInstancesListPage from "./Pages/EquipmentInstancesListPage/EquipmentInstancesListPage";
import EquipmentListPage from "./Pages/EquipmentListPage/EquipmentListPage";
const queryClient = new QueryClient(); const queryClient = new QueryClient();
const router = createHashRouter([ const router = createHashRouter([
@ -45,6 +46,16 @@ const router = createHashRouter([
), ),
errorElement: <ErrorPage />, errorElement: <ErrorPage />,
}, },
{
path: "/view/equipments",
element: (
<>
<Revalidator />
<EquipmentListPage />
</>
),
errorElement: <ErrorPage />,
},
{ {
path: "/activation/:uid/:token", path: "/activation/:uid/:token",
element: ( element: (

128
src/Pages/EquipmentListPage/EquipmentListPage.tsx Normal file
View file

@ -0,0 +1,128 @@
import { useQuery } from "@tanstack/react-query";
import Header from "../../Components/Header/Header";
import styles from "../../styles";
import { EquipmentsAPI } 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 EquipmentListPage() {
const equipments = useQuery({
queryKey: ["equipments"],
queryFn: EquipmentsAPI,
});
if (equipments.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={"SKU 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}>
Description
</TableCell>
<TableCell align="center" style={styles.text_light}>
Last Modified
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{equipments.data ? (
equipments.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.name}
</TableCell>
<TableCell align="center" component="th" scope="row">
{equipment.description}
</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>
);
}