keannu125/EquipmentTracker-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/EquipmentTracker-Frontend.git synced 2024-11-17 06:09:25 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added add equipment modal

Browse source
This commit is contained in:
Keannu Bernasol 2023-12-02 20:10:14 +08:00
parent 791f11b802
commit 614a9c4a24
8 changed files with 214 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/App.tsx
View file

@ -12,8 +12,6 @@ import Revalidator from "./Components/Revalidator/Revalidator";
import ActivationPage from "./Pages/ActivationPage/ActivationPage";
import ResetPasswordPage from "./Pages/ResetPasswordPage/ResetPasswordPage";
import EquipmentInstancesListPage from "./Pages/EquipmentInstancesListPage/EquipmentInstancesListPage";
import AddEquipmentInstancePage from "./Pages/AddEquipmentInstancePage/AddEquipmentInstancePage";
import AddEquipmentPage from "./Pages/AddEquipmentPage/AddEquipmentPage";
const queryClient = new QueryClient();
const router = createHashRouter([
@ -47,26 +45,6 @@ const router = createHashRouter([
),
errorElement: <ErrorPage />,
},
{
path: "/add/equipment_instance",
element: (
<>
<Revalidator />
<AddEquipmentInstancePage />
</>
),
errorElement: <ErrorPage />,
},
{
path: "/add/equipment",
element: (
<>
<Revalidator />
<AddEquipmentPage />
</>
),
errorElement: <ErrorPage />,
},
{
path: "/activation/:uid/:token",
element: (

15
src/Components/API/API.tsx
View file

@ -7,6 +7,8 @@ import {
RegisterType,
ResetPasswordConfirmType,
EquipmentInstanceListType,
EquipmentType,
AddEquipmentType,
} from "../Types/Types";
const instance = axios.create({
@ -171,6 +173,19 @@ export async function EquipmentsAPI() {
});
}
export async function EquipmentCreateAPI(equipment: AddEquipmentType) {
const config = await GetConfig();
return instance
.post("api/v1/equipments/equipments/", equipment, config)
.then((response) => {
return [true, response.data as EquipmentType];
})
.catch((error) => {
console.log("Error creating equipment");
return [false, ParseError(error)];
});
}
export async function EquipmentInstancesAPI() {
const config = await GetConfig();
return instance

166
src/Components/AddSKUModal/AddSKUModal.tsx Normal file
View file

@ -0,0 +1,166 @@
import { useState } from "react";
import styles from "../../styles";
import { colors } from "../../styles";
import TextField from "@mui/material/TextField";
import NoteAddIcon from "@mui/icons-material/NoteAdd";
import Button from "../Button/Button";
import { toast } from "react-toastify";
import { EquipmentCreateAPI } from "../API/API";
import RadioGroup from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import FormControl from "@mui/material/FormControl";
import FormLabel from "@mui/material/FormLabel";
import Radio from "@mui/material/Radio";
import { useQueryClient } from "@tanstack/react-query";
export default function AddSKUModal() {
const queryClient = useQueryClient();
const [sku, setSKU] = useState({
name: "",
description: "",
category: "",
});
const [error, setError] = useState("");
return (
<>
<div
style={{
...styles.flex_row,
...{
alignItems: "center",
justifyContent: "center",
overflowY: "scroll",
},
}}
>
<NoteAddIcon
style={{
height: 64,
width: 64,
fill: colors.font_dark,
}}
/>
<p style={{ ...styles.text_dark, ...styles.text_L }}>Add SKU</p>
</div>
<div style={styles.flex_column}>
<TextField
id="outlined-helperText"
label="SKU Name"
style={styles.input_form}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setSKU({ ...sku, name: e.target.value });
setError("");
}}
value={sku.name}
placeholder={"Enter SKU name"}
/>
<TextField
id="outlined-helperText"
label="Description"
multiline
style={styles.input_form}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setSKU({ ...sku, description: e.target.value })
}
value={sku.description}
placeholder={"Give a brief description of the SKU"}
/>
<FormControl style={{ marginTop: "8px" }}>
<FormLabel
style={styles.text_dark}
id="demo-radio-buttons-group-label"
>
Category
</FormLabel>
<RadioGroup
aria-labelledby="demo-radio-buttons-group-label"
defaultValue="female"
name="radio-buttons-group"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setSKU({ ...sku, category: e.target.value });
}}
>
<div style={styles.flex_row}>
<div style={styles.flex_column}>
<FormControlLabel
value="PC"
control={<Radio />}
label="Workstation"
style={styles.text_dark}
/>
<FormControlLabel
value="NETWORKING"
control={<Radio />}
label="Networking"
style={styles.text_dark}
/>
<FormControlLabel
value="CCTV"
control={<Radio />}
label="CCTV"
style={styles.text_dark}
/>
</div>
<div style={styles.flex_column}>
<FormControlLabel
value="FURNITURE"
control={<Radio />}
label="Furniture"
style={styles.text_dark}
/>
<FormControlLabel
value="PERIPHERALS"
control={<Radio />}
label="Peripherals"
style={styles.text_dark}
/>
<FormControlLabel
value="MISC"
control={<Radio />}
label="Miscellaneous"
style={styles.text_dark}
/>
</div>
</div>
</RadioGroup>
</FormControl>
</div>
<p style={{ ...styles.text_dark, ...styles.text_M }}>{error}</p>
<div
style={{
backgroundColor: colors.button_border,
marginTop: "16px",
width: "100%",
height: "2px",
marginBottom: 8,
}}
/>
<Button
type={"dark"}
label={"Add SKU"}
onClick={async () => {
const data = await EquipmentCreateAPI(sku);
if (data[0]) {
setError("Added successfully");
toast("New SKU added successfuly", {
position: "top-right",
autoClose: 2000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "light",
});
queryClient.invalidateQueries({ queryKey: ["equipments"] });
setSKU({ name: "", description: "", category: "" });
} else {
setError(JSON.stringify(data));
}
}}
/>
</>
);
}

