Added table to config.tsx
s8613
parent
f81624b8ab
commit
51615145f6
|
|
@ -1,24 +1,91 @@
|
|||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { Box, Button, IconButton, Paper, Typography } from "@mui/material";
|
||||
import { Box, Button, IconButton, Typography } from "@mui/material";
|
||||
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
|
||||
import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
|
||||
import { useNavigate } from "@tanstack/react-router";
|
||||
import { useState } from "react";
|
||||
|
||||
export const Route = createFileRoute("/config")({
|
||||
component: ConfigPage,
|
||||
});
|
||||
|
||||
interface Kennzahl {
|
||||
id: number;
|
||||
name: string;
|
||||
format: string;
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
const mockKennzahlen: Kennzahl[] = [
|
||||
{ id: 1, name: "Fondsname", format: "Text", active: true },
|
||||
{ id: 2, name: "Fondsmanager", format: "Text", active: true },
|
||||
{ id: 3, name: "AIFM", format: "Text", active: false },
|
||||
{ id: 4, name: "Datum", format: "Datum", active: true },
|
||||
{ id: 5, name: "Risikoprofil", format: "Text", active: true },
|
||||
{ id: 6, name: "Artikel", format: "Ja/Nein", active: true },
|
||||
{ id: 7, name: "Zielrendite", format: "Zahl", active: true },
|
||||
{ id: 8, name: "Rendite", format: "Zahl", active: true },
|
||||
{ id: 9, name: "Zielausschüttung", format: "Zahl", active: true },
|
||||
{ id: 10, name: "Ausschüttung", format: "Zahl", active: true },
|
||||
{ id: 11, name: "Laufzeit", format: "Text", active: true },
|
||||
{ id: 12, name: "LTV", format: "Zahl", active: true },
|
||||
{ id: 13, name: "Managementgebühren", format: "Zahl", active: true },
|
||||
{ id: 14, name: "Sektorenallokation", format: "Liste (mehrfach)", active: true },
|
||||
{ id: 15, name: "Länderallokation", format: "Liste (mehrfach)", active: true },
|
||||
];
|
||||
|
||||
function ConfigPage() {
|
||||
const navigate = useNavigate();
|
||||
const [kennzahlen, setKennzahlen] = useState<Kennzahl[]>(mockKennzahlen);
|
||||
const [draggedItem, setDraggedItem] = useState<Kennzahl | null>(null);
|
||||
|
||||
const handleToggleActive = (id: number) => {
|
||||
setKennzahlen(prev =>
|
||||
prev.map(item =>
|
||||
item.id === id ? { ...item, active: !item.active } : item
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
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 = (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);
|
||||
};
|
||||
|
||||
const handleDragEnd = () => {
|
||||
setDraggedItem(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
height="100vh"
|
||||
minHeight="100vh"
|
||||
width="100vw"
|
||||
bgcolor="white"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
pt={3}
|
||||
pb={4}
|
||||
>
|
||||
<Box
|
||||
width="100%"
|
||||
|
|
@ -45,22 +112,135 @@ function ConfigPage() {
|
|||
Neue Kennzahl hinzufügen
|
||||
</Button>
|
||||
</Box>
|
||||
<Paper
|
||||
elevation={2}
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
width: "90%",
|
||||
maxWidth: 1100,
|
||||
height: 400,
|
||||
width: "70%",
|
||||
maxWidth: 800,
|
||||
mt: 4,
|
||||
borderRadius: 2,
|
||||
backgroundColor: "#eeeeee",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
|
||||
backgroundColor: "white",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<Typography color="textSecondary">To-do: Table hierhin</Typography>
|
||||
</Paper>
|
||||
<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
|
||||
onDragStart={(e) => handleDragStart(e, kennzahl)}
|
||||
onDragOver={handleDragOver}
|
||||
onDrop={(e) => handleDrop(e, kennzahl)}
|
||||
onDragEnd={handleDragEnd}
|
||||
style={{
|
||||
borderBottom: "1px solid #e0e0e0",
|
||||
cursor: "move",
|
||||
backgroundColor: draggedItem?.id === kennzahl.id ? "#f0f0f0" : "white",
|
||||
opacity: draggedItem?.id === kennzahl.id ? 0.5 : 1
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (!draggedItem) {
|
||||
e.currentTarget.style.backgroundColor = "#f9f9f9";
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (!draggedItem) {
|
||||
e.currentTarget.style.backgroundColor = "white";
|
||||
}
|
||||
}}
|
||||
>
|
||||
<td style={{ padding: "12px", textAlign: "center" }}>
|
||||
<DragIndicatorIcon
|
||||
sx={{
|
||||
color: "#999",
|
||||
cursor: "grab",
|
||||
"&:active": { cursor: "grabbing" }
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
<td style={{ padding: "12px" }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={kennzahl.active}
|
||||
onChange={() => handleToggleActive(kennzahl.id)}
|
||||
style={{
|
||||
width: "18px",
|
||||
height: "18px",
|
||||
cursor: "pointer",
|
||||
accentColor: "#383838"
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
</td>
|
||||
<td style={{
|
||||
padding: "12px",
|
||||
fontSize: "14px",
|
||||
color: "#333"
|
||||
}}>
|
||||
{kennzahl.name}
|
||||
</td>
|
||||
<td style={{ padding: "12px" }}>
|
||||
<span style={{
|
||||
color: "#333",
|
||||
padding: "4px 12px",
|
||||
borderRadius: "16px",
|
||||
fontSize: "12px",
|
||||
fontWeight: "500",
|
||||
border: "1px solid #ddd",
|
||||
backgroundColor: "#f8f9fa"
|
||||
}}>
|
||||
{kennzahl.format}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue