From 2af8ea580275ec131d774865b59253ebed42a825 Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Thu, 21 Dec 2023 14:41:48 +0800 Subject: [PATCH 01/12] Change format of filter buttons to dropdown select menu for ease of use --- .../StudentTransactionButtons.tsx | 254 ------------- .../StudentTransactionFilterMenu.tsx | 352 ++++++++++++++++++ src/Pages/DashboardPage/DashboardPage.tsx | 5 +- 3 files changed, 354 insertions(+), 257 deletions(-) delete mode 100644 src/Components/DashboardPage/StudentTransactionButtons.tsx create mode 100644 src/Components/DashboardPage/StudentTransactionFilterMenu.tsx diff --git a/src/Components/DashboardPage/StudentTransactionButtons.tsx b/src/Components/DashboardPage/StudentTransactionButtons.tsx deleted file mode 100644 index 16151ba..0000000 --- a/src/Components/DashboardPage/StudentTransactionButtons.tsx +++ /dev/null @@ -1,254 +0,0 @@ -import styles from "../../styles"; -import { useNavigate } from "react-router-dom"; -import { Button } from "@mui/material"; -import HourglassBottomIcon from '@mui/icons-material/HourglassBottom'; -import ThumbUpIcon from '@mui/icons-material/ThumbUp'; -import CheckCircleIcon from '@mui/icons-material/CheckCircle'; -import FlashOffIcon from '@mui/icons-material/FlashOff'; -import ThumbDownIcon from '@mui/icons-material/ThumbDown'; -import { colors } from "../../styles"; -import Popup from "reactjs-popup"; -import AddItemModal from "../AddItemModal/AddItemModal"; -import AddSKUModal from "../AddSKUModal/AddSKUModal"; -import { useState } from "react"; - -export default function StudentTransactionButtons() { - const [addSKUmodalOpen, SetAddSKUModalOpen] = useState(false); - const [additemmodalOpen, SetAddItemModalOpen] = useState(false); - const navigate = useNavigate(); - return ( - <> - -

- Equipments -

- -
- - - - - - - - - - -
-
- -
- SetAddSKUModalOpen(false)} - modal - position={"top center"} - contentStyle={{ - width: "32rem", - borderRadius: 16, - borderColor: "grey", - borderStyle: "solid", - borderWidth: 1, - padding: 16, - alignContent: "center", - justifyContent: "center", - textAlign: "center", - }} - > - - - SetAddItemModalOpen(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/StudentTransactionFilterMenu.tsx b/src/Components/DashboardPage/StudentTransactionFilterMenu.tsx new file mode 100644 index 0000000..1a9b1c8 --- /dev/null +++ b/src/Components/DashboardPage/StudentTransactionFilterMenu.tsx @@ -0,0 +1,352 @@ +import styles from "../../styles"; +import { + Button, + FormControl, + InputLabel, + MenuItem, + Select, + SelectChangeEvent, +} from "@mui/material"; +import HourglassBottomIcon from "@mui/icons-material/HourglassBottom"; +import CheckCircleIcon from "@mui/icons-material/CheckCircle"; +import FlashOffIcon from "@mui/icons-material/FlashOff"; +import { colors } from "../../styles"; +import Popup from "reactjs-popup"; +import AddItemModal from "../AddItemModal/AddItemModal"; +import AddSKUModal from "../AddSKUModal/AddSKUModal"; +import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline"; +import ShoppingCartCheckoutIcon from "@mui/icons-material/ShoppingCartCheckout"; +import AssignmentReturnedIcon from "@mui/icons-material/AssignmentReturned"; +import CancelOutlinedIcon from "@mui/icons-material/CancelOutlined"; +import CancelIcon from "@mui/icons-material/Cancel"; +import { useState } from "react"; + +export default function StudentTransactionFilterMenu() { + const [addSKUmodalOpen, SetAddSKUModalOpen] = useState(false); + const [additemmodalOpen, SetAddItemModalOpen] = useState(false); + const [filter, setFilter] = useState(""); + return ( + <> +

+ Personal Transactions +

+ +
+ + + Filter transactions by + + + +
+
+ SetAddSKUModalOpen(false)} + modal + position={"top center"} + contentStyle={{ + width: "32rem", + borderRadius: 16, + borderColor: "grey", + borderStyle: "solid", + borderWidth: 1, + padding: 16, + alignContent: "center", + justifyContent: "center", + textAlign: "center", + }} + > + + + SetAddItemModalOpen(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/Pages/DashboardPage/DashboardPage.tsx b/src/Pages/DashboardPage/DashboardPage.tsx index 0ff3249..ae36dac 100644 --- a/src/Pages/DashboardPage/DashboardPage.tsx +++ b/src/Pages/DashboardPage/DashboardPage.tsx @@ -4,7 +4,7 @@ import RestrictedComponent from "../../Components/RestrictedComponent/Restricted import TechnicianWidgets from "../../Components/DashboardPage/TechnicianWidgets"; import TechnicianEquipmentButtons from "../../Components/DashboardPage/TechnicianEquipmentButtons"; import TechnicianLogButtons from "../../Components/DashboardPage/TechnicianLogButtons"; -import StudentTransactionButtons from "../../Components/DashboardPage/StudentTransactionButtons"; +import StudentTransactionFilterMenu from "../../Components/DashboardPage/StudentTransactionFilterMenu"; export default function Dashboard() { return (
@@ -15,8 +15,7 @@ export default function Dashboard() { - -

Welcome student!

+

Welcome teacher!

From e26b87e22336b6cc30a63cefe7fff65e951f6698 Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Thu, 21 Dec 2023 14:44:57 +0800 Subject: [PATCH 02/12] Change width of filter menu to px instead of vw --- src/Components/DashboardPage/StudentTransactionFilterMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/DashboardPage/StudentTransactionFilterMenu.tsx b/src/Components/DashboardPage/StudentTransactionFilterMenu.tsx index 1a9b1c8..30523a8 100644 --- a/src/Components/DashboardPage/StudentTransactionFilterMenu.tsx +++ b/src/Components/DashboardPage/StudentTransactionFilterMenu.tsx @@ -46,7 +46,7 @@ export default function StudentTransactionFilterMenu() { }, }} > - + Filter transactions by From d69945f789e0fff4909b87487e8a5cd3c675adff Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Thu, 21 Dec 2023 14:58:23 +0800 Subject: [PATCH 03/12] Restructure Dashboard page components folder hierarchy and add initial StudentTransactionListView component --- .../{ => Student}/StudentTransactionFilterMenu.tsx | 8 ++++---- .../DashboardPage/Student/StudentTransactionListView.tsx | 3 +++ .../{ => Technician}/TechnicianEquipmentButtons.tsx | 8 ++++---- .../{ => Technician}/TechnicianLogButtons.tsx | 4 ++-- .../DashboardPage/{ => Technician}/TechnicianWidgets.tsx | 4 ++-- src/Pages/DashboardPage/DashboardPage.tsx | 8 ++++---- 6 files changed, 19 insertions(+), 16 deletions(-) rename src/Components/DashboardPage/{ => Student}/StudentTransactionFilterMenu.tsx (98%) create mode 100644 src/Components/DashboardPage/Student/StudentTransactionListView.tsx rename src/Components/DashboardPage/{ => Technician}/TechnicianEquipmentButtons.tsx (97%) rename src/Components/DashboardPage/{ => Technician}/TechnicianLogButtons.tsx (96%) rename src/Components/DashboardPage/{ => Technician}/TechnicianWidgets.tsx (98%) diff --git a/src/Components/DashboardPage/StudentTransactionFilterMenu.tsx b/src/Components/DashboardPage/Student/StudentTransactionFilterMenu.tsx similarity index 98% rename from src/Components/DashboardPage/StudentTransactionFilterMenu.tsx rename to src/Components/DashboardPage/Student/StudentTransactionFilterMenu.tsx index 30523a8..c8cb43f 100644 --- a/src/Components/DashboardPage/StudentTransactionFilterMenu.tsx +++ b/src/Components/DashboardPage/Student/StudentTransactionFilterMenu.tsx @@ -1,4 +1,4 @@ -import styles from "../../styles"; +import styles from "../../../styles"; import { Button, FormControl, @@ -10,10 +10,10 @@ import { import HourglassBottomIcon from "@mui/icons-material/HourglassBottom"; import CheckCircleIcon from "@mui/icons-material/CheckCircle"; import FlashOffIcon from "@mui/icons-material/FlashOff"; -import { colors } from "../../styles"; +import { colors } from "../../../styles"; import Popup from "reactjs-popup"; -import AddItemModal from "../AddItemModal/AddItemModal"; -import AddSKUModal from "../AddSKUModal/AddSKUModal"; +import AddItemModal from "../../AddItemModal/AddItemModal"; +import AddSKUModal from "../../AddSKUModal/AddSKUModal"; import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline"; import ShoppingCartCheckoutIcon from "@mui/icons-material/ShoppingCartCheckout"; import AssignmentReturnedIcon from "@mui/icons-material/AssignmentReturned"; diff --git a/src/Components/DashboardPage/Student/StudentTransactionListView.tsx b/src/Components/DashboardPage/Student/StudentTransactionListView.tsx new file mode 100644 index 0000000..5fdefbb --- /dev/null +++ b/src/Components/DashboardPage/Student/StudentTransactionListView.tsx @@ -0,0 +1,3 @@ +export default function StudentTransactionListView() { + return
{"StudentTransactionListView"}
; +} diff --git a/src/Components/DashboardPage/TechnicianEquipmentButtons.tsx b/src/Components/DashboardPage/Technician/TechnicianEquipmentButtons.tsx similarity index 97% rename from src/Components/DashboardPage/TechnicianEquipmentButtons.tsx rename to src/Components/DashboardPage/Technician/TechnicianEquipmentButtons.tsx index da64391..ed33c37 100644 --- a/src/Components/DashboardPage/TechnicianEquipmentButtons.tsx +++ b/src/Components/DashboardPage/Technician/TechnicianEquipmentButtons.tsx @@ -1,16 +1,16 @@ -import styles from "../../styles"; +import styles from "../../../styles"; import { useNavigate } from "react-router-dom"; import { Button } from "@mui/material"; import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted"; import AddToQueueIcon from "@mui/icons-material/AddToQueue"; import NoteAddIcon from "@mui/icons-material/NoteAdd"; import NoteIcon from "@mui/icons-material/Note"; -import { colors } from "../../styles"; +import { colors } from "../../../styles"; import ScienceIcon from "@mui/icons-material/Science"; import ColorizeIcon from "@mui/icons-material/Colorize"; import Popup from "reactjs-popup"; -import AddItemModal from "../AddItemModal/AddItemModal"; -import AddSKUModal from "../AddSKUModal/AddSKUModal"; +import AddItemModal from "../../AddItemModal/AddItemModal"; +import AddSKUModal from "../../AddSKUModal/AddSKUModal"; import { useState } from "react"; export default function TechnicianEquipmentButtons() { const [addSKUmodalOpen, SetAddSKUModalOpen] = useState(false); diff --git a/src/Components/DashboardPage/TechnicianLogButtons.tsx b/src/Components/DashboardPage/Technician/TechnicianLogButtons.tsx similarity index 96% rename from src/Components/DashboardPage/TechnicianLogButtons.tsx rename to src/Components/DashboardPage/Technician/TechnicianLogButtons.tsx index 74fffe1..22a3b5e 100644 --- a/src/Components/DashboardPage/TechnicianLogButtons.tsx +++ b/src/Components/DashboardPage/Technician/TechnicianLogButtons.tsx @@ -1,8 +1,8 @@ import { Button } from "@mui/material"; import { useNavigate } from "react-router-dom"; import ManageSearchIcon from "@mui/icons-material/ManageSearch"; -import styles from "../../styles"; -import { colors } from "../../styles"; +import styles from "../../../styles"; +import { colors } from "../../../styles"; export default function TechnicianLogButtons() { const navigate = useNavigate(); diff --git a/src/Components/DashboardPage/TechnicianWidgets.tsx b/src/Components/DashboardPage/Technician/TechnicianWidgets.tsx similarity index 98% rename from src/Components/DashboardPage/TechnicianWidgets.tsx rename to src/Components/DashboardPage/Technician/TechnicianWidgets.tsx index 8c3c239..23bfe42 100644 --- a/src/Components/DashboardPage/TechnicianWidgets.tsx +++ b/src/Components/DashboardPage/Technician/TechnicianWidgets.tsx @@ -1,6 +1,6 @@ import { useQueries } from "@tanstack/react-query"; -import styles from "../../styles"; -import { EquipmentsAPI, EquipmentInstancesAPI, UserAPI } from "../API/API"; +import styles from "../../../styles"; +import { EquipmentsAPI, EquipmentInstancesAPI, UserAPI } from "../../API/API"; import CircularProgress from "@mui/material/CircularProgress"; export default function TechnicianWidgets() { diff --git a/src/Pages/DashboardPage/DashboardPage.tsx b/src/Pages/DashboardPage/DashboardPage.tsx index ae36dac..bac4dc5 100644 --- a/src/Pages/DashboardPage/DashboardPage.tsx +++ b/src/Pages/DashboardPage/DashboardPage.tsx @@ -1,10 +1,10 @@ import Header from "../../Components/Header/Header"; import styles from "../../styles"; import RestrictedComponent from "../../Components/RestrictedComponent/RestrictedComponent"; -import TechnicianWidgets from "../../Components/DashboardPage/TechnicianWidgets"; -import TechnicianEquipmentButtons from "../../Components/DashboardPage/TechnicianEquipmentButtons"; -import TechnicianLogButtons from "../../Components/DashboardPage/TechnicianLogButtons"; -import StudentTransactionFilterMenu from "../../Components/DashboardPage/StudentTransactionFilterMenu"; +import TechnicianWidgets from "../../Components/DashboardPage/Technician/TechnicianWidgets"; +import TechnicianEquipmentButtons from "../../Components/DashboardPage/Technician/TechnicianEquipmentButtons"; +import TechnicianLogButtons from "../../Components/DashboardPage/Technician/TechnicianLogButtons"; +import StudentTransactionFilterMenu from "../../Components/DashboardPage/Student/StudentTransactionFilterMenu"; export default function Dashboard() { return (
From eaa55f3ba76d82a6a448674c24b6f9b403f43b62 Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Thu, 21 Dec 2023 16:04:50 +0800 Subject: [PATCH 04/12] Add transaction view for student in dashboard page complete with filtering --- src/Components/API/API.tsx | 24 ++++ .../Student/StudentTransactionFilterMenu.tsx | 45 ++++++- .../Student/StudentTransactionListView.tsx | 66 +++++++++- .../TransactionEntry/TransactionEntry.tsx | 121 ++++++++++++++++++ src/Components/Types/Types.tsx | 1 + src/Pages/DashboardPage/DashboardPage.tsx | 4 +- 6 files changed, 253 insertions(+), 8 deletions(-) create mode 100644 src/Components/TransactionEntry/TransactionEntry.tsx diff --git a/src/Components/API/API.tsx b/src/Components/API/API.tsx index 59131c7..dadd623 100644 --- a/src/Components/API/API.tsx +++ b/src/Components/API/API.tsx @@ -386,3 +386,27 @@ export async function TransactionUpdateAPI( return [false, ParseError(error)]; }); } + +export async function TransactionsByStudentAPI() { + const config = await GetConfig(); + return instance + .get("api/v1/transactions/student/", config) + .then((response) => { + return response.data as TransactionListType; + }) + .catch(() => { + console.log("Error retrieving transactions for current student"); + }); +} + +export async function TransactionsByTeacherAPI() { + const config = await GetConfig(); + return instance + .get("api/v1/transactions/teacher/", config) + .then((response) => { + return response.data as TransactionListType; + }) + .catch(() => { + console.log("Error retrieving transactions for current teacher"); + }); +} diff --git a/src/Components/DashboardPage/Student/StudentTransactionFilterMenu.tsx b/src/Components/DashboardPage/Student/StudentTransactionFilterMenu.tsx index c8cb43f..1cbd438 100644 --- a/src/Components/DashboardPage/Student/StudentTransactionFilterMenu.tsx +++ b/src/Components/DashboardPage/Student/StudentTransactionFilterMenu.tsx @@ -19,12 +19,17 @@ import ShoppingCartCheckoutIcon from "@mui/icons-material/ShoppingCartCheckout"; import AssignmentReturnedIcon from "@mui/icons-material/AssignmentReturned"; import CancelOutlinedIcon from "@mui/icons-material/CancelOutlined"; import CancelIcon from "@mui/icons-material/Cancel"; +import ClearAllIcon from "@mui/icons-material/ClearAll"; import { useState } from "react"; -export default function StudentTransactionFilterMenu() { +type props = { + filter: string; + setFilter: React.Dispatch>; +}; + +export default function StudentTransactionFilterMenu(props: props) { const [addSKUmodalOpen, SetAddSKUModalOpen] = useState(false); const [additemmodalOpen, SetAddItemModalOpen] = useState(false); - const [filter, setFilter] = useState(""); return ( <>

- Filter transactions by + Filter Transactions diff --git a/src/styles.tsx b/src/styles.tsx index 2f5cfbf..2e4c3ba 100644 --- a/src/styles.tsx +++ b/src/styles.tsx @@ -25,7 +25,6 @@ const styles: { [key: string]: React.CSSProperties } = { text_dark: { color: colors.font_dark, fontWeight: "bold", - }, text_light: { color: colors.font_light, @@ -88,6 +87,13 @@ const styles: { [key: string]: React.CSSProperties } = { textAlign: "center", overflowY: "scroll", }, + student_filter_item: { + height: 32, + width: 32, + fill: colors.font_dark, + marginLeft: "1rem", + marginRight: "1rem", + }, }; export default styles; From b76b1e17fb86f8124e8f2e8c1b2f7361c0fbd474 Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Fri, 22 Dec 2023 15:34:13 +0800 Subject: [PATCH 08/12] Remove unused components in student transaction filter --- .../Student/StudentTransactionFilterMenu.tsx | 56 +------------------ 1 file changed, 1 insertion(+), 55 deletions(-) diff --git a/src/Components/DashboardPage/Student/StudentTransactionFilterMenu.tsx b/src/Components/DashboardPage/Student/StudentTransactionFilterMenu.tsx index d066fad..be58c39 100644 --- a/src/Components/DashboardPage/Student/StudentTransactionFilterMenu.tsx +++ b/src/Components/DashboardPage/Student/StudentTransactionFilterMenu.tsx @@ -10,16 +10,12 @@ import { import HourglassBottomIcon from "@mui/icons-material/HourglassBottom"; import CheckCircleIcon from "@mui/icons-material/CheckCircle"; import FlashOffIcon from "@mui/icons-material/FlashOff"; -import Popup from "reactjs-popup"; -import AddItemModal from "../../AddItemModal/AddItemModal"; -import AddSKUModal from "../../AddSKUModal/AddSKUModal"; import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline"; import ShoppingCartCheckoutIcon from "@mui/icons-material/ShoppingCartCheckout"; import AssignmentReturnedIcon from "@mui/icons-material/AssignmentReturned"; import CancelOutlinedIcon from "@mui/icons-material/CancelOutlined"; import CancelIcon from "@mui/icons-material/Cancel"; import ClearAllIcon from "@mui/icons-material/ClearAll"; -import { useState } from "react"; type props = { filter: string; @@ -27,8 +23,6 @@ type props = { }; export default function StudentTransactionFilterMenu(props: props) { - const [addSKUmodalOpen, SetAddSKUModalOpen] = useState(false); - const [additemmodalOpen, SetAddItemModalOpen] = useState(false); return ( <>

- + Filter Transactions + SetSelectedItems(event.target.value as number[]) + } + input={} + > + {equipments.data + ?.filter((equipment) => equipment.status == "Available") + .map((equipment) => ( + + {`${equipment.equipment_name} (ID:${equipment.id})`} + + ))} + + + + Assigned Teacher + + + ) => { + SetRemarks(e.target.value); + setError(""); + }} + value={remarks} + placeholder={"Optionally add a brief description of the request"} + /> +

+

{error}

+
+
+ ); +}