mirror of
https://github.com/lemeow125/Borrowing-TrackerFrontend.git
synced 2024-11-17 06:19:27 +08:00
Change format of filter buttons to dropdown select menu for ease of use
This commit is contained in:
parent
cd742b8822
commit
2af8ea5802
3 changed files with 354 additions and 257 deletions
|
|
@ -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 (
|
||||
<>
|
||||
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_L,
|
||||
}}
|
||||
>
|
||||
Equipments
|
||||
</p>
|
||||
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_row,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate("/view/equipment_instances");
|
||||
}}
|
||||
>
|
||||
<HourglassBottomIcon
|
||||
style={{
|
||||
height: 64,
|
||||
width: 64,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
}}
|
||||
>
|
||||
Pending
|
||||
</p>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate("/view/equipment_instances");
|
||||
}}
|
||||
>
|
||||
<ThumbUpIcon
|
||||
style={{
|
||||
height: 64,
|
||||
width: 64,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
}}
|
||||
>
|
||||
On-Borrow
|
||||
</p>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate("/view/equipment_instances");
|
||||
}}
|
||||
>
|
||||
<CheckCircleIcon
|
||||
style={{
|
||||
height: 64,
|
||||
width: 64,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
}}
|
||||
>
|
||||
Completed
|
||||
</p>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate("/view/equipment_instances");
|
||||
}}
|
||||
>
|
||||
<FlashOffIcon
|
||||
style={{
|
||||
height: 64,
|
||||
width: 64,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
}}
|
||||
>
|
||||
Breakage
|
||||
</p>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate("/view/equipment_instances");
|
||||
}}
|
||||
>
|
||||
<ThumbDownIcon
|
||||
style={{
|
||||
height: 64,
|
||||
width: 64,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
}}
|
||||
>
|
||||
Rejected
|
||||
</p>
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_row,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
</div>
|
||||
<Popup
|
||||
open={addSKUmodalOpen}
|
||||
onClose={() => 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",
|
||||
}}
|
||||
>
|
||||
<AddSKUModal />
|
||||
</Popup>
|
||||
<Popup
|
||||
open={additemmodalOpen}
|
||||
onClose={() => 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",
|
||||
}}
|
||||
>
|
||||
<AddItemModal />
|
||||
</Popup>
|
||||
</>
|
||||
);
|
||||
}
|
||||
352
src/Components/DashboardPage/StudentTransactionFilterMenu.tsx
Normal file
352
src/Components/DashboardPage/StudentTransactionFilterMenu.tsx
Normal file
|
|
@ -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 (
|
||||
<>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_L,
|
||||
}}
|
||||
>
|
||||
Personal Transactions
|
||||
</p>
|
||||
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_row,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<FormControl sx={{ width: "25vw" }}>
|
||||
<InputLabel style={{ backgroundColor: "white" }}>
|
||||
Filter transactions by
|
||||
</InputLabel>
|
||||
<Select
|
||||
value={filter}
|
||||
onChange={(e: SelectChangeEvent<string>) =>
|
||||
setFilter(e.target.value)
|
||||
}
|
||||
>
|
||||
<MenuItem value={"Pending Approval"}>
|
||||
<Button
|
||||
style={{
|
||||
...styles.row,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<HourglassBottomIcon
|
||||
style={{
|
||||
height: 32,
|
||||
width: 32,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
}}
|
||||
>
|
||||
Pending
|
||||
</p>
|
||||
</Button>
|
||||
</MenuItem>
|
||||
<MenuItem value={"Approved"}>
|
||||
<Button
|
||||
style={{
|
||||
...styles.flex_row,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CheckCircleOutlineIcon
|
||||
style={{
|
||||
height: 32,
|
||||
width: 32,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
}}
|
||||
>
|
||||
Approved
|
||||
</p>
|
||||
</Button>
|
||||
</MenuItem>
|
||||
<MenuItem value={"Rejected"}>
|
||||
<Button
|
||||
style={{
|
||||
...styles.flex_row,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CancelOutlinedIcon
|
||||
style={{
|
||||
height: 32,
|
||||
width: 32,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
}}
|
||||
>
|
||||
Rejected
|
||||
</p>
|
||||
</Button>
|
||||
</MenuItem>
|
||||
<MenuItem value={"Borrowed"}>
|
||||
<Button
|
||||
style={{
|
||||
...styles.flex_row,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ShoppingCartCheckoutIcon
|
||||
style={{
|
||||
height: 32,
|
||||
width: 32,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
}}
|
||||
>
|
||||
On-Borrow
|
||||
</p>
|
||||
</Button>
|
||||
</MenuItem>
|
||||
<MenuItem value={"Cancelled"}>
|
||||
<Button
|
||||
style={{
|
||||
...styles.flex_row,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CancelIcon
|
||||
style={{
|
||||
height: 32,
|
||||
width: 32,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
}}
|
||||
>
|
||||
Cancelled
|
||||
</p>
|
||||
</Button>
|
||||
</MenuItem>
|
||||
<MenuItem value={"Returned: Pending Checking"}>
|
||||
<Button
|
||||
style={{
|
||||
...styles.flex_row,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<AssignmentReturnedIcon
|
||||
style={{
|
||||
height: 32,
|
||||
width: 32,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
}}
|
||||
>
|
||||
Returned: Pending
|
||||
</p>
|
||||
</Button>
|
||||
</MenuItem>
|
||||
<MenuItem value={"Finalized"}>
|
||||
<Button
|
||||
style={{
|
||||
...styles.flex_row,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CheckCircleIcon
|
||||
style={{
|
||||
height: 32,
|
||||
width: 32,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
}}
|
||||
>
|
||||
Finalized
|
||||
</p>
|
||||
</Button>
|
||||
</MenuItem>
|
||||
<MenuItem value={"With Breakages: Pending Resolution"}>
|
||||
<Button
|
||||
style={{
|
||||
...styles.flex_row,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<FlashOffIcon
|
||||
style={{
|
||||
height: 32,
|
||||
width: 32,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
}}
|
||||
>
|
||||
With Breakages
|
||||
</p>
|
||||
</Button>
|
||||
</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_row,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
></div>
|
||||
<Popup
|
||||
open={addSKUmodalOpen}
|
||||
onClose={() => 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",
|
||||
}}
|
||||
>
|
||||
<AddSKUModal />
|
||||
</Popup>
|
||||
<Popup
|
||||
open={additemmodalOpen}
|
||||
onClose={() => 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",
|
||||
}}
|
||||
>
|
||||
<AddItemModal />
|
||||
</Popup>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<div style={styles.background}>
|
||||
|
|
@ -15,8 +15,7 @@ export default function Dashboard() {
|
|||
<TechnicianLogButtons />
|
||||
</RestrictedComponent>
|
||||
<RestrictedComponent allow_only={"Student"}>
|
||||
<StudentTransactionButtons />
|
||||
<p style={styles.text_dark}>Welcome student!</p>
|
||||
<StudentTransactionFilterMenu />
|
||||
</RestrictedComponent>
|
||||
<RestrictedComponent allow_only={"Teacher"}>
|
||||
<p style={styles.text_dark}>Welcome teacher!</p>
|
||||
|
|
|
|||
Loading…
Reference in a new issue