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

Add student actions in student dashboard

Browse source
This commit is contained in:
Keannu Bernasol 2023-12-22 15:51:39 +08:00
parent a6e91830c4
commit 6970810256
3 changed files with 99 additions and 280 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

277
src/Components/DashboardPage/Student/StudentButtons.tsx
View file

@ -1,277 +0,0 @@
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 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 { useState } from "react";
export default function StudentButtons() {
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");
}}
>
<FormatListBulletedIcon
style={{
height: 64,
width: 64,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}}
/>
<p
style={{
...styles.text_dark,
...styles.text_M,
}}
>
View All
</p>
</Button>
<Button
style={{
...styles.flex_column,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
onClick={() => {
SetAddItemModalOpen(true);
}}
>
<AddToQueueIcon
style={{
height: 64,
width: 64,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}}
/>
<p
style={{
...styles.text_dark,
...styles.text_M,
}}
>
Add Item
</p>
</Button>
<Button
style={{
...styles.flex_column,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
onClick={() => {
SetAddSKUModalOpen(true);
}}
>
<NoteAddIcon
style={{
height: 64,
width: 64,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}}
/>
<p
style={{
...styles.text_dark,
...styles.text_M,
}}
>
Add SKU
</p>
</Button>
<Button
style={{
...styles.flex_column,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
onClick={() => {
navigate("/view/equipments");
}}
>
<NoteIcon
style={{
height: 64,
width: 64,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}}
/>
<p
style={{
...styles.text_dark,
...styles.text_M,
}}
>
View SKUs
</p>
</Button>
</div>
<div
style={{
...styles.flex_row,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
>
<Button
style={{
...styles.flex_column,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
>
<ScienceIcon
style={{
height: 64,
width: 64,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}}
onClick={() => {
navigate("/view/equipment_instances/filter/Glassware");
}}
/>
<p
style={{
...styles.text_dark,
...styles.text_M,
}}
>
Glassware
</p>
</Button>
<Button
style={{
...styles.flex_column,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
>
<ColorizeIcon
style={{
height: 64,
width: 64,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}}
onClick={() => {
navigate("/view/equipment_instances/filter/Miscellaneous");
}}
/>
<p
style={{
...styles.text_dark,
...styles.text_M,
}}
>
Miscellaneous
</p>
</Button>
</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>
</>
);
}

84
src/Components/DashboardPage/Student/StudentDashboard.tsx Normal file
View file

@ -0,0 +1,84 @@
import styles from "../../../styles";
import { useNavigate } from "react-router-dom";
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";
export default function StudentDashboard() {
const [addTransactionModalOpen, SetAddTransactionModalOpen] = useState(false);
const navigate = useNavigate();
return (
<div style={styles.flex_column}>
<p
style={{
...styles.text_dark,
...styles.text_L,
}}
>
Student Actions
</p>
<div
style={{
...styles.flex_row,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
>
<Button
style={{
...styles.flex_column,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
onClick={() => {
SetAddTransactionModalOpen(true);
}}
>
<AddBoxIcon
style={{
height: 64,
width: 64,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}}
/>
<p
style={{
...styles.text_dark,
...styles.text_M,
}}
>
New Transaction
</p>
</Button>
</div>
<Popup
open={addTransactionModalOpen}
onClose={() => 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",
}}
>
<div />
</Popup>
</div>
);
}

18
src/Pages/DashboardPage/DashboardPage.tsx
View file

@ -5,7 +5,7 @@ import TechnicianWidgets from "../../Components/DashboardPage/Technician/Technic
import TechnicianEquipmentButtons from "../../Components/DashboardPage/Technician/TechnicianEquipmentButtons"; import TechnicianEquipmentButtons from "../../Components/DashboardPage/Technician/TechnicianEquipmentButtons";
import TechnicianLogButtons from "../../Components/DashboardPage/Technician/TechnicianLogButtons"; import TechnicianLogButtons from "../../Components/DashboardPage/Technician/TechnicianLogButtons";
import StudentTransactionListView from "../../Components/DashboardPage/Student/StudentTransactionListView"; import StudentTransactionListView from "../../Components/DashboardPage/Student/StudentTransactionListView";
import StudentButtons from "../../Components/DashboardPage/Student/StudentButtons"; import StudentDashboard from "../../Components/DashboardPage/Student/StudentDashboard";
export default function Dashboard() { export default function Dashboard() {
return ( return (
<div style={styles.background}> <div style={styles.background}>
@ -16,8 +16,20 @@ export default function Dashboard() {
<TechnicianLogButtons /> <TechnicianLogButtons />
</RestrictedComponent> </RestrictedComponent>
<RestrictedComponent allow_only={"Student"}> <RestrictedComponent allow_only={"Student"}>
<StudentTransactionListView /> <div
<StudentButtons /> style={{
...styles.flex_row,
...{
flexWrap: "wrap",
justifyContent: "center",
marginLeft: "16px",
marginRight: "16px",
},
}}
>
<StudentTransactionListView />
<StudentDashboard />
</div>
</RestrictedComponent> </RestrictedComponent>
<RestrictedComponent allow_only={"Teacher"}> <RestrictedComponent allow_only={"Teacher"}>
<p style={styles.text_dark}>Welcome teacher!</p> <p style={styles.text_dark}>Welcome teacher!</p>