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 ScienceIcon from "@mui/icons-material/Science";
import ColorizeIcon from "@mui/icons-material/Colorize";
import { Dispatch, SetStateAction } from "react";
type props = {
SetAddSKUModalOpen: Dispatch<SetStateAction<boolean>>;
SetAddItemModalOpen: Dispatch<SetStateAction<boolean>>;
};
export default function TechnicianButtons(props: props) {
import Popup from "reactjs-popup";
import AddItemModal from "../AddItemModal/AddItemModal";
import AddSKUModal from "../AddSKUModal/AddSKUModal";
import { useState } from "react";
export default function TechnicianButtons() {
const [addSKUmodalOpen, SetAddSKUModalOpen] = useState(false);
const [additemmodalOpen, SetAddItemModalOpen] = useState(false);
const navigate = useNavigate();
const queries = useQueries({
queries: [
@ -99,7 +99,7 @@ export default function TechnicianButtons(props: props) {
},
}}
onClick={() => {
props.SetAddItemModalOpen(true);
SetAddItemModalOpen(true);
}}
>
<AddToQueueIcon
@ -130,7 +130,7 @@ export default function TechnicianButtons(props: props) {
},
}}
onClick={() => {
props.SetAddSKUModalOpen(true);
SetAddSKUModalOpen(true);
}}
>
<NoteAddIcon
@ -256,6 +256,44 @@ export default function TechnicianButtons(props: props) {
</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>
</>
);
}

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

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