From c144db3f13eda08dbdc6526bb19cee4d1d3770dd Mon Sep 17 00:00:00 2001
From: s8613 <s86136@bht-berlin.de>
Date: Tue, 17 Jun 2025 11:29:49 +0200
Subject: [PATCH] Updated KennzahlenTabel

---
 .../src/components/KennzahlenTable.tsx        | 217 +++++++++++++++---
 1 file changed, 184 insertions(+), 33 deletions(-)

diff --git a/project/frontend/src/components/KennzahlenTable.tsx b/project/frontend/src/components/KennzahlenTable.tsx
index b6a19bb..5cfbad3 100644
--- a/project/frontend/src/components/KennzahlenTable.tsx
+++ b/project/frontend/src/components/KennzahlenTable.tsx
@@ -38,29 +38,47 @@ interface KennzahlenTableProps {
 }
 
 export default function KennzahlenTable({
-	onPageClick,
-	data,
-	pdfId,
-	settings,
-	from
-}: KennzahlenTableProps) {
+											onPageClick,
+											data,
+											pdfId,
+											settings,
+											from
+										}: KennzahlenTableProps) {
 	const [editingIndex, setEditingIndex] = useState<string>("");
 	const [editValue, setEditValue] = useState("");
+	const [editingPageIndex, setEditingPageIndex] = useState<string>("");
+	const [editPageValue, setEditPageValue] = useState("");
+	const [hoveredPageIndex, setHoveredPageIndex] = useState<string>("");
 	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<HTMLDivElement>, index: string) => {
 		if (e.key === "Enter") {
 			handleSave(index);
 		} else if (e.key === "Escape") {
-			setEditingIndex("null");
+			setEditingIndex("");
+		}
+	};
+
+	const handlePageKeyPress = (e: KeyboardEvent<HTMLDivElement>, index: string) => {
+		if (e.key === "Enter") {
+			handlePageSave(index);
+		} else if (e.key === "Escape") {
+			setEditingPageIndex("");
 		}
 	};
 
@@ -138,7 +189,9 @@ export default function KennzahlenTable({
 							<strong>Wert</strong>
 						</TableCell>
 						<TableCell align="center">
-							<strong>Seite</strong>
+							<Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 1 }}>
+								<strong>Seite</strong>
+							</Box>
 						</TableCell>
 					</TableRow>
 				</TableHead>
@@ -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 (
 								<TableRow key={row.setting.name}>
 									<TableCell>{row.setting.name}</TableCell>
@@ -300,21 +357,115 @@ export default function KennzahlenTable({
 										)}
 									</TableCell>
 									<TableCell align="center">
-										{(row.extractedValues.at(0)?.page ?? 0) > 0 ? (
-											<Link
-												component="button"
-												onClick={() => {
-													const extractedValue = row.extractedValues.at(0);
-													if (extractedValue?.page && extractedValue.page > 0) {
-														onPageClick?.(Number(extractedValue.page), extractedValue.entity || "");
+										{editingPageIndex === row.setting.name ? (
+											<TextField
+												value={editPageValue}
+												onChange={(e) => {
+													const value = e.target.value;
+													if (value === '' || /^\d+$/.test(value) && parseInt(value) > 0) {
+														setEditPageValue(value);
 													}
 												}}
-												sx={{ cursor: "pointer" }}
-											>
-												{row.extractedValues.at(0)?.page}
-											</Link>
+												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 ? (
+													<Box
+														sx={{
+															display: "flex",
+															alignItems: "center",
+															justifyContent: "center",
+															position: "relative",
+															cursor: canEditPage ? "pointer" : "default",
+															borderRadius: "4px",
+															minHeight: "32px",
+															minWidth: "100px",
+															transition: "all 0.2s ease",
+														}}
+														onMouseEnter={() => canEditPage && setHoveredPageIndex(row.setting.name)}
+														onMouseLeave={() => setHoveredPageIndex("")}
+														onClick={() => {
+															if (canEditPage) {
+																startPageEditing(currentPage, row.setting.name);
+															}
+														}}
+													>
+														<Link
+															component="button"
+															onClick={(e) => {
+																e.stopPropagation();
+																const extractedValue = row.extractedValues.at(0);
+																if (extractedValue?.page && extractedValue.page > 0) {
+																	onPageClick?.(Number(extractedValue.page), extractedValue.entity || "");
+																}
+															}}
+															sx={{ cursor: "pointer" }}
+														>
+															{currentPage}
+														</Link>
+
+														{isPageHovered && canEditPage && (
+															<EditIcon
+																fontSize="small"
+																sx={{
+																	position: "absolute",
+																	left: "70px",
+																	color: "#666",
+																	opacity: 0.7,
+																	transition: "opacity 0.2s ease",
+																}}
+															/>
+														)}
+													</Box>
+												) : canEditPage ? (
+													<Box
+														sx={{
+															display: "flex",
+															alignItems: "center",
+															justifyContent: "center",
+															position: "relative",
+															cursor: "pointer",
+															minHeight: "32px",
+															minWidth: "100px",
+															borderRadius: "4px",
+															backgroundColor: isPageHovered ? "#f8f9fa" : "transparent",
+														}}
+														onMouseEnter={() => setHoveredPageIndex(row.setting.name)}
+														onMouseLeave={() => setHoveredPageIndex("")}
+														onClick={() => startPageEditing(0, row.setting.name)}
+													>
+														<span style={{ color: "#999" }}>...</span>
+														<EditIcon
+															fontSize="small"
+															sx={{
+																position: "absolute",
+																left: "70px",
+																color: "#555",
+																cursor: "pointer",
+																opacity: 0.7,
+																transition: "opacity 0.2s ease",
+															}}
+														/>
+													</Box>
+												) : (
+													""
+												)}
+											</>
 										)}
 									</TableCell>
 								</TableRow>
@@ -324,4 +475,4 @@ export default function KennzahlenTable({
 			</Table>
 		</TableContainer>
 	);
-}
+}
\ No newline at end of file