Mergekonflikt in KennzahlenTable.tsx bereinigt

Merge pull request 'Pdf Seite ist anspringbar durch Kennzahlen-Tabelle' (#50 ) from #21-seite-anspringen into main
Reviewed-on: #50
2025-06-05 00:43:16 +02:00 · 2025-06-04 19:45:07 +02:00 · 2025-06-03 22:03:21 +02:00
3 changed files with 135 additions and 163 deletions
--- a/project/frontend/src/components/KennzahlenTable.tsx
+++ b/project/frontend/src/components/KennzahlenTable.tsx
@ -2,45 +2,38 @@ import {
  Table, TableBody, TableCell, TableContainer,
  TableHead, TableRow, Paper, Box,
  Dialog, DialogActions, DialogContent, DialogTitle,
-    TextField, Button
-  } from '@mui/material';
-  import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
-  import SearchIcon from '@mui/icons-material/Search';
-  import EditIcon from '@mui/icons-material/Edit';
-  import { useState } from 'react';
+  TextField, Button, Link
+} from '@mui/material';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import SearchIcon from '@mui/icons-material/Search';
+import EditIcon from '@mui/icons-material/Edit';
+import { useState } from 'react';

-  
-  //  Beispiel-Daten
-  const exampleData = [
+const exampleData = [
  { label: 'Fondsname', value: 'Fund Real Estate Prime Europe', page: 1, status: 'ok' },
  { label: 'Fondsmanager', value: '', page: 1, status: 'error' },
  { label: 'Risikoprofil', value: 'Core/Core+', page: 10, status: 'warning' },
-    { label: 'LTV', value: '30-35 %', page: 8, status: 'ok' }
-  ];
+  { label: 'LTV', value: '30-35 %', page: 8, status: 'ok' },
+  { label: 'Ausschüttungsrendite', value: '4%', page: 34, status: 'ok' }
+];

