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

changes

Browse source
This commit is contained in:
Prince Kurt Laurence 2023-12-14 18:11:11 +08:00
commit cdeaa199f3
5 changed files with 103 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
src/Components/DashboardPage/TechnicianButtons.tsx
View file

@ -1,6 +1,4 @@
import { useQueries } from "@tanstack/react-query";
import styles from "../../styles"; import styles from "../../styles";
import { EquipmentsAPI, EquipmentInstancesAPI, UserAPI } from "../API/API";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { Button } from "@mui/material"; import { Button } from "@mui/material";
import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted"; import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
@ -10,30 +8,14 @@ import NoteIcon from "@mui/icons-material/Note";
import { colors } from "../../styles"; import { colors } from "../../styles";
import ScienceIcon from "@mui/icons-material/Science"; import ScienceIcon from "@mui/icons-material/Science";
import ColorizeIcon from "@mui/icons-material/Colorize"; import ColorizeIcon from "@mui/icons-material/Colorize";
import { Dispatch, SetStateAction } from "react"; import Popup from "reactjs-popup";
import AddItemModal from "../AddItemModal/AddItemModal";
type props = { import AddSKUModal from "../AddSKUModal/AddSKUModal";
SetAddSKUModalOpen: Dispatch<SetStateAction<boolean>>; import { useState } from "react";
SetAddItemModalOpen: Dispatch<SetStateAction<boolean>>; export default function TechnicianButtons() {
}; const [addSKUmodalOpen, SetAddSKUModalOpen] = useState(false);
export default function TechnicianButtons(props: props) { const [additemmodalOpen, SetAddItemModalOpen] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
const queries = useQueries({
queries: [
{
queryKey: ["equipments"],
queryFn: EquipmentsAPI,
},
{
queryKey: ["equipment_instances"],
queryFn: EquipmentInstancesAPI,
},
{
queryKey: ["user"],
queryFn: UserAPI,
},
],
});
return ( return (
<> <>
<p <p
@ -61,10 +43,6 @@ export default function TechnicianButtons(props: props) {
alignSelf: "center", alignSelf: "center",
justifyContent: "center", justifyContent: "center",
flexWrap: "wrap", flexWrap: "wrap",
display:
queries[2].data && queries[2].data.is_technician
? "initial"
: "none",
}, },
}} }}
onClick={() => { onClick={() => {
@ -99,7 +77,7 @@ export default function TechnicianButtons(props: props) {
}, },
}} }}
onClick={() => { onClick={() => {
props.SetAddItemModalOpen(true); SetAddItemModalOpen(true);
}} }}
> >
<AddToQueueIcon <AddToQueueIcon
@ -130,7 +108,7 @@ export default function TechnicianButtons(props: props) {
}, },
}} }}
onClick={() => { onClick={() => {
props.SetAddSKUModalOpen(true); SetAddSKUModalOpen(true);
}} }}
> >
<NoteAddIcon <NoteAddIcon
@ -256,6 +234,44 @@ export default function TechnicianButtons(props: props) {
</p> </p>
</Button> </Button>
</div> </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>
</> </>
); );
} }

17
src/Components/DashboardPage/TechnicianWidgets.tsx
View file

@ -1,6 +1,7 @@
import { useQueries } from "@tanstack/react-query"; import { useQueries } from "@tanstack/react-query";
import styles from "../../styles"; import styles from "../../styles";
import { EquipmentsAPI, EquipmentInstancesAPI, UserAPI } from "../API/API"; import { EquipmentsAPI, EquipmentInstancesAPI, UserAPI } from "../API/API";
import CircularProgress from "@mui/material/CircularProgress";
export default function TechnicianWidgets() { export default function TechnicianWidgets() {
const queries = useQueries({ const queries = useQueries({
@ -19,6 +20,22 @@ export default function TechnicianWidgets() {
}, },
], ],
}); });
const isLoading = queries.some((result) => result.isLoading);
if (isLoading) {
return (
<>
<CircularProgress style={{ height: "128px", width: "128px" }} />
<p
style={{
...styles.text_dark,
...styles.text_L,
}}
>
Loading
</p>
</>
);
}
return ( return (
<div style={styles.flex_column}> <div style={styles.flex_column}>
<div <div

21
src/Components/RestrictedComponent/RestrictedComponent.tsx
View file

@ -1,6 +1,8 @@
import React from "react"; import React from "react";
import { UserAPI } from "../API/API"; import { UserAPI } from "../API/API";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { CircularProgress } from "@mui/material";
import styles from "../../styles";
type props = { type props = {
allow_only: string; allow_only: string;
@ -8,6 +10,21 @@ type props = {
}; };
export default function RestrictedComponent(props: props) { export default function RestrictedComponent(props: props) {
const user = useQuery({ queryKey: ["user"], queryFn: UserAPI }); const user = useQuery({ queryKey: ["user"], queryFn: UserAPI });
if (user.isLoading) {
return (
<>
<CircularProgress style={{ height: "128px", width: "128px" }} />
<p
style={{
...styles.text_dark,
...styles.text_L,
}}
>
Loading
</p>
</>
);
}
if (props.allow_only === "Teacher") { if (props.allow_only === "Teacher") {
if (user.data && user.data.is_teacher) { if (user.data && user.data.is_teacher) {
return <>{props.children}</>; return <>{props.children}</>;
@ -16,6 +33,10 @@ export default function RestrictedComponent(props: props) {
if (user.data && user.data.is_technician) { if (user.data && user.data.is_technician) {
return <>{props.children}</>; return <>{props.children}</>;
} }
} else if (props.allow_only === "Student") {
if (user.data && !user.data.is_technician && !user.data.is_teacher) {
return <>{props.children}</>;
}
} }
return <></>; return <></>;
} }

14
src/Components/RestrictedPage/RestrictedPage.tsx
View file

@ -39,6 +39,20 @@ export default function RestrictedPage(props: props) {
theme: "light", theme: "light",
}); });
} }
} else if (props.allow_only == "Student") {
if (user.data && (user.data.is_technician || user.data.is_teacher)) {
navigate("/");
toast("You are not a student!", {
position: "bottom-center",
autoClose: 2000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "light",
});
}
} }
}, [navigate, props.allow_only, user.data]); }, [navigate, props.allow_only, user.data]);

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

@ -1,21 +1,11 @@
import Header from "../../Components/Header/Header"; import Header from "../../Components/Header/Header";
import styles from "../../styles"; import styles from "../../styles";
import { useQueries } from "@tanstack/react-query";
import {
EquipmentsAPI,
EquipmentInstancesAPI,
UserAPI,
} from "../../Components/API/API";
import { useState } from "react";
import AddSKUModal from "../../Components/AddSKUModal/AddSKUModal";
import Popup from "reactjs-popup";
import AddItemModal from "../../Components/AddItemModal/AddItemModal";
import RestrictedComponent from "../../Components/RestrictedComponent/RestrictedComponent"; import RestrictedComponent from "../../Components/RestrictedComponent/RestrictedComponent";
import TechnicianWidgets from "../../Components/DashboardPage/TechnicianWidgets"; import TechnicianWidgets from "../../Components/DashboardPage/TechnicianWidgets";
import TechnicianButtons from "../../Components/DashboardPage/TechnicianButtons"; import TechnicianButtons from "../../Components/DashboardPage/TechnicianButtons";
import TechnicianLogs from "../../Components/DashboardPage/TechnicianLogs"; import TechnicianLogs from "../../Components/DashboardPage/TechnicianLogs";
import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
export default function Dashboard() { export default function Dashboard() {
<<<<<<< HEAD
const queries = useQueries({ const queries = useQueries({
queries: [ queries: [
{ {
@ -65,6 +55,8 @@ export default function Dashboard() {
</div> </div>
); );
} }
=======
>>>>>>> be6e1ba229d5ab71d64626e470d43ab9169f1758
return ( return (
<div style={styles.background}> <div style={styles.background}>
<Header label={"Dashboard"} /> <Header label={"Dashboard"} />
@ -72,52 +64,11 @@ export default function Dashboard() {
<TechnicianWidgets /> <TechnicianWidgets />
</RestrictedComponent> </RestrictedComponent>
<RestrictedComponent allow_only={"Technician"}> <RestrictedComponent allow_only={"Technician"}>
<TechnicianButtons <TechnicianButtons />
SetAddItemModalOpen={SetAddItemModalOpen}
SetAddSKUModalOpen={SetAddSKUModalOpen}
/>
</RestrictedComponent> </RestrictedComponent>
<RestrictedComponent allow_only={"Technician"}> <RestrictedComponent allow_only={"Technician"}>
<TechnicianLogs /> <TechnicianLogs />
</RestrictedComponent> </RestrictedComponent>
<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>
</div> </div>
); );
} }