From 2d59a775c1c82d698140aacc932ce1ac1311660c Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Wed, 3 Jan 2024 17:01:34 +0800
Subject: [PATCH] Added update transaction modal for teacher

---
 .../Student/StudentTransactionListView.tsx    |  6 ++--
 .../Teacher/TeacherTransactionListView.tsx    | 32 ++++++++++++++-----
 .../EditTransactionModal.tsx                  |  3 +-
 .../TransactionEntry/TransactionEntry.tsx     |  6 ++--
 .../TransactionFilterMenu.tsx                 |  2 +-
 5 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/src/Components/DashboardPage/Student/StudentTransactionListView.tsx b/src/Components/DashboardPage/Student/StudentTransactionListView.tsx
index 7e22c82..7917ec8 100644
--- a/src/Components/DashboardPage/Student/StudentTransactionListView.tsx
+++ b/src/Components/DashboardPage/Student/StudentTransactionListView.tsx
@@ -57,12 +57,12 @@ export default function StudentTransactionListView() {
               .map((transaction) => (
                 <React.Fragment key={transaction.id}>
                   <TransactionEntry
-                    onClick={() =>
+                    onClick={() => {
                       navigate(`/view/transaction/${transaction.id}`, {
                         replace: true,
                         state: { id: transaction.id },
-                      })
-                    }
+                      });
+                    }}
                     transaction={transaction}
                   />
                 </React.Fragment>
diff --git a/src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx b/src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx
index 24a6844..69d6818 100644
--- a/src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx
+++ b/src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx
@@ -5,10 +5,12 @@ import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
 import React, { useState } from "react";
 import TransactionEntry from "../../TransactionEntry/TransactionEntry";
 import TransactionFilterMenu from "../../TransactionFilterMenu/TransactionFilterMenu";
-import { useNavigate } from "react-router-dom";
+import Popup from "reactjs-popup";
+import EditTransactionModal from "../../EditTransactionModal/EditTransactionModal";
 
 export default function TeacherTransactionListView() {
-  const navigate = useNavigate();
+  const [EditTransactionOpen, SetEditTransactionOpen] = useState(false);
+  const [SelectedTransaction, SetSelectedTransaction] = useState(0);
   const transactions = useQuery({
     queryKey: ["transactions_teacher"],
     queryFn: TransactionsByTeacherAPI,
@@ -57,12 +59,14 @@ export default function TeacherTransactionListView() {
               .map((transaction) => (
                 <React.Fragment key={transaction.id}>
                   <TransactionEntry
-                    onClick={() =>
-                      navigate(`/view/transaction/${transaction.id}`, {
-                        replace: true,
-                        state: { id: transaction.id },
-                      })
-                    }
+                    onClick={() => {
+                      if (
+                        transaction.transaction_status == "Pending Approval"
+                      ) {
+                        SetSelectedTransaction(transaction.id);
+                        SetEditTransactionOpen(true);
+                      }
+                    }}
                     transaction={transaction}
                   />
                 </React.Fragment>
@@ -72,6 +76,18 @@ export default function TeacherTransactionListView() {
           )}
         </div>
       </div>
+      <Popup
+        open={EditTransactionOpen}
+        onClose={() => SetEditTransactionOpen(false)}
+        modal
+        position={"top center"}
+        contentStyle={styles.popup_center}
+      >
+        <EditTransactionModal
+          id={SelectedTransaction}
+          setOpen={SetEditTransactionOpen}
+        />
+      </Popup>
     </div>
   );
 }
diff --git a/src/Components/EditTransactionModal/EditTransactionModal.tsx b/src/Components/EditTransactionModal/EditTransactionModal.tsx
index d2d93c7..d05e8e1 100644
--- a/src/Components/EditTransactionModal/EditTransactionModal.tsx
+++ b/src/Components/EditTransactionModal/EditTransactionModal.tsx
@@ -204,7 +204,8 @@ export default function EditTransactionModal(props: {
                       />
                     </>
                   ) : null}
-                  {transaction.data?.transaction_status == "Borrowed" ? (
+                  {transaction.data?.transaction_status ==
+                  "Returned: Pending Checking" ? (
                     <>
                       <FormControlLabel
                         value="With Breakages: Pending Resolution"
diff --git a/src/Components/TransactionEntry/TransactionEntry.tsx b/src/Components/TransactionEntry/TransactionEntry.tsx
index c3544fd..f11c875 100644
--- a/src/Components/TransactionEntry/TransactionEntry.tsx
+++ b/src/Components/TransactionEntry/TransactionEntry.tsx
@@ -9,7 +9,7 @@ export interface props {
 
 export default function TransactionEntry(props: props) {
   return (
-    <div
+    <button
       style={{
         alignSelf: "center",
         justifySelf: "center",
@@ -19,7 +19,7 @@ export default function TransactionEntry(props: props) {
         margin: "8px",
         padding: "8px",
       }}
-      onClick={() => props.onClick}
+      onClick={props.onClick}
     >
       <div style={styles.flex_row}>
         <p
@@ -147,6 +147,6 @@ export default function TransactionEntry(props: props) {
       >
         {`${props.transaction.transaction_status}`}
       </p>
-    </div>
+    </button>
   );
 }
diff --git a/src/Components/TransactionFilterMenu/TransactionFilterMenu.tsx b/src/Components/TransactionFilterMenu/TransactionFilterMenu.tsx
index 7086232..467b007 100644
--- a/src/Components/TransactionFilterMenu/TransactionFilterMenu.tsx
+++ b/src/Components/TransactionFilterMenu/TransactionFilterMenu.tsx
@@ -109,7 +109,7 @@ export default function TransactionFilterMenu(props: props) {
                       ...{ margin: 0, textAlign: "left" },
                     }}
                   >
-                    Awaiting techncian approval
+                    Awaiting teacher approval
                   </p>
                 </div>
               </Button>