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

Support very long strings being displayed in remarks for transactions

Browse source
This commit is contained in:
Keannu Bernasol 2024-01-03 16:34:56 +08:00
parent e8864bc28c
commit 1281d8023f
3 changed files with 154 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

195
src/Components/EditTransactionModal/EditTransactionModal.tsx
View file

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

7
src/Components/TransactionEntry/TransactionEntry.tsx
View file

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

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

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