keannu125/Borrowing-TrackerFrontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Borrowing-TrackerFrontend.git synced 2025-05-17 11:58:14 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added functionality to transaction list page

Browse source
This commit is contained in:
Keannu Christian Bernasol 2023-12-14 19:51:33 +08:00
parent ac55dca368
commit d226d77306
3 changed files with 258 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

225
src/Pages/TransactionsListPage/TransactionsListPage.tsx
View file

@ -1,3 +1,226 @@
import { useQuery } from "@tanstack/react-query";
import Header from "../../Components/Header/Header";
import styles from "../../styles";
import { TransactionsAPI } 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 Popup from "reactjs-popup";
import { useState } from "react";
export default function TransactionsListPage() {
return <div>{"TransactionsListPage"}</div>;
const [EditTransactionOpen, SetEditTransactionOpen] = useState(false);
const [SelectedTransaction, SetSelectedTransaction] = useState(0);
const [EditEquipmentsOpen, SetEditEquipmentsOpen] = useState(false);
const transactions = useQuery({
queryKey: ["transactions"],
queryFn: TransactionsAPI,
});
if (transactions.isLoading) {
return (
<div style={styles.background}>
<Header label={"Transactions"} />
<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={"Transactions"} />
<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 align="center" style={styles.text_light}>
ID
</TableCell>
<TableCell align="center" style={styles.text_light}>
Borrower
</TableCell>
<TableCell align="center" style={styles.text_light}>
Teacher
</TableCell>
<TableCell align="center" style={styles.text_light}>
Status
</TableCell>
<TableCell align="center" style={styles.text_light}>
Equipments
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{transactions.data ? (
transactions.data.map((transaction) => (
<TableRow
key={transaction.id}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell
align="center"
component="th"
scope="row"
onClick={() => {
SetSelectedTransaction(transaction.id);
SetEditTransactionOpen(true);
}}
>
{transaction.id}
</TableCell>
<TableCell
align="center"
component="th"
scope="row"
onClick={() => {
SetSelectedTransaction(transaction.id);
SetEditTransactionOpen(true);
}}
>
{transaction.borrower.name}
</TableCell>
<TableCell
align="center"
component="th"
scope="row"
onClick={() => {
SetSelectedTransaction(transaction.id);
SetEditTransactionOpen(true);
}}
>
{transaction.teacher.name}
</TableCell>
<TableCell
align="center"
component="th"
scope="row"
onClick={() => {
SetSelectedTransaction(transaction.id);
SetEditTransactionOpen(true);
}}
>
{transaction.transaction_status}
</TableCell>
<TableCell align="center">
<TableContainer component={Paper}>
<Table sx={{ minWidth: "4rem" }} size="medium">
<TableHead>
<TableRow
style={{ backgroundColor: colors.header_color }}
>
<TableCell
align="center"
style={styles.text_light}
>
ID
</TableCell>
<TableCell
align="center"
style={styles.text_light}
>
Name
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{transaction.equipments.map((equipment) => (
<TableRow
key={transaction.id}
sx={{
"&:last-child td, &:last-child th": {
border: 0,
},
}}
onClick={() => {
SetEditTransactionOpen(false);
SetEditEquipmentsOpen(true);
}}
>
<TableCell
align="center"
component="th"
scope="row"
>
{equipment.id}
</TableCell>
<TableCell
align="center"
component="th"
scope="row"
>
{equipment.name}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</TableCell>
</TableRow>
))
) : (
<></>
)}
</TableBody>
</Table>
</TableContainer>
</div>
</div>
<Popup
open={EditTransactionOpen}
onClose={() => SetEditTransactionOpen(false)}
modal
position={"top center"}
contentStyle={styles.popup_center}
>
<p style={styles.text_dark}>Transaction Modal</p>
</Popup>
<Popup
open={EditEquipmentsOpen}
onClose={() => SetEditEquipmentsOpen(false)}
modal
position={"top center"}
contentStyle={styles.popup_center}
>
<p style={styles.text_dark}>Edit Transaction Equipment Modal</p>
</Popup>
</div>
);
}