Added query for chnage item

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

@@ -1,21 +1,21 @@
 import DeleteIcon from "@mui/icons-material/Delete";
 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 {useMutation, useQuery} from "@tanstack/react-query";
-import {useEffect, useState} from "react";
-import {useTranslation} from "react-i18next";
+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 { 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 {deleteItemQuery, fetchItems} from "../query/Queries.tsx";
+import { mapValueToColor } from "../../util/ColorUtil.tsx";
+import { useAccount } from "../AccountProvider.tsx";
+import { deleteItemQuery, fetchItems, updateItemAdmin } from "../query/Queries.tsx";
 import ItemImageDialog from "./ItemImageDialog.tsx";
 import NewItemDialog from "./NewItemDialog.tsx";
 
 export default function ItemsInfo() {
     const theme = useTheme();
-    const {t} = useTranslation();
+    const { t } = useTranslation();
 
     const [rows, setRows] = useState<Item[]>([]);
     const [selectedRows, setSelectedRows] = useState<Set<GridRowId>>(new Set());
@@ -45,9 +45,9 @@ export default function ItemsInfo() {
         setNewItemDialog(true);
     }
 
-    const {user: loginData} = useAccount();
+    const { user: loginData } = useAccount();
 
-    const {data} = useQuery({
+    const { data } = useQuery({
         queryKey: ["fetchItems", loginData],
         queryFn: () => fetchItems(),
         retry: 3,
@@ -79,14 +79,26 @@ export default function ItemsInfo() {
         setRows(rows.filter((row) => !selectedRows.has(row.id)));
     };
 
+    const updateItem = useMutation({
+        mutationFn: (item: Item) =>
+            updateItemAdmin(item),
+
+    });
+
+    const handleRowUpdate = async (updatedRow: Item) => {
+        setRows(rows.map(row => row.id === updatedRow.id ? updatedRow : row));
+        await updateItem.mutateAsync(updatedRow);
+        return updatedRow;
+    }
+
     const columns: GridColDef<(typeof rows)[number]>[] = [
-        {field: 'id', headerName: 'ID', width: 60},
+        { field: 'id', headerName: 'ID', width: 60 },
         {
             field: 'uuid',
             headerName: t('uuid'),
             type: "string",
             width: 120,
-            editable: true
+            editable: false
         },
         {
             field: 'name',
@@ -129,13 +141,13 @@ export default function ItemsInfo() {
             editable: true,
             type: 'number',
             renderCell: params => <Gauge value={Math.min(params.row.stock, params.row.stockExpected)} valueMin={0}
-                                         valueMax={params.row.stockExpected} startAngle={-90} endAngle={90} sx={{
-                [`& .${gaugeClasses.valueArc}`]: {
-                    fill: () => {
-                        return mapValueToColor(0, params.row.stockExpected, params.row.stock)
+                valueMax={params.row.stockExpected} startAngle={-90} endAngle={90} sx={{
+                    [`& .${gaugeClasses.valueArc}`]: {
+                        fill: () => {
+                            return mapValueToColor(0, params.row.stockExpected, params.row.stock)
+                        },
                     },
-                },
-            }} text={() => `${params.row.stock}`}/>
+                }} text={() => `${params.row.stock}`} />
         },
         {
             field: 'rating',
@@ -144,13 +156,13 @@ export default function ItemsInfo() {
             editable: false, //the rating is averaged from ratings
             type: 'number',
             renderCell: params => <Gauge value={Math.min(params.row.rating, 10)} valueMin={0} valueMax={10}
-                                         startAngle={-90} endAngle={90} sx={{
-                [`& .${gaugeClasses.valueArc}`]: {
-                    fill: () => {
-                        return mapValueToColor(0, 10, params.row.rating)
+                startAngle={-90} endAngle={90} sx={{
+                    [`& .${gaugeClasses.valueArc}`]: {
+                        fill: () => {
+                            return mapValueToColor(0, 10, params.row.rating)
+                        },
                     },
-                },
-            }} text={() => `${params.row.rating.toFixed(2)}`}/>
+                }} text={() => `${params.row.rating.toFixed(2)}`} />
         },
         {
             field: "actualPrice",
@@ -164,14 +176,14 @@ export default function ItemsInfo() {
             headerName: t('images'),
             width: 90,
             editable: false,
-            renderCell: params => <IconButton onClick={() => handleImageEdit(params.row)}> <EditIcon/> </IconButton>,
+            renderCell: params => <IconButton onClick={() => handleImageEdit(params.row)}> <EditIcon /> </IconButton>,
         },
         {
             field: 'farmImage',
             headerName: t('fsImage'),
             width: 90,
             editable: false,
-            renderCell: params => <IconButton onClick={() => handleFarmImageEdit(params.row)}> <EditIcon/>
+            renderCell: params => <IconButton onClick={() => handleFarmImageEdit(params.row)}> <EditIcon />
             </IconButton>,
         }
     ];
@@ -197,7 +209,7 @@ export default function ItemsInfo() {
                             <Button
                                 variant="contained"
                                 color="error"
-                                startIcon={<DeleteIcon/>}
+                                startIcon={<DeleteIcon />}
                                 onClick={handleDeleteSelected}
                                 disabled={selectedRows.size === 0}
                                 sx={{
@@ -209,7 +221,7 @@ export default function ItemsInfo() {
                             <Button
                                 variant="contained"
                                 color="primary"
-                                startIcon={<DeleteIcon/>}
+                                startIcon={<DeleteIcon />}
                                 onClick={handleAddItem}
                                 sx={{
                                     marginRight: 1
@@ -221,11 +233,7 @@ export default function ItemsInfo() {
                     )
                 }}
                 showToolbar
-                processRowUpdate={(updatedRow) => {
-                    setRows(rows.map(row => row.id === updatedRow.id ? updatedRow : row));
-                    //TODO: make REST callback
-                    return updatedRow;
-                }}
+                processRowUpdate={handleRowUpdate}
             />
             {selectedItem && (
                 <ItemImageDialog

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

@@ -299,7 +299,7 @@ export const deleteItemQuery = async (uuid: string) => {
 };
 
 export const updateAccountAdmin = async (account: AccountType, user: User) => {
-    const response = await fetch('http://localhost:8085/account/admin?email=' + user.email + "&password=" + user.password + "&id=" + account.id + "&admin=" + account.admin, {
+    const response = await fetch('http://localhost:8085/account/admin?email=' + user.email + "&uuid=" + user.session + "&id=" + account.id + "&admin=" + account.admin, {
         method: 'POST',
     });
     if (!response.ok) {
@@ -307,3 +307,17 @@ export const updateAccountAdmin = async (account: AccountType, user: User) => {
     }
     return await response.json();
 }
+
+export const updateItemAdmin = async (item: Item) => {
+    const response = await fetch('http://localhost:8085/article?uuid=' + item.uuid, {
+        method: 'PUT',
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(item),
+    });
+    if (!response.ok) {
+        throw new Error('Fehler beim Ändern des Items');
+    }
+    return await response.json();
+}