Updated KennzahlenTabel

project/frontend/src/components/KennzahlenTable.tsx

@@ -46,21 +46,39 @@ export default function KennzahlenTable({
 										}: 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) => ({
+
+			if (data[key] && data[key].length > 0) {
+				updatedData[key] = data[key].map((item) => ({
 					...item,
-				entity: editValue,
+					...(newValue !== undefined && { entity: newValue }),
-			})) || [{ label: key, entity: editValue }];
+					...(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) => ({
+
+				if (data[key] && data[key].length > 0) {
+					updatedData[key] = data[key].map((item) => ({
 						...item,
-					entity: editValue,
+						...(newValue !== undefined && { entity: newValue }),
-				})) || [{ label: key, entity: editValue }];
+						...(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({ id: index, newValue: editValue });
-		mutate(index);
 		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">
+							<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,10 +357,58 @@ export default function KennzahlenTable({
 										)}
 									</TableCell>
 									<TableCell align="center">
-										{(row.extractedValues.at(0)?.page ?? 0) > 0 ? (
+										{editingPageIndex === row.setting.name ? (
+											<TextField
+												value={editPageValue}
+												onChange={(e) => {
+													const value = e.target.value;
+													if (value === '' || /^\d+$/.test(value) && parseInt(value) > 0) {
+														setEditPageValue(value);
+													}
+												}}
+												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={() => {
+															onClick={(e) => {
+																e.stopPropagation();
 																const extractedValue = row.extractedValues.at(0);
 																if (extractedValue?.page && extractedValue.page > 0) {
 																	onPageClick?.(Number(extractedValue.page), extractedValue.entity || "");
@@ -311,11 +416,57 @@ export default function KennzahlenTable({
 															}}
 															sx={{ cursor: "pointer" }}
 														>
-												{row.extractedValues.at(0)?.page}
+															{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>
 							);