Compare commits
No commits in common. "1b256e9d99e802b48bba2551d31a16dd930d4d06" and "a8a4981b81a0ac8acced029e15ea6e1d9a8fb476" have entirely different histories.
1b256e9d99
...
a8a4981b81
|
|
@ -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>
|
}
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
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";
|
||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
|
IconButton,
|
||||||
Link,
|
Link,
|
||||||
Paper,
|
Paper,
|
||||||
Table,
|
Table,
|
||||||
|
|
@ -13,7 +13,6 @@ import {
|
||||||
TableHead,
|
TableHead,
|
||||||
TableRow,
|
TableRow,
|
||||||
TextField,
|
TextField,
|
||||||
Tooltip,
|
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||||
import { useNavigate } from "@tanstack/react-router";
|
import { useNavigate } from "@tanstack/react-router";
|
||||||
|
|
@ -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; // Neue Prop für die PDF-ID
|
||||||
settings: Kennzahl[];
|
|
||||||
data: {
|
data: {
|
||||||
[key: string]: {
|
[key: string]: {
|
||||||
label: string;
|
label: string;
|
||||||
|
|
@ -36,11 +44,11 @@ interface KennzahlenTableProps {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// React-Komponente
|
||||||
export default function KennzahlenTable({
|
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("");
|
||||||
|
|
@ -113,16 +121,6 @@ export default function KennzahlenTable({
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleNavigateToDetail = (settingName: string) => {
|
|
||||||
navigate({
|
|
||||||
to: "/extractedResult/$pitchBook/$kpi",
|
|
||||||
params: {
|
|
||||||
pitchBook: pdfId,
|
|
||||||
kpi: settingName,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TableContainer component={Paper}>
|
<TableContainer component={Paper}>
|
||||||
<Table>
|
<Table>
|
||||||
|
|
@ -134,15 +132,14 @@ export default function KennzahlenTable({
|
||||||
<TableCell>
|
<TableCell>
|
||||||
<strong>Wert</strong>
|
<strong>Wert</strong>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell align="center">
|
<TableCell>
|
||||||
<strong>Seite</strong>
|
<strong>Seite</strong>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</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,
|
||||||
|
|
@ -150,124 +147,89 @@ export default function KennzahlenTable({
|
||||||
}))
|
}))
|
||||||
.map((row) => {
|
.map((row) => {
|
||||||
let borderColor = "transparent";
|
let borderColor = "transparent";
|
||||||
const hasMultipleValues = row.extractedValues.length > 1;
|
if (
|
||||||
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 === "")
|
||||||
|
)
|
||||||
if (hasNoValue) {
|
|
||||||
borderColor = "red";
|
borderColor = "red";
|
||||||
} else if (hasMultipleValues) {
|
else if (row.extractedValues.length > 1) borderColor = "#f6ed48";
|
||||||
borderColor = "#f6ed48";
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TableRow key={row.setting.name}>
|
<TableRow key={row.setting.name}>
|
||||||
<TableCell>{row.setting.name}</TableCell>
|
<TableCell>{row.setting.name}</TableCell>
|
||||||
<TableCell
|
<TableCell
|
||||||
onClick={() => {
|
onClick={() =>
|
||||||
// Only allow inline editing for non-multiple value cells
|
startEditing(
|
||||||
if (!hasMultipleValues) {
|
row.extractedValues.at(0)?.entity || "",
|
||||||
startEditing(
|
row.setting.name,
|
||||||
row.extractedValues.at(0)?.entity || "",
|
)
|
||||||
row.setting.name,
|
}
|
||||||
);
|
|
||||||
} else {
|
|
||||||
// Navigate to detail page for multiple values
|
|
||||||
handleNavigateToDetail(row.setting.name);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
{hasMultipleValues ? (
|
<Box
|
||||||
<Tooltip
|
sx={{
|
||||||
title={
|
border: `2px solid ${borderColor}`,
|
||||||
<>
|
borderRadius: 1,
|
||||||
<b>Problem</b>
|
padding: "4px 8px",
|
||||||
<br />
|
display: "flex",
|
||||||
Mehrere Werte für die Kennzahl gefunden.
|
alignItems: "center",
|
||||||
</>
|
justifyContent: "space-between",
|
||||||
}
|
width: "100%",
|
||||||
placement="bottom"
|
cursor: "text",
|
||||||
arrow
|
}}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: 1,
|
||||||
|
width: "100%",
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<Box
|
{row.setting.mandatory &&
|
||||||
sx={{
|
row.extractedValues.length === 0 && (
|
||||||
border: `2px solid ${borderColor}`,
|
<ErrorOutlineIcon fontSize="small" color="error" />
|
||||||
borderRadius: 1,
|
)}
|
||||||
padding: "4px 8px",
|
{editingIndex === row.setting.name ? (
|
||||||
display: "flex",
|
<TextField
|
||||||
alignItems: "center",
|
value={editValue}
|
||||||
justifyContent: "space-between",
|
onChange={(e) => setEditValue(e.target.value)}
|
||||||
width: "100%",
|
onKeyDown={(e) =>
|
||||||
cursor: "pointer",
|
handleKeyPress(e, row.setting.name)
|
||||||
"&:hover": {
|
}
|
||||||
backgroundColor: "#f5f5f5",
|
onBlur={() => handleSave(row.setting.name)}
|
||||||
},
|
autoFocus
|
||||||
}}
|
size="small"
|
||||||
|
fullWidth
|
||||||
|
variant="standard"
|
||||||
|
sx={{ margin: "-8px 0" }}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<span>
|
||||||
|
{row.extractedValues.at(0)?.entity || "—"}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
{row.extractedValues.length > 1 && (
|
||||||
|
<IconButton
|
||||||
|
aria-label="select"
|
||||||
|
onClick={() =>
|
||||||
|
navigate({
|
||||||
|
to: "/extractedResult/$pitchBook/$kpi",
|
||||||
|
params: {
|
||||||
|
pitchBook: pdfId,
|
||||||
|
kpi: row.setting.name,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
>
|
>
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
gap: 1,
|
|
||||||
width: "100%",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
{row.extractedValues.at(0)?.entity || "—"}
|
|
||||||
</span>
|
|
||||||
</Box>
|
|
||||||
<SearchIcon
|
<SearchIcon
|
||||||
fontSize="small"
|
fontSize="small"
|
||||||
sx={{ color: "#f6ed48" }}
|
sx={{ color: "#f6ed48" }}
|
||||||
/>
|
/>
|
||||||
</Box>
|
</IconButton>
|
||||||
</Tooltip>
|
)}
|
||||||
) : (
|
{row.extractedValues.length <= 1 && (
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
border: `2px solid ${borderColor}`,
|
|
||||||
borderRadius: 1,
|
|
||||||
padding: "4px 8px",
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "space-between",
|
|
||||||
width: "100%",
|
|
||||||
cursor: "text",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
gap: 1,
|
|
||||||
width: "100%",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{hasNoValue && (
|
|
||||||
<ErrorOutlineIcon fontSize="small" color="error" />
|
|
||||||
)}
|
|
||||||
{editingIndex === row.setting.name ? (
|
|
||||||
<TextField
|
|
||||||
value={editValue}
|
|
||||||
onChange={(e) => setEditValue(e.target.value)}
|
|
||||||
onKeyDown={(e) =>
|
|
||||||
handleKeyPress(e, row.setting.name)
|
|
||||||
}
|
|
||||||
onBlur={() => handleSave(row.setting.name)}
|
|
||||||
autoFocus
|
|
||||||
size="small"
|
|
||||||
fullWidth
|
|
||||||
variant="standard"
|
|
||||||
sx={{ margin: "-8px 0" }}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<span>
|
|
||||||
{row.extractedValues.at(0)?.entity || "—"}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
<EditIcon
|
<EditIcon
|
||||||
fontSize="small"
|
fontSize="small"
|
||||||
sx={{ color: "#555", cursor: "pointer" }}
|
sx={{ color: "#555", cursor: "pointer" }}
|
||||||
|
|
@ -279,10 +241,10 @@ export default function KennzahlenTable({
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Box>
|
)}
|
||||||
)}
|
</Box>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell align="center">
|
<TableCell>
|
||||||
<Link
|
<Link
|
||||||
component="button"
|
component="button"
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
|
|
|
||||||
|
|
@ -10,13 +10,11 @@ import { socket } from "../socket";
|
||||||
interface PDFViewerProps {
|
interface PDFViewerProps {
|
||||||
pitchBookId: string;
|
pitchBookId: string;
|
||||||
currentPage?: number;
|
currentPage?: number;
|
||||||
onPageChange?: (page: number) => void;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function PDFViewer({
|
export default function PDFViewer({
|
||||||
pitchBookId,
|
pitchBookId,
|
||||||
currentPage,
|
currentPage,
|
||||||
onPageChange,
|
|
||||||
}: PDFViewerProps) {
|
}: PDFViewerProps) {
|
||||||
const [numPages, setNumPages] = useState<number | null>(null);
|
const [numPages, setNumPages] = useState<number | null>(null);
|
||||||
const [pageNumber, setPageNumber] = useState(currentPage || 1);
|
const [pageNumber, setPageNumber] = useState(currentPage || 1);
|
||||||
|
|
@ -44,7 +42,7 @@ export default function PDFViewer({
|
||||||
if (currentPage && currentPage !== pageNumber) {
|
if (currentPage && currentPage !== pageNumber) {
|
||||||
setPageNumber(currentPage);
|
setPageNumber(currentPage);
|
||||||
}
|
}
|
||||||
}, [currentPage]);
|
}, [currentPage, pageNumber]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleProgress = (data: { id: number; progress: number }) => {
|
const handleProgress = (data: { id: number; progress: number }) => {
|
||||||
|
|
@ -60,11 +58,6 @@ export default function PDFViewer({
|
||||||
};
|
};
|
||||||
}, [pitchBookId]);
|
}, [pitchBookId]);
|
||||||
|
|
||||||
const handlePageChange = (newPage: number) => {
|
|
||||||
setPageNumber(newPage);
|
|
||||||
onPageChange?.(newPage);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
display="flex"
|
display="flex"
|
||||||
|
|
@ -72,13 +65,15 @@ export default function PDFViewer({
|
||||||
justifyContent="center"
|
justifyContent="center"
|
||||||
alignItems="center"
|
alignItems="center"
|
||||||
width="100%"
|
width="100%"
|
||||||
height="auto"
|
height="100%"
|
||||||
|
p={2}
|
||||||
>
|
>
|
||||||
<Box
|
<Box
|
||||||
ref={containerRef}
|
ref={containerRef}
|
||||||
sx={{
|
sx={{
|
||||||
width: "100%",
|
width: "100%",
|
||||||
height: "auto",
|
maxHeight: "90vh",
|
||||||
|
overflow: "auto",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
|
|
@ -94,34 +89,33 @@ export default function PDFViewer({
|
||||||
onSourceError={(error) => console.error("Ungültige PDF:", error)}
|
onSourceError={(error) => console.error("Ungültige PDF:", error)}
|
||||||
>
|
>
|
||||||
{containerWidth && (
|
{containerWidth && (
|
||||||
<Page pageNumber={pageNumber} width={containerWidth * 0.98} />
|
<Page pageNumber={pageNumber} width={containerWidth * 0.8} />
|
||||||
)}
|
)}
|
||||||
</Document>
|
</Document>
|
||||||
</Box>
|
</Box>
|
||||||
<Box
|
<Box
|
||||||
mt={1}
|
mt={2}
|
||||||
display="flex"
|
display="flex"
|
||||||
alignItems="center"
|
alignItems="center"
|
||||||
justifyContent="center"
|
justifyContent="center"
|
||||||
gap={1}
|
gap={1}
|
||||||
p={1}
|
|
||||||
>
|
>
|
||||||
<IconButton
|
<IconButton
|
||||||
disabled={pageNumber <= 1}
|
disabled={pageNumber <= 1}
|
||||||
onClick={() => handlePageChange(pageNumber - 1)}
|
onClick={() => setPageNumber((p) => p - 1)}
|
||||||
>
|
>
|
||||||
<ArrowCircleLeftIcon fontSize="large" />
|
<ArrowCircleLeftIcon fontSize="large" />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
<span>
|
<span>
|
||||||
{pageNumber} / {numPages}
|
{pageNumber} / {numPages}
|
||||||
</span>
|
</span>
|
||||||
<IconButton
|
<IconButton
|
||||||
disabled={pageNumber >= (numPages || 1)}
|
disabled={pageNumber >= (numPages || 1)}
|
||||||
onClick={() => handlePageChange(pageNumber + 1)}
|
onClick={() => setPageNumber((p) => p + 1)}
|
||||||
>
|
>
|
||||||
<ArrowCircleRightIcon fontSize="large" />
|
<ArrowCircleRightIcon fontSize="large" />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,15 +5,23 @@ 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";
|
||||||
|
|
||||||
|
// SETTINGS von KennzahlenTable component (mock)
|
||||||
|
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 },
|
||||||
|
];
|
||||||
|
|
||||||
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() {
|
||||||
|
|
@ -31,10 +39,9 @@ function ExtractedResultsPage() {
|
||||||
}[status];
|
}[status];
|
||||||
|
|
||||||
const { data: kpi } = useSuspenseQuery(kpiQueryOptions(pitchBook));
|
const { data: kpi } = useSuspenseQuery(kpiQueryOptions(pitchBook));
|
||||||
const { data: settings } = useSuspenseQuery(settingsQueryOptions());
|
|
||||||
|
|
||||||
const prepareClipboardData = () => {
|
const prepareClipboardData = () => {
|
||||||
const activeSettings = settings
|
const activeSettings = SETTINGS
|
||||||
.filter(setting => setting.active)
|
.filter(setting => setting.active)
|
||||||
.sort((a, b) => a.position - b.position);
|
.sort((a, b) => a.position - b.position);
|
||||||
|
|
||||||
|
|
@ -104,7 +111,8 @@ function ExtractedResultsPage() {
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Typography variant="h5" gutterBottom>
|
<Typography variant="h5" gutterBottom>
|
||||||
<strong>Extrahierte Kennzahlen</strong>
|
Kennzahlen extrahiert aus: <br />
|
||||||
|
<strong>FONDSNAME: TODO</strong>
|
||||||
</Typography>
|
</Typography>
|
||||||
</Box>
|
</Box>
|
||||||
<Box
|
<Box
|
||||||
|
|
@ -113,7 +121,7 @@ function ExtractedResultsPage() {
|
||||||
sx={{
|
sx={{
|
||||||
width: "100vw",
|
width: "100vw",
|
||||||
maxWidth: "100%",
|
maxWidth: "100%",
|
||||||
height: "85vh",
|
height: "80vh",
|
||||||
mt: 4,
|
mt: 4,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|
@ -121,8 +129,7 @@ function ExtractedResultsPage() {
|
||||||
elevation={2}
|
elevation={2}
|
||||||
sx={{
|
sx={{
|
||||||
width: "45%",
|
width: "45%",
|
||||||
maxHeight: "100%",
|
height: "100%",
|
||||||
height: "fit-content",
|
|
||||||
borderRadius: 2,
|
borderRadius: 2,
|
||||||
backgroundColor: "#eeeeee",
|
backgroundColor: "#eeeeee",
|
||||||
padding: 2,
|
padding: 2,
|
||||||
|
|
@ -130,7 +137,6 @@ function ExtractedResultsPage() {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<KennzahlenTable
|
<KennzahlenTable
|
||||||
settings={settings}
|
|
||||||
onPageClick={setCurrentPage}
|
onPageClick={setCurrentPage}
|
||||||
data={kpi}
|
data={kpi}
|
||||||
pdfId={pitchBook}
|
pdfId={pitchBook}
|
||||||
|
|
@ -140,39 +146,23 @@ function ExtractedResultsPage() {
|
||||||
display="flex"
|
display="flex"
|
||||||
flexDirection="column"
|
flexDirection="column"
|
||||||
justifyContent="space-between"
|
justifyContent="space-between"
|
||||||
gap={3}
|
gap={5}
|
||||||
sx={{
|
sx={{ width: "55%", height: "95%" }}
|
||||||
width: "55%",
|
|
||||||
maxHeight: "95%",
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<Paper
|
<Paper
|
||||||
elevation={2}
|
elevation={2}
|
||||||
sx={{
|
sx={{
|
||||||
width: "100%",
|
height: "100%",
|
||||||
height: "fit-content",
|
|
||||||
maxHeight: "100%",
|
|
||||||
borderRadius: 2,
|
borderRadius: 2,
|
||||||
backgroundColor: "#eeeeee",
|
backgroundColor: "#eeeeee",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
alignItems: "center",
|
||||||
overflow: "auto",
|
justifyContent: "center",
|
||||||
padding: 2,
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<PDFViewer
|
<PDFViewer pitchBookId={pitchBook} currentPage={currentPage} />
|
||||||
pitchBookId={pitchBook}
|
|
||||||
currentPage={currentPage}
|
|
||||||
onPageChange={setCurrentPage}
|
|
||||||
/>
|
|
||||||
</Paper>
|
</Paper>
|
||||||
<Box
|
<Box mt={2} display="flex" justifyContent="flex-end" gap={2}>
|
||||||
mt={2}
|
|
||||||
display="flex"
|
|
||||||
justifyContent="flex-end"
|
|
||||||
gap={2}
|
|
||||||
sx={{ flexShrink: 0 }}
|
|
||||||
>
|
|
||||||
<Button variant="contained" sx={{ backgroundColor: "#383838" }}
|
<Button variant="contained" sx={{ backgroundColor: "#383838" }}
|
||||||
onClick={handleCopyToClipboard}>
|
onClick={handleCopyToClipboard}>
|
||||||
<ContentPasteIcon sx={{ fontSize: 18, mr: 1 }} />
|
<ContentPasteIcon sx={{ fontSize: 18, mr: 1 }} />
|
||||||
|
|
|
||||||
|
|
@ -1,369 +1,27 @@
|
||||||
import {
|
import { useSuspenseQuery } from "@tanstack/react-query";
|
||||||
Box,
|
import { createFileRoute } from "@tanstack/react-router";
|
||||||
Button, Dialog, DialogActions, DialogContent,
|
|
||||||
DialogContentText,
|
|
||||||
DialogTitle,
|
|
||||||
IconButton,
|
|
||||||
Link,
|
|
||||||
Paper,
|
|
||||||
Radio,
|
|
||||||
Table,
|
|
||||||
TableBody,
|
|
||||||
TableCell,
|
|
||||||
TableContainer,
|
|
||||||
TableHead,
|
|
||||||
TableRow,
|
|
||||||
TextField,
|
|
||||||
Typography
|
|
||||||
} from "@mui/material";
|
|
||||||
import {useMutation, useQueryClient, useSuspenseQuery} from "@tanstack/react-query";
|
|
||||||
import { createFileRoute, useNavigate } from "@tanstack/react-router";
|
|
||||||
import {useEffect, useState} from "react";
|
|
||||||
import PDFViewer from "../components/pdfViewer";
|
|
||||||
import { kpiQueryOptions } from "../util/query";
|
import { kpiQueryOptions } from "../util/query";
|
||||||
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
|
|
||||||
import {fetchPutKPI} from "../util/api";
|
|
||||||
|
|
||||||
export const Route = createFileRoute("/extractedResult_/$pitchBook/$kpi")({
|
export const Route = createFileRoute("/extractedResult_/$pitchBook/$kpi")({
|
||||||
component: ExtractedResultsPage,
|
component: RouteComponent,
|
||||||
loader: ({ context: { queryClient }, params: { pitchBook } }) =>
|
loader: ({ context: { queryClient }, params: { pitchBook } }) =>
|
||||||
queryClient.ensureQueryData(kpiQueryOptions(pitchBook)),
|
queryClient.ensureQueryData(kpiQueryOptions(pitchBook)),
|
||||||
});
|
});
|
||||||
|
|
||||||
function ExtractedResultsPage() {
|
function RouteComponent() {
|
||||||
const params = Route.useParams() as { pitchBook: string; kpi: string };
|
const { pitchBook, kpi } = Route.useParams();
|
||||||
const { pitchBook, kpi } = params;
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
data: kpiData
|
data: { [kpi.toUpperCase()]: kpiValues },
|
||||||
} = useSuspenseQuery(kpiQueryOptions(pitchBook));
|
} = useSuspenseQuery(kpiQueryOptions(pitchBook));
|
||||||
|
|
||||||
const kpiValues = kpiData[kpi.toUpperCase()] || [];
|
|
||||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
|
||||||
const [currentPage, setCurrentPage] = useState(kpiValues[0]?.page || 1);
|
|
||||||
const [showConfirmDialog, setShowConfirmDialog] = useState(false);
|
|
||||||
const [hasChanges, setHasChanges] = useState(false);
|
|
||||||
const [customValue, setCustomValue] = useState('');
|
|
||||||
const originalValue = kpiValues[0]?.entity || '';
|
|
||||||
const selectedValue = selectedIndex === -1 ? customValue : (kpiValues[selectedIndex]?.entity || '');
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setHasChanges(selectedValue !== originalValue);
|
|
||||||
}, [selectedValue, originalValue]);
|
|
||||||
|
|
||||||
const { mutate: updateKPI } = useMutation({
|
|
||||||
mutationFn: () => {
|
|
||||||
const updatedData = { ...kpiData };
|
|
||||||
updatedData[kpi.toUpperCase()] = [{
|
|
||||||
...kpiValues[0],
|
|
||||||
entity: selectedValue
|
|
||||||
}];
|
|
||||||
return fetchPutKPI(Number(pitchBook), updatedData);
|
|
||||||
},
|
|
||||||
onSuccess: () => {
|
|
||||||
queryClient.invalidateQueries({
|
|
||||||
queryKey: ["pitchBookKPI", pitchBook],
|
|
||||||
});
|
|
||||||
navigate({
|
|
||||||
to: "/extractedResult/$pitchBook",
|
|
||||||
params: { pitchBook }
|
|
||||||
});
|
|
||||||
},
|
|
||||||
onError: (error) => {
|
|
||||||
console.error('Error updating KPI:', error);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const value = event.target.value;
|
|
||||||
if (value === 'custom') {
|
|
||||||
setSelectedIndex(-1);
|
|
||||||
} else {
|
|
||||||
const index = parseInt(value);
|
|
||||||
setSelectedIndex(index);
|
|
||||||
setCustomValue('');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCustomValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const value = event.target.value;
|
|
||||||
setCustomValue(value);
|
|
||||||
setSelectedIndex(-1);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleRowClick = (index: number) => {
|
|
||||||
setSelectedIndex(index);
|
|
||||||
setCustomValue('');
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleBackClick = () => {
|
|
||||||
if (hasChanges) {
|
|
||||||
setShowConfirmDialog(true);
|
|
||||||
} else {
|
|
||||||
navigate({
|
|
||||||
to: "/extractedResult/$pitchBook",
|
|
||||||
params: { pitchBook }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleConfirmDiscard = () => {
|
|
||||||
setShowConfirmDialog(false);
|
|
||||||
navigate({
|
|
||||||
to: "/extractedResult/$pitchBook",
|
|
||||||
params: { pitchBook }
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCancelDiscard = () => {
|
|
||||||
setShowConfirmDialog(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleAcceptReview = () => {
|
|
||||||
updateKPI();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box p={4}>
|
<div>
|
||||||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
|
{kpiValues.map((e) => (
|
||||||
<IconButton onClick={handleBackClick} sx={{ mr: 2 }}>
|
<div key={`${e.entity}_${e.page}`}>
|
||||||
<ArrowBackIcon fontSize="large" sx={{ color: '#383838' }} />
|
{e.label}: {e.entity}
|
||||||
</IconButton>
|
</div>
|
||||||
<Typography variant="h5" fontWeight="bold">
|
))}
|
||||||
Überprüfung der Kennzahl: {kpi}
|
</div>
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Box
|
|
||||||
display="flex"
|
|
||||||
gap={4}
|
|
||||||
sx={{
|
|
||||||
width: "100vw",
|
|
||||||
maxWidth: "100%",
|
|
||||||
height: "85vh",
|
|
||||||
mt: 4,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Paper
|
|
||||||
elevation={2}
|
|
||||||
sx={{
|
|
||||||
width: "45%",
|
|
||||||
maxHeight: "100%",
|
|
||||||
height: "fit-content",
|
|
||||||
borderRadius: 2,
|
|
||||||
backgroundColor: "#eeeeee",
|
|
||||||
padding: 2,
|
|
||||||
overflow: "auto",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<TableContainer component={Paper}>
|
|
||||||
<Table>
|
|
||||||
<TableHead>
|
|
||||||
<TableRow>
|
|
||||||
<TableCell>
|
|
||||||
<strong>Gefundene Werte</strong>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell align="center">
|
|
||||||
<strong>Seite</strong>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
</TableHead>
|
|
||||||
<TableBody>
|
|
||||||
{kpiValues.map((item, index) => (
|
|
||||||
<TableRow
|
|
||||||
key={`${item.entity}_${item.page}_${index}`}
|
|
||||||
sx={{
|
|
||||||
'&:hover': { backgroundColor: '#f9f9f9' },
|
|
||||||
cursor: 'pointer'
|
|
||||||
}}
|
|
||||||
onClick={() => handleRowClick(index)}
|
|
||||||
>
|
|
||||||
<TableCell>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
borderRadius: 1,
|
|
||||||
padding: '4px 8px',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
width: '100%',
|
|
||||||
cursor: 'pointer',
|
|
||||||
'&:hover': {
|
|
||||||
borderColor: '#ccc'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Radio
|
|
||||||
value={index.toString()}
|
|
||||||
checked={selectedIndex === index}
|
|
||||||
onChange={handleRadioChange}
|
|
||||||
sx={{
|
|
||||||
color: '#383838',
|
|
||||||
'&.Mui-checked': { color: '#383838' },
|
|
||||||
padding: '4px',
|
|
||||||
marginRight: 1,
|
|
||||||
'&:focus': {
|
|
||||||
outline: 'none'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<span>{item.entity}</span>
|
|
||||||
</Box>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell align="center">
|
|
||||||
<Link
|
|
||||||
component="button"
|
|
||||||
onClick={(e: React.MouseEvent) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
setCurrentPage(item.page);
|
|
||||||
}}
|
|
||||||
sx={{ cursor: 'pointer' }}
|
|
||||||
>
|
|
||||||
{item.page}
|
|
||||||
</Link>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))}
|
|
||||||
|
|
||||||
<TableRow>
|
|
||||||
<TableCell>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
padding: '4px 8px',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
width: '100%',
|
|
||||||
cursor: 'pointer',
|
|
||||||
'&:hover': {
|
|
||||||
borderColor: '#ccc'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onClick={() => {
|
|
||||||
setSelectedIndex(-1);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Radio
|
|
||||||
value="custom"
|
|
||||||
checked={selectedIndex === -1 && customValue !== ''}
|
|
||||||
onChange={handleRadioChange}
|
|
||||||
sx={{
|
|
||||||
color: '#383838',
|
|
||||||
'&.Mui-checked': { color: '#383838' },
|
|
||||||
padding: '4px',
|
|
||||||
marginRight: 1,
|
|
||||||
'&:focus': {
|
|
||||||
outline: 'none'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<TextField
|
|
||||||
placeholder="Einen abweichenden Wert eingeben..."
|
|
||||||
value={customValue}
|
|
||||||
onChange={handleCustomValueChange}
|
|
||||||
variant="standard"
|
|
||||||
fullWidth
|
|
||||||
InputProps={{
|
|
||||||
disableUnderline: true,
|
|
||||||
}}
|
|
||||||
sx={{
|
|
||||||
'& .MuiInput-input': {
|
|
||||||
padding: 0,
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onClick={(e: React.MouseEvent) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</TableContainer>
|
|
||||||
</Paper>
|
|
||||||
<Box
|
|
||||||
display="flex"
|
|
||||||
flexDirection="column"
|
|
||||||
justifyContent="space-between"
|
|
||||||
gap={3}
|
|
||||||
sx={{ width: "55%", height: "95%" }}
|
|
||||||
>
|
|
||||||
<Paper
|
|
||||||
elevation={2}
|
|
||||||
sx={{
|
|
||||||
width: "100%",
|
|
||||||
height: "fit-content",
|
|
||||||
maxHeight: "100%",
|
|
||||||
borderRadius: 2,
|
|
||||||
backgroundColor: "#eeeeee",
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
overflow: "auto",
|
|
||||||
padding: 2
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<PDFViewer
|
|
||||||
pitchBookId={pitchBook}
|
|
||||||
currentPage={currentPage}
|
|
||||||
onPageChange={setCurrentPage}
|
|
||||||
/>
|
|
||||||
</Paper>
|
|
||||||
<Box mt={2} display="flex" justifyContent="flex-end" gap={2}>
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
onClick={handleAcceptReview}
|
|
||||||
disabled={!selectedValue}
|
|
||||||
sx={{
|
|
||||||
backgroundColor: '#383838',
|
|
||||||
'&:hover': { backgroundColor: '#2e2e2e' },
|
|
||||||
'&.Mui-disabled': { backgroundColor: '#ccc' }
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Überprüfung Annehmen
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Dialog
|
|
||||||
open={showConfirmDialog}
|
|
||||||
onClose={handleCancelDiscard}
|
|
||||||
maxWidth="sm"
|
|
||||||
fullWidth
|
|
||||||
>
|
|
||||||
<DialogTitle sx={{ fontSize: '1.25rem', fontWeight: 'bold' }}>
|
|
||||||
Achtung
|
|
||||||
</DialogTitle>
|
|
||||||
<DialogContent>
|
|
||||||
<DialogContentText sx={{ fontSize: '1rem' }}>
|
|
||||||
Alle vorgenommenen Änderungen werden verworfen.
|
|
||||||
</DialogContentText>
|
|
||||||
</DialogContent>
|
|
||||||
<DialogActions sx={{ p: 3, gap: 2 }}>
|
|
||||||
<Button
|
|
||||||
onClick={handleCancelDiscard}
|
|
||||||
variant="outlined"
|
|
||||||
sx={{
|
|
||||||
color: '#666',
|
|
||||||
borderColor: '#ddd',
|
|
||||||
'&:hover': { backgroundColor: '#f5f5f5' }
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Abbrechen
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
onClick={handleConfirmDiscard}
|
|
||||||
variant="contained"
|
|
||||||
sx={{
|
|
||||||
backgroundColor: '#383838',
|
|
||||||
'&:hover': { backgroundColor: '#2e2e2e' }
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Bestätigen
|
|
||||||
</Button>
|
|
||||||
</DialogActions>
|
|
||||||
</Dialog>
|
|
||||||
</Box>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
};
|
|
||||||
|
|
|
||||||
|
|
@ -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(),
|
|
||||||
});
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue