diff --git a/project/frontend/src/components/KennzahlenTable.tsx b/project/frontend/src/components/KennzahlenTable.tsx index 7055bfd..e01e98e 100644 --- a/project/frontend/src/components/KennzahlenTable.tsx +++ b/project/frontend/src/components/KennzahlenTable.tsx @@ -46,21 +46,39 @@ export default function KennzahlenTable({ }: KennzahlenTableProps) { const [editingIndex, setEditingIndex] = useState(""); const [editValue, setEditValue] = useState(""); + const [editingPageIndex, setEditingPageIndex] = useState(""); + const [editPageValue, setEditPageValue] = useState(""); + const [hoveredPageIndex, setHoveredPageIndex] = useState(""); const navigate = useNavigate(); const queryClient = useQueryClient(); const { mutate } = useMutation({ - mutationFn: (id: string) => { + mutationFn: (params: { id: string; newValue?: string; newPage?: number }) => { + const { id, newValue, newPage } = params; const key = id.toUpperCase(); const updatedData = { ...data }; - updatedData[key] = data[key]?.map((item) => ({ - ...item, - entity: editValue, - })) || [{ label: key, entity: editValue }]; + + if (data[key] && data[key].length > 0) { + updatedData[key] = data[key].map((item) => ({ + ...item, + ...(newValue !== undefined && { entity: newValue }), + ...(newPage !== undefined && { page: newPage }), + })); + } else { + updatedData[key] = [{ + label: key, + entity: newValue || "", + page: newPage || 0, + status: "single-source", + source: "manual" + }]; + } + return fetchPutKPI(Number(pdfId), updatedData); }, - onMutate: async (id: string) => { + onMutate: async (params: { id: string; newValue?: string; newPage?: number }) => { + const { id, newValue, newPage } = params; await queryClient.cancelQueries({ queryKey: ["pitchBookKPI", pdfId], }); @@ -71,10 +89,23 @@ export default function KennzahlenTable({ queryClient.setQueryData(["pitchBookKPI", pdfId], () => { const updatedData = { ...data }; - updatedData[key] = data[key]?.map((item) => ({ - ...item, - entity: editValue, - })) || [{ label: key, entity: editValue }]; + + if (data[key] && data[key].length > 0) { + updatedData[key] = data[key].map((item) => ({ + ...item, + ...(newValue !== undefined && { entity: newValue }), + ...(newPage !== undefined && { page: newPage }), + })); + } else { + updatedData[key] = [{ + label: key, + entity: newValue || "", + page: newPage || 0, + status: "single-source", + source: "manual" + }]; + } + return updatedData; }); @@ -99,19 +130,39 @@ export default function KennzahlenTable({ setEditValue(value); }; + const startPageEditing = (value: number, index: string) => { + setEditingPageIndex(index); + setEditPageValue(value.toString()); + }; + // Bearbeitung beenden und Wert speichern const handleSave = async (index: string) => { - // await updateKennzahl(rows[index].label, editValue); - mutate(index); + mutate({ id: index, newValue: editValue }); setEditingIndex(""); }; + const handlePageSave = async (index: string) => { + const pageNumber = parseInt(editPageValue); + if (!isNaN(pageNumber) && pageNumber > 0) { + mutate({ id: index, newPage: pageNumber }); + } + setEditingPageIndex(""); + }; + // Tastatureingaben verarbeiten const handleKeyPress = (e: KeyboardEvent, index: string) => { if (e.key === "Enter") { handleSave(index); } else if (e.key === "Escape") { - setEditingIndex("null"); + setEditingIndex(""); + } + }; + + const handlePageKeyPress = (e: KeyboardEvent, index: string) => { + if (e.key === "Enter") { + handlePageSave(index); + } else if (e.key === "Escape") { + setEditingPageIndex(""); } }; @@ -131,14 +182,16 @@ export default function KennzahlenTable({ - + Kennzahl - + Wert - - Seite + + + Seite + @@ -165,6 +218,10 @@ export default function KennzahlenTable({ borderColor = "#f6ed48"; } + const currentPage = row.extractedValues.at(0)?.page ?? 0; + const isPageHovered = hoveredPageIndex === row.setting.name; + const canEditPage = !hasMultipleValues; + return ( {row.setting.name} @@ -308,24 +365,115 @@ export default function KennzahlenTable({ )} - {(row.extractedValues.at(0)?.page ?? 0) > 0 ? ( - { - const extractedValue = row.extractedValues.at(0); - if (extractedValue?.page && extractedValue.page > 0) { - onPageClick?.( - Number(extractedValue.page), - extractedValue.entity || "", - ); + {editingPageIndex === row.setting.name ? ( + { + const value = e.target.value; + if (value === '' || /^\d+$/.test(value) && parseInt(value) > 0) { + setEditPageValue(value); } }} - sx={{ cursor: "pointer" }} - > - {row.extractedValues.at(0)?.page} - + onKeyDown={(e) => handlePageKeyPress(e, row.setting.name)} + onBlur={() => handlePageSave(row.setting.name)} + autoFocus + size="small" + variant="standard" + sx={{ + width: "60px", + "& .MuiInput-input": { + textAlign: "center" + } + }} + inputProps={{ + min: 0, + style: { textAlign: 'center' } + }} + /> ) : ( - "" + <> + {currentPage > 0 ? ( + canEditPage && setHoveredPageIndex(row.setting.name)} + onMouseLeave={() => setHoveredPageIndex("")} + onClick={() => { + if (canEditPage) { + startPageEditing(currentPage, row.setting.name); + } + }} + > + { + e.stopPropagation(); + const extractedValue = row.extractedValues.at(0); + if (extractedValue?.page && extractedValue.page > 0) { + onPageClick?.(Number(extractedValue.page), extractedValue.entity || ""); + } + }} + sx={{ cursor: "pointer" }} + > + {currentPage} + + + {isPageHovered && canEditPage && ( + + )} + + ) : canEditPage ? ( + setHoveredPageIndex(row.setting.name)} + onMouseLeave={() => setHoveredPageIndex("")} + onClick={() => startPageEditing(0, row.setting.name)} + > + ... + + + ) : ( + "" + )} + )} @@ -335,4 +483,4 @@ export default function KennzahlenTable({
); -} +} \ No newline at end of file diff --git a/project/frontend/src/routes/extractedResult_.$pitchBook.$kpi.tsx b/project/frontend/src/routes/extractedResult_.$pitchBook.$kpi.tsx index 22ec938..1e98430 100644 --- a/project/frontend/src/routes/extractedResult_.$pitchBook.$kpi.tsx +++ b/project/frontend/src/routes/extractedResult_.$pitchBook.$kpi.tsx @@ -1,4 +1,5 @@ import ArrowBackIcon from "@mui/icons-material/ArrowBack"; +import EditIcon from "@mui/icons-material/Edit"; import { Box, Button, @@ -27,6 +28,7 @@ import { } from "@tanstack/react-query"; import { createFileRoute, useNavigate } from "@tanstack/react-router"; import { useEffect, useState } from "react"; +import type { KeyboardEvent } from "react"; import PDFViewer from "../components/pdfViewer"; import { fetchPutKPI } from "../util/api"; import { kpiQueryOptions } from "../util/query"; @@ -65,13 +67,23 @@ function ExtractedResultsPage() { const [showConfirmDialog, setShowConfirmDialog] = useState(false); const [hasChanges, setHasChanges] = useState(false); const [customValue, setCustomValue] = useState(""); + const [customPage, setCustomPage] = useState(""); + const [editingCustomPage, setEditingCustomPage] = useState(false); + const originalValue = kpiValues[0]?.entity || ""; + const originalPage = kpiValues[0]?.page || 0; const selectedValue = selectedIndex === -1 ? customValue : kpiValues[selectedIndex]?.entity || ""; + const selectedPage = + selectedIndex === -1 + ? (parseInt(customPage) > 0 ? parseInt(customPage) : 1) + : kpiValues[selectedIndex]?.page || 1; useEffect(() => { - setHasChanges(selectedValue !== originalValue); - }, [selectedValue, originalValue]); + const valueChanged = selectedValue !== originalValue; + const pageChanged = selectedPage !== originalPage; + setHasChanges(valueChanged || pageChanged); + }, [selectedValue, selectedPage, originalValue, originalPage]); const { mutate: updateKPI } = useMutation({ mutationFn: () => { @@ -83,7 +95,7 @@ function ExtractedResultsPage() { baseObject = { label: kpi.toUpperCase(), entity: selectedValue, - page: 0, + page: selectedPage, status: "single-source", source: "manual", }; @@ -92,6 +104,7 @@ function ExtractedResultsPage() { { ...baseObject, entity: selectedValue, + page: selectedPage, }, ]; return fetchPutKPI(Number(pitchBook), updatedData); @@ -120,6 +133,7 @@ function ExtractedResultsPage() { setSelectedIndex(index); setCurrentPage(kpiValues[index].page); setCustomValue(""); + setCustomPage(""); } }; @@ -131,10 +145,21 @@ function ExtractedResultsPage() { setSelectedIndex(-1); }; + const handleCustomPageChange = ( + event: React.ChangeEvent, + ) => { + const value = event.target.value; + // Allow empty string or positive numbers only (no 0) + if (value === '' || (/^\d+$/.test(value) && parseInt(value) > 0)) { + setCustomPage(value); + } + }; + const handleRowClick = (index: number) => { setCurrentPage(kpiValues[index].page); setSelectedIndex(index); setCustomValue(""); + setCustomPage(""); }; const handleBackClick = () => { @@ -166,6 +191,18 @@ function ExtractedResultsPage() { updateKPI(); }; + const startCustomPageEditing = () => { + setEditingCustomPage(true); + }; + + const handleCustomPageKeyPress = (e: KeyboardEvent) => { + if (e.key === "Enter") { + setEditingCustomPage(false); + } else if (e.key === "Escape") { + setEditingCustomPage(false); + } + }; + return ( @@ -203,10 +240,10 @@ function ExtractedResultsPage() { - + Gefundene Werte - + Seite @@ -318,6 +355,61 @@ function ExtractedResultsPage() { /> + + {editingCustomPage ? ( + setEditingCustomPage(false)} + autoFocus + size="small" + variant="standard" + sx={{ + width: "60px", + "& .MuiInput-input": { + textAlign: "center" + } + }} + inputProps={{ + min: 0, + style: { textAlign: 'center' } + }} + /> + ) : ( + { + e.stopPropagation(); + startCustomPageEditing(); + }} + > + {customPage || "..."} + { + e.stopPropagation(); + startCustomPageEditing(); + }} + /> + + )} +