From 38c2de39700b2d083a85c0756ba58eb1abc50726 Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Wed, 27 Dec 2023 18:31:47 +0800 Subject: [PATCH] Improved transaction entry, added create transaction page and improved student-related component layouts --- src/App.tsx | 12 + src/Components/API/API.tsx | 37 ++++ .../Student/StudentDashboard.tsx | 26 +-- .../Student/StudentTransactionListView.tsx | 2 +- src/Components/Drawer/Drawer.tsx | 2 +- .../TransactionEntry/TransactionEntry.tsx | 33 ++- src/Components/Types/Types.tsx | 10 + .../AddTransactionPage/AddTransactionPage.tsx | 205 ++++++++++++++++++ 8 files changed, 298 insertions(+), 29 deletions(-) create mode 100644 src/Pages/AddTransactionPage/AddTransactionPage.tsx diff --git a/src/App.tsx b/src/App.tsx index 3fdadf4..504e09d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -18,6 +18,7 @@ import EquipmentInstanceLogsPage from "./Pages/EquipmentInstanceLogsPage/Equipme import EquipmentInstancesFilteredListPage from "./Pages/EquipmentInstancesListPage/EquipmentInstancesFilteredListPage"; import RestrictedPage from "./Components/RestrictedPage/RestrictedPage"; import TransactionsListPage from "./Pages/TransactionsListPage/TransactionsListPage"; +import AddTransactionPage from "./Pages/AddTransactionPage/AddTransactionPage"; const queryClient = new QueryClient(); const router = createHashRouter([ @@ -125,6 +126,17 @@ const router = createHashRouter([ ), errorElement: , }, + { + path: "/new/transaction", + element: ( + <> + + + + + ), + errorElement: , + }, ]); export default function App() { diff --git a/src/Components/API/API.tsx b/src/Components/API/API.tsx index 70a485e..e2dee30 100644 --- a/src/Components/API/API.tsx +++ b/src/Components/API/API.tsx @@ -20,6 +20,7 @@ import { TransactionUpdateType, TransactionType, ClearanceType, + TransactionCreateType, } from "../Types/Types"; const debug = true; @@ -197,6 +198,17 @@ export async function ClearanceAPI() { }); } +export async function TeachersAPI() { + const config = await GetConfig(); + return instance + .get("api/v1/accounts/teachers/", config) + .then((response) => { + return response.data as Array; + }) + .catch(() => { + console.log("Error retrieving teachers"); + }); +} // Equipment APIs export async function EquipmentAPI(id: number) { @@ -343,6 +355,18 @@ export async function EquipmentInstancesAPI() { }); } +export async function AvailableEquipmentInstancesAPI() { + const config = await GetConfig(); + return instance + .get("api/v1/equipments/equipment_instances/available", config) + .then((response) => { + return response.data as EquipmentInstanceListType; + }) + .catch(() => { + console.log("Error retrieving available equipments"); + }); +} + export async function EquipmentInstanceCreateAPI( equipment_instance: AddEquipmentInstanceType ) { @@ -384,6 +408,19 @@ export async function TransactionAPI(id: number) { }); } +export async function TransactionCreateAPI(transaction: TransactionCreateType) { + const config = await GetConfig(); + return instance + .post(`api/v1/transactions/`, transaction, config) + .then((response) => { + return [true, response.data as TransactionType]; + }) + .catch((error) => { + console.log("Error creating transaction"); + return [false, ParseError(error)]; + }); +} + export async function TransactionUpdateAPI( transaction: TransactionUpdateType, id: number diff --git a/src/Components/DashboardPage/Student/StudentDashboard.tsx b/src/Components/DashboardPage/Student/StudentDashboard.tsx index 43cbcc0..702e93f 100644 --- a/src/Components/DashboardPage/Student/StudentDashboard.tsx +++ b/src/Components/DashboardPage/Student/StudentDashboard.tsx @@ -2,10 +2,9 @@ import styles from "../../../styles"; import { Button } from "@mui/material"; import AddBoxIcon from "@mui/icons-material/AddBox"; import { colors } from "../../../styles"; -import Popup from "reactjs-popup"; -import { useState } from "react"; +import { useNavigate } from "react-router-dom"; export default function StudentDashboard() { - const [addTransactionModalOpen, SetAddTransactionModalOpen] = useState(false); + const navigate = useNavigate(); return (

{ - SetAddTransactionModalOpen(true); + navigate("/new/transaction"); }} >

