Added Item Delete Button

01-frontend/src/helper/adminpanel/ItemsInfo.tsx

@@ -3,13 +3,13 @@ import EditIcon from "@mui/icons-material/Edit";
 import { Box, Button, IconButton, Toolbar, useTheme } from "@mui/material";
 import { Gauge, gaugeClasses } from "@mui/x-charts";
 import { DataGrid, GridColDef, GridRowId, GridRowSelectionModel } from "@mui/x-data-grid";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Item from "../../components/Item";
 import { mapValueToColor } from "../../util/ColorUtil.tsx";
 import { useAccount } from "../AccountProvider.tsx";
-import { fetchItems } from "../query/Queries.tsx";
+import { deleteItemQuery, fetchItems } from "../query/Queries.tsx";
 import ItemImageDialog from "./ItemImageDialog.tsx";
 import NewItemDialog from "./NewItemDialog.tsx";
 
@@ -65,11 +65,17 @@ export default function ItemsInfo() {
         setSelectedRows(newSelection.ids);
     };
 
+    const deleteItem = useMutation({
+        mutationFn: (uuid: string) =>
+            deleteItemQuery(uuid),
+    });
+
     const handleDeleteSelected = async () => {
-        selectedRows.forEach((row) => {
-            //TODO: send delete command, or send deleteall
-            console.log(row);
-        })
+        await Promise.all(
+            Array.from(selectedRows).map(async (row) => {
+                await deleteItem.mutateAsync(rows.find(item => item.id === row)?.uuid || "");
+            })
+        );
 
         setRows(rows.filter((row) => !selectedRows.has(row.id)));
     };

01-frontend/src/helper/adminpanel/NewItemDialog.tsx

@@ -1,6 +1,5 @@
 
 import CloseIcon from '@mui/icons-material/Close';
-import CloudUploadIcon from '@mui/icons-material/CloudUpload';
 import {
     Alert,
     Box,
@@ -10,12 +9,13 @@ import {
     DialogContent,
     DialogTitle,
     IconButton,
-    TextField,
-    Typography
+    TextField
 } from '@mui/material';
+import { useMutation } from '@tanstack/react-query';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Item } from '../../components/Item';
+import { submitItem } from '../query/Queries';
 
 interface NewItemDialogProps {
     open: boolean;
@@ -51,10 +51,20 @@ export default function NewItemDialog({ open, onClose }: NewItemDialogProps) {
         setItem({ ...item, [e.target.name]: e.target.value });
     };
 
+    const saveItem = useMutation({
+        mutationFn: (item: Item) =>
+            submitItem(item),
+    });
+
     const handleSave = async () => {
         setLoading(true);
         setError(null);
         setSuccess(false);
+
+        await saveItem.mutateAsync(item)
+
+        onClose(); // Close the dialog after saving
+        setLoading(false);
     };
 
     return (

01-frontend/src/helper/query/Queries.tsx

@@ -3,7 +3,7 @@
 import AccountType, { AdminAccountOperation, CustomerType, SubmitLogin, User } from "../../components/Account";
 import OrderType, { OrderPatch } from "../../components/Order";
 import RatingSubmitType from "../../components/RatingSubmit";
-import { ItemWithFSImage } from "../../components/Item";
+import { Item, ItemWithFSImage } from "../../components/Item";
 
 export const fetchItemList = async () => {
     const response = await fetch('http://localhost:8085/article/all');
@@ -273,3 +273,27 @@ export const fetchFarmingStationItemList = async (): Promise<ItemWithFSImage[]>
         throw new Error('Failed to fetch items');
     return response.json();
 }
+
+export const submitItem = async (item: Item) => {
+    const response = await fetch("http://localhost:8085/article", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(item),
+    });
+    if (!response.ok) {
+        throw new Error("Login failed");
+    }
+    return response.json();
+};
+
+export const deleteItemQuery = async (uuid: string) => {
+    const response = await fetch("http://localhost:8085/article?uuid=" + uuid, {
+        method: "DELETE"
+    });
+    if (!response.ok) {
+        throw new Error("Login failed");
+    }
+    return response.json();
+};