Added edit and delete SKU functionality

src/Components/API/API.tsx

@@ -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)];
     });
 }

src/Components/EditSKUModal/EditSKUModal.tsx

@@ -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>
+    </>
+  );
+}

src/Components/Types/Types.tsx

@@ -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>;

src/Pages/EquipmentListPage/EquipmentListPage.tsx

@@ -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>
   );
 }