-  // React-Komponente
-  import { Dispatch, SetStateAction } from 'react';
-  type Props = {
-    setSelectedLabel: Dispatch<SetStateAction<string | null>>;
-  };
-  export default function KennzahlenTable({ setSelectedLabel }: Props) {
+interface KennzahlenTableProps {
+  onPageClick?: (page: number) => void;
+  setSelectedLabel?: (label: string) => void;
+}

-    // Zustand für bearbeitbare Daten
+export default function KennzahlenTable({ onPageClick, setSelectedLabel }: KennzahlenTableProps) {
  const [rows, setRows] = useState(exampleData);
+  const [open, setOpen] = useState(false);
+  const [currentValue, setCurrentValue] = useState('');
+  const [currentIndex, setCurrentIndex] = useState<number | null>(null);

-    // Zustände für Dialog-Funktion
-    const [open, setOpen] = useState(false); // Dialog anzeigen?
-    const [currentValue, setCurrentValue] = useState(''); // Eingabewert
-    const [currentIndex, setCurrentIndex] = useState<number | null>(null); // Zeilenindex
-  
-    // Beim Klick auf das Stift-Icon: Dialog öffnen
  const handleEditClick = (value: string, index: number) => {
    setCurrentValue(value);
    setCurrentIndex(index);
    setOpen(true);
  };

-    // Wert speichern und Dialog schließen
  const handleSave = () => {
    if (currentIndex !== null) {
      const updated = [...rows];
@ -54,7 +47,6 @@ import {
    <>
      <TableContainer component={Paper}>
        <Table>
-            {/* Tabellenkopf */}
          <TableHead>
            <TableRow>
              <TableCell><strong>Kennzahl</strong></TableCell>
@ -62,11 +54,8 @@ import {
              <TableCell><strong>Seite</strong></TableCell>
            </TableRow>
          </TableHead>
-  
-            {/* Tabelleninhalt */}
          <TableBody>
            {rows.map((row, index) => {
-                // Rahmenfarbe anhand Status
              let borderColor = 'transparent';
              if (row.status === 'error') borderColor = 'red';
              else if (row.status === 'warning') borderColor = '#f6ed48';
@ -74,15 +63,11 @@ import {
              return (
                <TableRow
                  key={index}
-                    onClick={() => setSelectedLabel(row.label)}
+                  onClick={() => setSelectedLabel?.(row.label)}
                  hover
                  sx={{ cursor: 'pointer' }}
                >
-
-                    {/* Kennzahl */}
                  <TableCell>{row.label}</TableCell>
-  
-                    {/* Wert mit Status-Icons + Stift rechts */}
                  <TableCell>
                    <Box
                      sx={{
@ -100,8 +85,6 @@ import {
                        {row.status === 'warning' && <SearchIcon fontSize="small" sx={{ color: '#f6ed48' }} />}
                        <span>{row.value || '—'}</span>
                      </Box>
-  
-                        {/* Stift-Icon */}
                      <EditIcon
                        fontSize="small"
                        sx={{ color: '#555', cursor: 'pointer' }}
@ -109,9 +92,15 @@ import {
                      />
                    </Box>
                  </TableCell>
-  
-                    {/* Seitenzahl */}
-                    <TableCell>{row.page}</TableCell>
+                  <TableCell>
+                    <Link
+                      component="button"
+                      onClick={() => onPageClick?.(row.page)}
+                      sx={{ cursor: 'pointer' }}
+                    >
+                      {row.page}
+                    </Link>
+                  </TableCell>
                </TableRow>
              );
            })}
@ -119,7 +108,6 @@ import {
        </Table>
      </TableContainer>

-        {/* Dialog zum Bearbeiten */}
      <Dialog open={open} onClose={() => setOpen(false)}>
        <DialogTitle>Kennzahl bearbeiten</DialogTitle>
        <DialogContent>
@ -139,5 +127,4 @@ import {
      </Dialog>
    </>
  );
-  }
-  
+}
--- a/project/frontend/src/components/pdfViewer.tsx
+++ b/project/frontend/src/components/pdfViewer.tsx
@ -28,7 +28,7 @@ export default function PDFViewer({ pitchBookId, currentPage }: PDFViewerProps)
    setNumPages(numPages);
  };

-  // Update PDF width on resize
+  // Container-Größe berechnen
  useEffect(() => {
    const updateWidth = () => {
      if (containerRef.current) {
@ -41,7 +41,7 @@ export default function PDFViewer({ pitchBookId, currentPage }: PDFViewerProps)
    return () => window.removeEventListener("resize", updateWidth);
  }, []);

-  // Highlight search logic
+  // Highlight-Logik
  useEffect(() => {
    setHighlightLabels(["LTV", "Fondsmanager", "Risikoprofil"]);
  }, []);
@ -59,7 +59,7 @@ export default function PDFViewer({ pitchBookId, currentPage }: PDFViewerProps)
    [highlightLabels]
  );

-  // Update page if prop changes
+  // Seite ändern, wenn Prop sich ändert
  useEffect(() => {
    if (currentPage && currentPage !== pageNumber) {
      setPageNumber(currentPage);
@ -67,15 +67,7 @@ export default function PDFViewer({ pitchBookId, currentPage }: PDFViewerProps)
  }, [currentPage]);

  return (
-    <Box
-      display="flex"
-      flexDirection="column"
-      justifyContent="center"
-      alignItems="center"
-      width="100%"
-      height="100%"
-      p={2}
-    >
+    <Box display="flex" flexDirection="column" justifyContent="center" alignItems="center" width="100%" height="100%" p={2}>
      <Box
        ref={containerRef}
        sx={{
@ -102,23 +94,14 @@ export default function PDFViewer({ pitchBookId, currentPage }: PDFViewerProps)
          )}
        </Document>
      </Box>
-      <Box
-        mt={2}
-        display="flex"
-        alignItems="center"
-        justifyContent="center"
-        gap={1}
-      >
+      <Box mt={2} display="flex" alignItems="center" justifyContent="center" gap={1}>
        <IconButton disabled={pageNumber <= 1} onClick={() => setPageNumber((p) => p - 1)}>
          <ArrowCircleLeftIcon fontSize="large" />
        </IconButton>
        <span>
          {pageNumber} / {numPages}
        </span>
-        <IconButton
-          disabled={pageNumber >= (numPages || 1)}
-          onClick={() => setPageNumber((p) => p + 1)}
-        >
+        <IconButton disabled={pageNumber >= (numPages || 1)} onClick={() => setPageNumber((p) => p + 1)}>
          <ArrowCircleRightIcon fontSize="large" />
        </IconButton>
      </Box>
--- a/project/frontend/src/routes/extractedResult.$pitchBook.tsx
+++ b/project/frontend/src/routes/extractedResult.$pitchBook.tsx
@ -1,6 +1,7 @@
 import ContentPasteIcon from "@mui/icons-material/ContentPaste";
 import { Box, Button, Paper, Typography } from "@mui/material";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
 import KennzahlenTable from "../components/KennzahlenTable";
 import PDFViewer from "../components/pdfViewer";

@ -12,6 +13,7 @@ function ExtractedResultsPage() {
 	const { pitchBook } = Route.useParams();
 	const navigate = useNavigate();
 	const status: "green" | "yellow" | "red" = "red";
+	const [currentPage, setCurrentPage] = useState(1);

 	const statusColor = {
 		red: "#f43131",
@ -58,7 +60,7 @@ function ExtractedResultsPage() {
 						overflow: "auto",
 					}}
 				>
-					<KennzahlenTable />
+					<KennzahlenTable onPageClick={setCurrentPage} />
 				</Paper>
 				<Box
 					display="flex"
@ -78,7 +80,7 @@ function ExtractedResultsPage() {
 							justifyContent: "center",
 						}}
 					>
-						<PDFViewer pitchBookId={pitchBook} />
+						<PDFViewer pitchBookId={pitchBook} currentPage={currentPage} />
 					</Paper>
 					<Box mt={2} display="flex" justifyContent="flex-end" gap={2}>
 						<Button variant="contained" sx={{ backgroundColor: "#383838" }}>
Author	SHA1	Message	Date
Abdulrahman Dabbagh	0eddffcc0b	Mergekonflikt in KennzahlenTable.tsx bereinigt	2025-06-05 00:43:16 +02:00
Jaronim Pracht	f81624b8ab	Merge pull request 'Pdf Seite ist anspringbar durch Kennzahlen-Tabelle' (#50 ) from #21-seite-anspringen into main Reviewed-on: #50	2025-06-04 19:45:07 +02:00
Zainab2604	93334898c9	Pdf Seite ist anspringbar durch Kennzahlen-Tabelle	2025-06-03 22:03:21 +02:00