PSE2_FF
/
pse2_ff
0
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

Mergekonflikt in KennzahlenTable.tsx bereinigt

pull/47/head
Abdulrahman Dabbagh 2025-06-05 00:43:16 +02:00
parent 08eb77d9d7 f81624b8ab
commit 0eddffcc0b
3 changed files with 135 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

253
project/frontend/src/components/KennzahlenTable.tsx
View File

@ -1,143 +1,130 @@
import { import {
Table, TableBody, TableCell, TableContainer, Table, TableBody, TableCell, TableContainer,
TableHead, TableRow, Paper, Box, TableHead, TableRow, Paper, Box,
Dialog, DialogActions, DialogContent, DialogTitle, Dialog, DialogActions, DialogContent, DialogTitle,
TextField, Button TextField, Button, Link
} from '@mui/material'; } from '@mui/material';
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'; import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
import SearchIcon from '@mui/icons-material/Search'; import SearchIcon from '@mui/icons-material/Search';
import EditIcon from '@mui/icons-material/Edit'; import EditIcon from '@mui/icons-material/Edit';
import { useState } from 'react'; import { useState } from 'react';
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: 'Ausschüttungsrendite', value: '4%', page: 34, status: 'ok' }
];
// Beispiel-Daten interface KennzahlenTableProps {
const exampleData = [ onPageClick?: (page: number) => void;
{ label: 'Fondsname', value: 'Fund Real Estate Prime Europe', page: 1, status: 'ok' }, setSelectedLabel?: (label: string) => void;
{ 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' }
];
// React-Komponente export default function KennzahlenTable({ onPageClick, setSelectedLabel }: KennzahlenTableProps) {
import { Dispatch, SetStateAction } from 'react'; const [rows, setRows] = useState(exampleData);
type Props = { const [open, setOpen] = useState(false);
setSelectedLabel: Dispatch<SetStateAction<string | null>>; const [currentValue, setCurrentValue] = useState('');
const [currentIndex, setCurrentIndex] = useState<number | null>(null);
const handleEditClick = (value: string, index: number) => {
setCurrentValue(value);
setCurrentIndex(index);
setOpen(true);
}; };
export default function KennzahlenTable({ setSelectedLabel }: Props) {
// Zustand für bearbeitbare Daten const handleSave = () => {
const [rows, setRows] = useState(exampleData); if (currentIndex !== null) {
const updated = [...rows];
updated[currentIndex].value = currentValue;
setRows(updated);
}
setOpen(false);
};
// Zustände für Dialog-Funktion return (
const [open, setOpen] = useState(false); // Dialog anzeigen? <>
const [currentValue, setCurrentValue] = useState(''); // Eingabewert <TableContainer component={Paper}>
const [currentIndex, setCurrentIndex] = useState<number | null>(null); // Zeilenindex <Table>
<TableHead>
<TableRow>
<TableCell><strong>Kennzahl</strong></TableCell>
<TableCell><strong>Wert</strong></TableCell>
<TableCell><strong>Seite</strong></TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row, index) => {
let borderColor = 'transparent';
if (row.status === 'error') borderColor = 'red';
else if (row.status === 'warning') borderColor = '#f6ed48';
// Beim Klick auf das Stift-Icon: Dialog öffnen return (
const handleEditClick = (value: string, index: number) => { <TableRow
setCurrentValue(value); key={index}
setCurrentIndex(index); onClick={() => setSelectedLabel?.(row.label)}
setOpen(true); hover
}; sx={{ cursor: 'pointer' }}
>
// Wert speichern und Dialog schließen <TableCell>{row.label}</TableCell>
const handleSave = () => { <TableCell>
if (currentIndex !== null) { <Box
const updated = [...rows]; sx={{
updated[currentIndex].value = currentValue; border: `2px solid ${borderColor}`,
setRows(updated); borderRadius: 1,
} padding: '4px 8px',
setOpen(false); display: 'flex',
}; alignItems: 'center',
justifyContent: 'space-between',
return ( width: '100%',
<> }}
<TableContainer component={Paper}> >
<Table> <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
{/* Tabellenkopf */} {row.status === 'error' && <ErrorOutlineIcon fontSize="small" color="error" />}
<TableHead> {row.status === 'warning' && <SearchIcon fontSize="small" sx={{ color: '#f6ed48' }} />}
<TableRow> <span>{row.value || '—'}</span>
<TableCell><strong>Kennzahl</strong></TableCell>
<TableCell><strong>Wert</strong></TableCell>
<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';
return (
<TableRow
key={index}
onClick={() => setSelectedLabel(row.label)}
hover
sx={{ cursor: 'pointer' }}
>
{/* Kennzahl */}
<TableCell>{row.label}</TableCell>
{/* Wert mit Status-Icons + Stift rechts */}
<TableCell>
<Box
sx={{
border: `2px solid ${borderColor}`,
borderRadius: 1,
padding: '4px 8px',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
width: '100%',
}}
>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
{row.status === 'error' && <ErrorOutlineIcon fontSize="small" color="error" />}
{row.status === 'warning' && <SearchIcon fontSize="small" sx={{ color: '#f6ed48' }} />}
<span>{row.value || '—'}</span>
</Box>
{/* Stift-Icon */}
<EditIcon
fontSize="small"
sx={{ color: '#555', cursor: 'pointer' }}
onClick={() => handleEditClick(row.value, index)}
/>
</Box> </Box>
</TableCell> <EditIcon
fontSize="small"
{/* Seitenzahl */} sx={{ color: '#555', cursor: 'pointer' }}
<TableCell>{row.page}</TableCell> onClick={() => handleEditClick(row.value, index)}
</TableRow> />
); </Box>
})} </TableCell>
</TableBody> <TableCell>
</Table> <Link
</TableContainer> component="button"
onClick={() => onPageClick?.(row.page)}
{/* Dialog zum Bearbeiten */} sx={{ cursor: 'pointer' }}
<Dialog open={open} onClose={() => setOpen(false)}> >
<DialogTitle>Kennzahl bearbeiten</DialogTitle> {row.page}
<DialogContent> </Link>
<TextField </TableCell>
fullWidth </TableRow>
value={currentValue} );
onChange={(e) => setCurrentValue(e.target.value)} })}
label="Neuer Wert" </TableBody>
variant="outlined" </Table>
margin="dense" </TableContainer>
/>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpen(false)}>Abbrechen</Button>
<Button onClick={handleSave} variant="contained">Speichern</Button>
</DialogActions>
</Dialog>
</>
);
}
<Dialog open={open} onClose={() => setOpen(false)}>
<DialogTitle>Kennzahl bearbeiten</DialogTitle>
<DialogContent>
<TextField
fullWidth
value={currentValue}
onChange={(e) => setCurrentValue(e.target.value)}
label="Neuer Wert"
variant="outlined"
margin="dense"
/>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpen(false)}>Abbrechen</Button>
<Button onClick={handleSave} variant="contained">Speichern</Button>
</DialogActions>
</Dialog>
</>
);
}

29
project/frontend/src/components/pdfViewer.tsx
View File

@ -28,7 +28,7 @@ export default function PDFViewer({ pitchBookId, currentPage }: PDFViewerProps)
setNumPages(numPages); setNumPages(numPages);
}; };
// Update PDF width on resize // Container-Größe berechnen
useEffect(() => { useEffect(() => {
const updateWidth = () => { const updateWidth = () => {
if (containerRef.current) { if (containerRef.current) {
@ -41,7 +41,7 @@ export default function PDFViewer({ pitchBookId, currentPage }: PDFViewerProps)
return () => window.removeEventListener("resize", updateWidth); return () => window.removeEventListener("resize", updateWidth);
}, []); }, []);
// Highlight search logic // Highlight-Logik
useEffect(() => { useEffect(() => {
setHighlightLabels(["LTV", "Fondsmanager", "Risikoprofil"]); setHighlightLabels(["LTV", "Fondsmanager", "Risikoprofil"]);
}, []); }, []);
@ -59,7 +59,7 @@ export default function PDFViewer({ pitchBookId, currentPage }: PDFViewerProps)
[highlightLabels] [highlightLabels]
); );
// Update page if prop changes // Seite ändern, wenn Prop sich ändert
useEffect(() => { useEffect(() => {
if (currentPage && currentPage !== pageNumber) { if (currentPage && currentPage !== pageNumber) {
setPageNumber(currentPage); setPageNumber(currentPage);
@ -67,15 +67,7 @@ export default function PDFViewer({ pitchBookId, currentPage }: PDFViewerProps)
}, [currentPage]); }, [currentPage]);
return ( return (
<Box <Box display="flex" flexDirection="column" justifyContent="center" alignItems="center" width="100%" height="100%" p={2}>
display="flex"
flexDirection="column"
justifyContent="center"
alignItems="center"
width="100%"
height="100%"
p={2}
>
<Box <Box
ref={containerRef} ref={containerRef}
sx={{ sx={{
@ -102,23 +94,14 @@ export default function PDFViewer({ pitchBookId, currentPage }: PDFViewerProps)
)} )}
</Document> </Document>
</Box> </Box>
<Box <Box mt={2} display="flex" alignItems="center" justifyContent="center" gap={1}>
mt={2}
display="flex"
alignItems="center"
justifyContent="center"
gap={1}
>
<IconButton disabled={pageNumber <= 1} onClick={() => setPageNumber((p) => p - 1)}> <IconButton disabled={pageNumber <= 1} onClick={() => setPageNumber((p) => p - 1)}>
<ArrowCircleLeftIcon fontSize="large" /> <ArrowCircleLeftIcon fontSize="large" />
</IconButton> </IconButton>
<span> <span>
{pageNumber} / {numPages} {pageNumber} / {numPages}
</span> </span>
<IconButton <IconButton disabled={pageNumber >= (numPages || 1)} onClick={() => setPageNumber((p) => p + 1)}>
disabled={pageNumber >= (numPages || 1)}
onClick={() => setPageNumber((p) => p + 1)}
>
<ArrowCircleRightIcon fontSize="large" /> <ArrowCircleRightIcon fontSize="large" />
</IconButton> </IconButton>
</Box> </Box>

6
project/frontend/src/routes/extractedResult.$pitchBook.tsx
View File

@ -1,6 +1,7 @@
import ContentPasteIcon from "@mui/icons-material/ContentPaste"; import ContentPasteIcon from "@mui/icons-material/ContentPaste";
import { Box, Button, Paper, Typography } from "@mui/material"; import { Box, Button, Paper, Typography } from "@mui/material";
import { createFileRoute, useNavigate } from "@tanstack/react-router"; import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { useState } from "react";
import KennzahlenTable from "../components/KennzahlenTable"; import KennzahlenTable from "../components/KennzahlenTable";
import PDFViewer from "../components/pdfViewer"; import PDFViewer from "../components/pdfViewer";
@ -12,6 +13,7 @@ function ExtractedResultsPage() {
const { pitchBook } = Route.useParams(); const { pitchBook } = Route.useParams();
const navigate = useNavigate(); const navigate = useNavigate();
const status: "green" | "yellow" | "red" = "red"; const status: "green" | "yellow" | "red" = "red";
const [currentPage, setCurrentPage] = useState(1);
const statusColor = { const statusColor = {
red: "#f43131", red: "#f43131",
@ -58,7 +60,7 @@ function ExtractedResultsPage() {
overflow: "auto", overflow: "auto",
}} }}
> >
<KennzahlenTable /> <KennzahlenTable onPageClick={setCurrentPage} />
</Paper> </Paper>
<Box <Box
display="flex" display="flex"
@ -78,7 +80,7 @@ function ExtractedResultsPage() {
justifyContent: "center", justifyContent: "center",
}} }}
> >
<PDFViewer pitchBookId={pitchBook} /> <PDFViewer pitchBookId={pitchBook} currentPage={currentPage} />
</Paper> </Paper>
<Box mt={2} display="flex" justifyContent="flex-end" gap={2}> <Box mt={2} display="flex" justifyContent="flex-end" gap={2}>
<Button variant="contained" sx={{ backgroundColor: "#383838" }}> <Button variant="contained" sx={{ backgroundColor: "#383838" }}>