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

Move modal states to respective components

Browse source
This commit is contained in:
Keannu Bernasol 2023-12-14 18:00:58 +08:00
parent 96c8f9a150
commit d220078e69
2 changed files with 48 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -10,13 +10,13 @@ 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({ const queries = useQueries({
queries: [ queries: [
@ -99,7 +99,7 @@ export default function TechnicianButtons(props: props) {
}, },
}} }}
onClick={() => { onClick={() => {
props.SetAddItemModalOpen(true); SetAddItemModalOpen(true);
}} }}
> >
<AddToQueueIcon <AddToQueueIcon
@ -130,7 +130,7 @@ export default function TechnicianButtons(props: props) {
}, },
}} }}
onClick={() => { onClick={() => {
props.SetAddSKUModalOpen(true); SetAddSKUModalOpen(true);
}} }}
> >
<NoteAddIcon <NoteAddIcon
@ -256,6 +256,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>
</> </>
); );
} }

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

@ -6,10 +6,6 @@ import {
EquipmentInstancesAPI, EquipmentInstancesAPI,
UserAPI, UserAPI,
} from "../../Components/API/API"; } 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";
@ -34,9 +30,6 @@ export default function Dashboard() {
}); });
const isLoading = queries.some((result) => result.isLoading); const isLoading = queries.some((result) => result.isLoading);
const [addSKUmodalOpen, SetAddSKUModalOpen] = useState(false);
const [additemmodalOpen, SetAddItemModalOpen] = useState(false);
if (isLoading) { if (isLoading) {
return ( return (
<div style={styles.background}> <div style={styles.background}>
@ -71,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>
); );
} }