From 669e1d6009a60b3ddbc8cfe378247c4d69606a38 Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Wed, 3 Jan 2024 16:50:35 +0800
Subject: [PATCH] Separate transaction filter menu into separate component for
 use within all user types

---
 .../Student/StudentTransactionListView.tsx    |   2 +-
 .../Teacher/TeacherTransactionListView.tsx    |   2 +-
 .../TransactionFilterMenu.tsx                 |   2 +-
 .../TransactionsListPage.tsx                  | 286 ++++++++++--------
 4 files changed, 164 insertions(+), 128 deletions(-)
 rename src/Components/{DashboardPage => TransactionFilterMenu}/TransactionFilterMenu.tsx (99%)

diff --git a/src/Components/DashboardPage/Student/StudentTransactionListView.tsx b/src/Components/DashboardPage/Student/StudentTransactionListView.tsx
index d291e29..7e22c82 100644
--- a/src/Components/DashboardPage/Student/StudentTransactionListView.tsx
+++ b/src/Components/DashboardPage/Student/StudentTransactionListView.tsx
@@ -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() {
diff --git a/src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx b/src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx
index c763d8c..24a6844 100644
--- a/src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx
+++ b/src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx
@@ -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() {
diff --git a/src/Components/DashboardPage/TransactionFilterMenu.tsx b/src/Components/TransactionFilterMenu/TransactionFilterMenu.tsx
similarity index 99%
rename from src/Components/DashboardPage/TransactionFilterMenu.tsx
rename to src/Components/TransactionFilterMenu/TransactionFilterMenu.tsx
index d791f16..7086232 100644
--- a/src/Components/DashboardPage/TransactionFilterMenu.tsx
+++ b/src/Components/TransactionFilterMenu/TransactionFilterMenu.tsx
@@ -185,7 +185,7 @@ export default function TransactionFilterMenu(props: props) {
                       ...{ margin: 0, textAlign: "left" },
                     }}
                   >
-                    Denied by technician
+                    Denied by teacher
                   </p>
                 </div>
               </Button>
diff --git a/src/Pages/TransactionsListPage/TransactionsListPage.tsx b/src/Pages/TransactionsListPage/TransactionsListPage.tsx
index a6db7d1..9228f2b 100644
--- a/src/Pages/TransactionsListPage/TransactionsListPage.tsx
+++ b/src/Pages/TransactionsListPage/TransactionsListPage.tsx
@@ -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>
+                  ))
               ) : (
                 <></>
               )}