keannu125/Borrowing-TrackerFrontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Borrowing-TrackerFrontend.git synced 2024-11-17 06:19:27 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Separate transaction filter menu into separate component for use within all user types

Browse source
This commit is contained in:
Keannu Bernasol 2024-01-03 16:50:35 +08:00
parent 1281d8023f
commit 669e1d6009
4 changed files with 164 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/Components/DashboardPage/Student/StudentTransactionListView.tsx
View file

@ -4,7 +4,7 @@ import styles from "../../../styles";
import CircularProgress from "@mui/material/CircularProgress/CircularProgress"; import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
import React, { useState } from "react"; import React, { useState } from "react";
import TransactionEntry from "../../TransactionEntry/TransactionEntry"; import TransactionEntry from "../../TransactionEntry/TransactionEntry";
import TransactionFilterMenu from "../TransactionFilterMenu"; import TransactionFilterMenu from "../../TransactionFilterMenu/TransactionFilterMenu";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
export default function StudentTransactionListView() { export default function StudentTransactionListView() {

2
src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx
View file

@ -4,7 +4,7 @@ import styles from "../../../styles";
import CircularProgress from "@mui/material/CircularProgress/CircularProgress"; import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
import React, { useState } from "react"; import React, { useState } from "react";
import TransactionEntry from "../../TransactionEntry/TransactionEntry"; import TransactionEntry from "../../TransactionEntry/TransactionEntry";
import TransactionFilterMenu from "../TransactionFilterMenu"; import TransactionFilterMenu from "../../TransactionFilterMenu/TransactionFilterMenu";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
export default function TeacherTransactionListView() { export default function TeacherTransactionListView() {

2
src/Components/DashboardPage/TransactionFilterMenu.tsx → src/Components/TransactionFilterMenu/TransactionFilterMenu.tsx
View file

@ -185,7 +185,7 @@ export default function TransactionFilterMenu(props: props) {
...{ margin: 0, textAlign: "left" }, ...{ margin: 0, textAlign: "left" },
}} }}
> >
Denied by technician Denied by teacher
</p> </p>
</div> </div>
</Button> </Button>

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

@ -14,6 +14,7 @@ import { colors } from "../../styles";
import Popup from "reactjs-popup"; import Popup from "reactjs-popup";
import { useState } from "react"; import { useState } from "react";
import EditTransactionModal from "../../Components/EditTransactionModal/EditTransactionModal"; import EditTransactionModal from "../../Components/EditTransactionModal/EditTransactionModal";
import TransactionFilterMenu from "../../Components/TransactionFilterMenu/TransactionFilterMenu";
export default function TransactionsListPage() { export default function TransactionsListPage() {
const [EditTransactionOpen, SetEditTransactionOpen] = useState(false); const [EditTransactionOpen, SetEditTransactionOpen] = useState(false);
@ -23,6 +24,7 @@ export default function TransactionsListPage() {
queryKey: ["transactions"], queryKey: ["transactions"],
queryFn: TransactionsAPI, queryFn: TransactionsAPI,
}); });
const [filter, setFilter] = useState("");
if (transactions.isLoading) { if (transactions.isLoading) {
return ( return (
<div style={styles.background}> <div style={styles.background}>
@ -55,22 +57,25 @@ export default function TransactionsListPage() {
<Header label={"Transactions"} /> <Header label={"Transactions"} />
<div <div
style={{ style={{
...{
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100%",
width: "100%",
minHeight: "100%",
minWidth: "100%",
flexWrap: "wrap",
},
...styles.flex_column, ...styles.flex_column,
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100%",
width: "100%",
minHeight: "100%",
minWidth: "100%",
flexWrap: "wrap",
}} }}
> >
<TableContainer <TableContainer
style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }} style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
component={Paper} component={Paper}
> >
<Table sx={{ minWidth: "32rem" }} size="medium"> <TransactionFilterMenu filter={filter} setFilter={setFilter} />
<Table sx={{ marginTop: "8px", minWidth: "32rem" }} size="medium">
<TableHead> <TableHead>
<TableRow style={{ backgroundColor: colors.header_color }}> <TableRow style={{ backgroundColor: colors.header_color }}>
<TableCell align="center" style={styles.text_light}> <TableCell align="center" style={styles.text_light}>
@ -95,134 +100,165 @@ export default function TransactionsListPage() {
</TableHead> </TableHead>
<TableBody> <TableBody>
{transactions.data ? ( {transactions.data ? (
transactions.data.map((transaction) => ( transactions.data
<TableRow .filter((transaction) =>
key={transaction.id} filter !== ""
sx={{ "&:last-child td, &:last-child th": { border: 0 } }} ? transaction.transaction_status == filter
> : true
<TableCell )
align="center" .map((transaction) => (
component="th" <TableRow
scope="row" key={transaction.id}
onClick={() => { sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
SetSelectedTransaction(transaction.id);
SetEditTransactionOpen(true);
}}
> >
{transaction.id} <TableCell
</TableCell> align="center"
<TableCell component="th"
align="center" scope="row"
component="th" onClick={() => {
scope="row" if (
onClick={() => { transaction.transaction_status != "Finalized" &&
SetSelectedTransaction(transaction.id); transaction.transaction_status != "Rejected"
SetEditTransactionOpen(true); ) {
}} SetSelectedTransaction(transaction.id);
> SetEditTransactionOpen(true);
{transaction.borrower.name} }
</TableCell> }}
<TableCell >
align="center" {transaction.id}
component="th" </TableCell>
scope="row" <TableCell
onClick={() => { align="center"
SetSelectedTransaction(transaction.id); component="th"
SetEditTransactionOpen(true); scope="row"
}} onClick={() => {
> if (
{transaction.teacher.name} transaction.transaction_status != "Finalized" &&
</TableCell> transaction.transaction_status != "Rejected"
<TableCell ) {
align="center" SetSelectedTransaction(transaction.id);
component="th" SetEditTransactionOpen(true);
scope="row" }
onClick={() => { }}
SetSelectedTransaction(transaction.id); >
SetEditTransactionOpen(true); {transaction.borrower.name}
}} </TableCell>
> <TableCell
{transaction.transaction_status} align="center"
</TableCell> component="th"
<TableCell scope="row"
align="center" onClick={() => {
component="th" if (
scope="row" transaction.transaction_status != "Finalized" &&
style={{ ...styles.text_S }} transaction.transaction_status != "Rejected"
sx={{ ) {
maxWidth: "64px", SetSelectedTransaction(transaction.id);
flexWrap: "wrap", SetEditTransactionOpen(true);
wordWrap: "break-word", }
}} }}
onClick={() => { >
SetSelectedTransaction(transaction.id); {transaction.teacher.name}
SetEditTransactionOpen(true); </TableCell>
}} <TableCell
> align="center"
{transaction.remarks} component="th"
</TableCell> scope="row"
<TableCell style={{ overflowY: "scroll" }} align="center"> onClick={() => {
<TableContainer component={Paper}> if (
<Table sx={{ minWidth: "4rem" }} size="medium"> transaction.transaction_status != "Finalized" &&
<TableHead> transaction.transaction_status != "Rejected"
<TableRow ) {
style={{ backgroundColor: colors.header_color }} SetSelectedTransaction(transaction.id);
> SetEditTransactionOpen(true);
<TableCell }
align="center" }}
style={styles.text_light} >
> {transaction.transaction_status}
ID </TableCell>
</TableCell> <TableCell
<TableCell align="center"
align="center" component="th"
style={styles.text_light} scope="row"
> style={{ ...styles.text_S }}
Name sx={{
</TableCell> maxWidth: "64px",
</TableRow> flexWrap: "wrap",
</TableHead> wordWrap: "break-word",
<TableBody> }}
{transaction.equipments.map((equipment) => ( 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 <TableRow
key={equipment.id} style={{ backgroundColor: colors.header_color }}
sx={{
"&:last-child td, &:last-child th": {
border: 0,
},
}}
onClick={() => {
if (
transaction.transaction_status ==
"With Breakages: Pending Resolution"
) {
SetEditTransactionOpen(false);
SetEditEquipmentsOpen(true);
}
}}
> >
<TableCell <TableCell
align="center" align="center"
component="th" style={styles.text_light}
scope="row"
> >
{equipment.id} ID
</TableCell> </TableCell>
<TableCell <TableCell
align="center" align="center"
component="th" style={styles.text_light}
scope="row"
> >
{equipment.name} Name
</TableCell> </TableCell>
</TableRow> </TableRow>
))} </TableHead>
</TableBody> <TableBody>
</Table> {transaction.equipments.map((equipment) => (
</TableContainer> <TableRow
</TableCell> key={equipment.id}
</TableRow> 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>
))
) : ( ) : (
<></> <></>
)} )}