357 lines
8.8 KiB
TypeScript
357 lines
8.8 KiB
TypeScript
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 type { Kennzahl } from "../types/kpi";
|
|
import { getDisplayType } from "../types/kpi";
|
|
import { fetchKennzahlen as fetchK } from "../util/api";
|
|
import { API_HOST } from "../util/api";
|
|
|
|
type ConfigTableProps = {
|
|
from?: string;
|
|
};
|
|
|
|
export function ConfigTable({ from }: ConfigTableProps) {
|
|
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 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));
|
|
}
|
|
}
|
|
};
|
|
|
|
fetchKennzahlen();
|
|
}, []);
|
|
|
|
const handleToggleActive = async (id: number) => {
|
|
const kennzahl = kennzahlen.find((k) => k.id === id);
|
|
if (!kennzahl) return;
|
|
|
|
try {
|
|
const response = await fetch(
|
|
`${API_HOST}/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}`);
|
|
}
|
|
|
|
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 response = await fetch(
|
|
`${API_HOST}/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}`);
|
|
}
|
|
|
|
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 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 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);
|
|
|
|
setKennzahlen(newKennzahlen);
|
|
setDraggedItem(null);
|
|
await updatePositionsInBackend(newKennzahlen);
|
|
};
|
|
|
|
const handleDragEnd = () => {
|
|
setDraggedItem(null);
|
|
};
|
|
|
|
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;
|
|
}
|
|
|
|
if (target.closest(".drag-handle")) {
|
|
return;
|
|
}
|
|
|
|
navigate({
|
|
to: `/config-detail/$kpiId`,
|
|
params: { kpiId: kennzahl.id.toString() },
|
|
search: from ? { from } : undefined,
|
|
});
|
|
};
|
|
|
|
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
|
|
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>
|
|
);
|
|
}
|