Added detailed page.
s8613
parent
59c918cdce
commit
521e6918bc
|
|
@ -106,6 +106,12 @@ def update_kpi_setting(id):
|
||||||
if "example" in data:
|
if "example" in data:
|
||||||
kpi_setting.example = data["example"]
|
kpi_setting.example = data["example"]
|
||||||
|
|
||||||
|
if "position" in data:
|
||||||
|
kpi_setting.position = data["position"]
|
||||||
|
|
||||||
|
if "active" in data:
|
||||||
|
kpi_setting.active = data["active"]
|
||||||
|
|
||||||
db.session.commit()
|
db.session.commit()
|
||||||
|
|
||||||
return jsonify(kpi_setting.to_dict()), 200
|
return jsonify(kpi_setting.to_dict()), 200
|
||||||
|
|
@ -118,3 +124,28 @@ def delete_kpi_setting(id):
|
||||||
db.session.commit()
|
db.session.commit()
|
||||||
|
|
||||||
return jsonify({"message": f"KPI Setting {id} deleted successfully"}), 200
|
return jsonify({"message": f"KPI Setting {id} deleted successfully"}), 200
|
||||||
|
|
||||||
|
|
||||||
|
@kpi_setting_controller.route("/update-kpi-positions", methods=["PUT"])
|
||||||
|
def update_kpi_positions():
|
||||||
|
data = request.json
|
||||||
|
|
||||||
|
if not data or not isinstance(data, list):
|
||||||
|
return jsonify({"error": "Expected an array of update objects"}), 400
|
||||||
|
|
||||||
|
try:
|
||||||
|
for update_item in data:
|
||||||
|
if "id" not in update_item or "position" not in update_item:
|
||||||
|
return jsonify({"error": "Each item must have 'id' and 'position' fields"}), 400
|
||||||
|
|
||||||
|
kpi_setting = KPISettingModel.query.get_or_404(update_item["id"])
|
||||||
|
kpi_setting.position = update_item["position"]
|
||||||
|
|
||||||
|
db.session.commit()
|
||||||
|
|
||||||
|
updated_kpis = KPISettingModel.query.order_by(KPISettingModel.position).all()
|
||||||
|
return jsonify([kpi.to_dict() for kpi in updated_kpis]), 200
|
||||||
|
|
||||||
|
except Exception as e:
|
||||||
|
db.session.rollback()
|
||||||
|
return jsonify({"error": f"Failed to update positions: {str(e)}"}), 500
|
||||||
|
|
@ -63,7 +63,7 @@ def seed_default_kpi_settings():
|
||||||
"mandatory": False,
|
"mandatory": False,
|
||||||
"type": KPISettingType.BOOLEAN,
|
"type": KPISettingType.BOOLEAN,
|
||||||
"translation": "Article",
|
"translation": "Article",
|
||||||
"example": "Ja",
|
"example": "Artikel 8",
|
||||||
"position": 6,
|
"position": 6,
|
||||||
"active": True
|
"active": True
|
||||||
},
|
},
|
||||||
|
|
@ -113,7 +113,7 @@ def seed_default_kpi_settings():
|
||||||
"mandatory": True,
|
"mandatory": True,
|
||||||
"type": KPISettingType.STRING,
|
"type": KPISettingType.STRING,
|
||||||
"translation": "Duration",
|
"translation": "Duration",
|
||||||
"example": "7 Jahre",
|
"example": "7 Jahre, 10, Evergreen",
|
||||||
"position": 11,
|
"position": 11,
|
||||||
"active": True
|
"active": True
|
||||||
},
|
},
|
||||||
|
|
@ -143,7 +143,7 @@ def seed_default_kpi_settings():
|
||||||
"mandatory": False,
|
"mandatory": False,
|
||||||
"type": KPISettingType.ARRAY,
|
"type": KPISettingType.ARRAY,
|
||||||
"translation": "Sector Allocation",
|
"translation": "Sector Allocation",
|
||||||
"example": "Büroimmobilien, Einzelhandel, Logistik",
|
"example": "Büro, Wohnen, Logistik, Studentenwohnen",
|
||||||
"position": 14,
|
"position": 14,
|
||||||
"active": True
|
"active": True
|
||||||
},
|
},
|
||||||
|
|
@ -153,7 +153,7 @@ def seed_default_kpi_settings():
|
||||||
"mandatory": False,
|
"mandatory": False,
|
||||||
"type": KPISettingType.ARRAY,
|
"type": KPISettingType.ARRAY,
|
||||||
"translation": "Country Allocation",
|
"translation": "Country Allocation",
|
||||||
"example": "Deutschland, Österreich, Schweiz",
|
"example": "Deutschland,Frankreich, Österreich, Schweiz",
|
||||||
"position": 15,
|
"position": 15,
|
||||||
"active": True
|
"active": True
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,322 @@
|
||||||
|
import { Box, Tooltip, CircularProgress, Typography } from "@mui/material";
|
||||||
|
import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { useNavigate } from "@tanstack/react-router";
|
||||||
|
import type { Kennzahl } from "../types/kpi";
|
||||||
|
import { getDisplayType } from "../types/kpi";
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
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}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
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();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
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
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
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(`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}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
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() }
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -14,6 +14,7 @@ import { Route as rootRoute } from './routes/__root'
|
||||||
import { Route as ConfigImport } from './routes/config'
|
import { Route as ConfigImport } from './routes/config'
|
||||||
import { Route as IndexImport } from './routes/index'
|
import { Route as IndexImport } from './routes/index'
|
||||||
import { Route as ExtractedResultPitchBookImport } from './routes/extractedResult.$pitchBook'
|
import { Route as ExtractedResultPitchBookImport } from './routes/extractedResult.$pitchBook'
|
||||||
|
import { Route as ConfigDetailKpiIdImport } from './routes/config-detail.$kpiId'
|
||||||
|
|
||||||
// Create/Update Routes
|
// Create/Update Routes
|
||||||
|
|
||||||
|
|
@ -35,6 +36,12 @@ const ExtractedResultPitchBookRoute = ExtractedResultPitchBookImport.update({
|
||||||
getParentRoute: () => rootRoute,
|
getParentRoute: () => rootRoute,
|
||||||
} as any)
|
} as any)
|
||||||
|
|
||||||
|
const ConfigDetailKpiIdRoute = ConfigDetailKpiIdImport.update({
|
||||||
|
id: '/config-detail/$kpiId',
|
||||||
|
path: '/config-detail/$kpiId',
|
||||||
|
getParentRoute: () => rootRoute,
|
||||||
|
} as any)
|
||||||
|
|
||||||
// Populate the FileRoutesByPath interface
|
// Populate the FileRoutesByPath interface
|
||||||
|
|
||||||
declare module '@tanstack/react-router' {
|
declare module '@tanstack/react-router' {
|
||||||
|
|
@ -53,6 +60,13 @@ declare module '@tanstack/react-router' {
|
||||||
preLoaderRoute: typeof ConfigImport
|
preLoaderRoute: typeof ConfigImport
|
||||||
parentRoute: typeof rootRoute
|
parentRoute: typeof rootRoute
|
||||||
}
|
}
|
||||||
|
'/config-detail/$kpiId': {
|
||||||
|
id: '/config-detail/$kpiId'
|
||||||
|
path: '/config-detail/$kpiId'
|
||||||
|
fullPath: '/config-detail/$kpiId'
|
||||||
|
preLoaderRoute: typeof ConfigDetailKpiIdImport
|
||||||
|
parentRoute: typeof rootRoute
|
||||||
|
}
|
||||||
'/extractedResult/$pitchBook': {
|
'/extractedResult/$pitchBook': {
|
||||||
id: '/extractedResult/$pitchBook'
|
id: '/extractedResult/$pitchBook'
|
||||||
path: '/extractedResult/$pitchBook'
|
path: '/extractedResult/$pitchBook'
|
||||||
|
|
@ -68,12 +82,14 @@ declare module '@tanstack/react-router' {
|
||||||
export interface FileRoutesByFullPath {
|
export interface FileRoutesByFullPath {
|
||||||
'/': typeof IndexRoute
|
'/': typeof IndexRoute
|
||||||
'/config': typeof ConfigRoute
|
'/config': typeof ConfigRoute
|
||||||
|
'/config-detail/$kpiId': typeof ConfigDetailKpiIdRoute
|
||||||
'/extractedResult/$pitchBook': typeof ExtractedResultPitchBookRoute
|
'/extractedResult/$pitchBook': typeof ExtractedResultPitchBookRoute
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface FileRoutesByTo {
|
export interface FileRoutesByTo {
|
||||||
'/': typeof IndexRoute
|
'/': typeof IndexRoute
|
||||||
'/config': typeof ConfigRoute
|
'/config': typeof ConfigRoute
|
||||||
|
'/config-detail/$kpiId': typeof ConfigDetailKpiIdRoute
|
||||||
'/extractedResult/$pitchBook': typeof ExtractedResultPitchBookRoute
|
'/extractedResult/$pitchBook': typeof ExtractedResultPitchBookRoute
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -81,27 +97,39 @@ export interface FileRoutesById {
|
||||||
__root__: typeof rootRoute
|
__root__: typeof rootRoute
|
||||||
'/': typeof IndexRoute
|
'/': typeof IndexRoute
|
||||||
'/config': typeof ConfigRoute
|
'/config': typeof ConfigRoute
|
||||||
|
'/config-detail/$kpiId': typeof ConfigDetailKpiIdRoute
|
||||||
'/extractedResult/$pitchBook': typeof ExtractedResultPitchBookRoute
|
'/extractedResult/$pitchBook': typeof ExtractedResultPitchBookRoute
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface FileRouteTypes {
|
export interface FileRouteTypes {
|
||||||
fileRoutesByFullPath: FileRoutesByFullPath
|
fileRoutesByFullPath: FileRoutesByFullPath
|
||||||
fullPaths: '/' | '/config' | '/extractedResult/$pitchBook'
|
fullPaths:
|
||||||
|
| '/'
|
||||||
|
| '/config'
|
||||||
|
| '/config-detail/$kpiId'
|
||||||
|
| '/extractedResult/$pitchBook'
|
||||||
fileRoutesByTo: FileRoutesByTo
|
fileRoutesByTo: FileRoutesByTo
|
||||||
to: '/' | '/config' | '/extractedResult/$pitchBook'
|
to: '/' | '/config' | '/config-detail/$kpiId' | '/extractedResult/$pitchBook'
|
||||||
id: '__root__' | '/' | '/config' | '/extractedResult/$pitchBook'
|
id:
|
||||||
|
| '__root__'
|
||||||
|
| '/'
|
||||||
|
| '/config'
|
||||||
|
| '/config-detail/$kpiId'
|
||||||
|
| '/extractedResult/$pitchBook'
|
||||||
fileRoutesById: FileRoutesById
|
fileRoutesById: FileRoutesById
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface RootRouteChildren {
|
export interface RootRouteChildren {
|
||||||
IndexRoute: typeof IndexRoute
|
IndexRoute: typeof IndexRoute
|
||||||
ConfigRoute: typeof ConfigRoute
|
ConfigRoute: typeof ConfigRoute
|
||||||
|
ConfigDetailKpiIdRoute: typeof ConfigDetailKpiIdRoute
|
||||||
ExtractedResultPitchBookRoute: typeof ExtractedResultPitchBookRoute
|
ExtractedResultPitchBookRoute: typeof ExtractedResultPitchBookRoute
|
||||||
}
|
}
|
||||||
|
|
||||||
const rootRouteChildren: RootRouteChildren = {
|
const rootRouteChildren: RootRouteChildren = {
|
||||||
IndexRoute: IndexRoute,
|
IndexRoute: IndexRoute,
|
||||||
ConfigRoute: ConfigRoute,
|
ConfigRoute: ConfigRoute,
|
||||||
|
ConfigDetailKpiIdRoute: ConfigDetailKpiIdRoute,
|
||||||
ExtractedResultPitchBookRoute: ExtractedResultPitchBookRoute,
|
ExtractedResultPitchBookRoute: ExtractedResultPitchBookRoute,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -117,6 +145,7 @@ export const routeTree = rootRoute
|
||||||
"children": [
|
"children": [
|
||||||
"/",
|
"/",
|
||||||
"/config",
|
"/config",
|
||||||
|
"/config-detail/$kpiId",
|
||||||
"/extractedResult/$pitchBook"
|
"/extractedResult/$pitchBook"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
@ -126,6 +155,9 @@ export const routeTree = rootRoute
|
||||||
"/config": {
|
"/config": {
|
||||||
"filePath": "config.tsx"
|
"filePath": "config.tsx"
|
||||||
},
|
},
|
||||||
|
"/config-detail/$kpiId": {
|
||||||
|
"filePath": "config-detail.$kpiId.tsx"
|
||||||
|
},
|
||||||
"/extractedResult/$pitchBook": {
|
"/extractedResult/$pitchBook": {
|
||||||
"filePath": "extractedResult.$pitchBook.tsx"
|
"filePath": "extractedResult.$pitchBook.tsx"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,345 @@
|
||||||
|
import { createFileRoute, useNavigate } from "@tanstack/react-router";
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Typography,
|
||||||
|
IconButton,
|
||||||
|
Button,
|
||||||
|
Paper,
|
||||||
|
TextField,
|
||||||
|
FormControlLabel,
|
||||||
|
Checkbox,
|
||||||
|
Select,
|
||||||
|
MenuItem,
|
||||||
|
FormControl,
|
||||||
|
InputLabel,
|
||||||
|
Divider,
|
||||||
|
CircularProgress
|
||||||
|
} from "@mui/material";
|
||||||
|
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import type { Kennzahl } from "../types/kpi";
|
||||||
|
import { typeDisplayMapping } from "../types/kpi";
|
||||||
|
|
||||||
|
export const Route = createFileRoute("/config-detail/$kpiId")({
|
||||||
|
component: KPIDetailPage,
|
||||||
|
});
|
||||||
|
|
||||||
|
function KPIDetailPage() {
|
||||||
|
const { kpiId } = Route.useParams();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [kennzahl, setKennzahl] = useState<Kennzahl | null>(null);
|
||||||
|
const [isEditing, setIsEditing] = useState(false);
|
||||||
|
const [editedKennzahl, setEditedKennzahl] = useState<Kennzahl | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchKennzahl = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
const response = await fetch(`http://localhost:5050/api/kpi_setting/${kpiId}`);
|
||||||
|
if (!response.ok) {
|
||||||
|
if (response.status === 404) {
|
||||||
|
setError('KPI not found');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
const data = await response.json();
|
||||||
|
setKennzahl(data);
|
||||||
|
setEditedKennzahl(data);
|
||||||
|
setError(null);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error fetching KPI:', err);
|
||||||
|
setError('Error loading KPI');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchKennzahl();
|
||||||
|
}, [kpiId]);
|
||||||
|
|
||||||
|
const handleSave = async () => {
|
||||||
|
if (!editedKennzahl) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`http://localhost:5050/api/kpi_setting/${kpiId}`, {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify(editedKennzahl),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const updatedKennzahl = await response.json();
|
||||||
|
setKennzahl(updatedKennzahl);
|
||||||
|
setEditedKennzahl(updatedKennzahl);
|
||||||
|
setIsEditing(false);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error saving KPI:', err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancel = () => {
|
||||||
|
setEditedKennzahl(kennzahl);
|
||||||
|
setIsEditing(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
minHeight="100vh"
|
||||||
|
width="100vw"
|
||||||
|
bgcolor="#f5f5f5"
|
||||||
|
display="flex"
|
||||||
|
justifyContent="center"
|
||||||
|
alignItems="center"
|
||||||
|
flexDirection="column"
|
||||||
|
>
|
||||||
|
<CircularProgress sx={{ color: '#383838', mb: 2 }} />
|
||||||
|
<Typography>Lade KPI Details...</Typography>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error || !kennzahl) {
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
minHeight="100vh"
|
||||||
|
width="100vw"
|
||||||
|
bgcolor="#f5f5f5"
|
||||||
|
display="flex"
|
||||||
|
justifyContent="center"
|
||||||
|
alignItems="center"
|
||||||
|
flexDirection="column"
|
||||||
|
>
|
||||||
|
<Typography variant="h6" color="error" mb={2}>
|
||||||
|
{error || 'KPI nicht gefunden'}
|
||||||
|
</Typography>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
onClick={() => navigate({ to: "/config" })}
|
||||||
|
sx={{
|
||||||
|
backgroundColor: "#383838",
|
||||||
|
"&:hover": { backgroundColor: "#2e2e2e" },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Zurück zur Konfiguration
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentKennzahl = isEditing ? editedKennzahl! : kennzahl;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
minHeight="100vh"
|
||||||
|
width="100vw"
|
||||||
|
bgcolor="#f5f5f5"
|
||||||
|
display="flex"
|
||||||
|
flexDirection="column"
|
||||||
|
alignItems="center"
|
||||||
|
pt={3}
|
||||||
|
pb={4}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
width="100%"
|
||||||
|
display="flex"
|
||||||
|
justifyContent="space-between"
|
||||||
|
alignItems="center"
|
||||||
|
px={4}
|
||||||
|
mb={4}
|
||||||
|
>
|
||||||
|
<Box display="flex" alignItems="center">
|
||||||
|
<IconButton onClick={() => navigate({ to: "/config" })}>
|
||||||
|
<ArrowBackIcon fontSize="large" sx={{ color: '#383838' }}/>
|
||||||
|
</IconButton>
|
||||||
|
<Typography variant="h5" fontWeight="bold" ml={3}>
|
||||||
|
Detailansicht
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
sx={{
|
||||||
|
backgroundColor: "#383838",
|
||||||
|
"&:hover": { backgroundColor: "#2e2e2e" },
|
||||||
|
}}
|
||||||
|
onClick={isEditing ? undefined : () => setIsEditing(true)}
|
||||||
|
disabled={isEditing}
|
||||||
|
>
|
||||||
|
Bearbeiten
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
<Paper
|
||||||
|
elevation={2}
|
||||||
|
sx={{
|
||||||
|
width: "90%",
|
||||||
|
maxWidth: 800,
|
||||||
|
p: 4,
|
||||||
|
borderRadius: 2,
|
||||||
|
backgroundColor: "white"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box mb={4}>
|
||||||
|
<Typography variant="h6" fontWeight="bold" mb={2}>
|
||||||
|
Kennzahl
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
{isEditing ? (
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
label="Name"
|
||||||
|
value={currentKennzahl.name}
|
||||||
|
onChange={(e) => setEditedKennzahl(prev => prev ? {...prev, name: e.target.value} : null)}
|
||||||
|
sx={{ mb: 2 }}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Typography variant="body1" sx={{ mb: 2, fontSize: 16 }}>
|
||||||
|
{currentKennzahl.name}
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Divider sx={{ my: 3 }} />
|
||||||
|
<Box mb={4}>
|
||||||
|
<Typography variant="h6" fontWeight="bold" mb={2}>
|
||||||
|
Beschreibung
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
{isEditing ? (
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
multiline
|
||||||
|
rows={3}
|
||||||
|
label="Beschreibung"
|
||||||
|
value={currentKennzahl.description}
|
||||||
|
onChange={(e) => setEditedKennzahl(prev => prev ? {...prev, description: e.target.value} : null)}
|
||||||
|
helperText="Beschreibung der Kennzahl"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Typography variant="body1" color="text.secondary">
|
||||||
|
{currentKennzahl.description || "Zurzeit ist die Beschreibung der Kennzahl leer. Klicken Sie auf den Bearbeiten-Button, um die Beschreibung zu ergänzen."}
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Box mt={3}>
|
||||||
|
<FormControlLabel
|
||||||
|
control={
|
||||||
|
<Checkbox
|
||||||
|
checked={currentKennzahl.mandatory}
|
||||||
|
onChange={(e) => isEditing && setEditedKennzahl(prev => prev ? {...prev, mandatory: e.target.checked} : null)}
|
||||||
|
disabled={!isEditing}
|
||||||
|
sx={{ color: '#383838' }}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
label="Erforderlich"
|
||||||
|
/>
|
||||||
|
<Typography variant="body2" color="text.secondary" ml={4}>
|
||||||
|
Die Kennzahl erlaubt keine leeren Werte
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Divider sx={{ my: 3 }} />
|
||||||
|
|
||||||
|
<Box mb={4}>
|
||||||
|
<Typography variant="h6" fontWeight="bold" mb={2}>
|
||||||
|
Format: {typeDisplayMapping[currentKennzahl.type] || currentKennzahl.type}
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
{isEditing ? (
|
||||||
|
<FormControl fullWidth sx={{ mb: 2 }}>
|
||||||
|
<InputLabel>Typ</InputLabel>
|
||||||
|
<Select
|
||||||
|
value={currentKennzahl.type}
|
||||||
|
label="Typ"
|
||||||
|
onChange={(e) => setEditedKennzahl(prev => prev ? {...prev, type: e.target.value} : null)}
|
||||||
|
>
|
||||||
|
<MenuItem value="string">Text</MenuItem>
|
||||||
|
<MenuItem value="number">Zahl</MenuItem>
|
||||||
|
<MenuItem value="date">Datum</MenuItem>
|
||||||
|
<MenuItem value="boolean">Ja/Nein</MenuItem>
|
||||||
|
<MenuItem value="array">Liste (mehrfach)</MenuItem>
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
) : null}
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Divider sx={{ my: 3 }} />
|
||||||
|
<Box mb={4}>
|
||||||
|
<Typography variant="h6" fontWeight="bold" mb={2}>
|
||||||
|
Synonyme & Übersetzungen
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
{isEditing ? (
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
label="Übersetzung"
|
||||||
|
value={currentKennzahl.translation}
|
||||||
|
onChange={(e) => setEditedKennzahl(prev => prev ? {...prev, translation: e.target.value} : null)}
|
||||||
|
helperText="z.B. Englische Übersetzung der Kennzahl"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Typography variant="body1" color="text.secondary">
|
||||||
|
{currentKennzahl.translation || "Zurzeit gibt es keine Einträge für Synonyme und Übersetzungen der Kennzahl. Klicken Sie auf den Bearbeiten-Button, um die Liste zu ergänzen."}
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Divider sx={{ my: 3 }} />
|
||||||
|
<Box mb={4}>
|
||||||
|
<Typography variant="h6" fontWeight="bold" mb={2}>
|
||||||
|
Beispiele von Kennzahl
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
{isEditing ? (
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
multiline
|
||||||
|
rows={2}
|
||||||
|
label="Beispiel"
|
||||||
|
value={currentKennzahl.example}
|
||||||
|
onChange={(e) => setEditedKennzahl(prev => prev ? {...prev, example: e.target.value} : null)}
|
||||||
|
helperText="Beispielwerte für diese Kennzahl"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Typography variant="body1" color="text.secondary">
|
||||||
|
{currentKennzahl.example || "Zurzeit gibt es keine Beispiele der Kennzahl. Klicken Sie auf den Bearbeiten-Button, um die Liste zu ergänzen."}
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
{isEditing && (
|
||||||
|
<Box display="flex" justifyContent="flex-end" gap={2} mt={4}>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
onClick={handleCancel}
|
||||||
|
sx={{
|
||||||
|
borderColor: "#383838",
|
||||||
|
color: "#383838",
|
||||||
|
"&:hover": { borderColor: "#2e2e2e", backgroundColor: "#f5f5f5" }
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Abbrechen
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
onClick={handleSave}
|
||||||
|
sx={{
|
||||||
|
backgroundColor: "#383838",
|
||||||
|
"&:hover": { backgroundColor: "#2e2e2e" },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Speichern
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</Paper>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,180 +1,16 @@
|
||||||
import { createFileRoute } from "@tanstack/react-router";
|
import { createFileRoute } from "@tanstack/react-router";
|
||||||
import { Box, Button, IconButton, Typography, CircularProgress } 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 { useEffect, useState } from "react";
|
import { ConfigTable } from "../components/ConfigTable";
|
||||||
|
|
||||||
export const Route = createFileRoute("/config")({
|
export const Route = createFileRoute("/config")({
|
||||||
component: ConfigPage,
|
component: ConfigPage,
|
||||||
});
|
});
|
||||||
|
|
||||||
interface Kennzahl {
|
|
||||||
id: number;
|
|
||||||
name: string;
|
|
||||||
description: string;
|
|
||||||
mandatory: boolean;
|
|
||||||
type: string;
|
|
||||||
translation: string;
|
|
||||||
example: string;
|
|
||||||
position: number;
|
|
||||||
active: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const typeDisplayMapping: Record<string, string> = {
|
|
||||||
"string": "Text",
|
|
||||||
"date": "Datum",
|
|
||||||
"boolean": "Ja/Nein",
|
|
||||||
"number": "Zahl",
|
|
||||||
"array": "Liste (mehrfach)"
|
|
||||||
};
|
|
||||||
|
|
||||||
const getDisplayType = (backendType: string): string => {
|
|
||||||
return typeDisplayMapping[backendType] || backendType;
|
|
||||||
};
|
|
||||||
|
|
||||||
function ConfigPage() {
|
function ConfigPage() {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [kennzahlen, setKennzahlen] = useState<Kennzahl[]>([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [draggedItem, setDraggedItem] = useState<Kennzahl | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const fetchKennzahlen = async () => {
|
|
||||||
try {
|
|
||||||
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();
|
|
||||||
const sortedData = data.sort((a: Kennzahl, b: Kennzahl) => a.position - b.position);
|
|
||||||
setKennzahlen(sortedData);
|
|
||||||
setError(null);
|
|
||||||
} catch (err) {
|
|
||||||
setError(err instanceof Error ? err.message : 'Unbekannter Fehler beim Laden der Daten');
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchKennzahlen();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
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({
|
|
||||||
...kennzahl,
|
|
||||||
active: !kennzahl.active
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`HTTP error! status: ${response.status}`);
|
|
||||||
}
|
|
||||||
setKennzahlen(prev =>
|
|
||||||
prev.map(item =>
|
|
||||||
item.id === id ? { ...item, active: !item.active } : item
|
|
||||||
)
|
|
||||||
);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Fehler beim Aktualisieren der Kennzahl:', err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
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);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<Box
|
|
||||||
minHeight="100vh"
|
|
||||||
width="100vw"
|
|
||||||
bgcolor="white"
|
|
||||||
display="flex"
|
|
||||||
justifyContent="center"
|
|
||||||
alignItems="center"
|
|
||||||
flexDirection="column"
|
|
||||||
>
|
|
||||||
<CircularProgress sx={{ color: '#383838', mb: 2 }} />
|
|
||||||
<Typography>Lade Kennzahlen...</Typography>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
return (
|
|
||||||
<Box
|
|
||||||
minHeight="100vh"
|
|
||||||
width="100vw"
|
|
||||||
bgcolor="white"
|
|
||||||
display="flex"
|
|
||||||
justifyContent="center"
|
|
||||||
alignItems="center"
|
|
||||||
flexDirection="column"
|
|
||||||
>
|
|
||||||
<Typography color="error" mb={2} variant="h6">
|
|
||||||
Fehler beim Laden der Daten
|
|
||||||
</Typography>
|
|
||||||
<Typography color="text.secondary" mb={3} textAlign="center" maxWidth="500px">
|
|
||||||
{error}
|
|
||||||
</Typography>
|
|
||||||
<Box display="flex" gap={2}>
|
|
||||||
<Button
|
|
||||||
variant="outlined"
|
|
||||||
onClick={() => navigate({ to: "/" })}
|
|
||||||
>
|
|
||||||
Zurück
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
sx={{
|
|
||||||
backgroundColor: "#383838",
|
|
||||||
"&:hover": { backgroundColor: "#2e2e2e" },
|
|
||||||
}}
|
|
||||||
onClick={() => window.location.reload()}
|
|
||||||
>
|
|
||||||
Neu laden
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
|
|
@ -212,134 +48,8 @@ function ConfigPage() {
|
||||||
Neue Kennzahl hinzufügen
|
Neue Kennzahl hinzufügen
|
||||||
</Button>
|
</Button>
|
||||||
</Box>
|
</Box>
|
||||||
|
<Box sx={{ width: "100%", mt: 4, display: "flex", justifyContent: "center" }}>
|
||||||
<Box
|
<ConfigTable />
|
||||||
sx={{
|
|
||||||
width: "70%",
|
|
||||||
maxWidth: 800,
|
|
||||||
mt: 4,
|
|
||||||
borderRadius: 2,
|
|
||||||
boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
|
|
||||||
backgroundColor: "white",
|
|
||||||
overflow: "hidden",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<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"
|
|
||||||
}}>
|
|
||||||
{getDisplayType(kennzahl.type)}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
export interface Kennzahl {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
mandatory: boolean;
|
||||||
|
type: string;
|
||||||
|
translation: string;
|
||||||
|
example: string;
|
||||||
|
position: number;
|
||||||
|
active: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const typeDisplayMapping: Record<string, string> = {
|
||||||
|
"string": "Text",
|
||||||
|
"date": "Datum",
|
||||||
|
"boolean": "Ja/Nein",
|
||||||
|
"number": "Zahl",
|
||||||
|
"array": "Liste (mehrfach)"
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getDisplayType = (backendType: string): string => {
|
||||||
|
return typeDisplayMapping[backendType] || backendType;
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue