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

Lade Daten der kpi für kennzahlen-tabelle #65

Merged
3019483 merged 1 commits from #56-data-fetching-part-2 into main 2025-06-14 10:33:43 +02:00
Conversation 0 Commits 1 Files Changed 5
5 changed files with 377 additions and 321 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -1,3 +1,4 @@
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";
@ -20,19 +21,10 @@ 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;
@ -48,6 +40,7 @@ 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("");
@ -148,7 +141,8 @@ export default function KennzahlenTable({
</TableHead> </TableHead>
<TableBody> <TableBody>
{SETTINGS.filter((setting) => setting.active) {settings
.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,
@ -157,7 +151,8 @@ 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 = row.setting.mandatory && const hasNoValue =
row.setting.mandatory &&
(row.extractedValues.length === 0 || (row.extractedValues.length === 0 ||
row.extractedValues.at(0)?.entity === ""); row.extractedValues.at(0)?.entity === "");
@ -188,7 +183,8 @@ export default function KennzahlenTable({
<Tooltip <Tooltip
title={ title={
<> <>
<b>Problem</b><br /> <b>Problem</b>
<br />
Mehrere Werte für die Kennzahl gefunden. Mehrere Werte für die Kennzahl gefunden.
</> </>
} }
@ -205,9 +201,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
@ -222,10 +218,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>
) : ( ) : (

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

@ -5,12 +5,15 @@ 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 } from "../util/query"; import { kpiQueryOptions, settingsQueryOptions } 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 } }) =>
queryClient.ensureQueryData(kpiQueryOptions(pitchBook)), Promise.allSettled([
queryClient.ensureQueryData(kpiQueryOptions(pitchBook)),
queryClient.ensureQueryData(settingsQueryOptions()),
]),
}); });
function ExtractedResultsPage() { function ExtractedResultsPage() {
@ -26,6 +29,7 @@ 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}>
@ -67,6 +71,7 @@ function ExtractedResultsPage() {
}} }}
> >
<KennzahlenTable <KennzahlenTable
settings={settings}
onPageClick={setCurrentPage} onPageClick={setCurrentPage}
data={kpi} data={kpi}
pdfId={pitchBook} pdfId={pitchBook}
@ -79,7 +84,7 @@ function ExtractedResultsPage() {
gap={3} gap={3}
sx={{ sx={{
width: "55%", width: "55%",
maxHeight: "95%" maxHeight: "95%",
}} }}
> >
<Paper <Paper
@ -93,7 +98,7 @@ function ExtractedResultsPage() {
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
overflow: "auto", overflow: "auto",
padding: 2 padding: 2,
}} }}
> >
<PDFViewer <PDFViewer
@ -102,7 +107,13 @@ function ExtractedResultsPage() {
onPageChange={setCurrentPage} onPageChange={setCurrentPage}
/> />
</Paper> </Paper>
<Box mt={2} display="flex" justifyContent="flex-end" gap={2} sx={{ flexShrink: 0 }}> <Box
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

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

@ -1,3 +1,5 @@
import type { Kennzahl } from "@/types/kpi";
export const fetchKPI = async ( export const fetchKPI = async (
pitchBookId: string, pitchBookId: string,
): Promise<{ ): Promise<{
@ -14,7 +16,7 @@ export const fetchKPI = async (
); );
const data = await response.json(); const data = await response.json();
return getKPI(data.kpi); return data.kpi ? getKPI(data.kpi) : {};
}; };
export const fetchPutKPI = async ( export const fetchPutKPI = async (
@ -95,3 +97,13 @@ 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,8 +1,14 @@
import { queryOptions } from "@tanstack/react-query"; import { queryOptions } from "@tanstack/react-query";
import { fetchKPI } from "./api"; import { fetchKPI, fetchKennzahlen } 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(),
});