mirror of
https://github.com/lemeow125/Borrowing-TrackerFrontend.git
synced 2024-11-17 06:19:27 +08:00
Added delete equipment instance functionality
This commit is contained in:
parent
dc0d339f27
commit
2887a98e7d
4 changed files with 370 additions and 1 deletions
|
|
@ -11,6 +11,7 @@ import {
|
|||
AddEquipmentType,
|
||||
AddEquipmentInstanceType,
|
||||
EquipmentInstanceType,
|
||||
PatchEquipmentInstanceType,
|
||||
} from "../Types/Types";
|
||||
|
||||
const instance = axios.create({
|
||||
|
|
@ -190,6 +191,47 @@ export async function EquipmentCreateAPI(equipment: AddEquipmentType) {
|
|||
|
||||
// Equipment Instances APIs
|
||||
|
||||
export async function EquipmentInstanceAPI(id: number) {
|
||||
const config = await GetConfig();
|
||||
return instance
|
||||
.get(`api/v1/equipments/equipment_instances/${id}`, config)
|
||||
.then((response) => {
|
||||
return response.data as EquipmentInstanceType;
|
||||
})
|
||||
.catch(() => {
|
||||
console.log("Error retrieving equipment");
|
||||
});
|
||||
}
|
||||
|
||||
export async function EquipmentInstanceUpdateAPI(
|
||||
item: PatchEquipmentInstanceType,
|
||||
id: number
|
||||
) {
|
||||
const config = await GetConfig();
|
||||
return instance
|
||||
.patch(`api/v1/equipments/equipment_instances/${id}/`, item, config)
|
||||
.then((response) => {
|
||||
return [true, response.data as EquipmentInstanceType];
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("Error updating equipment instance");
|
||||
return [false, ParseError(error)];
|
||||
});
|
||||
}
|
||||
|
||||
export async function EquipmentInstanceRemoveAPI(id: number) {
|
||||
const config = await GetConfig();
|
||||
return instance
|
||||
.delete(`api/v1/equipments/equipment_instances/${id}/`, config)
|
||||
.then((response) => {
|
||||
return [true, response.data];
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("Error updating equipment instance");
|
||||
return [false, ParseError(error)];
|
||||
});
|
||||
}
|
||||
|
||||
export async function EquipmentInstancesAPI() {
|
||||
const config = await GetConfig();
|
||||
return instance
|
||||
|
|
|
|||
297
src/Components/EditItemModal/EditItemModal.tsx
Normal file
297
src/Components/EditItemModal/EditItemModal.tsx
Normal file
|
|
@ -0,0 +1,297 @@
|
|||
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 {
|
||||
EquipmentInstanceAPI,
|
||||
EquipmentInstanceRemoveAPI,
|
||||
EquipmentInstanceUpdateAPI,
|
||||
} 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 EditItemModal(props: {
|
||||
id: number;
|
||||
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
}) {
|
||||
const queryClient = useQueryClient();
|
||||
const [item, setItem] = useState({
|
||||
remarks: "",
|
||||
status: "",
|
||||
});
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const equipment = useQuery({
|
||||
queryKey: ["equipment_instance", props.id],
|
||||
queryFn: () => EquipmentInstanceAPI(Number(props.id)),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (equipment.data) {
|
||||
setItem({
|
||||
...item,
|
||||
remarks: equipment.data.remarks,
|
||||
status: equipment.data.status,
|
||||
});
|
||||
}
|
||||
}, [equipment.data]);
|
||||
|
||||
const update_mutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
const data = await EquipmentInstanceUpdateAPI(item, props.id);
|
||||
if (data[0] != true) {
|
||||
return Promise.reject(new Error(JSON.stringify(data[1])));
|
||||
}
|
||||
return data;
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["equipment_instances"] });
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["equipment_instance", 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,
|
||||
remarks: data[1].remarks,
|
||||
status: data[1].status,
|
||||
});
|
||||
}
|
||||
},
|
||||
onError: (error) => {
|
||||
setError(JSON.stringify(error));
|
||||
},
|
||||
});
|
||||
|
||||
const delete_mutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
const data = await EquipmentInstanceRemoveAPI(props.id);
|
||||
if (data[0] != true) {
|
||||
return Promise.reject(new Error(JSON.stringify(data[1])));
|
||||
}
|
||||
return data;
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["equipment_instances"] });
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["equipment_instance", props.id],
|
||||
});
|
||||
setError("Deleted successfully");
|
||||
toast("Item 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,
|
||||
remarks: data[1].remarks,
|
||||
status: data[1].status,
|
||||
});
|
||||
}
|
||||
},
|
||||
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 Item</p>
|
||||
</div>
|
||||
|
||||
<div style={styles.flex_column}>
|
||||
<FormControl style={{ marginTop: "8px" }}>
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_row,
|
||||
...{
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
verticalAlign: "center",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_L,
|
||||
...{ marginRight: "8px" },
|
||||
}}
|
||||
>
|
||||
Associated SKU:
|
||||
</p>
|
||||
<p style={{ ...styles.text_dark, ...styles.text_M }}>
|
||||
{equipment.data?.equipment_name}
|
||||
{" (SKU #" + equipment.data?.equipment + ")"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<FormLabel style={styles.text_dark} id="status-selection">
|
||||
Item Status
|
||||
</FormLabel>
|
||||
<RadioGroup
|
||||
aria-labelledby="demo-radio-buttons-group-label"
|
||||
value={item.status}
|
||||
defaultValue="WORKING"
|
||||
name="radio-buttons-group"
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setItem({ ...item, status: e.target.value });
|
||||
setError("");
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{ overflowY: "scroll", maxHeight: "8rem" },
|
||||
}}
|
||||
>
|
||||
<FormControlLabel
|
||||
value="WORKING"
|
||||
control={<Radio />}
|
||||
label="Working"
|
||||
style={styles.text_dark}
|
||||
/>
|
||||
<FormControlLabel
|
||||
value="BROKEN"
|
||||
control={<Radio />}
|
||||
label="Broken"
|
||||
style={styles.text_dark}
|
||||
/>
|
||||
<FormControlLabel
|
||||
value="MAINTENANCE"
|
||||
control={<Radio />}
|
||||
label="Under Maintenance"
|
||||
style={styles.text_dark}
|
||||
/>
|
||||
<FormControlLabel
|
||||
value="DECOMISSIONED"
|
||||
control={<Radio />}
|
||||
label="Decomissioned"
|
||||
style={styles.text_dark}
|
||||
/>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
<TextField
|
||||
id="outlined-helperText"
|
||||
label="Remarks"
|
||||
multiline
|
||||
style={styles.input_form}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setItem({ ...item, remarks: e.target.value });
|
||||
setError("");
|
||||
}}
|
||||
value={item.remarks}
|
||||
placeholder={"Optionally add a brief description of the item"}
|
||||
/>
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -45,6 +45,11 @@ export type AddEquipmentInstanceType = {
|
|||
remarks?: string;
|
||||
};
|
||||
|
||||
export type PatchEquipmentInstanceType = {
|
||||
status: string;
|
||||
remarks?: string;
|
||||
};
|
||||
|
||||
export type EquipmentInstanceType = {
|
||||
id: number;
|
||||
equipment: string;
|
||||
|
|
|
|||
|
|
@ -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 EditItemModal from "../../Components/EditItemModal/EditItemModal";
|
||||
import { useState } from "react";
|
||||
import Popup from "reactjs-popup";
|
||||
|
||||
export default function EquipmentInstancesListPage() {
|
||||
const [editmodalOpen, SetEditModalOpen] = useState(false);
|
||||
const [selectedItem, SetSelectedItem] = useState(0);
|
||||
const equipment_instances = useQuery({
|
||||
queryKey: ["equipment_instances"],
|
||||
queryFn: EquipmentInstancesAPI,
|
||||
|
|
@ -88,7 +93,8 @@ export default function EquipmentInstancesListPage() {
|
|||
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">
|
||||
|
|
@ -129,6 +135,25 @@ export default function EquipmentInstancesListPage() {
|
|||
</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",
|
||||
}}
|
||||
>
|
||||
<EditItemModal id={selectedItem} setOpen={SetEditModalOpen} />
|
||||
</Popup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue