From 7da42ccd90865b29e15d61f2bdc10d83dbf47d84 Mon Sep 17 00:00:00 2001 From: FlorianSpeicher Date: Wed, 18 Jun 2025 23:18:12 +0200 Subject: [PATCH] Added NewItemDialog without query connection. --- 00-backend/datasource/database.sqlite | Bin 27684864 -> 27684864 bytes .../public/locales/de/translation.json | 5 +- .../public/locales/en/translation.json | 5 +- .../src/helper/adminpanel/ItemsInfo.tsx | 52 +++--- .../src/helper/adminpanel/NewItemDialog.tsx | 157 ++++++++++++++++++ 5 files changed, 195 insertions(+), 24 deletions(-) create mode 100644 01-frontend/src/helper/adminpanel/NewItemDialog.tsx diff --git a/00-backend/datasource/database.sqlite b/00-backend/datasource/database.sqlite index 719019422b29a4b73ca295c919ed2a54d64833be..b3079e3c9c701ce0b0bf1e0a9fcd34083e9efadf 100644 GIT binary patch delta 1927 zcmZA1RX`SY6o&DAAR@}AfDIT}pMi-jVqjwzw#V+k#su*%Dk@tb?^#LT$)p4`Igp*Q`C!>;&l`1yx>%W?xtn0d>JV@rJJydnR;PcJX^p(R?OHQFE= zZP5kbvPBfsq)6 z(HMiV7>DtgfQd-NBuvH>OvN-z#|+GbVHRd%4(4JW=3@aCVi6W&36^3RmSY80A_=Ro z8f&l?>#!ahkc^Gkgw5E3t=NVXq+&bLumcV|k&a#1jXlV~UhKnuWFiaM$iV>|#339; zE{-4%M{x|taRMiC3a4=f`8bOL+=;tz4u!ZI_uxG4#eKLR7f^(YcmNOLAzZ@4D8^+x zf=BTf9>*0tfvYINlXwbG;~6}Q=kPpUz>9bZFXI)I;#Itc*YO74#9Me9@8Dg$hxhRT zKEy}(7@y!%l;Ija!{_({U*bBx!q@l)-{L!bk00D M0?$=`l*gO@A8n~|d;kCd delta 1927 zcmWmEXFv{k0LO7pNunpoYzP%kNF*ba@q}dWJ^uEJ9%W?~{zah@k}chF&YkX#%MGU+ z&aH0m>Godgrn__B-;2-p-S6!$`(~Ll8%3cGPjOhX!;@pIaaiMJjkh)Rt?{v@fi=F? zG_=Ognnu<%w#MHYr!@iAG_fYonx@tSS<}p#=GL^ZrlmEltZ8jcur(ppgjy43O&e>% zt!ZmbJ8Rlo6JbrHHBr`du%_c>y{U@x>Db2X8wg$iPf&N&cK3%T=%(jcgp#I zlB~4bZf9O?jSJD}gwE)K7<5G}x}iJb&;#-4iC*Z9K1e`c^h19nA_)U95Q8unZX{y} zhGG~}FdV5Efsq)6(HMiV7>DtgfQgud$(Vwvn1<l*pCt%z(E{BDGs9yM{pF!a2zLa5~pw)1+=aVw7Uyse&f{KOz-NYforJ7lXwbG;~8AXv$%oh@H}3?i+Bk&cp0zY zRlJ7R@dn<+TX-Aq;9b0j_wfNf#7FoTpWr4w#b@{&U*Jo8g|G1qzQuR=9zWnm{DhzJ z3x35d)S?c*;dlIjKk*m-#%=tAfAJsg6x7x@3ZZx@-b#JNM`@t=Dh(AsrIFHD@mHKm zfYL+>RGKP5N;9Ro(n4vev{G6t!Agh{s)Q+RlyIf3(oSiwL@1F;l+r=zsJN79rIXTG z>7v9aU6oj+o6=p0Q+g=zN>8Pi(p%}HBq)8AeoB8OQAtt;CH63l$pvbWwtU$nX4FOo-$uq zpe$4tDT|dQ%2H*SvRqlAq$w+vRZ6-hm|trh;mdp arW{vJC?}Ou%4wxsIiplKuJKV0XZioN=4`b9 diff --git a/01-frontend/public/locales/de/translation.json b/01-frontend/public/locales/de/translation.json index 6ab4562..02e940a 100644 --- a/01-frontend/public/locales/de/translation.json +++ b/01-frontend/public/locales/de/translation.json @@ -149,5 +149,8 @@ "imageUploadedSuccessfully": "Bild hochgeladen", "uploading": "Lädt hoch...", "upload": "Hochladen", - "imageUploadNoticeFs": "Die Auflösung der Farming Station beträgt 720 x 960 px" + "imageUploadNoticeFs": "Die Auflösung der Farming Station beträgt 720 x 960 px", + "itemCreatedSuccessfully": "Artikel erfolgreich erstellt", + "createNewItem": "Neuen Artikel erstellen", + "stockExpected": "Erwarteter Bestand" } \ No newline at end of file diff --git a/01-frontend/public/locales/en/translation.json b/01-frontend/public/locales/en/translation.json index ac747e6..512a764 100644 --- a/01-frontend/public/locales/en/translation.json +++ b/01-frontend/public/locales/en/translation.json @@ -149,5 +149,8 @@ "imageUploadedSuccessfully": "Uploaded Image Successfully", "uploading": "Uploading...", "upload": "Upload", - "imageUploadNoticeFs": "The Resolution of the Farming Station is 720 x 960 px" + "imageUploadNoticeFs": "The Resolution of the Farming Station is 720 x 960 px", + "itemCreatedSuccessfully": "Item created successfully", + "createNewItem": "Create New Item", + "stockExpected": "Expected Stock" } \ No newline at end of file diff --git a/01-frontend/src/helper/adminpanel/ItemsInfo.tsx b/01-frontend/src/helper/adminpanel/ItemsInfo.tsx index 881f567..953f457 100644 --- a/01-frontend/src/helper/adminpanel/ItemsInfo.tsx +++ b/01-frontend/src/helper/adminpanel/ItemsInfo.tsx @@ -1,25 +1,27 @@ import DeleteIcon from "@mui/icons-material/Delete"; import EditIcon from "@mui/icons-material/Edit"; -import {Box, Button, IconButton, Toolbar, useTheme} from "@mui/material"; +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 { useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; import Item from "../../components/Item"; -import {useTranslation} from "react-i18next"; -import {DataGrid, GridColDef, GridRowId, GridRowSelectionModel} from "@mui/x-data-grid"; -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 { mapValueToColor } from "../../util/ColorUtil.tsx"; +import { useAccount } from "../AccountProvider.tsx"; +import { fetchItems } 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([]); const [selectedRows, setSelectedRows] = useState>(new Set()); const [editImageDialog, setEditImageDialog] = useState(false); + const [newItemDialog, setNewItemDialog] = useState(false); const [selectedItem, setSelectedItem] = useState(null); const [isFarmStationImage, setIsFarmStationImage] = useState(false); @@ -41,10 +43,10 @@ export default function ItemsInfo() { function handleAddItem() { - //TODO: flsp + setNewItemDialog(true); } - const {user: loginData} = useAccount(); + const { user: loginData } = useAccount(); const { data } = useQuery({ queryKey: ["fetchItems", loginData], @@ -73,7 +75,7 @@ export default function ItemsInfo() { }; const columns: GridColDef<(typeof rows)[number]>[] = [ - {field: 'id', headerName: 'ID', width: 60}, + { field: 'id', headerName: 'ID', width: 60 }, { field: 'uuid', headerName: t('uuid'), @@ -123,7 +125,7 @@ export default function ItemsInfo() { type: 'number', renderCell: params => {return mapValueToColor(0, params.row.stockExpected, params.row.stock)}, + fill: () => { return mapValueToColor(0, params.row.stockExpected, params.row.stock) }, }, }} text={() => `${params.row.stock}`} /> }, @@ -135,7 +137,7 @@ export default function ItemsInfo() { type: 'number', renderCell: params => {return mapValueToColor(0, 10, params.row.rating)}, + fill: () => { return mapValueToColor(0, 10, params.row.rating) }, }, }} text={() => `${params.row.rating.toFixed(2)}`} /> }, @@ -144,21 +146,21 @@ export default function ItemsInfo() { headerName: t('actualPrice'), width: 90, editable: false, - valueGetter: (_, row) => (row.price100 / 100 * ((100-row.discount100)/100)).toFixed(2) + valueGetter: (_, row) => (row.price100 / 100 * ((100 - row.discount100) / 100)).toFixed(2) }, { field: 'images', headerName: t('images'), width: 90, editable: false, - renderCell: params => handleImageEdit(params.row)}> , + renderCell: params => handleImageEdit(params.row)}> , }, { field: 'farmImage', headerName: t('fsImage'), width: 90, editable: false, - renderCell: params => handleFarmImageEdit(params.row)}> , + renderCell: params => handleFarmImageEdit(params.row)}> , } ]; @@ -177,12 +179,13 @@ export default function ItemsInfo() { checkboxSelection disableRowSelectionOnClick onRowSelectionModelChange={handleSelectionChange} - slots={{ toolbar: () => ( + slots={{ + toolbar: () => ( - )}} + ) + }} showToolbar processRowUpdate={(updatedRow) => { setRows(rows.map(row => row.id === updatedRow.id ? updatedRow : row)); @@ -224,6 +227,11 @@ export default function ItemsInfo() { isFarmStationImage={isFarmStationImage} /> )} + + setNewItemDialog(false)} + /> ); } \ No newline at end of file diff --git a/01-frontend/src/helper/adminpanel/NewItemDialog.tsx b/01-frontend/src/helper/adminpanel/NewItemDialog.tsx new file mode 100644 index 0000000..ea2413a --- /dev/null +++ b/01-frontend/src/helper/adminpanel/NewItemDialog.tsx @@ -0,0 +1,157 @@ + +import CloseIcon from '@mui/icons-material/Close'; +import CloudUploadIcon from '@mui/icons-material/CloudUpload'; +import { + Alert, + Box, + Button, + Dialog, + DialogActions, + DialogContent, + DialogTitle, + IconButton, + TextField, + Typography +} from '@mui/material'; +import { useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { Item } from '../../components/Item'; + +interface NewItemDialogProps { + open: boolean; + onClose: () => void; +} + +export default function NewItemDialog({ open, onClose }: NewItemDialogProps) { + const { t } = useTranslation(); + const [item, setItem] = useState({ + id: 0, + uuid: "", + name: "", + description: "", + price100: 0, + stock: 0, + stockExpected: 1, + category: "", + rating: -1, + discount100: 0, + }); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(null); + const [success, setSuccess] = useState(false); + + const handleClose = () => { + setError(null); + setSuccess(false); + setLoading(false); + onClose(); + }; + + const handleChange = (e: React.ChangeEvent) => { + setItem({ ...item, [e.target.name]: e.target.value }); + }; + + const handleSave = async () => { + setLoading(true); + setError(null); + setSuccess(false); + }; + + return ( + + + {t('createNewItem')} + + + + + + + + {/* Name, Kategorie, Beschreibung, Preis, Rabatt, Bestand, Bestand erwartet */} + + + + + + + + + {/* Error Message */} + {error && ( + setError(null)}> + {error} + + )} + + {/* Success Message */} + {success && ( + + {t('itemCreatedSuccessfully')} + + )} + + + + + + + + + ); +} \ No newline at end of file