- SetAddTransactionModalOpen(false)} - modal - position={"top center"} - contentStyle={{ - width: "32rem", - borderRadius: 16, - borderColor: "grey", - borderStyle: "solid", - borderWidth: 1, - padding: 16, - alignContent: "center", - justifyContent: "center", - textAlign: "center", - }} - > -
-
); } diff --git a/src/Components/DashboardPage/Student/StudentTransactionListView.tsx b/src/Components/DashboardPage/Student/StudentTransactionListView.tsx index 53e80d7..ddc7d62 100644 --- a/src/Components/DashboardPage/Student/StudentTransactionListView.tsx +++ b/src/Components/DashboardPage/Student/StudentTransactionListView.tsx @@ -44,7 +44,7 @@ export default function StudentTransactionListView() {
{transactions.data ? ( diff --git a/src/Components/Drawer/Drawer.tsx b/src/Components/Drawer/Drawer.tsx index 5787cfb..34ea5ff 100644 --- a/src/Components/Drawer/Drawer.tsx +++ b/src/Components/Drawer/Drawer.tsx @@ -111,7 +111,7 @@ export default function Drawer() { paddingLeft: "8px", color: clearance.data?.cleared === "Cleared" - ? colors.green + ? colors.font_dark : colors.red, margin: 0, alignSelf: "center", diff --git a/src/Components/TransactionEntry/TransactionEntry.tsx b/src/Components/TransactionEntry/TransactionEntry.tsx index cbd874c..bed53cc 100644 --- a/src/Components/TransactionEntry/TransactionEntry.tsx +++ b/src/Components/TransactionEntry/TransactionEntry.tsx @@ -91,6 +91,22 @@ export default function TransactionEntry(props: props) { Teacher: {props.transaction.teacher.name}{" "} {`(ID:${props.transaction.teacher.id})`}

+

+ {props.transaction.remarks} +

- Equipments:{" "} + Equipments:

-
+
{props.transaction.equipments.map((equipment) => (

- - {equipment.name} + {` - ${equipment.name} (ID:${equipment.id})`}

))}
diff --git a/src/Components/Types/Types.tsx b/src/Components/Types/Types.tsx index d7d384a..8d2abcd 100644 --- a/src/Components/Types/Types.tsx +++ b/src/Components/Types/Types.tsx @@ -98,6 +98,7 @@ export type EquipmentInstanceLogType = { export type EquipmentInstanceLogListType = Array; export type UserType = { + id: number; username: string; email: string; avatar: string; @@ -123,10 +124,19 @@ export type TransactionType = { }>; transaction_status: string; timestamp: string; + remarks: string; }; export type TransactionListType = Array; +export type TransactionCreateType = { + equipments: number[]; + remarks: string; + teacher: number; + borrower: number; + transaction_status: "Pending Approval"; +}; + export type TransactionUpdateType = { transaction_status: string; }; diff --git a/src/Pages/AddTransactionPage/AddTransactionPage.tsx b/src/Pages/AddTransactionPage/AddTransactionPage.tsx new file mode 100644 index 0000000..741e9fa --- /dev/null +++ b/src/Pages/AddTransactionPage/AddTransactionPage.tsx @@ -0,0 +1,205 @@ +import { useState } from "react"; +import styles from "../../styles"; +import { colors } from "../../styles"; +import TextField from "@mui/material/TextField"; +import AddToQueueIcon from "@mui/icons-material/AddToQueue"; +import Button from "../../Components/Button/Button"; +import { toast } from "react-toastify"; +import { + AvailableEquipmentInstancesAPI, + TransactionCreateAPI, + TeachersAPI, + UserAPI, +} from "../../Components/API/API"; +import FormControl from "@mui/material/FormControl"; +import FormLabel from "@mui/material/FormLabel"; +import { useQueryClient } from "@tanstack/react-query"; +import { useQuery } from "@tanstack/react-query"; +import { + Select, + CircularProgress, + MenuItem, + OutlinedInput, +} from "@mui/material"; +import React from "react"; +import Header from "../../Components/Header/Header"; +import { useNavigate } from "react-router-dom"; + +export default function AddTransactionPage() { + const navigate = useNavigate(); + const queryClient = useQueryClient(); + const [selecteditems, SetSelectedItems] = useState([]); + const [selectedteacher, SetSelectedTeacher] = useState(0); + const [remarks, SetRemarks] = useState(""); + const [error, setError] = useState(""); + + const equipments = useQuery({ + queryKey: ["equipment_instances_available"], + queryFn: AvailableEquipmentInstancesAPI, + }); + + const teachers = useQuery({ + queryKey: ["teachers"], + queryFn: TeachersAPI, + }); + + const user = useQuery({ + queryKey: ["user"], + queryFn: UserAPI, + }); + const isLoading = + equipments.isLoading || teachers.isLoading || user.isLoading; + + if (isLoading) { + return ( +
+
+
+ +

+ Loading +

+
+
+ ); + } + return ( +
+
+
+ +

New Transaction

+
+ +
+ + Items Requested + + + + Assigned Teacher + + + ) => { + SetRemarks(e.target.value); + setError(""); + }} + value={remarks} + placeholder={"Optionally add a brief description of the request"} + /> +
+

{error}

+
+
+ ); +}