mirror of
https://github.com/lemeow125/EquipmentTracker-Frontend.git
synced 2024-11-17 06:09:25 +08:00
Added edit and delete SKU functionality
This commit is contained in:
parent
3c0b2b9739
commit
36a0111fe8
4 changed files with 382 additions and 3 deletions
|
|
@ -12,6 +12,7 @@ import {
|
|||
AddEquipmentInstanceType,
|
||||
EquipmentInstanceType,
|
||||
PatchEquipmentInstanceType,
|
||||
PatchEquipmentType,
|
||||
} from "../Types/Types";
|
||||
|
||||
const instance = axios.create({
|
||||
|
|
@ -164,6 +165,47 @@ export function ResetPasswordConfirmAPI(info: ResetPasswordConfirmType) {
|
|||
|
||||
// Equipment APIs
|
||||
|
||||
export async function EquipmentAPI(id: number) {
|
||||
const config = await GetConfig();
|
||||
return instance
|
||||
.get(`api/v1/equipments/equipments/${id}/`, config)
|
||||
.then((response) => {
|
||||
return response.data as EquipmentType;
|
||||
})
|
||||
.catch(() => {
|
||||
console.log("Error retrieving equipment");
|
||||
});
|
||||
}
|
||||
|
||||
export async function EquipmentUpdateAPI(
|
||||
equipment: PatchEquipmentType,
|
||||
id: number
|
||||
) {
|
||||
const config = await GetConfig();
|
||||
return instance
|
||||
.patch(`api/v1/equipments/equipments/${id}/`, equipment, config)
|
||||
.then((response) => {
|
||||
return [true, response.data as EquipmentType];
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("Error updating equipment instance");
|
||||
return [false, ParseError(error)];
|
||||
});
|
||||
}
|
||||
|
||||
export async function EquipmentRemoveAPI(id: number) {
|
||||
const config = await GetConfig();
|
||||
return instance
|
||||
.delete(`api/v1/equipments/equipments/${id}/`, config)
|
||||
.then((response) => {
|
||||
return [true, response.data as EquipmentType];
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("Error deleting equipment instance");
|
||||
return [false, ParseError(error)];
|
||||
});
|
||||
}
|
||||
|
||||
export async function EquipmentsAPI() {
|
||||
const config = await GetConfig();
|
||||
return instance
|
||||
|
|
@ -194,7 +236,7 @@ export async function EquipmentCreateAPI(equipment: AddEquipmentType) {
|
|||
export async function EquipmentInstanceAPI(id: number) {
|
||||
const config = await GetConfig();
|
||||
return instance
|
||||
.get(`api/v1/equipments/equipment_instances/${id}`, config)
|
||||
.get(`api/v1/equipments/equipment_instances/${id}/`, config)
|
||||
.then((response) => {
|
||||
return response.data as EquipmentInstanceType;
|
||||
})
|
||||
|
|
@ -227,7 +269,7 @@ export async function EquipmentInstanceRemoveAPI(id: number) {
|
|||
return [true, response.data];
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("Error updating equipment instance");
|
||||
console.log("Error deleting equipment instance");
|
||||
return [false, ParseError(error)];
|
||||
});
|
||||
}
|
||||
|
|
|
|||
299
src/Components/EditSKUModal/EditSKUModal.tsx
Normal file
299
src/Components/EditSKUModal/EditSKUModal.tsx
Normal file
|
|
@ -0,0 +1,299 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import styles from "../../styles";
|
||||
import { colors } from "../../styles";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import EditIcon from "@mui/icons-material/Edit";
|
||||
import Button from "../Button/Button";
|
||||
import { toast } from "react-toastify";
|
||||
import {
|
||||
EquipmentAPI,
|
||||
EquipmentRemoveAPI,
|
||||
EquipmentUpdateAPI,
|
||||
} 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 { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { CircularProgress } from "@mui/material";
|
||||
import React from "react";
|
||||
|
||||
export default function EditSKUModal(props: {
|
||||
id: number;
|
||||
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
}) {
|
||||
const queryClient = useQueryClient();
|
||||
const [item, setItem] = useState({
|
||||
name: "",
|
||||
description: "",
|
||||
category: "",
|
||||
});
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const equipment = useQuery({
|
||||
queryKey: ["equipment", props.id],
|
||||
queryFn: () => EquipmentAPI(Number(props.id)),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (equipment.data) {
|
||||
setItem({
|
||||
...item,
|
||||
name: equipment.data.name,
|
||||
description: equipment.data.description,
|
||||
category: equipment.data.category,
|
||||
});
|
||||
}
|
||||
}, [equipment.data]);
|
||||
|
||||
const update_mutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
const data = await EquipmentUpdateAPI(item, props.id);
|
||||
if (data[0] != true) {
|
||||
return Promise.reject(new Error(JSON.stringify(data[1])));
|
||||
}
|
||||
return data;
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["equipments"] });
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["equipment", props.id],
|
||||
});
|
||||
setError("Updated successfully");
|
||||
toast(
|
||||
`Item updated successfuly, ${
|
||||
typeof data[1] == "object" ? "ID:" + data[1].id : ""
|
||||
}`,
|
||||
{
|
||||
position: "top-right",
|
||||
autoClose: 2000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: true,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
}
|
||||
);
|
||||
if (typeof data[1] == "object") {
|
||||
setItem({
|
||||
...item,
|
||||
name: data[1].name,
|
||||
description: data[1].description,
|
||||
category: data[1].category,
|
||||
});
|
||||
}
|
||||
},
|
||||
onError: (error) => {
|
||||
setError(JSON.stringify(error));
|
||||
},
|
||||
});
|
||||
|
||||
const delete_mutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
const data = await EquipmentRemoveAPI(props.id);
|
||||
if (data[0] != true) {
|
||||
return Promise.reject(new Error(JSON.stringify(data[1])));
|
||||
}
|
||||
return data;
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["equipments"] });
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["equipment", props.id],
|
||||
});
|
||||
setError("Deleted successfully");
|
||||
toast("SKU deleted successfuly", {
|
||||
position: "top-right",
|
||||
autoClose: 2000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: true,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
});
|
||||
props.setOpen(false);
|
||||
if (typeof data[1] == "object") {
|
||||
setItem({
|
||||
...item,
|
||||
name: data[1].name,
|
||||
description: data[1].description,
|
||||
category: data[1].category,
|
||||
});
|
||||
}
|
||||
},
|
||||
onError: (error) => {
|
||||
setError(JSON.stringify(error));
|
||||
},
|
||||
});
|
||||
|
||||
if (equipment.isLoading) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
paddingTop: "64px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CircularProgress style={{ height: "128px", width: "128px" }} />
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_L,
|
||||
}}
|
||||
>
|
||||
Loading
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_row,
|
||||
...{
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
overflowY: "scroll",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<EditIcon
|
||||
style={{
|
||||
height: 64,
|
||||
width: 64,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p style={{ ...styles.text_dark, ...styles.text_L }}>Edit SKU</p>
|
||||
</div>
|
||||
|
||||
<div style={styles.flex_column}>
|
||||
<FormControl style={{ marginTop: "8px" }}>
|
||||
<TextField
|
||||
id="outlined-helperText"
|
||||
label="SKU Name"
|
||||
style={styles.input_form}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setItem({ ...item, name: e.target.value });
|
||||
setError("");
|
||||
}}
|
||||
value={item.name}
|
||||
placeholder={"Enter SKU name"}
|
||||
/>
|
||||
<TextField
|
||||
id="outlined-helperText"
|
||||
label="Description"
|
||||
multiline
|
||||
style={styles.input_form}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||
setItem({ ...item, description: e.target.value })
|
||||
}
|
||||
value={item.description}
|
||||
placeholder={"Give a brief description of the SKU"}
|
||||
/>
|
||||
<FormLabel
|
||||
style={styles.text_dark}
|
||||
id="demo-radio-buttons-group-label"
|
||||
>
|
||||
Category
|
||||
</FormLabel>
|
||||
<RadioGroup
|
||||
aria-labelledby="demo-radio-buttons-group-label"
|
||||
name="radio-buttons-group"
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setItem({ ...item, category: e.target.value });
|
||||
setError("");
|
||||
}}
|
||||
value={item.category}
|
||||
>
|
||||
<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,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_row,
|
||||
...{ justifyContent: "center" },
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
type={"dark"}
|
||||
label={"Update Item"}
|
||||
onClick={async () => {
|
||||
await update_mutation.mutate();
|
||||
}}
|
||||
/>
|
||||
<div style={{ margin: "8px" }}></div>
|
||||
<Button
|
||||
type={"light"}
|
||||
label={"Delete Item"}
|
||||
onClick={async () => {
|
||||
await delete_mutation.mutate();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -28,6 +28,12 @@ export type AddEquipmentType = {
|
|||
category?: string;
|
||||
};
|
||||
|
||||
export type PatchEquipmentType = {
|
||||
name: string;
|
||||
description: string;
|
||||
category?: string;
|
||||
};
|
||||
|
||||
export type EquipmentType = {
|
||||
id: number;
|
||||
name: string;
|
||||
|
|
@ -35,6 +41,7 @@ export type EquipmentType = {
|
|||
last_updated: string;
|
||||
last_updated_by: string;
|
||||
date_added: string;
|
||||
category: string;
|
||||
};
|
||||
|
||||
export type EquipmentListType = Array<EquipmentType>;
|
||||
|
|
|
|||
|
|
@ -11,8 +11,13 @@ import TableHead from "@mui/material/TableHead";
|
|||
import TableRow from "@mui/material/TableRow";
|
||||
import Paper from "@mui/material/Paper";
|
||||
import { colors } from "../../styles";
|
||||
import EditSKUModal from "../../Components/EditSKUModal/EditSKUModal";
|
||||
import Popup from "reactjs-popup";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function EquipmentListPage() {
|
||||
const [editmodalOpen, SetEditModalOpen] = useState(false);
|
||||
const [selectedItem, SetSelectedItem] = useState(0);
|
||||
const equipments = useQuery({
|
||||
queryKey: ["equipments"],
|
||||
queryFn: EquipmentsAPI,
|
||||
|
|
@ -73,6 +78,9 @@ export default function EquipmentListPage() {
|
|||
<TableCell align="center" style={styles.text_light}>
|
||||
Description
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Category
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Last Modified
|
||||
</TableCell>
|
||||
|
|
@ -85,7 +93,8 @@ export default function EquipmentListPage() {
|
|||
key={equipment.id}
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
onClick={() => {
|
||||
console.log("HEH");
|
||||
SetSelectedItem(equipment.id);
|
||||
SetEditModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
|
|
@ -98,6 +107,9 @@ export default function EquipmentListPage() {
|
|||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment.description}
|
||||
</TableCell>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment.category}
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<div
|
||||
style={{
|
||||
|
|
@ -123,6 +135,25 @@ export default function EquipmentListPage() {
|
|||
</TableContainer>
|
||||
</div>
|
||||
</div>
|
||||
<Popup
|
||||
open={editmodalOpen}
|
||||
onClose={() => SetEditModalOpen(false)}
|
||||
modal
|
||||
position={"top center"}
|
||||
contentStyle={{
|
||||
width: "512px",
|
||||
borderRadius: 16,
|
||||
borderColor: "grey",
|
||||
borderStyle: "solid",
|
||||
borderWidth: 1,
|
||||
padding: 16,
|
||||
alignContent: "center",
|
||||
justifyContent: "center",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
<EditSKUModal id={selectedItem} setOpen={SetEditModalOpen} />
|
||||
</Popup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue