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

Added update transaction modal and simplified error handling for update APIs

Browse source
This commit is contained in:
Keannu Bernasol 2023-12-14 20:27:41 +08:00
parent d226d77306
commit d2521a628d
6 changed files with 258 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/Components/API/API.tsx
View file

@ -17,6 +17,8 @@ import {
EquipmentInstanceLogListType,
UserType,
TransactionListType,
TransactionUpdateType,
TransactionType,
} from "../Types/Types";
const debug = true;
@ -356,3 +358,31 @@ export async function TransactionsAPI() {
console.log("Error retrieving transactions");
});
}
export async function TransactionAPI(id: number) {
const config = await GetConfig();
return instance
.get(`api/v1/transactions/${id}/`, config)
.then((response) => {
return response.data as TransactionType;
})
.catch(() => {
console.log("Error retrieving transaction");
});
}
export async function TransactionUpdateAPI(
transaction: TransactionUpdateType,
id: number
) {
const config = await GetConfig();
return instance
.patch(`api/v1/transactions/${id}/`, transaction, config)
.then((response) => {
return [true, response.data as TransactionType];
})
.catch((error) => {
console.log("Error updating transaction");
return [false, ParseError(error)];
});
}

4
src/Components/EditItemInstanceModal/EditItemInstanceModal.tsx
View file

@ -51,6 +51,7 @@ export default function EditItemInstanceModal(props: {
mutationFn: async () => {
const data = await EquipmentInstanceUpdateAPI(item, props.id);
if (data[0] != true) {
setError(JSON.stringify(data[1]));
return Promise.reject(new Error(JSON.stringify(data[1])));
}
return data;
@ -84,9 +85,6 @@ export default function EditItemInstanceModal(props: {
});
}
},
onError: (error) => {
setError(JSON.stringify(error));
},
});
const delete_mutation = useMutation({

4
src/Components/EditSKUModal/EditSKUModal.tsx
View file

@ -53,6 +53,7 @@ export default function EditSKUModal(props: {
mutationFn: async () => {
const data = await EquipmentUpdateAPI(item, props.id);
if (data[0] != true) {
setError(JSON.stringify(data[1]));
return Promise.reject(new Error(JSON.stringify(data[1])));
}
return data;
@ -87,9 +88,6 @@ export default function EditSKUModal(props: {
});
}
},
onError: (error) => {
setError(JSON.stringify(error));
},
});
const delete_mutation = useMutation({

216
src/Components/EditTransactionModal/EditTransactionModal.tsx Normal file
View file

@ -0,0 +1,216 @@
import { useEffect, useState } from "react";
import styles from "../../styles";
import { colors } from "../../styles";
import EditIcon from "@mui/icons-material/Edit";
import Button from "../Button/Button";
import { toast } from "react-toastify";
import { TransactionAPI, TransactionUpdateAPI } from "../API/API";
import RadioGroup from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
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 { CircularProgress } from "@mui/material";
import React from "react";
export default function EditTransactionModal(props: {
id: number;
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
}) {
const queryClient = useQueryClient();
const [status, setStatus] = useState("");
const [error, setError] = useState("");
const transaction = useQuery({
queryKey: ["transaction", props.id],
queryFn: () => TransactionAPI(Number(props.id)),
});
const update_mutation = useMutation({
mutationFn: async () => {
const data = await TransactionUpdateAPI(
{ transaction_status: status },
props.id
);
if (data[0] != true) {
setError(JSON.stringify(data[1]));
return Promise.reject(new Error(JSON.stringify(data[1])));
}
return data;
},
onSuccess: (data) => {
queryClient.invalidateQueries({
queryKey: ["transactions"],
});
queryClient.invalidateQueries({
queryKey: ["transactions", props.id],
});
setError("Updated successfully");
toast(
`Transaction updated successfuly, ${
typeof data[1] == "object" ? "ID:" + data[1].id : ""
}`,
{
position: "top-right",
autoClose: 2000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "light",
}
);
if (typeof data[1] == "object") {
setStatus(data[1].transaction_status);
}
},
});
useEffect(() => {
if (transaction.data) {
setStatus(transaction.data.transaction_status);
}
}, [transaction.data]);
if (transaction.isLoading) {
return (
<div
style={{
...styles.flex_column,
...{
alignItems: "center",
justifyContent: "center",
paddingTop: "64px",
},
}}
>
<CircularProgress style={{ height: "128px", width: "128px" }} />
<p
style={{
...styles.text_dark,
...styles.text_L,
}}
>
Loading
</p>
</div>
);
}
return (
<>
<div
style={{
...styles.flex_row,
...{
alignItems: "center",
justifyContent: "center",
overflowY: "scroll",
},
}}
>
<EditIcon
style={{
height: 64,
width: 64,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}}
/>
<p style={{ ...styles.text_dark, ...styles.text_L }}>
Update Transaction
</p>
</div>
<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
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>
</FormControl>
</div>
<p style={{ ...styles.text_dark, ...styles.text_M }}>{error}</p>
<div
style={{
backgroundColor: colors.button_border,
marginTop: "16px",
width: "100%",
height: "2px",
marginBottom: 8,
}}
/>
<Button
type={"dark"}
label={"Update Transaction"}
onClick={async () => {
await update_mutation.mutate();
}}
/>
</>
);
}

4
src/Components/Types/Types.tsx
View file

@ -125,3 +125,7 @@ export type TransactionType = {
};
export type TransactionListType = Array<TransactionType>;
export type TransactionUpdateType = {
transaction_status: string;
};

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

@ -13,6 +13,7 @@ import Paper from "@mui/material/Paper";
import { colors } from "../../styles";
import Popup from "reactjs-popup";
import { useState } from "react";
import EditTransactionModal from "../../Components/EditTransactionModal/EditTransactionModal";
export default function TransactionsListPage() {
const [EditTransactionOpen, SetEditTransactionOpen] = useState(false);
@ -162,7 +163,7 @@ export default function TransactionsListPage() {
<TableBody>
{transaction.equipments.map((equipment) => (
<TableRow
key={transaction.id}
key={equipment.id}
sx={{
"&:last-child td, &:last-child th": {
border: 0,
@ -210,7 +211,10 @@ export default function TransactionsListPage() {
position={"top center"}
contentStyle={styles.popup_center}
>
<p style={styles.text_dark}>Transaction Modal</p>
<EditTransactionModal
id={SelectedTransaction}
setOpen={SetEditTransactionOpen}
/>
</Popup>
<Popup
open={EditEquipmentsOpen}