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

Fix merge commit 2

pull/80/head
Zainab2604 2025-06-22 13:43:56 +02:00
parent f6747e45ac
commit 64426a5f83
4 changed files with 587 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -42,25 +42,43 @@ export default function KennzahlenTable({
data, data,
pdfId, pdfId,
settings, settings,
from from,
}: KennzahlenTableProps) { }: KennzahlenTableProps) {
const [editingIndex, setEditingIndex] = useState<string>(""); const [editingIndex, setEditingIndex] = useState<string>("");
const [editValue, setEditValue] = useState(""); const [editValue, setEditValue] = useState("");
const [editingPageIndex, setEditingPageIndex] = useState<string>("");
const [editPageValue, setEditPageValue] = useState("");
const [hoveredPageIndex, setHoveredPageIndex] = useState<string>("");
const navigate = useNavigate(); const navigate = useNavigate();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { mutate } = useMutation({ const { mutate } = useMutation({
mutationFn: (id: string) => { mutationFn: (params: { id: string; newValue?: string; newPage?: number }) => {
const { id, newValue, newPage } = params;
const key = id.toUpperCase(); const key = id.toUpperCase();
const updatedData = { ...data }; const updatedData = { ...data };
updatedData[key] = data[key]?.map((item) => ({
...item, if (data[key] && data[key].length > 0) {
entity: editValue, updatedData[key] = data[key].map((item) => ({
})) || [{ label: key, entity: editValue }]; ...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); 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({ await queryClient.cancelQueries({
queryKey: ["pitchBookKPI", pdfId], queryKey: ["pitchBookKPI", pdfId],
}); });
@ -71,10 +89,23 @@ export default function KennzahlenTable({
queryClient.setQueryData(["pitchBookKPI", pdfId], () => { queryClient.setQueryData(["pitchBookKPI", pdfId], () => {
const updatedData = { ...data }; const updatedData = { ...data };
updatedData[key] = data[key]?.map((item) => ({
...item, if (data[key] && data[key].length > 0) {
entity: editValue, updatedData[key] = data[key].map((item) => ({
})) || [{ label: key, entity: editValue }]; ...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; return updatedData;
}); });
@ -99,19 +130,39 @@ export default function KennzahlenTable({
setEditValue(value); setEditValue(value);
}; };
const startPageEditing = (value: number, index: string) => {
setEditingPageIndex(index);
setEditPageValue(value.toString());
};
// Bearbeitung beenden und Wert speichern // Bearbeitung beenden und Wert speichern
const handleSave = async (index: string) => { const handleSave = async (index: string) => {
// await updateKennzahl(rows[index].label, editValue); mutate({ id: index, newValue: editValue });
mutate(index);
setEditingIndex(""); setEditingIndex("");
}; };
const handlePageSave = async (index: string) => {
const pageNumber = parseInt(editPageValue);
if (!isNaN(pageNumber) && pageNumber > 0) {
mutate({ id: index, newPage: pageNumber });
}
setEditingPageIndex("");
};
// Tastatureingaben verarbeiten // Tastatureingaben verarbeiten
const handleKeyPress = (e: KeyboardEvent<HTMLDivElement>, index: string) => { const handleKeyPress = (e: KeyboardEvent<HTMLDivElement>, index: string) => {
if (e.key === "Enter") { if (e.key === "Enter") {
handleSave(index); handleSave(index);
} else if (e.key === "Escape") { } 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("");
} }
}; };
@ -131,14 +182,16 @@ export default function KennzahlenTable({
<Table> <Table>
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell> <TableCell width="25%">
<strong>Kennzahl</strong> <strong>Kennzahl</strong>
</TableCell> </TableCell>
<TableCell> <TableCell width="60%">
<strong>Wert</strong> <strong>Wert</strong>
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center" width="15%">
<strong>Seite</strong> <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 1 }}>
<strong>Seite</strong>
</Box>
</TableCell> </TableCell>
</TableRow> </TableRow>
</TableHead> </TableHead>
@ -165,6 +218,10 @@ export default function KennzahlenTable({
borderColor = "#f6ed48"; borderColor = "#f6ed48";
} }
const currentPage = row.extractedValues.at(0)?.page ?? 0;
const isPageHovered = hoveredPageIndex === row.setting.name;
const canEditPage = !hasMultipleValues;
return ( return (
<TableRow key={row.setting.name}> <TableRow key={row.setting.name}>
<TableCell>{row.setting.name}</TableCell> <TableCell>{row.setting.name}</TableCell>
@ -229,12 +286,17 @@ export default function KennzahlenTable({
</Tooltip> </Tooltip>
) : ( ) : (
<Tooltip <Tooltip
title={hasNoValue ? title={
<> hasNoValue ? (
<b>Problem</b> <>
<br /> <b>Problem</b>
Es wurden keine Kennzahlen gefunden. Bitte ergänzen! <br />
</> : "" Es wurden keine Kennzahlen gefunden. Bitte
ergänzen!
</>
) : (
""
)
} }
placement="bottom" placement="bottom"
arrow arrow
@ -261,7 +323,10 @@ export default function KennzahlenTable({
}} }}
> >
{hasNoValue && ( {hasNoValue && (
<ErrorOutlineIcon fontSize="small" color="error" /> <ErrorOutlineIcon
fontSize="small"
color="error"
/>
)} )}
{editingIndex === row.setting.name ? ( {editingIndex === row.setting.name ? (
<TextField <TextField
@ -300,21 +365,115 @@ export default function KennzahlenTable({
)} )}
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center">
{(row.extractedValues.at(0)?.page ?? 0) > 0 ? ( {editingPageIndex === row.setting.name ? (
<Link <TextField
component="button" value={editPageValue}
onClick={() => { onChange={(e) => {
const extractedValue = row.extractedValues.at(0); const value = e.target.value;
if (extractedValue?.page && extractedValue.page > 0) { if (value === '' || /^\d+$/.test(value) && parseInt(value) > 0) {
onPageClick?.(Number(extractedValue.page), extractedValue.entity || ""); setEditPageValue(value);
} }
}} }}
sx={{ cursor: "pointer" }} onKeyDown={(e) => handlePageKeyPress(e, row.setting.name)}
> onBlur={() => handlePageSave(row.setting.name)}
{row.extractedValues.at(0)?.page} autoFocus
</Link> 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> </TableCell>
</TableRow> </TableRow>
@ -324,4 +483,4 @@ export default function KennzahlenTable({
</Table> </Table>
</TableContainer> </TableContainer>
); );
} }

542
project/frontend/src/components/PitchBooksTable.tsx
View File

@ -1,186 +1,388 @@
import { Box, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography, CircularProgress, Chip } from "@mui/material"; import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import { useSuspenseQuery } from "@tanstack/react-query"; import HourglassEmptyIcon from "@mui/icons-material/HourglassEmpty";
import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
import {
Box,
Chip,
CircularProgress,
LinearProgress,
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Typography,
} from "@mui/material";
import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
import { useNavigate } from "@tanstack/react-router"; import { useNavigate } from "@tanstack/react-router";
import { useCallback, useEffect, useState } from "react";
import { socket } from "../socket";
import { fetchPitchBooksById } from "../util/api";
import { pitchBooksQueryOptions } from "../util/query"; import { pitchBooksQueryOptions } from "../util/query";
import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import HourglassEmptyIcon from '@mui/icons-material/HourglassEmpty';
interface PitchBook { interface PitchBook {
id: number; id: number;
filename: string; filename: string;
created_at: string; created_at: string;
kpi?: string | { kpi?:
[key: string]: { | string
label: string; | {
entity: string; [key: string]: {
page: number; label: string;
status: string; entity: string;
source: string; page: number;
}[]; status: string;
}; source: string;
status?: 'processing' | 'completed'; }[];
};
status?: "processing" | "completed";
} }
export function PitchBooksTable() { export function PitchBooksTable() {
const navigate = useNavigate(); const [loadingPitchBooks, setLoadingPitchBooks] = useState<
const { data: pitchBooks, isLoading } = useSuspenseQuery(pitchBooksQueryOptions()); {
id: number;
progress: number;
filename?: string;
buffer: number;
intervalId?: number;
}[]
>([]);
const navigate = useNavigate();
const { data: pitchBooks, isLoading } = useSuspenseQuery(
pitchBooksQueryOptions(),
);
const handleRowClick = (pitchBookId: number) => { const handleRowClick = (pitchBookId: number) => {
navigate({ navigate({
to: "/extractedResult/$pitchBook", to: "/extractedResult/$pitchBook",
params: { pitchBook: pitchBookId.toString() }, params: { pitchBook: pitchBookId.toString() },
search: { from: "overview" } search: { from: "overview" },
}); });
}; };
const getKPIValue = (pitchBook: PitchBook, fieldName: string): string => { const onConnection = useCallback(() => {
if (!pitchBook.kpi || typeof pitchBook.kpi === 'string') { console.log("connected");
try { }, []);
const parsedKPI = JSON.parse(pitchBook.kpi as string);
// Convert array to object format if needed
const kpiObj = Array.isArray(parsedKPI) ?
parsedKPI.reduce((acc: any, item: any) => {
if (!acc[item.label]) acc[item.label] = [];
acc[item.label].push(item);
return acc;
}, {}) : parsedKPI;
return kpiObj[fieldName]?.[0]?.entity || 'N/A'; const queryClient = useQueryClient();
} catch {
return 'N/A';
}
}
return (pitchBook.kpi as any)[fieldName]?.[0]?.entity || 'N/A'; const onProgress = useCallback(
}; (progress: { id: number; progress: number }) => {
if (progress.progress === 100) {
setLoadingPitchBooks((prev) => {
const intervalId = prev.find(
(item) => item.id === progress.id,
)?.intervalId;
console.log(intervalId, prev);
intervalId && clearInterval(intervalId);
const getStatus = (pitchBook: PitchBook) => { return [...prev.filter((item) => item.id !== progress.id)];
if (pitchBook.kpi && });
((typeof pitchBook.kpi === 'string' && pitchBook.kpi !== '{}') || queryClient.invalidateQueries({
(typeof pitchBook.kpi === 'object' && Object.keys(pitchBook.kpi).length > 0))) { queryKey: pitchBooksQueryOptions().queryKey,
return 'completed'; });
} } else {
return 'processing'; setLoadingPitchBooks((prev) => {
}; const oldItem = prev.find((item) => item.id === progress.id);
let intervalId = oldItem?.intervalId;
if (!oldItem) {
intervalId = setInterval(() => {
setLoadingPitchBooks((prev) => {
const oldItem = prev.find((item) => item.id === progress.id);
if (!oldItem) return prev;
if (isLoading) { return [
return ( ...prev.filter((e) => e.id !== progress.id),
<Box display="flex" justifyContent="center" alignItems="center" height="400px"> {
<CircularProgress sx={{ color: "#383838" }} /> id: progress.id,
</Box> progress: oldItem?.progress ?? progress.progress,
); filename: oldItem?.filename,
} buffer: oldItem ? oldItem.buffer + 0.5 : 0,
intervalId: oldItem.intervalId,
},
];
});
}, 400);
return ( fetchPitchBooksById(progress.id)
<TableContainer .then((res) => {
component={Paper} setLoadingPitchBooks((prev) => [
sx={{ ...prev.filter((item) => item.id !== progress.id),
width: "85%", {
maxWidth: 1200, id: progress.id,
boxShadow: "0 2px 8px rgba(0,0,0,0.1)", progress: progress.progress,
}} filename: res.filename,
> buffer: 0,
<Table> intervalId,
<TableHead> },
<TableRow sx={{ backgroundColor: "#f5f5f5" }}> ]);
<TableCell sx={{ width: "60px" }}></TableCell> })
<TableCell sx={{ fontWeight: "bold" }}>Fondsname</TableCell> .catch((err) => {
<TableCell sx={{ fontWeight: "bold" }}>Fondsmanager</TableCell> console.error(err);
<TableCell sx={{ fontWeight: "bold" }}>Dateiname</TableCell> });
<TableCell sx={{ fontWeight: "bold", width: "120px" }}>Status</TableCell> }
</TableRow> return [
</TableHead> ...prev.filter((item) => item.id !== progress.id),
<TableBody> {
{pitchBooks.map((pitchBook: PitchBook) => { id: progress.id,
const status = getStatus(pitchBook); progress: progress.progress,
const fundName = getKPIValue(pitchBook, 'FONDSNAME') || filename: oldItem?.filename,
getKPIValue(pitchBook, 'FUND_NAME') || buffer: 0,
getKPIValue(pitchBook, 'NAME'); intervalId,
},
];
});
}
},
[queryClient],
);
const manager = getKPIValue(pitchBook, 'FONDSMANAGER') || useEffect(() => {
getKPIValue(pitchBook, 'MANAGER') || socket.on("connect", onConnection);
getKPIValue(pitchBook, 'PORTFOLIO_MANAGER'); socket.on("progress", onProgress);
return () => {
socket.off("connect", onConnection);
socket.off("progress", onProgress);
};
}, [onConnection, onProgress]);
return ( const getKPIValue = (pitchBook: PitchBook, fieldName: string): string => {
<TableRow if (!pitchBook.kpi || typeof pitchBook.kpi === "string") {
key={pitchBook.id} try {
onClick={() => handleRowClick(pitchBook.id)} const parsedKPI = JSON.parse(pitchBook.kpi as string);
sx={{ // Convert array to object format if needed
cursor: "pointer", const kpiObj = Array.isArray(parsedKPI)
"&:hover": { ? parsedKPI.reduce((acc, item) => {
backgroundColor: "#f9f9f9", if (!acc[item.label]) acc[item.label] = [];
}, acc[item.label].push(item);
}} return acc;
> }, {})
<TableCell> : parsedKPI;
<Box
sx={{ return kpiObj[fieldName]?.[0]?.entity || "N/A";
width: 40, } catch {
height: 50, return "N/A";
backgroundColor: "#f0f0f0", }
borderRadius: 1, }
display: "flex",
alignItems: "center", return pitchBook.kpi[fieldName]?.[0]?.entity || "N/A";
justifyContent: "center", };
border: "1px solid #e0e0e0",
}} const getStatus = (pitchBook: PitchBook) => {
> if (
<PictureAsPdfIcon fontSize="small" sx={{ color: "#666" }} /> pitchBook.kpi &&
</Box> ((typeof pitchBook.kpi === "string" && pitchBook.kpi !== "{}") ||
</TableCell> (typeof pitchBook.kpi === "object" &&
<TableCell> Object.keys(pitchBook.kpi).length > 0))
<Typography variant="body2" fontWeight="medium"> ) {
{fundName} return "completed";
</Typography> }
</TableCell> return "processing";
<TableCell>{manager}</TableCell> };
<TableCell>
<Typography variant="body2" color="text.secondary" fontSize="0.875rem"> if (isLoading) {
{pitchBook.filename} return (
</Typography> <Box
</TableCell> display="flex"
<TableCell> justifyContent="center"
{status === 'completed' ? ( alignItems="center"
<Chip height="400px"
icon={<CheckCircleIcon />} >
label="Abgeschlossen" <CircularProgress sx={{ color: "#383838" }} />
size="small" </Box>
sx={{ );
backgroundColor: "#e8f5e9", }
color: "#2e7d32",
"& .MuiChip-icon": { return (
color: "#2e7d32", <TableContainer
}, component={Paper}
}} sx={{
/> width: "85%",
) : ( maxWidth: 1200,
<Chip boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
icon={<HourglassEmptyIcon />} }}
label="In Bearbeitung" >
size="small" <Table>
sx={{ <TableHead>
backgroundColor: "#fff3e0", <TableRow sx={{ backgroundColor: "#f5f5f5" }}>
color: "#e65100", <TableCell sx={{ width: "60px" }} />
"& .MuiChip-icon": { <TableCell sx={{ fontWeight: "bold" }}>Fondsname</TableCell>
color: "#e65100", <TableCell sx={{ fontWeight: "bold" }}>Fondsmanager</TableCell>
}, <TableCell sx={{ fontWeight: "bold" }}>Dateiname</TableCell>
}} <TableCell sx={{ fontWeight: "bold", width: "120px" }}>
/> Status
)} </TableCell>
</TableCell> </TableRow>
</TableRow> </TableHead>
); <TableBody>
})} {pitchBooks
</TableBody> .filter(
</Table> (pitchbook: PitchBook) =>
{pitchBooks.length === 0 && ( !loadingPitchBooks.some((e) => e.id === pitchbook.id),
<Box p={4} textAlign="center"> )
<Typography color="text.secondary"> .sort(
Keine Pitch Books vorhanden (a: PitchBook, b: PitchBook) =>
</Typography> new Date(a.created_at).getTime() -
</Box> new Date(b.created_at).getTime(),
)} )
</TableContainer> .map((pitchBook: PitchBook) => {
); const status = getStatus(pitchBook);
} const fundName =
getKPIValue(pitchBook, "FONDSNAME") ||
getKPIValue(pitchBook, "FUND_NAME") ||
getKPIValue(pitchBook, "NAME");
const manager =
getKPIValue(pitchBook, "FONDSMANAGER") ||
getKPIValue(pitchBook, "MANAGER") ||
getKPIValue(pitchBook, "PORTFOLIO_MANAGER");
return (
<TableRow
key={pitchBook.id}
onClick={() => handleRowClick(pitchBook.id)}
sx={{
cursor: "pointer",
"&:hover": {
backgroundColor: "#f9f9f9",
},
}}
>
<TableCell>
<Box
sx={{
width: 40,
height: 50,
backgroundColor: "#f0f0f0",
borderRadius: 1,
display: "flex",
alignItems: "center",
justifyContent: "center",
border: "1px solid #e0e0e0",
}}
>
<PictureAsPdfIcon
fontSize="small"
sx={{ color: "#666" }}
/>
</Box>
</TableCell>
<TableCell>
<Typography variant="body2" fontWeight="medium">
{fundName}
</Typography>
</TableCell>
<TableCell>{manager}</TableCell>
<TableCell>
<Typography
variant="body2"
color="text.secondary"
fontSize="0.875rem"
>
{pitchBook.filename}
</Typography>
</TableCell>
<TableCell>
{status === "completed" ? (
<Chip
icon={<CheckCircleIcon />}
label="Abgeschlossen"
size="small"
sx={{
backgroundColor: "#e8f5e9",
color: "#2e7d32",
"& .MuiChip-icon": {
color: "#2e7d32",
},
}}
/>
) : (
<Chip
icon={<HourglassEmptyIcon />}
label="In Bearbeitung"
size="small"
sx={{
backgroundColor: "#fff3e0",
color: "#e65100",
"& .MuiChip-icon": {
color: "#e65100",
},
}}
/>
)}
</TableCell>
</TableRow>
);
})}
{loadingPitchBooks
.sort((a, b) => a.id - b.id)
.map((pitchBook) => (
<TableRow key={pitchBook.id}>
<TableCell>
<Box
sx={{
width: 40,
height: 50,
backgroundColor: "#f0f0f0",
borderRadius: 1,
display: "flex",
alignItems: "center",
justifyContent: "center",
border: "1px solid #e0e0e0",
}}
>
<PictureAsPdfIcon fontSize="small" sx={{ color: "#666" }} />
</Box>
</TableCell>
<TableCell colSpan={2}>
<LinearProgress
variant="buffer"
value={pitchBook.progress}
valueBuffer={
pitchBook.buffer
? pitchBook.progress + pitchBook.buffer
: pitchBook.progress
}
/>
</TableCell>
<TableCell>
{" "}
<Typography
variant="body2"
color="text.secondary"
fontSize="0.875rem"
>
{pitchBook.filename}
</Typography>
</TableCell>
<TableCell>
<Chip
icon={<HourglassEmptyIcon />}
label="In Bearbeitung"
size="small"
sx={{
backgroundColor: "#fff3e0",
color: "#e65100",
"& .MuiChip-icon": {
color: "#e65100",
},
}}
/>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
{pitchBooks.length === 0 && (
<Box p={4} textAlign="center">
<Typography color="text.secondary">
Keine Pitch Books vorhanden
</Typography>
</Box>
)}
</TableContainer>
);
}

6
project/frontend/src/components/UploadPage.tsx
View File

@ -1,11 +1,11 @@
import SettingsIcon from "@mui/icons-material/Settings"; import SettingsIcon from "@mui/icons-material/Settings";
import { Backdrop, Box, Button, IconButton, Paper } from "@mui/material"; import { Backdrop, Box, Button, IconButton, Paper } from "@mui/material";
import { useNavigate } from "@tanstack/react-router"; import { useNavigate, useRouter } from "@tanstack/react-router";
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import FileUpload from "react-material-file-upload"; import FileUpload from "react-material-file-upload";
import { socket } from "../socket"; import { socket } from "../socket";
import { CircularProgressWithLabel } from "./CircularProgressWithLabel";
import { API_HOST } from "../util/api"; import { API_HOST } from "../util/api";
import { CircularProgressWithLabel } from "./CircularProgressWithLabel";
export default function UploadPage() { export default function UploadPage() {
const [files, setFiles] = useState<File[]>([]); const [files, setFiles] = useState<File[]>([]);
@ -13,6 +13,7 @@ export default function UploadPage() {
const [loadingState, setLoadingState] = useState<number | null>(null); const [loadingState, setLoadingState] = useState<number | null>(null);
const fileTypes = ["pdf"]; const fileTypes = ["pdf"];
const navigate = useNavigate(); const navigate = useNavigate();
const router = useRouter();
const uploadFile = useCallback(async () => { const uploadFile = useCallback(async () => {
const formData = new FormData(); const formData = new FormData();
@ -178,6 +179,7 @@ export default function UploadPage() {
backgroundColor: "#383838", backgroundColor: "#383838",
"&:hover": { backgroundColor: "#2e2e2e" }, "&:hover": { backgroundColor: "#2e2e2e" },
}} }}
onMouseEnter={() => router.preloadRoute({ to: "/pitchbooks" })}
onClick={() => navigate({ to: "/pitchbooks" })} onClick={() => navigate({ to: "/pitchbooks" })}
> >
Alle Pitch Books anzeigen Alle Pitch Books anzeigen

25
project/frontend/src/util/api.ts
View File

@ -1,6 +1,6 @@
import type { Kennzahl } from "@/types/kpi"; import type { Kennzahl } from "@/types/kpi";
const API_HOST = import.meta.env.VITE_API_HOST || 'http://localhost:5050'; const API_HOST = import.meta.env.VITE_API_HOST || "http://localhost:5050";
export { API_HOST }; export { API_HOST };
@ -15,9 +15,7 @@ export const fetchKPI = async (
source: string; source: string;
}[]; }[];
}> => { }> => {
const response = await fetch( const response = await fetch(`${API_HOST}/api/pitch_book/${pitchBookId}`);
`${API_HOST}/api/pitch_book/${pitchBookId}`,
);
const data = await response.json(); const data = await response.json();
return data.kpi ? getKPI(data.kpi) : {}; return data.kpi ? getKPI(data.kpi) : {};
@ -46,13 +44,10 @@ export const fetchPutKPI = async (
const formData = new FormData(); const formData = new FormData();
formData.append("kpi", JSON.stringify(flattenKPIArray(kpi))); formData.append("kpi", JSON.stringify(flattenKPIArray(kpi)));
const response = await fetch( const response = await fetch(`${API_HOST}/api/pitch_book/${pitchBookId}`, {
`${API_HOST}/api/pitch_book/${pitchBookId}`, method: "PUT",
{ body: formData,
method: "PUT", });
body: formData,
},
);
if (!response.ok) { if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`); throw new Error(`HTTP error! status: ${response.status}`);
} }
@ -119,3 +114,11 @@ export async function fetchPitchBooks() {
} }
return response.json(); return response.json();
} }
export async function fetchPitchBooksById(id: number) {
const response = await fetch(`${API_HOST}/api/pitch_book/${id}`);
if (!response.ok) {
throw new Error("Failed to fetch pitch books");
}
return response.json();
}