3
src/Components/Types/Types.tsx
View file

@ -24,7 +24,8 @@ export type ResetPasswordConfirmType = {
export type AddEquipmentType = {
name: string;
remarks: string;
description: string;
category?: string;
};
export type EquipmentType = {

3
src/Pages/AddEquipmentInstancePage/AddEquipmentInstancePage.tsx
View file

@ -1,3 +0,0 @@
export default function AddEquipmentInstancePage() {
return <div>{"AddEquipmentInstancePage"}</div>;
}

3
src/Pages/AddEquipmentPage/AddEquipmentPage.tsx
View file

@ -1,3 +0,0 @@
export default function AddEquipmentPage() {
return <div>{"AddEquipmentPage"}</div>;
}

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

@ -13,6 +13,9 @@ import NoteAddIcon from "@mui/icons-material/NoteAdd";
import NoteIcon from "@mui/icons-material/Note";
import { colors } from "../../styles";
import { useNavigate } from "react-router-dom";
import { useState } from "react";
import AddSKUModal from "../../Components/AddSKUModal/AddSKUModal";
import Popup from "reactjs-popup";
export default function Dashboard() {
const navigate = useNavigate();
@ -30,6 +33,9 @@ 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}>
@ -306,7 +312,7 @@ export default function Dashboard() {
},
}}
onClick={() => {
navigate("/add/equipment");
SetAddSKUModalOpen(true);
}}
>
<NoteAddIcon
@ -484,6 +490,25 @@ export default function Dashboard() {
</p>
</Button>
</div>
<Popup
open={addSKUmodalOpen}
onClose={() => SetAddSKUModalOpen(false)}
modal
position={"top center"}
contentStyle={{
width: "512px",
borderRadius: 16,
borderColor: "grey",
borderStyle: "solid",
borderWidth: 1,
padding: 16,
alignContent: "center",
justifyContent: "center",
textAlign: "center",
}}
>
<AddSKUModal />
</Popup>
</div>
);
}

6
src/Pages/LandingPage/LandingPage.tsx
View file

@ -36,9 +36,12 @@ export default function LandingPage() {
width: "100%",
minHeight: "100%",
minWidth: "100%",
flexWrap: "wrap",
}}
>
<div style={{ maxWidth: "50%", height: "auto", flex: 1 }}>
<div
style={{ maxWidth: "50%", height: "auto", flex: 1, flexWrap: "wrap" }}
>
<img style={{ maxWidth: "50%", height: "auto" }} src={citc_logo} />
</div>
<div
@ -46,6 +49,7 @@ export default function LandingPage() {
maxWidth: "50%",
height: "auto",
flex: 1,
flexWrap: "wrap",
}}
>
<div