mirror of
https://github.com/lemeow125/Borrowing-TrackerFrontend.git
synced 2024-11-17 06:19:27 +08:00
Separate transaction filter menu into separate component for use within all user types
This commit is contained in:
parent
1281d8023f
commit
669e1d6009
4 changed files with 164 additions and 128 deletions
|
|
@ -4,7 +4,7 @@ import styles from "../../../styles";
|
|||
import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
|
||||
import React, { useState } from "react";
|
||||
import TransactionEntry from "../../TransactionEntry/TransactionEntry";
|
||||
import TransactionFilterMenu from "../TransactionFilterMenu";
|
||||
import TransactionFilterMenu from "../../TransactionFilterMenu/TransactionFilterMenu";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function StudentTransactionListView() {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import styles from "../../../styles";
|
|||
import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
|
||||
import React, { useState } from "react";
|
||||
import TransactionEntry from "../../TransactionEntry/TransactionEntry";
|
||||
import TransactionFilterMenu from "../TransactionFilterMenu";
|
||||
import TransactionFilterMenu from "../../TransactionFilterMenu/TransactionFilterMenu";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function TeacherTransactionListView() {
|
||||
|
|
|
|||
|
|
@ -185,7 +185,7 @@ export default function TransactionFilterMenu(props: props) {
|
|||
...{ margin: 0, textAlign: "left" },
|
||||
}}
|
||||
>
|
||||
Denied by technician
|
||||
Denied by teacher
|
||||
</p>
|
||||
</div>
|
||||
</Button>
|
||||
|
|
@ -14,6 +14,7 @@ import { colors } from "../../styles";
|
|||
import Popup from "reactjs-popup";
|
||||
import { useState } from "react";
|
||||
import EditTransactionModal from "../../Components/EditTransactionModal/EditTransactionModal";
|
||||
import TransactionFilterMenu from "../../Components/TransactionFilterMenu/TransactionFilterMenu";
|
||||
|
||||
export default function TransactionsListPage() {
|
||||
const [EditTransactionOpen, SetEditTransactionOpen] = useState(false);
|
||||
|
|
@ -23,6 +24,7 @@ export default function TransactionsListPage() {
|
|||
queryKey: ["transactions"],
|
||||
queryFn: TransactionsAPI,
|
||||
});
|
||||
const [filter, setFilter] = useState("");
|
||||
if (transactions.isLoading) {
|
||||
return (
|
||||
<div style={styles.background}>
|
||||
|
|
@ -55,22 +57,25 @@ export default function TransactionsListPage() {
|
|||
<Header label={"Transactions"} />
|
||||
<div
|
||||
style={{
|
||||
...{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
minHeight: "100%",
|
||||
minWidth: "100%",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
...styles.flex_column,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
minHeight: "100%",
|
||||
minWidth: "100%",
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<TableContainer
|
||||
style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
|
||||
component={Paper}
|
||||
>
|
||||
<Table sx={{ minWidth: "32rem" }} size="medium">
|
||||
<TransactionFilterMenu filter={filter} setFilter={setFilter} />
|
||||
<Table sx={{ marginTop: "8px", minWidth: "32rem" }} size="medium">
|
||||
<TableHead>
|
||||
<TableRow style={{ backgroundColor: colors.header_color }}>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
|
|
@ -95,134 +100,165 @@ export default function TransactionsListPage() {
|
|||
</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);
|
||||
}}
|
||||
transactions.data
|
||||
.filter((transaction) =>
|
||||
filter !== ""
|
||||
? transaction.transaction_status == filter
|
||||
: true
|
||||
)
|
||||
.map((transaction) => (
|
||||
<TableRow
|
||||
key={transaction.id}
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
>
|
||||
{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"
|
||||
component="th"
|
||||
scope="row"
|
||||
style={{ ...styles.text_S }}
|
||||
sx={{
|
||||
maxWidth: "64px",
|
||||
flexWrap: "wrap",
|
||||
wordWrap: "break-word",
|
||||
}}
|
||||
onClick={() => {
|
||||
SetSelectedTransaction(transaction.id);
|
||||
SetEditTransactionOpen(true);
|
||||
}}
|
||||
>
|
||||
{transaction.remarks}
|
||||
</TableCell>
|
||||
<TableCell style={{ overflowY: "scroll" }} 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) => (
|
||||
<TableCell
|
||||
align="center"
|
||||
component="th"
|
||||
scope="row"
|
||||
onClick={() => {
|
||||
if (
|
||||
transaction.transaction_status != "Finalized" &&
|
||||
transaction.transaction_status != "Rejected"
|
||||
) {
|
||||
SetSelectedTransaction(transaction.id);
|
||||
SetEditTransactionOpen(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{transaction.id}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="center"
|
||||
component="th"
|
||||
scope="row"
|
||||
onClick={() => {
|
||||
if (
|
||||
transaction.transaction_status != "Finalized" &&
|
||||
transaction.transaction_status != "Rejected"
|
||||
) {
|
||||
SetSelectedTransaction(transaction.id);
|
||||
SetEditTransactionOpen(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{transaction.borrower.name}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="center"
|
||||
component="th"
|
||||
scope="row"
|
||||
onClick={() => {
|
||||
if (
|
||||
transaction.transaction_status != "Finalized" &&
|
||||
transaction.transaction_status != "Rejected"
|
||||
) {
|
||||
SetSelectedTransaction(transaction.id);
|
||||
SetEditTransactionOpen(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{transaction.teacher.name}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="center"
|
||||
component="th"
|
||||
scope="row"
|
||||
onClick={() => {
|
||||
if (
|
||||
transaction.transaction_status != "Finalized" &&
|
||||
transaction.transaction_status != "Rejected"
|
||||
) {
|
||||
SetSelectedTransaction(transaction.id);
|
||||
SetEditTransactionOpen(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{transaction.transaction_status}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="center"
|
||||
component="th"
|
||||
scope="row"
|
||||
style={{ ...styles.text_S }}
|
||||
sx={{
|
||||
maxWidth: "64px",
|
||||
flexWrap: "wrap",
|
||||
wordWrap: "break-word",
|
||||
}}
|
||||
onClick={() => {
|
||||
if (
|
||||
transaction.transaction_status != "Finalized" &&
|
||||
transaction.transaction_status != "Rejected"
|
||||
) {
|
||||
SetSelectedTransaction(transaction.id);
|
||||
SetEditTransactionOpen(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{transaction.remarks}
|
||||
</TableCell>
|
||||
<TableCell style={{ overflowY: "scroll" }} align="center">
|
||||
<TableContainer component={Paper}>
|
||||
<Table sx={{ minWidth: "4rem" }} size="medium">
|
||||
<TableHead>
|
||||
<TableRow
|
||||
key={equipment.id}
|
||||
sx={{
|
||||
"&:last-child td, &:last-child th": {
|
||||
border: 0,
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
if (
|
||||
transaction.transaction_status ==
|
||||
"With Breakages: Pending Resolution"
|
||||
) {
|
||||
SetEditTransactionOpen(false);
|
||||
SetEditEquipmentsOpen(true);
|
||||
}
|
||||
}}
|
||||
style={{ backgroundColor: colors.header_color }}
|
||||
>
|
||||
<TableCell
|
||||
align="center"
|
||||
component="th"
|
||||
scope="row"
|
||||
style={styles.text_light}
|
||||
>
|
||||
{equipment.id}
|
||||
ID
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="center"
|
||||
component="th"
|
||||
scope="row"
|
||||
style={styles.text_light}
|
||||
>
|
||||
{equipment.name}
|
||||
Name
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{transaction.equipments.map((equipment) => (
|
||||
<TableRow
|
||||
key={equipment.id}
|
||||
sx={{
|
||||
"&:last-child td, &:last-child th": {
|
||||
border: 0,
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
if (
|
||||
transaction.transaction_status ==
|
||||
"With Breakages: Pending Resolution"
|
||||
) {
|
||||
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>
|
||||
))
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in a new issue