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

Compare commits

base: PSE2_FF:41a37b3d7d0793ab511d52e6375d019007776716
Branches Tags
PSE2_FF:deployment_final
PSE2_FF:deploy_exxeta
PSE2_FF:main
PSE2_FF:deploy
..
compare: PSE2_FF:2009d5b6f384e881b86fc96cbec819da6f3bccb7
Branches Tags
PSE2_FF:deployment_final
PSE2_FF:deploy_exxeta
PSE2_FF:main
PSE2_FF:deploy

No commits in common. "41a37b3d7d0793ab511d52e6375d019007776716" and "2009d5b6f384e881b86fc96cbec819da6f3bccb7" have entirely different histories.
41a37b3d7d ... 2009d5b6f3

5 changed files with 321 additions and 377 deletions
Show Stats Expand all files Collapse all files

615
project/frontend/src/components/ConfigTable.tsx
View File

@ -1,353 +1,322 @@
import { Box, Tooltip, CircularProgress, Typography } from "@mui/material";
import DragIndicatorIcon from "@mui/icons-material/DragIndicator"; import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
import { Box, CircularProgress, Tooltip, Typography } from "@mui/material";
import { useNavigate } from "@tanstack/react-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useNavigate } from "@tanstack/react-router";
import type { Kennzahl } from "../types/kpi"; import type { Kennzahl } from "../types/kpi";
import { getDisplayType } from "../types/kpi"; import { getDisplayType } from "../types/kpi";
import { fetchKennzahlen as fetchK } from "../util/api";
export function ConfigTable() { export function ConfigTable() {
const navigate = useNavigate(); const navigate = useNavigate();
const [kennzahlen, setKennzahlen] = useState<Kennzahl[]>([]); const [kennzahlen, setKennzahlen] = useState<Kennzahl[]>([]);
const [draggedItem, setDraggedItem] = useState<Kennzahl | null>(null); const [draggedItem, setDraggedItem] = useState<Kennzahl | null>(null);
const [isUpdatingPositions, setIsUpdatingPositions] = useState(false); const [isUpdatingPositions, setIsUpdatingPositions] = useState(false);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
useEffect(() => { useEffect(() => {
const fetchKennzahlen = async () => { const fetchKennzahlen = async () => {
while (true) { while (true) {
try { try {
console.log("Fetching kennzahlen from API..."); console.log('Fetching kennzahlen from API...');
const data = await fetchK(); const response = await fetch(`http://localhost:5050/api/kpi_setting/`);
console.log("Fetched kennzahlen:", data); if (!response.ok) {
const sortedData = data.sort( throw new Error(`HTTP error! status: ${response.status}`);
(a: Kennzahl, b: Kennzahl) => a.position - b.position, }
);
setKennzahlen(sortedData);
setLoading(false);
break;
} catch (err) {
console.error("Error fetching kennzahlen:", err);
await new Promise((resolve) => setTimeout(resolve, 2000));
}
}
};
fetchKennzahlen(); const data = await response.json();
}, []); console.log('Fetched kennzahlen:', data);
const sortedData = data.sort((a: Kennzahl, b: Kennzahl) => a.position - b.position);
setKennzahlen(sortedData);
setLoading(false);
break;
} catch (err) {
console.error('Error fetching kennzahlen:', err);
await new Promise(resolve => setTimeout(resolve, 2000));
}
}
};
const handleToggleActive = async (id: number) => { fetchKennzahlen();
const kennzahl = kennzahlen.find((k) => k.id === id); }, []);
if (!kennzahl) return;
try { const handleToggleActive = async (id: number) => {
const response = await fetch( const kennzahl = kennzahlen.find(k => k.id === id);
`http://localhost:5050/api/kpi_setting/${id}`, if (!kennzahl) return;
{
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
active: !kennzahl.active,
}),
},
);
if (!response.ok) { try {
throw new Error(`HTTP error! status: ${response.status}`); const response = await fetch(`http://localhost:5050/api/kpi_setting/${id}`, {
} method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
active: !kennzahl.active
}),
});
const updatedKennzahl = await response.json(); if (!response.ok) {
setKennzahlen((prev) => throw new Error(`HTTP error! status: ${response.status}`);
prev.map((item) => (item.id === id ? updatedKennzahl : item)), }
);
} catch (err) {
console.error("Error toggling active status:", err);
setKennzahlen((prev) =>
prev.map((item) => (item.id === id ? kennzahl : item)),
);
}
};
const updatePositionsInBackend = async (reorderedKennzahlen: Kennzahl[]) => { const updatedKennzahl = await response.json();
setIsUpdatingPositions(true); setKennzahlen(prev =>
try { prev.map(item =>
const positionUpdates = reorderedKennzahlen.map((kennzahl, index) => ({ item.id === id ? updatedKennzahl : item
id: kennzahl.id, )
position: index + 1, );
})); } catch (err) {
console.error('Error toggling active status:', err);
setKennzahlen(prev =>
prev.map(item =>
item.id === id ? kennzahl : item
)
);
}
};
const response = await fetch( const updatePositionsInBackend = async (reorderedKennzahlen: Kennzahl[]) => {
`http://localhost:5050/api/kpi_setting/update-kpi-positions`, setIsUpdatingPositions(true);
{ try {
method: "PUT", const positionUpdates = reorderedKennzahlen.map((kennzahl, index) => ({
headers: { id: kennzahl.id,
"Content-Type": "application/json", position: index + 1
}, }));
body: JSON.stringify(positionUpdates),
},
);
if (!response.ok) { const response = await fetch(`http://localhost:5050/api/kpi_setting/update-kpi-positions`, {
throw new Error(`HTTP error! status: ${response.status}`); method: 'PUT',
} headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(positionUpdates),
});
const updatedKennzahlen = await response.json(); if (!response.ok) {
setKennzahlen(updatedKennzahlen); throw new Error(`HTTP error! status: ${response.status}`);
} catch (err) { }
console.error("Error updating positions:", err);
window.location.reload();
} finally {
setIsUpdatingPositions(false);
}
};
const handleDragStart = ( const updatedKennzahlen = await response.json();
e: React.DragEvent<HTMLTableRowElement>, setKennzahlen(updatedKennzahlen);
item: Kennzahl, } catch (err) {
) => { console.error('Error updating positions:', err);
setDraggedItem(item); window.location.reload();
e.dataTransfer.effectAllowed = "move"; } finally {
}; setIsUpdatingPositions(false);
}
};
const handleDragOver = (e: React.DragEvent<HTMLTableRowElement>) => { const handleDragStart = (e: React.DragEvent<HTMLTableRowElement>, item: Kennzahl) => {
e.preventDefault(); setDraggedItem(item);
e.dataTransfer.dropEffect = "move"; e.dataTransfer.effectAllowed = "move";
}; };
const handleDrop = async ( const handleDragOver = (e: React.DragEvent<HTMLTableRowElement>) => {
e: React.DragEvent<HTMLTableRowElement>, e.preventDefault();
targetItem: Kennzahl, e.dataTransfer.dropEffect = "move";
) => { };
e.preventDefault();
if (!draggedItem || draggedItem.id === targetItem.id) return;
const draggedIndex = kennzahlen.findIndex( const handleDrop = async (e: React.DragEvent<HTMLTableRowElement>, targetItem: Kennzahl) => {
(item) => item.id === draggedItem.id, e.preventDefault();
); if (!draggedItem || draggedItem.id === targetItem.id) return;
const targetIndex = kennzahlen.findIndex(
(item) => item.id === targetItem.id,
);
const newKennzahlen = [...kennzahlen]; const draggedIndex = kennzahlen.findIndex(item => item.id === draggedItem.id);
const [removed] = newKennzahlen.splice(draggedIndex, 1); const targetIndex = kennzahlen.findIndex(item => item.id === targetItem.id);
newKennzahlen.splice(targetIndex, 0, removed);
setKennzahlen(newKennzahlen); const newKennzahlen = [...kennzahlen];
setDraggedItem(null); const [removed] = newKennzahlen.splice(draggedIndex, 1);
await updatePositionsInBackend(newKennzahlen); newKennzahlen.splice(targetIndex, 0, removed);
};
const handleDragEnd = () => { setKennzahlen(newKennzahlen);
setDraggedItem(null); setDraggedItem(null);
}; await updatePositionsInBackend(newKennzahlen);
};
const handleRowClick = (kennzahl: Kennzahl, e: React.MouseEvent) => { const handleDragEnd = () => {
if (draggedItem || isUpdatingPositions) { setDraggedItem(null);
return; };
}
const target = e.target as HTMLElement; const handleRowClick = (kennzahl: Kennzahl, e: React.MouseEvent) => {
if ( if (draggedItem || isUpdatingPositions) {
target.tagName === "INPUT" && return;
(target as HTMLInputElement).type === "checkbox" }
) {
return;
}
if (target.closest(".drag-handle")) { const target = e.target as HTMLElement;
return; if (target.tagName === 'INPUT' && (target as HTMLInputElement).type === 'checkbox') {
} return;
}
console.log("Navigating to detail page for KPI:", kennzahl); if (target.closest('.drag-handle')) {
console.log("KPI ID:", kennzahl.id); return;
}
navigate({ console.log('Navigating to detail page for KPI:', kennzahl);
to: `/config-detail/$kpiId`, console.log('KPI ID:', kennzahl.id);
params: { kpiId: kennzahl.id.toString() },
});
};
if (loading) { navigate({
return ( to: `/config-detail/$kpiId`,
<Box params: { kpiId: kennzahl.id.toString() }
height="100vh" });
display="flex" };
justifyContent="center"
alignItems="center"
flexDirection="column"
mt={8}
>
<CircularProgress sx={{ color: "#383838", mb: 2 }} />
<Typography>Lade Kennzahlen-Konfiguration...</Typography>
</Box>
);
}
return ( if (loading) {
<Box return (
sx={{ <Box
width: "70%", height="100vh"
maxWidth: 800, display="flex"
borderRadius: 2, justifyContent="center"
boxShadow: "0 2px 8px rgba(0,0,0,0.1)", alignItems="center"
backgroundColor: "white", flexDirection="column"
overflow: "hidden", mt={8}
opacity: isUpdatingPositions ? 0.7 : 1, >
pointerEvents: isUpdatingPositions ? "none" : "auto", <CircularProgress sx={{ color: '#383838', mb: 2 }} />
}} <Typography>Lade Kennzahlen-Konfiguration...</Typography>
> </Box>
<table );
style={{ }
width: "100%",
borderCollapse: "collapse", return (
}} <Box
> sx={{
<thead> width: "70%",
<tr style={{ backgroundColor: "#f5f5f5" }}> maxWidth: 800,
<th borderRadius: 2,
style={{ boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
padding: "16px 12px", backgroundColor: "white",
textAlign: "left", overflow: "hidden",
fontWeight: "bold", opacity: isUpdatingPositions ? 0.7 : 1,
width: "60px", pointerEvents: isUpdatingPositions ? 'none' : 'auto'
borderBottom: "1px solid #e0e0e0", }}
}} >
/> <table style={{
<th width: "100%",
style={{ borderCollapse: "collapse"
padding: "16px 12px", }}>
textAlign: "left", <thead>
fontWeight: "bold", <tr style={{ backgroundColor: "#f5f5f5" }}>
width: "80px", <th style={{
borderBottom: "1px solid #e0e0e0", padding: "16px 12px",
}} textAlign: "left",
> fontWeight: "bold",
Aktiv width: "60px",
</th> borderBottom: "1px solid #e0e0e0"
<th }}>
style={{ </th>
padding: "16px 12px", <th style={{
textAlign: "left", padding: "16px 12px",
fontWeight: "bold", textAlign: "left",
borderBottom: "1px solid #e0e0e0", fontWeight: "bold",
}} width: "80px",
> borderBottom: "1px solid #e0e0e0"
Name }}>
</th> Aktiv
<th </th>
style={{ <th style={{
padding: "16px 12px", padding: "16px 12px",
textAlign: "left", textAlign: "left",
fontWeight: "bold", fontWeight: "bold",
width: "160px", borderBottom: "1px solid #e0e0e0"
borderBottom: "1px solid #e0e0e0", }}>
}} Name
> </th>
Format <th style={{
</th> padding: "16px 12px",
</tr> textAlign: "left",
</thead> fontWeight: "bold",
<tbody> width: "160px",
{kennzahlen.map((kennzahl) => ( borderBottom: "1px solid #e0e0e0"
<tr }}>
key={kennzahl.id} Format
draggable={!isUpdatingPositions} </th>
onDragStart={(e) => handleDragStart(e, kennzahl)} </tr>
onDragOver={handleDragOver} </thead>
onDrop={(e) => handleDrop(e, kennzahl)} <tbody>
onDragEnd={handleDragEnd} {kennzahlen.map((kennzahl) => (
onClick={(e) => handleRowClick(kennzahl, e)} <tr
style={{ key={kennzahl.id}
borderBottom: "1px solid #e0e0e0", draggable={!isUpdatingPositions}
cursor: isUpdatingPositions ? "default" : "pointer", onDragStart={(e) => handleDragStart(e, kennzahl)}
backgroundColor: onDragOver={handleDragOver}
draggedItem?.id === kennzahl.id ? "#f0f0f0" : "white", onDrop={(e) => handleDrop(e, kennzahl)}
opacity: draggedItem?.id === kennzahl.id ? 0.5 : 1, onDragEnd={handleDragEnd}
}} onClick={(e) => handleRowClick(kennzahl, e)}
onMouseEnter={(e) => { style={{
if (!draggedItem && !isUpdatingPositions) { borderBottom: "1px solid #e0e0e0",
e.currentTarget.style.backgroundColor = "#f9f9f9"; cursor: isUpdatingPositions ? "default" : "pointer",
} backgroundColor: draggedItem?.id === kennzahl.id ? "#f0f0f0" : "white",
}} opacity: draggedItem?.id === kennzahl.id ? 0.5 : 1
onMouseLeave={(e) => { }}
if (!draggedItem && !isUpdatingPositions) { onMouseEnter={(e) => {
e.currentTarget.style.backgroundColor = "white"; if (!draggedItem && !isUpdatingPositions) {
} e.currentTarget.style.backgroundColor = "#f9f9f9";
}} }
> }}
<td style={{ padding: "12px", textAlign: "center" }}> onMouseLeave={(e) => {
<div className="drag-handle"> if (!draggedItem && !isUpdatingPositions) {
<Tooltip e.currentTarget.style.backgroundColor = "white";
title={ }
<> }}
<b>Neuanordnung der Kennzahlen</b> >
<br /> <td style={{ padding: "12px", textAlign: "center" }}>
Hier können Sie die Kennzahlen nach Belieben per Drag <div className="drag-handle">
and Drop neu anordnen. <Tooltip
</> title={
} <>
placement="left" <b>Neuanordnung der Kennzahlen</b><br />
arrow Hier können Sie die Kennzahlen nach Belieben per Drag and Drop neu anordnen.
> </>
<DragIndicatorIcon }
sx={{ placement="left"
color: isUpdatingPositions ? "#ccc" : "#999", arrow
cursor: isUpdatingPositions ? "default" : "grab", >
"&:active": { <DragIndicatorIcon
cursor: isUpdatingPositions ? "default" : "grabbing", sx={{
}, color: isUpdatingPositions ? "#ccc" : "#999",
}} cursor: isUpdatingPositions ? "default" : "grab",
/> "&:active": { cursor: isUpdatingPositions ? "default" : "grabbing" }
</Tooltip> }}
</div> />
</td> </Tooltip>
<td style={{ padding: "12px" }}> </div>
<input </td>
type="checkbox" <td style={{ padding: "12px" }}>
checked={kennzahl.active} <input
onChange={() => handleToggleActive(kennzahl.id)} type="checkbox"
disabled={isUpdatingPositions} checked={kennzahl.active}
style={{ onChange={() => handleToggleActive(kennzahl.id)}
width: "18px", disabled={isUpdatingPositions}
height: "18px", style={{
cursor: isUpdatingPositions ? "default" : "pointer", width: "18px",
accentColor: "#383838", height: "18px",
}} cursor: isUpdatingPositions ? "default" : "pointer",
onClick={(e) => e.stopPropagation()} accentColor: "#383838"
/> }}
</td> onClick={(e) => e.stopPropagation()}
<td />
style={{ </td>
padding: "12px", <td style={{
fontSize: "14px", padding: "12px",
color: "#333", fontSize: "14px",
}} color: "#333"
> }}>
<span title={`Click to view details (ID: ${kennzahl.id})`}> <span title={`Click to view details (ID: ${kennzahl.id})`}>
{kennzahl.name} {kennzahl.name}
</span> </span>
</td> </td>
<td style={{ padding: "12px" }}> <td style={{ padding: "12px" }}>
<span <span style={{
style={{ color: "#333",
color: "#333", padding: "4px 12px",
padding: "4px 12px", borderRadius: "16px",
borderRadius: "16px", fontSize: "12px",
fontSize: "12px", fontWeight: "500",
fontWeight: "500", border: "1px solid #ddd",
border: "1px solid #ddd", backgroundColor: "#f8f9fa"
backgroundColor: "#f8f9fa", }}>
}} {getDisplayType(kennzahl.type)}
> </span>
{getDisplayType(kennzahl.type)} </td>
</span> </tr>
</td> ))}
</tr> </tbody>
))} </table>
</tbody> </Box>
</table> );
</Box> }
);
}

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

@ -1,4 +1,3 @@
import type { Kennzahl } from "@/types/kpi";
import EditIcon from "@mui/icons-material/Edit"; import EditIcon from "@mui/icons-material/Edit";
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";
@ -21,10 +20,19 @@ import { useState } from "react";
import type { KeyboardEvent } from "react"; import type { KeyboardEvent } from "react";
import { fetchPutKPI } from "../util/api"; import { fetchPutKPI } from "../util/api";
const SETTINGS = [
{ name: "Rendite", position: 1, active: true, mandatory: true },
{ name: "Ausschüttungsrendite", position: 2, active: true, mandatory: true },
{ name: "Laufzeit", position: 3, active: true, mandatory: true },
{ name: "Länderallokation", position: 4, active: true, mandatory: true },
{ name: "Managmentgebühren", position: 5, active: true, mandatory: true },
{ name: "Risikoprofil", position: 6, active: false, mandatory: true },
{ name: "Irgendwas", position: 7, active: true, mandatory: true },
];
interface KennzahlenTableProps { interface KennzahlenTableProps {
onPageClick?: (page: number) => void; onPageClick?: (page: number) => void;
pdfId: string; pdfId: string;
settings: Kennzahl[];
data: { data: {
[key: string]: { [key: string]: {
label: string; label: string;
@ -40,7 +48,6 @@ export default function KennzahlenTable({
onPageClick, onPageClick,
data, data,
pdfId, pdfId,
settings,
}: KennzahlenTableProps) { }: KennzahlenTableProps) {
const [editingIndex, setEditingIndex] = useState<string>(""); const [editingIndex, setEditingIndex] = useState<string>("");
const [editValue, setEditValue] = useState(""); const [editValue, setEditValue] = useState("");
@ -141,8 +148,7 @@ export default function KennzahlenTable({
</TableHead> </TableHead>
<TableBody> <TableBody>
{settings {SETTINGS.filter((setting) => setting.active)
.filter((setting) => setting.active)
.sort((a, b) => a.position - b.position) .sort((a, b) => a.position - b.position)
.map((setting) => ({ .map((setting) => ({
setting: setting, setting: setting,
@ -151,8 +157,7 @@ export default function KennzahlenTable({
.map((row) => { .map((row) => {
let borderColor = "transparent"; let borderColor = "transparent";
const hasMultipleValues = row.extractedValues.length > 1; const hasMultipleValues = row.extractedValues.length > 1;
const hasNoValue = const hasNoValue = row.setting.mandatory &&
row.setting.mandatory &&
(row.extractedValues.length === 0 || (row.extractedValues.length === 0 ||
row.extractedValues.at(0)?.entity === ""); row.extractedValues.at(0)?.entity === "");
@ -183,8 +188,7 @@ export default function KennzahlenTable({
<Tooltip <Tooltip
title={ title={
<> <>
<b>Problem</b> <b>Problem</b><br />
<br />
Mehrere Werte für die Kennzahl gefunden. Mehrere Werte für die Kennzahl gefunden.
</> </>
} }
@ -201,9 +205,9 @@ export default function KennzahlenTable({
justifyContent: "space-between", justifyContent: "space-between",
width: "100%", width: "100%",
cursor: "pointer", cursor: "pointer",
"&:hover": { '&:hover': {
backgroundColor: "#f5f5f5", backgroundColor: '#f5f5f5'
}, }
}} }}
> >
<Box <Box
@ -218,10 +222,10 @@ export default function KennzahlenTable({
{row.extractedValues.at(0)?.entity || "—"} {row.extractedValues.at(0)?.entity || "—"}
</span> </span>
</Box> </Box>
<SearchIcon <SearchIcon
fontSize="small" fontSize="small"
sx={{ color: "#f6ed48" }} sx={{ color: "#f6ed48" }}
/> />
</Box> </Box>
</Tooltip> </Tooltip>
) : ( ) : (
@ -300,4 +304,4 @@ export default function KennzahlenTable({
</Table> </Table>
</TableContainer> </TableContainer>
); );
} }

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

@ -5,15 +5,12 @@ import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { useState } from "react"; import { useState } from "react";
import KennzahlenTable from "../components/KennzahlenTable"; import KennzahlenTable from "../components/KennzahlenTable";
import PDFViewer from "../components/pdfViewer"; import PDFViewer from "../components/pdfViewer";
import { kpiQueryOptions, settingsQueryOptions } from "../util/query"; import { kpiQueryOptions } from "../util/query";
export const Route = createFileRoute("/extractedResult/$pitchBook")({ export const Route = createFileRoute("/extractedResult/$pitchBook")({
component: ExtractedResultsPage, component: ExtractedResultsPage,
loader: ({ context: { queryClient }, params: { pitchBook } }) => loader: ({ context: { queryClient }, params: { pitchBook } }) =>
Promise.allSettled([ queryClient.ensureQueryData(kpiQueryOptions(pitchBook)),
queryClient.ensureQueryData(kpiQueryOptions(pitchBook)),
queryClient.ensureQueryData(settingsQueryOptions()),
]),
}); });
function ExtractedResultsPage() { function ExtractedResultsPage() {
@ -29,7 +26,6 @@ function ExtractedResultsPage() {
}[status]; }[status];
const { data: kpi } = useSuspenseQuery(kpiQueryOptions(pitchBook)); const { data: kpi } = useSuspenseQuery(kpiQueryOptions(pitchBook));
const { data: settings } = useSuspenseQuery(settingsQueryOptions());
return ( return (
<Box p={4}> <Box p={4}>
@ -71,7 +67,6 @@ function ExtractedResultsPage() {
}} }}
> >
<KennzahlenTable <KennzahlenTable
settings={settings}
onPageClick={setCurrentPage} onPageClick={setCurrentPage}
data={kpi} data={kpi}
pdfId={pitchBook} pdfId={pitchBook}
@ -84,7 +79,7 @@ function ExtractedResultsPage() {
gap={3} gap={3}
sx={{ sx={{
width: "55%", width: "55%",
maxHeight: "95%", maxHeight: "95%"
}} }}
> >
<Paper <Paper
@ -98,7 +93,7 @@ function ExtractedResultsPage() {
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
overflow: "auto", overflow: "auto",
padding: 2, padding: 2
}} }}
> >
<PDFViewer <PDFViewer
@ -107,13 +102,7 @@ function ExtractedResultsPage() {
onPageChange={setCurrentPage} onPageChange={setCurrentPage}
/> />
</Paper> </Paper>
<Box <Box mt={2} display="flex" justifyContent="flex-end" gap={2} sx={{ flexShrink: 0 }}>
mt={2}
display="flex"
justifyContent="flex-end"
gap={2}
sx={{ flexShrink: 0 }}
>
<Button variant="contained" sx={{ backgroundColor: "#383838" }}> <Button variant="contained" sx={{ backgroundColor: "#383838" }}>
<ContentPasteIcon sx={{ fontSize: 18, mr: 1 }} /> <ContentPasteIcon sx={{ fontSize: 18, mr: 1 }} />
Kennzahlenzeile kopieren Kennzahlenzeile kopieren
@ -130,4 +119,4 @@ function ExtractedResultsPage() {
</Box> </Box>
</Box> </Box>
); );
} }

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

@ -1,5 +1,3 @@
import type { Kennzahl } from "@/types/kpi";
export const fetchKPI = async ( export const fetchKPI = async (
pitchBookId: string, pitchBookId: string,
): Promise<{ ): Promise<{
@ -16,7 +14,7 @@ export const fetchKPI = async (
); );
const data = await response.json(); const data = await response.json();
return data.kpi ? getKPI(data.kpi) : {}; return getKPI(data.kpi);
}; };
export const fetchPutKPI = async ( export const fetchPutKPI = async (
@ -97,13 +95,3 @@ export const flattenKPIArray = (kpi: {
}) => { }) => {
return Object.values(kpi).flat(); return Object.values(kpi).flat();
}; };
export const fetchKennzahlen = async (): Promise<Kennzahl[]> => {
const response = await fetch("http://localhost:5050/api/kpi_setting/");
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data;
};

8
project/frontend/src/util/query.ts
View File

@ -1,14 +1,8 @@
import { queryOptions } from "@tanstack/react-query"; import { queryOptions } from "@tanstack/react-query";
import { fetchKPI, fetchKennzahlen } from "./api"; import { fetchKPI } from "./api";
export const kpiQueryOptions = (pitchBookId: string) => export const kpiQueryOptions = (pitchBookId: string) =>
queryOptions({ queryOptions({
queryKey: ["pitchBookKPI", pitchBookId], queryKey: ["pitchBookKPI", pitchBookId],
queryFn: () => fetchKPI(pitchBookId), queryFn: () => fetchKPI(pitchBookId),
}); });
export const settingsQueryOptions = () =>
queryOptions({
queryKey: ["pitchBookSettings"],
queryFn: () => fetchKennzahlen(),
});