name mapping on OrderInfo Adminpage, only one item fetch for whole adminpage

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

@@ -14,7 +14,6 @@ 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,
   fetchItemList,
@@ -23,7 +22,7 @@ import {
 import ItemImageDialog from "./ItemImageDialog.tsx";
 import NewItemDialog from "./NewItemDialog.tsx";
 
-export default function ItemsInfo() {
+export default function ItemsInfo({ itemList }: { itemList: Item[] }) {
   const theme = useTheme();
   const { t } = useTranslation();
 
@@ -53,20 +52,11 @@ export default function ItemsInfo() {
     setNewItemDialog(true);
   }
 
-  const { user: loginData } = useAccount();
-
-  const { data } = useQuery({
-    queryKey: ["fetchItemList", loginData],
-    queryFn: () => fetchItemList(),
-    retry: 3,
-    retryDelay: 1000,
-  });
-
   useEffect(() => {
-    if (data) {
+    if (itemList) {
-      setRows(data);
+      setRows(itemList);
     }
-  }, [data]);
+  }, [itemList]);
 
   const handleSelectionChange = (newSelection: GridRowSelectionModel) => {
     setSelectedRows(newSelection.ids);

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

@@ -22,6 +22,7 @@ import { useTranslation } from "react-i18next";
 import OrderType, { OrderPatch, OrderStatusEnum } from "../../components/Order";
 import { useAccount } from "../AccountProvider";
 import { fetchOrdersAdmin, orderPatch } from "../query/Queries";
+import Item from "../../components/Item";
 
 // The order in which the statuses are displayed
 const statusOrder: OrderStatusEnum[] = [
@@ -130,8 +131,9 @@ const Column: React.FC<
 const EditOrder: React.FC<{
   open: boolean;
   order: OrderType | null;
+  articleNameMapping: (uuid: string) => string;
   onClose: () => void;
-}> = ({ open, order, onClose }) => {
+}> = ({ open, order, articleNameMapping, onClose }) => {
   const { t } = useTranslation();
   if (order === null) return "";
   return (
@@ -147,7 +149,7 @@ const EditOrder: React.FC<{
               {order.orderItems.map((item, idx) => (
                 <ListItemText
                   key={idx}
-                  primary={`${item.article} x${item.amount}`}
+                  primary={`${item.amount}x ${articleNameMapping(item.article)}`}
                 />
               ))}
             </List>
@@ -163,13 +165,13 @@ const EditOrder: React.FC<{
   );
 };
 
-export default function OrdersInfo() {
+export default function OrdersInfo({ itemList }: { itemList: Item[] }) {
   const [editOrder, setEditOrder] = useState<OrderType | null>(null);
   const [openSnackbar, setOpenSnackbar] = useState(false);
 
   const { user: loginData } = useAccount();
 
-  const { data, refetch, isLoading } = useQuery({
+  const { data, refetch, isLoading } = useQuery<OrderType[]>({
     queryKey: ["fetchOrdersAdmin", loginData],
     queryFn: () =>
       fetchOrdersAdmin(
@@ -213,6 +215,10 @@ export default function OrdersInfo() {
     return <div>Lade Bestellungen...</div>;
   }
 
+  if (!itemList) {
+    return <div>itemlist empty</div>;
+  }
+
   return (
     <DndProvider backend={HTML5Backend}>
       <div style={{ display: "flex", gap: 10, minHeight: "90%" }}>
@@ -229,6 +235,9 @@ export default function OrdersInfo() {
       <EditOrder
         open={!!editOrder}
         order={editOrder}
+        articleNameMapping={(uuid: string) => {
+          return itemList.find((item) => item.uuid == uuid)?.name || uuid;
+        }}
         onClose={() => setEditOrder(null)}
       />
       <Snackbar

01-frontend/src/pages/AdminPanel.tsx

@@ -13,12 +13,16 @@ import {
   ListItemText,
   useTheme,
 } from "@mui/material";
+import { fetchItemList } from "../helper/query/Queries.tsx";
+import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useAccount } from "../helper/AccountProvider.tsx";
 import AccountsInfo from "../helper/adminpanel/AccountsInfo";
 import ItemInfo from "../helper/adminpanel/ItemsInfo";
 import OrdersInfo from "../helper/adminpanel/OrdersInfo";
 import StatisticsInfo from "../helper/adminpanel/StatisticsInfo";
+import Item from "../components/Item";
 
 export default function AdminPanel() {
   const { t } = useTranslation();
@@ -29,16 +33,25 @@ export default function AdminPanel() {
     setInfoStatus(path);
   };
 
-  const renderContent = () => {
+  const { user: loginData } = useAccount();
+
+  const { data: itemList, isLoading } = useQuery<Item[]>({
+    queryKey: ["fetchItemList", loginData],
+    queryFn: () => fetchItemList(),
+    retry: 3,
+    retryDelay: 1000,
+  });
+
+  const renderContent = (itemList: Item[]) => {
     switch (infoStatus) {
       case "statistics":
         return <StatisticsInfo />;
       case "orders":
-        return <OrdersInfo />;
+        return <OrdersInfo itemList={itemList} />;
       case "accounts":
         return <AccountsInfo />;
       case "items":
-        return <ItemInfo />;
+        return <ItemInfo itemList={itemList} />;
       default:
         return <StatisticsInfo />;
     }
@@ -91,7 +104,7 @@ export default function AdminPanel() {
         </Box>
 
         {/* Content */}
-        <Box className="page-background">{renderContent()}</Box>
+        <Box className="page-background">{renderContent(itemList)}</Box>
       </div>
     </Box>
   );