Added table to config.tsx
s8613
parent
f81624b8ab
commit
51615145f6
|
|
@ -1,24 +1,91 @@
|
||||||
import { createFileRoute } from "@tanstack/react-router";
|
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 ArrowBackIcon from "@mui/icons-material/ArrowBack";
|
||||||
|
import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
|
||||||
import { useNavigate } from "@tanstack/react-router";
|
import { useNavigate } from "@tanstack/react-router";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
export const Route = createFileRoute("/config")({
|
export const Route = createFileRoute("/config")({
|
||||||
component: ConfigPage,
|
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() {
|
function ConfigPage() {
|
||||||
const navigate = useNavigate();
|
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 (
|
return (
|
||||||
<Box
|
<Box
|
||||||
height="100vh"
|
minHeight="100vh"
|
||||||
width="100vw"
|
width="100vw"
|
||||||
bgcolor="white"
|
bgcolor="white"
|
||||||
display="flex"
|
display="flex"
|
||||||
flexDirection="column"
|
flexDirection="column"
|
||||||
alignItems="center"
|
alignItems="center"
|
||||||
pt={3}
|
pt={3}
|
||||||
|
pb={4}
|
||||||
>
|
>
|
||||||
<Box
|
<Box
|
||||||
width="100%"
|
width="100%"
|
||||||
|
|
@ -45,22 +112,135 @@ function ConfigPage() {
|
||||||
Neue Kennzahl hinzufügen
|
Neue Kennzahl hinzufügen
|
||||||
</Button>
|
</Button>
|
||||||
</Box>
|
</Box>
|
||||||
<Paper
|
|
||||||
elevation={2}
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
width: "90%",
|
width: "70%",
|
||||||
maxWidth: 1100,
|
maxWidth: 800,
|
||||||
height: 400,
|
|
||||||
mt: 4,
|
mt: 4,
|
||||||
borderRadius: 2,
|
borderRadius: 2,
|
||||||
backgroundColor: "#eeeeee",
|
boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
|
||||||
display: "flex",
|
backgroundColor: "white",
|
||||||
alignItems: "center",
|
overflow: "hidden",
|
||||||
justifyContent: "center",
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Typography color="textSecondary">To-do: Table hierhin</Typography>
|
<table style={{
|
||||||
</Paper>
|
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>
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue