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 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() {

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 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() {

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" },
}}
>
Denied by technician
Denied by teacher
</p>
</div>
</Button>

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

@ -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,7 +57,7 @@ export default function TransactionsListPage() {
<Header label={"Transactions"} />
<div
style={{
...styles.flex_column,
...{
display: "flex",
alignItems: "center",
justifyContent: "center",
@ -64,13 +66,16 @@ export default function TransactionsListPage() {
minHeight: "100%",
minWidth: "100%",
flexWrap: "wrap",
},
...styles.flex_column,
}}
>
<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,7 +100,13 @@ export default function TransactionsListPage() {
</TableHead>
<TableBody>
{transactions.data ? (
transactions.data.map((transaction) => (
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 } }}
@ -105,8 +116,13 @@ export default function TransactionsListPage() {
component="th"
scope="row"
onClick={() => {
if (
transaction.transaction_status != "Finalized" &&
transaction.transaction_status != "Rejected"
) {
SetSelectedTransaction(transaction.id);
SetEditTransactionOpen(true);
}
}}
>
{transaction.id}
@ -116,8 +132,13 @@ export default function TransactionsListPage() {
component="th"
scope="row"
onClick={() => {
if (
transaction.transaction_status != "Finalized" &&
transaction.transaction_status != "Rejected"
) {
SetSelectedTransaction(transaction.id);
SetEditTransactionOpen(true);
}
}}
>
{transaction.borrower.name}
@ -127,8 +148,13 @@ export default function TransactionsListPage() {
component="th"
scope="row"
onClick={() => {
if (
transaction.transaction_status != "Finalized" &&
transaction.transaction_status != "Rejected"
) {
SetSelectedTransaction(transaction.id);
SetEditTransactionOpen(true);
}
}}
>
{transaction.teacher.name}
@ -138,8 +164,13 @@ export default function TransactionsListPage() {
component="th"
scope="row"
onClick={() => {
if (
transaction.transaction_status != "Finalized" &&
transaction.transaction_status != "Rejected"
) {
SetSelectedTransaction(transaction.id);
SetEditTransactionOpen(true);
}
}}
>
{transaction.transaction_status}
@ -155,8 +186,13 @@ export default function TransactionsListPage() {
wordWrap: "break-word",
}}
onClick={() => {
if (
transaction.transaction_status != "Finalized" &&
transaction.transaction_status != "Rejected"
) {
SetSelectedTransaction(transaction.id);
SetEditTransactionOpen(true);
}
}}
>
{transaction.remarks}