Support very long strings being displayed in remarks for transactions

src/Components/EditTransactionModal/EditTransactionModal.tsx

@@ -11,6 +11,7 @@ import FormControl from "@mui/material/FormControl";
 import FormLabel from "@mui/material/FormLabel";
 import Radio from "@mui/material/Radio";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import TextField from "@mui/material/TextField";
 import { CircularProgress } from "@mui/material";
 import React from "react";
 
@@ -19,7 +20,10 @@ export default function EditTransactionModal(props: {
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }) {
   const queryClient = useQueryClient();
-  const [status, setStatus] = useState("");
+  const [current_transaction, setCurrentTransaction] = useState({
+    transaction_status: "",
+    remarks: "",
+  });
   const [error, setError] = useState("");
   const transaction = useQuery({
     queryKey: ["transaction", props.id],
@@ -27,10 +31,7 @@ export default function EditTransactionModal(props: {
   });
   const update_mutation = useMutation({
     mutationFn: async () => {
-      const data = await TransactionUpdateAPI(
-        { transaction_status: status },
-        props.id
-      );
+      const data = await TransactionUpdateAPI(current_transaction, props.id);
       if (data[0] != true) {
         setError(JSON.stringify(data[1]));
         return Promise.reject(new Error(JSON.stringify(data[1])));
@@ -60,15 +61,21 @@ export default function EditTransactionModal(props: {
           theme: "light",
         }
       );
-      if (typeof data[1] == "object") {
-        setStatus(data[1].transaction_status);
+      if (typeof data[1] == "object" && transaction.data) {
+        setCurrentTransaction({
+          transaction_status: transaction.data.transaction_status,
+          remarks: transaction.data.remarks,
+        });
       }
     },
   });
 
   useEffect(() => {
     if (transaction.data) {
-      setStatus(transaction.data.transaction_status);
+      setCurrentTransaction({
+        transaction_status: transaction.data.transaction_status,
+        remarks: transaction.data.remarks,
+      });
     }
   }, [transaction.data]);
   if (transaction.isLoading) {
@@ -123,75 +130,117 @@ export default function EditTransactionModal(props: {
 
       <div style={styles.flex_column}>
         <FormControl style={{ marginTop: "8px" }}>
-          <FormLabel style={styles.text_dark} id="status-selection">
-            Item Status
-          </FormLabel>
-          <RadioGroup
-            aria-labelledby="demo-radio-buttons-group-label"
-            value={status}
-            defaultValue="Pending"
-            name="radio-buttons-group"
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              setStatus(e.target.value);
-              setError("");
-            }}
-          >
-            <div
-              style={{
-                ...styles.flex_column,
-                ...{ overflowY: "scroll", maxHeight: "8rem" },
-              }}
-            >
-              <FormControlLabel
+          {transaction.data?.transaction_status != "Finalized" &&
+          transaction.data?.transaction_status != "Rejected" ? (
+            <>
+              <FormLabel style={styles.text_dark} id="status-selection">
+                Item Status
+              </FormLabel>
+              <RadioGroup
+                aria-labelledby="demo-radio-buttons-group-label"
+                value={current_transaction.transaction_status}
+                defaultValue="Pending"
+                name="radio-buttons-group"
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  setCurrentTransaction({
+                    ...current_transaction,
+                    transaction_status: e.target.value,
+                  });
+                  setError("");
+                }}
+              >
+                <div
+                  style={{
+                    ...styles.flex_column,
+                    ...{ overflowY: "scroll", maxHeight: "8rem" },
+                  }}
+                >
+                  {/*<FormControlLabel
                 value="Pending Approval"
                 control={<Radio />}
                 label="Pending Approval"
                 style={styles.text_dark}
-              />
-              <FormControlLabel
-                value="Approved"
-                control={<Radio />}
-                label="Approved"
-                style={styles.text_dark}
-              />
-              <FormControlLabel
-                value="Rejected"
-                control={<Radio />}
-                label="Rejected"
-                style={styles.text_dark}
-              />
-              <FormControlLabel
-                value="Cancelled"
-                control={<Radio />}
-                label="Cancelled"
-                style={styles.text_dark}
-              />
-              <FormControlLabel
-                value="Borrowed"
-                control={<Radio />}
-                label="Borrowed"
-                style={styles.text_dark}
-              />
-              <FormControlLabel
-                value="Returned: Pending Checking"
-                control={<Radio />}
-                label="Returned: Pending Checking"
-                style={styles.text_dark}
-              />
-              <FormControlLabel
-                value="With Breakages: Pending Resolution"
-                control={<Radio />}
-                label="With Breakages: Pending Resolution"
-                style={styles.text_dark}
-              />
-              <FormControlLabel
-                value="Finalized"
-                control={<Radio />}
-                label="Finalized"
-                style={styles.text_dark}
-              />
-            </div>
-          </RadioGroup>
+              />*/}
+                  {transaction.data?.transaction_status ==
+                  "Pending Approval" ? (
+                    <>
+                      <FormControlLabel
+                        value="Approved"
+                        control={<Radio />}
+                        label="Approved"
+                        style={styles.text_dark}
+                      />
+                      <FormControlLabel
+                        value="Rejected"
+                        control={<Radio />}
+                        label="Rejected"
+                        style={styles.text_dark}
+                      />
+                    </>
+                  ) : null}
+                  {transaction.data?.transaction_status == "Approved" ? (
+                    <>
+                      <FormControlLabel
+                        value="Cancelled"
+                        control={<Radio />}
+                        label="Cancelled"
+                        style={styles.text_dark}
+                      />
+                      <FormControlLabel
+                        value="Borrowed"
+                        control={<Radio />}
+                        label="Borrowed"
+                        style={styles.text_dark}
+                      />
+                    </>
+                  ) : null}
+                  {transaction.data?.transaction_status == "Borrowed" ? (
+                    <>
+                      <FormControlLabel
+                        value="Returned: Pending Checking"
+                        control={<Radio />}
+                        label="Returned: Pending Checking"
+                        style={styles.text_dark}
+                      />
+                    </>
+                  ) : null}
+                  {transaction.data?.transaction_status == "Borrowed" ? (
+                    <>
+                      <FormControlLabel
+                        value="With Breakages: Pending Resolution"
+                        control={<Radio />}
+                        label="With Breakages: Pending Resolution"
+                        style={styles.text_dark}
+                      />
+                      <FormControlLabel
+                        value="Finalized"
+                        control={<Radio />}
+                        label="Finalized"
+                        style={styles.text_dark}
+                      />
+                    </>
+                  ) : null}
+                </div>
+              </RadioGroup>
+            </>
+          ) : null}
+          <TextField
+            id="outlined-helperText"
+            label="Remarks"
+            multiline
+            style={styles.input_form}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setCurrentTransaction({
+                ...current_transaction,
+                remarks: e.target.value,
+              });
+              setError("");
+            }}
+            value={current_transaction.remarks}
+            placeholder={
+              "Optionally add a brief description of the transaction"
+            }
+          />
         </FormControl>
       </div>
       <p style={{ ...styles.text_dark, ...styles.text_M }}>{error}</p>

src/Components/TransactionEntry/TransactionEntry.tsx

@@ -47,7 +47,7 @@ export default function TransactionEntry(props: props) {
             style={{
               ...styles.text_dark,
               ...styles.text_S,
-              ...{ textAlign: "left", margin: 0 },
+              ...{ textAlign: "left", margin: 0, wordWrap: "break-word" },
             }}
           >
             Borrower: {props.transaction.borrower.name}{" "}
@@ -57,7 +57,7 @@ export default function TransactionEntry(props: props) {
             style={{
               ...styles.text_dark,
               ...styles.text_S,
-              ...{ textAlign: "left", margin: 0 },
+              ...{ textAlign: "left", margin: 0, wordWrap: "break-word" },
             }}
           >
             {`(${props.transaction.borrower.course})`}
@@ -92,6 +92,8 @@ export default function TransactionEntry(props: props) {
                 marginTop: "8px",
                 flexWrap: "wrap",
                 overflowY: "scroll",
+                maxWidth: "192px",
+                wordWrap: "break-word",
               },
             }}
           >
@@ -121,6 +123,7 @@ export default function TransactionEntry(props: props) {
                   ...styles.text_S,
                   ...{
                     textAlign: "right",
+                    wordWrap: "break-word",
                     margin: 0,
                   },
                 }}

src/Pages/TransactionsListPage/TransactionsListPage.tsx

@@ -85,6 +85,9 @@ export default function TransactionsListPage() {
                 <TableCell align="center" style={styles.text_light}>
                   Status
                 </TableCell>
+                <TableCell align="center" style={styles.text_light}>
+                  Remarks
+                </TableCell>
                 <TableCell align="center" style={styles.text_light}>
                   Equipments
                 </TableCell>
@@ -141,6 +144,23 @@ export default function TransactionsListPage() {
                     >
                       {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">
@@ -172,8 +192,13 @@ export default function TransactionsListPage() {
                                   },
                                 }}
                                 onClick={() => {
-                                  SetEditTransactionOpen(false);
-                                  SetEditEquipmentsOpen(true);
+                                  if (
+                                    transaction.transaction_status ==
+                                    "With Breakages: Pending Resolution"
+                                  ) {
+                                    SetEditTransactionOpen(false);
+                                    SetEditEquipmentsOpen(true);
+                                  }
                                 }}
                               >
                                 <TableCell