ItemsInfo add REST call 1, missing category

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

@@ -4,8 +4,13 @@ import {Box, Button, IconButton, Toolbar, useTheme} from "@mui/material";
 import Item from "../../components/Item";
 import {useTranslation} from "react-i18next";
 import {DataGrid, GridColDef, GridRowId, GridRowSelectionModel} from "@mui/x-data-grid";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import {Gauge, gaugeClasses} from "@mui/x-charts";
+import {useAccount} from "../AccountProvider.tsx";
+import {useQuery} from "@tanstack/react-query";
+import {fetchItems} from "../query/Queries.tsx";
+import Select from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
 
 export default function ItemsInfo() {
     const theme = useTheme();
@@ -56,37 +61,25 @@ export default function ItemsInfo() {
         console.log("IconEdit", item);
     }
 
-    const _rows: Item[] = [
-        {
-            id: "1",
-            uuid: "uuid123",
-            name: "Item",
-            description: "Super duper geil <b>wichtiger text </b>",
-            price100: 1000,
-            stock: 100,
-            stockExpected: 1200,
-            category: "garden",
-            rating: 7,
-            discount100: 21,
-        },
-        {
-            id: "2",
-            uuid: "uuid12312412",
-            name: "Schlauch",
-            description: "Schlauchiger Schlauch für Schlauchige Angelegenheiten",
-            price100: 10,
-            stock: 50,
-            stockExpected: 100,
-            category: "technicalComponents",
-            rating: 10,
-            discount100: 21,
-        },
-    ]
-
     //TODO: get per REST
-    const [rows, setRows] = useState<Item[]>(_rows);
+    const [rows, setRows] = useState<Item[]>([]);
     const [selectedRows, setSelectedRows] = useState<Set<GridRowId>>(new Set());
 
+    const {user: loginData} = useAccount();
+
+    const { data } = useQuery({
+        queryKey: ["fetchItems", loginData],
+        queryFn: () => fetchItems(loginData? loginData : {email: "", password: "", session: "", customerId: -1}),
+        retry: 3,
+        retryDelay: 1000,
+    });
+
+    useEffect(() => {
+        if (data) {
+            setRows(data);
+        }
+    }, [data]);
+
     const handleSelectionChange = (newSelection: GridRowSelectionModel) => {
         setSelectedRows(newSelection.ids);
     };
@@ -112,7 +105,7 @@ export default function ItemsInfo() {
         {
             field: 'name',
             headerName: t('name'),
-            width: 150,
+            width: 200,
             editable: true,
         },
         {
@@ -120,6 +113,7 @@ export default function ItemsInfo() {
             headerName: t('category'),
             width: 150,
             editable: true,
+            valueFormatter: (val) => t(val),
         },
         {
             field: 'description',
@@ -132,7 +126,8 @@ export default function ItemsInfo() {
             headerName: t('price100'),
             width: 100,
             editable: true,
-            type: 'number'
+            type: 'number',
+            valueFormatter: (val) => (val / 100).toFixed(2),
         },
         {
             field: 'discount100',

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

@@ -157,4 +157,12 @@ export const fetchAccounts = async (loginData: User) => {
         throw new Error("Login failed");
     }
     return response.json();
+};
+
+export const fetchItems = async (loginData: User) => {
+    const response = await fetch("http://localhost:8085/article/all?email=" + loginData.email + "&session=" + loginData.session);
+    if (!response.ok) {
+        throw new Error("Login failed");
+    }
+    return response.json();
 };