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

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

@ -1,10 +1,9 @@
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();
@ -17,18 +16,21 @@ export function ConfigTable() {
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, }
);
const data = await response.json();
console.log('Fetched kennzahlen:', data);
const sortedData = data.sort((a: Kennzahl, b: Kennzahl) => a.position - b.position);
setKennzahlen(sortedData); setKennzahlen(sortedData);
setLoading(false); setLoading(false);
break; break;
} catch (err) { } catch (err) {
console.error("Error fetching kennzahlen:", err); console.error('Error fetching kennzahlen:', err);
await new Promise((resolve) => setTimeout(resolve, 2000)); await new Promise(resolve => setTimeout(resolve, 2000));
} }
} }
}; };
@ -37,35 +39,36 @@ export function ConfigTable() {
}, []); }, []);
const handleToggleActive = async (id: number) => { const handleToggleActive = async (id: number) => {
const kennzahl = kennzahlen.find((k) => k.id === id); const kennzahl = kennzahlen.find(k => k.id === id);
if (!kennzahl) return; if (!kennzahl) return;
try { try {
const response = await fetch( const response = await fetch(`http://localhost:5050/api/kpi_setting/${id}`, {
`http://localhost:5050/api/kpi_setting/${id}`, method: 'PUT',
{
method: "PUT",
headers: { headers: {
"Content-Type": "application/json", 'Content-Type': 'application/json',
}, },
body: JSON.stringify({ body: JSON.stringify({
active: !kennzahl.active, active: !kennzahl.active
}), }),
}, });
);
if (!response.ok) { if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`); throw new Error(`HTTP error! status: ${response.status}`);
} }
const updatedKennzahl = await response.json(); const updatedKennzahl = await response.json();
setKennzahlen((prev) => setKennzahlen(prev =>
prev.map((item) => (item.id === id ? updatedKennzahl : item)), prev.map(item =>
item.id === id ? updatedKennzahl : item
)
); );
} catch (err) { } catch (err) {
console.error("Error toggling active status:", err); console.error('Error toggling active status:', err);
setKennzahlen((prev) => setKennzahlen(prev =>
prev.map((item) => (item.id === id ? kennzahl : item)), prev.map(item =>
item.id === id ? kennzahl : item
)
); );
} }
}; };
@ -75,19 +78,16 @@ export function ConfigTable() {
try { try {
const positionUpdates = reorderedKennzahlen.map((kennzahl, index) => ({ const positionUpdates = reorderedKennzahlen.map((kennzahl, index) => ({
id: kennzahl.id, id: kennzahl.id,
position: index + 1, position: index + 1
})); }));
const response = await fetch( const response = await fetch(`http://localhost:5050/api/kpi_setting/update-kpi-positions`, {
`http://localhost:5050/api/kpi_setting/update-kpi-positions`, method: 'PUT',
{
method: "PUT",
headers: { headers: {
"Content-Type": "application/json", 'Content-Type': 'application/json',
}, },
body: JSON.stringify(positionUpdates), body: JSON.stringify(positionUpdates),
}, });
);
if (!response.ok) { if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`); throw new Error(`HTTP error! status: ${response.status}`);
@ -96,17 +96,14 @@ export function ConfigTable() {
const updatedKennzahlen = await response.json(); const updatedKennzahlen = await response.json();
setKennzahlen(updatedKennzahlen); setKennzahlen(updatedKennzahlen);
} catch (err) { } catch (err) {
console.error("Error updating positions:", err); console.error('Error updating positions:', err);
window.location.reload(); window.location.reload();
} finally { } finally {
setIsUpdatingPositions(false); setIsUpdatingPositions(false);
} }
}; };
const handleDragStart = ( const handleDragStart = (e: React.DragEvent<HTMLTableRowElement>, item: Kennzahl) => {
e: React.DragEvent<HTMLTableRowElement>,
item: Kennzahl,
) => {
setDraggedItem(item); setDraggedItem(item);
e.dataTransfer.effectAllowed = "move"; e.dataTransfer.effectAllowed = "move";
}; };
@ -116,19 +113,12 @@ export function ConfigTable() {
e.dataTransfer.dropEffect = "move"; e.dataTransfer.dropEffect = "move";
}; };
const handleDrop = async ( const handleDrop = async (e: React.DragEvent<HTMLTableRowElement>, targetItem: Kennzahl) => {
e: React.DragEvent<HTMLTableRowElement>,
targetItem: Kennzahl,
) => {
e.preventDefault(); e.preventDefault();
if (!draggedItem || draggedItem.id === targetItem.id) return; if (!draggedItem || draggedItem.id === targetItem.id) return;
const draggedIndex = kennzahlen.findIndex( const draggedIndex = kennzahlen.findIndex(item => item.id === draggedItem.id);
(item) => item.id === draggedItem.id, const targetIndex = kennzahlen.findIndex(item => item.id === targetItem.id);
);
const targetIndex = kennzahlen.findIndex(
(item) => item.id === targetItem.id,
);
const newKennzahlen = [...kennzahlen]; const newKennzahlen = [...kennzahlen];
const [removed] = newKennzahlen.splice(draggedIndex, 1); const [removed] = newKennzahlen.splice(draggedIndex, 1);
@ -149,23 +139,20 @@ export function ConfigTable() {
} }
const target = e.target as HTMLElement; const target = e.target as HTMLElement;
if ( if (target.tagName === 'INPUT' && (target as HTMLInputElement).type === 'checkbox') {
target.tagName === "INPUT" &&
(target as HTMLInputElement).type === "checkbox"
) {
return; return;
} }
if (target.closest(".drag-handle")) { if (target.closest('.drag-handle')) {
return; return;
} }
console.log("Navigating to detail page for KPI:", kennzahl); console.log('Navigating to detail page for KPI:', kennzahl);
console.log("KPI ID:", kennzahl.id); console.log('KPI ID:', kennzahl.id);
navigate({ navigate({
to: `/config-detail/$kpiId`, to: `/config-detail/$kpiId`,
params: { kpiId: kennzahl.id.toString() }, params: { kpiId: kennzahl.id.toString() }
}); });
}; };
@ -179,7 +166,7 @@ export function ConfigTable() {
flexDirection="column" flexDirection="column"
mt={8} mt={8}
> >
<CircularProgress sx={{ color: "#383838", mb: 2 }} /> <CircularProgress sx={{ color: '#383838', mb: 2 }} />
<Typography>Lade Kennzahlen-Konfiguration...</Typography> <Typography>Lade Kennzahlen-Konfiguration...</Typography>
</Box> </Box>
); );
@ -195,56 +182,47 @@ export function ConfigTable() {
backgroundColor: "white", backgroundColor: "white",
overflow: "hidden", overflow: "hidden",
opacity: isUpdatingPositions ? 0.7 : 1, opacity: isUpdatingPositions ? 0.7 : 1,
pointerEvents: isUpdatingPositions ? "none" : "auto", pointerEvents: isUpdatingPositions ? 'none' : 'auto'
}} }}
> >
<table <table style={{
style={{
width: "100%", width: "100%",
borderCollapse: "collapse", borderCollapse: "collapse"
}} }}>
>
<thead> <thead>
<tr style={{ backgroundColor: "#f5f5f5" }}> <tr style={{ backgroundColor: "#f5f5f5" }}>
<th <th style={{
style={{
padding: "16px 12px", padding: "16px 12px",
textAlign: "left", textAlign: "left",
fontWeight: "bold", fontWeight: "bold",
width: "60px", width: "60px",
borderBottom: "1px solid #e0e0e0", borderBottom: "1px solid #e0e0e0"
}} }}>
/> </th>
<th <th style={{
style={{
padding: "16px 12px", padding: "16px 12px",
textAlign: "left", textAlign: "left",
fontWeight: "bold", fontWeight: "bold",
width: "80px", width: "80px",
borderBottom: "1px solid #e0e0e0", borderBottom: "1px solid #e0e0e0"
}} }}>
>
Aktiv 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", borderBottom: "1px solid #e0e0e0"
}} }}>
>
Name Name
</th> </th>
<th <th style={{
style={{
padding: "16px 12px", padding: "16px 12px",
textAlign: "left", textAlign: "left",
fontWeight: "bold", fontWeight: "bold",
width: "160px", width: "160px",
borderBottom: "1px solid #e0e0e0", borderBottom: "1px solid #e0e0e0"
}} }}>
>
Format Format
</th> </th>
</tr> </tr>
@ -262,9 +240,8 @@ export function ConfigTable() {
style={{ style={{
borderBottom: "1px solid #e0e0e0", borderBottom: "1px solid #e0e0e0",
cursor: isUpdatingPositions ? "default" : "pointer", cursor: isUpdatingPositions ? "default" : "pointer",
backgroundColor: backgroundColor: draggedItem?.id === kennzahl.id ? "#f0f0f0" : "white",
draggedItem?.id === kennzahl.id ? "#f0f0f0" : "white", opacity: draggedItem?.id === kennzahl.id ? 0.5 : 1
opacity: draggedItem?.id === kennzahl.id ? 0.5 : 1,
}} }}
onMouseEnter={(e) => { onMouseEnter={(e) => {
if (!draggedItem && !isUpdatingPositions) { if (!draggedItem && !isUpdatingPositions) {
@ -282,10 +259,8 @@ export function ConfigTable() {
<Tooltip <Tooltip
title={ title={
<> <>
<b>Neuanordnung der Kennzahlen</b> <b>Neuanordnung der Kennzahlen</b><br />
<br /> Hier können Sie die Kennzahlen nach Belieben per Drag and Drop neu anordnen.
Hier können Sie die Kennzahlen nach Belieben per Drag
and Drop neu anordnen.
</> </>
} }
placement="left" placement="left"
@ -295,9 +270,7 @@ export function ConfigTable() {
sx={{ sx={{
color: isUpdatingPositions ? "#ccc" : "#999", color: isUpdatingPositions ? "#ccc" : "#999",
cursor: isUpdatingPositions ? "default" : "grab", cursor: isUpdatingPositions ? "default" : "grab",
"&:active": { "&:active": { cursor: isUpdatingPositions ? "default" : "grabbing" }
cursor: isUpdatingPositions ? "default" : "grabbing",
},
}} }}
/> />
</Tooltip> </Tooltip>
@ -313,34 +286,30 @@ export function ConfigTable() {
width: "18px", width: "18px",
height: "18px", height: "18px",
cursor: isUpdatingPositions ? "default" : "pointer", cursor: isUpdatingPositions ? "default" : "pointer",
accentColor: "#383838", accentColor: "#383838"
}} }}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
/> />
</td> </td>
<td <td style={{
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 <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)} {getDisplayType(kennzahl.type)}
</span> </span>
</td> </td>

28
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

19
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

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(),
});