Update ExtractedResultsPage to fetch and pass settings to KennzahlenTable
Jaronim Pracht
parent
2009d5b6f3
commit
082317318a
|
|
@ -1,322 +1,353 @@
|
|||
import { Box, Tooltip, CircularProgress, Typography } from "@mui/material";
|
||||
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 { useEffect, useState } from "react";
|
||||
import type { Kennzahl } from "../types/kpi";
|
||||
import { getDisplayType } from "../types/kpi";
|
||||
import { fetchKennzahlen as fetchK } from "../util/api";
|
||||
|
||||
export function ConfigTable() {
|
||||
const navigate = useNavigate();
|
||||
const [kennzahlen, setKennzahlen] = useState<Kennzahl[]>([]);
|
||||
const [draggedItem, setDraggedItem] = useState<Kennzahl | null>(null);
|
||||
const [isUpdatingPositions, setIsUpdatingPositions] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const navigate = useNavigate();
|
||||
const [kennzahlen, setKennzahlen] = useState<Kennzahl[]>([]);
|
||||
const [draggedItem, setDraggedItem] = useState<Kennzahl | null>(null);
|
||||
const [isUpdatingPositions, setIsUpdatingPositions] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchKennzahlen = async () => {
|
||||
while (true) {
|
||||
try {
|
||||
console.log('Fetching kennzahlen from API...');
|
||||
const response = await fetch(`http://localhost:5050/api/kpi_setting/`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
useEffect(() => {
|
||||
const fetchKennzahlen = async () => {
|
||||
while (true) {
|
||||
try {
|
||||
console.log("Fetching kennzahlen from API...");
|
||||
const data = await fetchK();
|
||||
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 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));
|
||||
}
|
||||
}
|
||||
};
|
||||
fetchKennzahlen();
|
||||
}, []);
|
||||
|
||||
fetchKennzahlen();
|
||||
}, []);
|
||||
const handleToggleActive = async (id: number) => {
|
||||
const kennzahl = kennzahlen.find((k) => k.id === id);
|
||||
if (!kennzahl) return;
|
||||
|
||||
const handleToggleActive = async (id: number) => {
|
||||
const kennzahl = kennzahlen.find(k => k.id === id);
|
||||
if (!kennzahl) return;
|
||||
try {
|
||||
const response = await fetch(
|
||||
`http://localhost:5050/api/kpi_setting/${id}`,
|
||||
{
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
active: !kennzahl.active,
|
||||
}),
|
||||
},
|
||||
);
|
||||
|
||||
try {
|
||||
const response = await fetch(`http://localhost:5050/api/kpi_setting/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
active: !kennzahl.active
|
||||
}),
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
const updatedKennzahl = await response.json();
|
||||
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();
|
||||
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 updatePositionsInBackend = async (reorderedKennzahlen: Kennzahl[]) => {
|
||||
setIsUpdatingPositions(true);
|
||||
try {
|
||||
const positionUpdates = reorderedKennzahlen.map((kennzahl, index) => ({
|
||||
id: kennzahl.id,
|
||||
position: index + 1,
|
||||
}));
|
||||
|
||||
const updatePositionsInBackend = async (reorderedKennzahlen: Kennzahl[]) => {
|
||||
setIsUpdatingPositions(true);
|
||||
try {
|
||||
const positionUpdates = reorderedKennzahlen.map((kennzahl, index) => ({
|
||||
id: kennzahl.id,
|
||||
position: index + 1
|
||||
}));
|
||||
const response = await fetch(
|
||||
`http://localhost:5050/api/kpi_setting/update-kpi-positions`,
|
||||
{
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(positionUpdates),
|
||||
},
|
||||
);
|
||||
|
||||
const response = await fetch(`http://localhost:5050/api/kpi_setting/update-kpi-positions`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(positionUpdates),
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
const updatedKennzahlen = await response.json();
|
||||
setKennzahlen(updatedKennzahlen);
|
||||
} catch (err) {
|
||||
console.error("Error updating positions:", err);
|
||||
window.location.reload();
|
||||
} finally {
|
||||
setIsUpdatingPositions(false);
|
||||
}
|
||||
};
|
||||
|
||||
const updatedKennzahlen = await response.json();
|
||||
setKennzahlen(updatedKennzahlen);
|
||||
} catch (err) {
|
||||
console.error('Error updating positions:', err);
|
||||
window.location.reload();
|
||||
} finally {
|
||||
setIsUpdatingPositions(false);
|
||||
}
|
||||
};
|
||||
const handleDragStart = (
|
||||
e: React.DragEvent<HTMLTableRowElement>,
|
||||
item: Kennzahl,
|
||||
) => {
|
||||
setDraggedItem(item);
|
||||
e.dataTransfer.effectAllowed = "move";
|
||||
};
|
||||
|
||||
const handleDragStart = (e: React.DragEvent<HTMLTableRowElement>, item: Kennzahl) => {
|
||||
setDraggedItem(item);
|
||||
e.dataTransfer.effectAllowed = "move";
|
||||
};
|
||||
const handleDragOver = (e: React.DragEvent<HTMLTableRowElement>) => {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = "move";
|
||||
};
|
||||
|
||||
const handleDragOver = (e: React.DragEvent<HTMLTableRowElement>) => {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = "move";
|
||||
};
|
||||
const handleDrop = async (
|
||||
e: React.DragEvent<HTMLTableRowElement>,
|
||||
targetItem: Kennzahl,
|
||||
) => {
|
||||
e.preventDefault();
|
||||
if (!draggedItem || draggedItem.id === targetItem.id) return;
|
||||
|
||||
const handleDrop = async (e: React.DragEvent<HTMLTableRowElement>, targetItem: Kennzahl) => {
|
||||
e.preventDefault();
|
||||
if (!draggedItem || draggedItem.id === targetItem.id) return;
|
||||
const draggedIndex = kennzahlen.findIndex(
|
||||
(item) => item.id === draggedItem.id,
|
||||
);
|
||||
const targetIndex = kennzahlen.findIndex(
|
||||
(item) => item.id === targetItem.id,
|
||||
);
|
||||
|
||||
const draggedIndex = kennzahlen.findIndex(item => item.id === draggedItem.id);
|
||||
const targetIndex = kennzahlen.findIndex(item => item.id === targetItem.id);
|
||||
const newKennzahlen = [...kennzahlen];
|
||||
const [removed] = newKennzahlen.splice(draggedIndex, 1);
|
||||
newKennzahlen.splice(targetIndex, 0, removed);
|
||||
|
||||
const newKennzahlen = [...kennzahlen];
|
||||
const [removed] = newKennzahlen.splice(draggedIndex, 1);
|
||||
newKennzahlen.splice(targetIndex, 0, removed);
|
||||
setKennzahlen(newKennzahlen);
|
||||
setDraggedItem(null);
|
||||
await updatePositionsInBackend(newKennzahlen);
|
||||
};
|
||||
|
||||
setKennzahlen(newKennzahlen);
|
||||
setDraggedItem(null);
|
||||
await updatePositionsInBackend(newKennzahlen);
|
||||
};
|
||||
const handleDragEnd = () => {
|
||||
setDraggedItem(null);
|
||||
};
|
||||
|
||||
const handleDragEnd = () => {
|
||||
setDraggedItem(null);
|
||||
};
|
||||
const handleRowClick = (kennzahl: Kennzahl, e: React.MouseEvent) => {
|
||||
if (draggedItem || isUpdatingPositions) {
|
||||
return;
|
||||
}
|
||||
|
||||
const handleRowClick = (kennzahl: Kennzahl, e: React.MouseEvent) => {
|
||||
if (draggedItem || isUpdatingPositions) {
|
||||
return;
|
||||
}
|
||||
const target = e.target as HTMLElement;
|
||||
if (
|
||||
target.tagName === "INPUT" &&
|
||||
(target as HTMLInputElement).type === "checkbox"
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
const target = e.target as HTMLElement;
|
||||
if (target.tagName === 'INPUT' && (target as HTMLInputElement).type === 'checkbox') {
|
||||
return;
|
||||
}
|
||||
if (target.closest(".drag-handle")) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (target.closest('.drag-handle')) {
|
||||
return;
|
||||
}
|
||||
console.log("Navigating to detail page for KPI:", kennzahl);
|
||||
console.log("KPI ID:", kennzahl.id);
|
||||
|
||||
console.log('Navigating to detail page for KPI:', kennzahl);
|
||||
console.log('KPI ID:', kennzahl.id);
|
||||
navigate({
|
||||
to: `/config-detail/$kpiId`,
|
||||
params: { kpiId: kennzahl.id.toString() },
|
||||
});
|
||||
};
|
||||
|
||||
navigate({
|
||||
to: `/config-detail/$kpiId`,
|
||||
params: { kpiId: kennzahl.id.toString() }
|
||||
});
|
||||
};
|
||||
if (loading) {
|
||||
return (
|
||||
<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 (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: "70%",
|
||||
maxWidth: 800,
|
||||
borderRadius: 2,
|
||||
boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
|
||||
backgroundColor: "white",
|
||||
overflow: "hidden",
|
||||
opacity: isUpdatingPositions ? 0.7 : 1,
|
||||
pointerEvents: isUpdatingPositions ? 'none' : 'auto'
|
||||
}}
|
||||
>
|
||||
<table style={{
|
||||
width: "100%",
|
||||
borderCollapse: "collapse"
|
||||
}}>
|
||||
<thead>
|
||||
<tr style={{ backgroundColor: "#f5f5f5" }}>
|
||||
<th style={{
|
||||
padding: "16px 12px",
|
||||
textAlign: "left",
|
||||
fontWeight: "bold",
|
||||
width: "60px",
|
||||
borderBottom: "1px solid #e0e0e0"
|
||||
}}>
|
||||
</th>
|
||||
<th style={{
|
||||
padding: "16px 12px",
|
||||
textAlign: "left",
|
||||
fontWeight: "bold",
|
||||
width: "80px",
|
||||
borderBottom: "1px solid #e0e0e0"
|
||||
}}>
|
||||
Aktiv
|
||||
</th>
|
||||
<th style={{
|
||||
padding: "16px 12px",
|
||||
textAlign: "left",
|
||||
fontWeight: "bold",
|
||||
borderBottom: "1px solid #e0e0e0"
|
||||
}}>
|
||||
Name
|
||||
</th>
|
||||
<th style={{
|
||||
padding: "16px 12px",
|
||||
textAlign: "left",
|
||||
fontWeight: "bold",
|
||||
width: "160px",
|
||||
borderBottom: "1px solid #e0e0e0"
|
||||
}}>
|
||||
Format
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{kennzahlen.map((kennzahl) => (
|
||||
<tr
|
||||
key={kennzahl.id}
|
||||
draggable={!isUpdatingPositions}
|
||||
onDragStart={(e) => handleDragStart(e, kennzahl)}
|
||||
onDragOver={handleDragOver}
|
||||
onDrop={(e) => handleDrop(e, kennzahl)}
|
||||
onDragEnd={handleDragEnd}
|
||||
onClick={(e) => handleRowClick(kennzahl, e)}
|
||||
style={{
|
||||
borderBottom: "1px solid #e0e0e0",
|
||||
cursor: isUpdatingPositions ? "default" : "pointer",
|
||||
backgroundColor: draggedItem?.id === kennzahl.id ? "#f0f0f0" : "white",
|
||||
opacity: draggedItem?.id === kennzahl.id ? 0.5 : 1
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (!draggedItem && !isUpdatingPositions) {
|
||||
e.currentTarget.style.backgroundColor = "#f9f9f9";
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (!draggedItem && !isUpdatingPositions) {
|
||||
e.currentTarget.style.backgroundColor = "white";
|
||||
}
|
||||
}}
|
||||
>
|
||||
<td style={{ padding: "12px", textAlign: "center" }}>
|
||||
<div className="drag-handle">
|
||||
<Tooltip
|
||||
title={
|
||||
<>
|
||||
<b>Neuanordnung der Kennzahlen</b><br />
|
||||
Hier können Sie die Kennzahlen nach Belieben per Drag and Drop neu anordnen.
|
||||
</>
|
||||
}
|
||||
placement="left"
|
||||
arrow
|
||||
>
|
||||
<DragIndicatorIcon
|
||||
sx={{
|
||||
color: isUpdatingPositions ? "#ccc" : "#999",
|
||||
cursor: isUpdatingPositions ? "default" : "grab",
|
||||
"&:active": { cursor: isUpdatingPositions ? "default" : "grabbing" }
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</td>
|
||||
<td style={{ padding: "12px" }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={kennzahl.active}
|
||||
onChange={() => handleToggleActive(kennzahl.id)}
|
||||
disabled={isUpdatingPositions}
|
||||
style={{
|
||||
width: "18px",
|
||||
height: "18px",
|
||||
cursor: isUpdatingPositions ? "default" : "pointer",
|
||||
accentColor: "#383838"
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
</td>
|
||||
<td style={{
|
||||
padding: "12px",
|
||||
fontSize: "14px",
|
||||
color: "#333"
|
||||
}}>
|
||||
<span title={`Click to view details (ID: ${kennzahl.id})`}>
|
||||
{kennzahl.name}
|
||||
</span>
|
||||
</td>
|
||||
<td style={{ padding: "12px" }}>
|
||||
<span style={{
|
||||
color: "#333",
|
||||
padding: "4px 12px",
|
||||
borderRadius: "16px",
|
||||
fontSize: "12px",
|
||||
fontWeight: "500",
|
||||
border: "1px solid #ddd",
|
||||
backgroundColor: "#f8f9fa"
|
||||
}}>
|
||||
{getDisplayType(kennzahl.type)}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</Box>
|
||||
);
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: "70%",
|
||||
maxWidth: 800,
|
||||
borderRadius: 2,
|
||||
boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
|
||||
backgroundColor: "white",
|
||||
overflow: "hidden",
|
||||
opacity: isUpdatingPositions ? 0.7 : 1,
|
||||
pointerEvents: isUpdatingPositions ? "none" : "auto",
|
||||
}}
|
||||
>
|
||||
<table
|
||||
style={{
|
||||
width: "100%",
|
||||
borderCollapse: "collapse",
|
||||
}}
|
||||
>
|
||||
<thead>
|
||||
<tr style={{ backgroundColor: "#f5f5f5" }}>
|
||||
<th
|
||||
style={{
|
||||
padding: "16px 12px",
|
||||
textAlign: "left",
|
||||
fontWeight: "bold",
|
||||
width: "60px",
|
||||
borderBottom: "1px solid #e0e0e0",
|
||||
}}
|
||||
/>
|
||||
<th
|
||||
style={{
|
||||
padding: "16px 12px",
|
||||
textAlign: "left",
|
||||
fontWeight: "bold",
|
||||
width: "80px",
|
||||
borderBottom: "1px solid #e0e0e0",
|
||||
}}
|
||||
>
|
||||
Aktiv
|
||||
</th>
|
||||
<th
|
||||
style={{
|
||||
padding: "16px 12px",
|
||||
textAlign: "left",
|
||||
fontWeight: "bold",
|
||||
borderBottom: "1px solid #e0e0e0",
|
||||
}}
|
||||
>
|
||||
Name
|
||||
</th>
|
||||
<th
|
||||
style={{
|
||||
padding: "16px 12px",
|
||||
textAlign: "left",
|
||||
fontWeight: "bold",
|
||||
width: "160px",
|
||||
borderBottom: "1px solid #e0e0e0",
|
||||
}}
|
||||
>
|
||||
Format
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{kennzahlen.map((kennzahl) => (
|
||||
<tr
|
||||
key={kennzahl.id}
|
||||
draggable={!isUpdatingPositions}
|
||||
onDragStart={(e) => handleDragStart(e, kennzahl)}
|
||||
onDragOver={handleDragOver}
|
||||
onDrop={(e) => handleDrop(e, kennzahl)}
|
||||
onDragEnd={handleDragEnd}
|
||||
onClick={(e) => handleRowClick(kennzahl, e)}
|
||||
style={{
|
||||
borderBottom: "1px solid #e0e0e0",
|
||||
cursor: isUpdatingPositions ? "default" : "pointer",
|
||||
backgroundColor:
|
||||
draggedItem?.id === kennzahl.id ? "#f0f0f0" : "white",
|
||||
opacity: draggedItem?.id === kennzahl.id ? 0.5 : 1,
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (!draggedItem && !isUpdatingPositions) {
|
||||
e.currentTarget.style.backgroundColor = "#f9f9f9";
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (!draggedItem && !isUpdatingPositions) {
|
||||
e.currentTarget.style.backgroundColor = "white";
|
||||
}
|
||||
}}
|
||||
>
|
||||
<td style={{ padding: "12px", textAlign: "center" }}>
|
||||
<div className="drag-handle">
|
||||
<Tooltip
|
||||
title={
|
||||
<>
|
||||
<b>Neuanordnung der Kennzahlen</b>
|
||||
<br />
|
||||
Hier können Sie die Kennzahlen nach Belieben per Drag
|
||||
and Drop neu anordnen.
|
||||
</>
|
||||
}
|
||||
placement="left"
|
||||
arrow
|
||||
>
|
||||
<DragIndicatorIcon
|
||||
sx={{
|
||||
color: isUpdatingPositions ? "#ccc" : "#999",
|
||||
cursor: isUpdatingPositions ? "default" : "grab",
|
||||
"&:active": {
|
||||
cursor: isUpdatingPositions ? "default" : "grabbing",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</td>
|
||||
<td style={{ padding: "12px" }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={kennzahl.active}
|
||||
onChange={() => handleToggleActive(kennzahl.id)}
|
||||
disabled={isUpdatingPositions}
|
||||
style={{
|
||||
width: "18px",
|
||||
height: "18px",
|
||||
cursor: isUpdatingPositions ? "default" : "pointer",
|
||||
accentColor: "#383838",
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
style={{
|
||||
padding: "12px",
|
||||
fontSize: "14px",
|
||||
color: "#333",
|
||||
}}
|
||||
>
|
||||
<span title={`Click to view details (ID: ${kennzahl.id})`}>
|
||||
{kennzahl.name}
|
||||
</span>
|
||||
</td>
|
||||
<td style={{ padding: "12px" }}>
|
||||
<span
|
||||
style={{
|
||||
color: "#333",
|
||||
padding: "4px 12px",
|
||||
borderRadius: "16px",
|
||||
fontSize: "12px",
|
||||
fontWeight: "500",
|
||||
border: "1px solid #ddd",
|
||||
backgroundColor: "#f8f9fa",
|
||||
}}
|
||||
>
|
||||
{getDisplayType(kennzahl.type)}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
import type { Kennzahl } from "@/types/kpi";
|
||||
import EditIcon from "@mui/icons-material/Edit";
|
||||
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
|
||||
import SearchIcon from "@mui/icons-material/Search";
|
||||
|
|
@ -20,19 +21,10 @@ import { useState } from "react";
|
|||
import type { KeyboardEvent } from "react";
|
||||
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 {
|
||||
onPageClick?: (page: number) => void;
|
||||
pdfId: string;
|
||||
settings: Kennzahl[];
|
||||
data: {
|
||||
[key: string]: {
|
||||
label: string;
|
||||
|
|
@ -48,6 +40,7 @@ export default function KennzahlenTable({
|
|||
onPageClick,
|
||||
data,
|
||||
pdfId,
|
||||
settings,
|
||||
}: KennzahlenTableProps) {
|
||||
const [editingIndex, setEditingIndex] = useState<string>("");
|
||||
const [editValue, setEditValue] = useState("");
|
||||
|
|
@ -148,7 +141,8 @@ export default function KennzahlenTable({
|
|||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
{SETTINGS.filter((setting) => setting.active)
|
||||
{settings
|
||||
.filter((setting) => setting.active)
|
||||
.sort((a, b) => a.position - b.position)
|
||||
.map((setting) => ({
|
||||
setting: setting,
|
||||
|
|
@ -157,7 +151,8 @@ export default function KennzahlenTable({
|
|||
.map((row) => {
|
||||
let borderColor = "transparent";
|
||||
const hasMultipleValues = row.extractedValues.length > 1;
|
||||
const hasNoValue = row.setting.mandatory &&
|
||||
const hasNoValue =
|
||||
row.setting.mandatory &&
|
||||
(row.extractedValues.length === 0 ||
|
||||
row.extractedValues.at(0)?.entity === "");
|
||||
|
||||
|
|
@ -188,7 +183,8 @@ export default function KennzahlenTable({
|
|||
<Tooltip
|
||||
title={
|
||||
<>
|
||||
<b>Problem</b><br />
|
||||
<b>Problem</b>
|
||||
<br />
|
||||
Mehrere Werte für die Kennzahl gefunden.
|
||||
</>
|
||||
}
|
||||
|
|
@ -205,9 +201,9 @@ export default function KennzahlenTable({
|
|||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
cursor: "pointer",
|
||||
'&:hover': {
|
||||
backgroundColor: '#f5f5f5'
|
||||
}
|
||||
"&:hover": {
|
||||
backgroundColor: "#f5f5f5",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
|
|
@ -222,10 +218,10 @@ export default function KennzahlenTable({
|
|||
{row.extractedValues.at(0)?.entity || "—"}
|
||||
</span>
|
||||
</Box>
|
||||
<SearchIcon
|
||||
fontSize="small"
|
||||
sx={{ color: "#f6ed48" }}
|
||||
/>
|
||||
<SearchIcon
|
||||
fontSize="small"
|
||||
sx={{ color: "#f6ed48" }}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -5,12 +5,15 @@ import { createFileRoute, useNavigate } from "@tanstack/react-router";
|
|||
import { useState } from "react";
|
||||
import KennzahlenTable from "../components/KennzahlenTable";
|
||||
import PDFViewer from "../components/pdfViewer";
|
||||
import { kpiQueryOptions } from "../util/query";
|
||||
import { kpiQueryOptions, settingsQueryOptions } from "../util/query";
|
||||
|
||||
export const Route = createFileRoute("/extractedResult/$pitchBook")({
|
||||
component: ExtractedResultsPage,
|
||||
loader: ({ context: { queryClient }, params: { pitchBook } }) =>
|
||||
queryClient.ensureQueryData(kpiQueryOptions(pitchBook)),
|
||||
Promise.allSettled([
|
||||
queryClient.ensureQueryData(kpiQueryOptions(pitchBook)),
|
||||
queryClient.ensureQueryData(settingsQueryOptions()),
|
||||
]),
|
||||
});
|
||||
|
||||
function ExtractedResultsPage() {
|
||||
|
|
@ -26,6 +29,7 @@ function ExtractedResultsPage() {
|
|||
}[status];
|
||||
|
||||
const { data: kpi } = useSuspenseQuery(kpiQueryOptions(pitchBook));
|
||||
const { data: settings } = useSuspenseQuery(settingsQueryOptions());
|
||||
|
||||
return (
|
||||
<Box p={4}>
|
||||
|
|
@ -67,6 +71,7 @@ function ExtractedResultsPage() {
|
|||
}}
|
||||
>
|
||||
<KennzahlenTable
|
||||
settings={settings}
|
||||
onPageClick={setCurrentPage}
|
||||
data={kpi}
|
||||
pdfId={pitchBook}
|
||||
|
|
@ -79,7 +84,7 @@ function ExtractedResultsPage() {
|
|||
gap={3}
|
||||
sx={{
|
||||
width: "55%",
|
||||
maxHeight: "95%"
|
||||
maxHeight: "95%",
|
||||
}}
|
||||
>
|
||||
<Paper
|
||||
|
|
@ -93,7 +98,7 @@ function ExtractedResultsPage() {
|
|||
display: "flex",
|
||||
flexDirection: "column",
|
||||
overflow: "auto",
|
||||
padding: 2
|
||||
padding: 2,
|
||||
}}
|
||||
>
|
||||
<PDFViewer
|
||||
|
|
@ -102,7 +107,13 @@ function ExtractedResultsPage() {
|
|||
onPageChange={setCurrentPage}
|
||||
/>
|
||||
</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" }}>
|
||||
<ContentPasteIcon sx={{ fontSize: 18, mr: 1 }} />
|
||||
Kennzahlenzeile kopieren
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import type { Kennzahl } from "@/types/kpi";
|
||||
|
||||
export const fetchKPI = async (
|
||||
pitchBookId: string,
|
||||
): Promise<{
|
||||
|
|
@ -14,7 +16,7 @@ export const fetchKPI = async (
|
|||
);
|
||||
const data = await response.json();
|
||||
|
||||
return getKPI(data.kpi);
|
||||
return data.kpi ? getKPI(data.kpi) : {};
|
||||
};
|
||||
|
||||
export const fetchPutKPI = async (
|
||||
|
|
@ -95,3 +97,13 @@ export const flattenKPIArray = (kpi: {
|
|||
}) => {
|
||||
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;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,8 +1,14 @@
|
|||
import { queryOptions } from "@tanstack/react-query";
|
||||
import { fetchKPI } from "./api";
|
||||
import { fetchKPI, fetchKennzahlen } from "./api";
|
||||
|
||||
export const kpiQueryOptions = (pitchBookId: string) =>
|
||||
queryOptions({
|
||||
queryKey: ["pitchBookKPI", pitchBookId],
|
||||
queryFn: () => fetchKPI(pitchBookId),
|
||||
});
|
||||
|
||||
export const settingsQueryOptions = () =>
|
||||
queryOptions({
|
||||
queryKey: ["pitchBookSettings"],
|
||||
queryFn: () => fetchKennzahlen(),
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue