mirror of
https://github.com/lemeow125/Borrowing-TrackerFrontend.git
synced 2024-11-17 06:19:27 +08:00
Added functionality to transaction list page
This commit is contained in:
parent
ac55dca368
commit
d226d77306
3 changed files with 258 additions and 1 deletions
|
|
@ -16,6 +16,7 @@ import {
|
||||||
EquipmentLogListType,
|
EquipmentLogListType,
|
||||||
EquipmentInstanceLogListType,
|
EquipmentInstanceLogListType,
|
||||||
UserType,
|
UserType,
|
||||||
|
TransactionListType,
|
||||||
} from "../Types/Types";
|
} from "../Types/Types";
|
||||||
|
|
||||||
const debug = true;
|
const debug = true;
|
||||||
|
|
@ -341,3 +342,17 @@ export async function EquipmentInstanceCreateAPI(
|
||||||
return [false, ParseError(error)];
|
return [false, ParseError(error)];
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Transactions APIs
|
||||||
|
|
||||||
|
export async function TransactionsAPI() {
|
||||||
|
const config = await GetConfig();
|
||||||
|
return instance
|
||||||
|
.get("api/v1/transactions/", config)
|
||||||
|
.then((response) => {
|
||||||
|
return response.data as TransactionListType;
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
console.log("Error retrieving transactions");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -106,3 +106,22 @@ export type UserType = {
|
||||||
is_teacher: boolean;
|
is_teacher: boolean;
|
||||||
is_technician: boolean;
|
is_technician: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export type TransactionType = {
|
||||||
|
id: number;
|
||||||
|
borrower: {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
};
|
||||||
|
teacher: {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
};
|
||||||
|
equipments: Array<{
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
}>;
|
||||||
|
transaction_status: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type TransactionListType = Array<TransactionType>;
|
||||||
|
|
|
||||||
|
|
@ -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() {
|
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>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue