From 521e6918bcfafcdb71fb9fbf67ed7310c345ce55 Mon Sep 17 00:00:00 2001 From: s8613 Date: Thu, 5 Jun 2025 19:56:24 +0200 Subject: [PATCH] Added detailed page. --- .../controller/kpi_setting_controller.py | 31 ++ .../backend/coordinator/model/seed_data.py | 8 +- .../frontend/src/components/ConfigTable.tsx | 322 ++++++++++++++++ project/frontend/src/routeTree.gen.ts | 38 +- .../src/routes/config-detail.$kpiId.tsx | 345 ++++++++++++++++++ project/frontend/src/routes/config.tsx | 298 +-------------- project/frontend/src/types/kpi.ts | 23 ++ 7 files changed, 764 insertions(+), 301 deletions(-) create mode 100644 project/frontend/src/components/ConfigTable.tsx create mode 100644 project/frontend/src/routes/config-detail.$kpiId.tsx create mode 100644 project/frontend/src/types/kpi.ts diff --git a/project/backend/coordinator/controller/kpi_setting_controller.py b/project/backend/coordinator/controller/kpi_setting_controller.py index 4f48cb2..94fee96 100644 --- a/project/backend/coordinator/controller/kpi_setting_controller.py +++ b/project/backend/coordinator/controller/kpi_setting_controller.py @@ -106,6 +106,12 @@ def update_kpi_setting(id): if "example" in data: 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() return jsonify(kpi_setting.to_dict()), 200 @@ -118,3 +124,28 @@ def delete_kpi_setting(id): db.session.commit() 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 \ No newline at end of file diff --git a/project/backend/coordinator/model/seed_data.py b/project/backend/coordinator/model/seed_data.py index 30b50a3..e13145b 100644 --- a/project/backend/coordinator/model/seed_data.py +++ b/project/backend/coordinator/model/seed_data.py @@ -63,7 +63,7 @@ def seed_default_kpi_settings(): "mandatory": False, "type": KPISettingType.BOOLEAN, "translation": "Article", - "example": "Ja", + "example": "Artikel 8", "position": 6, "active": True }, @@ -113,7 +113,7 @@ def seed_default_kpi_settings(): "mandatory": True, "type": KPISettingType.STRING, "translation": "Duration", - "example": "7 Jahre", + "example": "7 Jahre, 10, Evergreen", "position": 11, "active": True }, @@ -143,7 +143,7 @@ def seed_default_kpi_settings(): "mandatory": False, "type": KPISettingType.ARRAY, "translation": "Sector Allocation", - "example": "Büroimmobilien, Einzelhandel, Logistik", + "example": "Büro, Wohnen, Logistik, Studentenwohnen", "position": 14, "active": True }, @@ -153,7 +153,7 @@ def seed_default_kpi_settings(): "mandatory": False, "type": KPISettingType.ARRAY, "translation": "Country Allocation", - "example": "Deutschland, Österreich, Schweiz", + "example": "Deutschland,Frankreich, Österreich, Schweiz", "position": 15, "active": True } diff --git a/project/frontend/src/components/ConfigTable.tsx b/project/frontend/src/components/ConfigTable.tsx new file mode 100644 index 0000000..017d113 --- /dev/null +++ b/project/frontend/src/components/ConfigTable.tsx @@ -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([]); + const [draggedItem, setDraggedItem] = useState(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, item: Kennzahl) => { + setDraggedItem(item); + e.dataTransfer.effectAllowed = "move"; + }; + + const handleDragOver = (e: React.DragEvent) => { + e.preventDefault(); + e.dataTransfer.dropEffect = "move"; + }; + + const handleDrop = async (e: React.DragEvent, 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 ( + + + Lade Kennzahlen-Konfiguration... + + ); + } + + return ( + + + + + + + + + + + + {kennzahlen.map((kennzahl) => ( + 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"; + } + }} + > + + + + + + ))} + +
+ + Aktiv + + Name + + Format +
+
+ + Neuanordnung der Kennzahlen
+ Hier können Sie die Kennzahlen nach Belieben per Drag and Drop neu anordnen. + + } + placement="left" + arrow + > + + +
+ 		+ handleToggleActive(kennzahl.id)} + disabled={isUpdatingPositions} + style={{ + width: "18px", + height: "18px", + cursor: isUpdatingPositions ? "default" : "pointer", + accentColor: "#383838" + }} + onClick={(e) => e.stopPropagation()} + /> + + + {kennzahl.name} + + + + {getDisplayType(kennzahl.type)} + +
+ + ); +} \ No newline at end of file diff --git a/project/frontend/src/routeTree.gen.ts b/project/frontend/src/routeTree.gen.ts index b3c2de7..021e778 100644 --- a/project/frontend/src/routeTree.gen.ts +++ b/project/frontend/src/routeTree.gen.ts @@ -14,6 +14,7 @@ import { Route as rootRoute } from './routes/__root' import { Route as ConfigImport } from './routes/config' import { Route as IndexImport } from './routes/index' import { Route as ExtractedResultPitchBookImport } from './routes/extractedResult.$pitchBook' +import { Route as ConfigDetailKpiIdImport } from './routes/config-detail.$kpiId' // Create/Update Routes @@ -35,6 +36,12 @@ const ExtractedResultPitchBookRoute = ExtractedResultPitchBookImport.update({ getParentRoute: () => rootRoute, } as any) +const ConfigDetailKpiIdRoute = ConfigDetailKpiIdImport.update({ + id: '/config-detail/$kpiId', + path: '/config-detail/$kpiId', + getParentRoute: () => rootRoute, +} as any) + // Populate the FileRoutesByPath interface declare module '@tanstack/react-router' { @@ -53,6 +60,13 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof ConfigImport 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': { id: '/extractedResult/$pitchBook' path: '/extractedResult/$pitchBook' @@ -68,12 +82,14 @@ declare module '@tanstack/react-router' { export interface FileRoutesByFullPath { '/': typeof IndexRoute '/config': typeof ConfigRoute + '/config-detail/$kpiId': typeof ConfigDetailKpiIdRoute '/extractedResult/$pitchBook': typeof ExtractedResultPitchBookRoute } export interface FileRoutesByTo { '/': typeof IndexRoute '/config': typeof ConfigRoute + '/config-detail/$kpiId': typeof ConfigDetailKpiIdRoute '/extractedResult/$pitchBook': typeof ExtractedResultPitchBookRoute } @@ -81,27 +97,39 @@ export interface FileRoutesById { __root__: typeof rootRoute '/': typeof IndexRoute '/config': typeof ConfigRoute + '/config-detail/$kpiId': typeof ConfigDetailKpiIdRoute '/extractedResult/$pitchBook': typeof ExtractedResultPitchBookRoute } export interface FileRouteTypes { fileRoutesByFullPath: FileRoutesByFullPath - fullPaths: '/' | '/config' | '/extractedResult/$pitchBook' + fullPaths: + | '/' + | '/config' + | '/config-detail/$kpiId' + | '/extractedResult/$pitchBook' fileRoutesByTo: FileRoutesByTo - to: '/' | '/config' | '/extractedResult/$pitchBook' - id: '__root__' | '/' | '/config' | '/extractedResult/$pitchBook' + to: '/' | '/config' | '/config-detail/$kpiId' | '/extractedResult/$pitchBook' + id: + | '__root__' + | '/' + | '/config' + | '/config-detail/$kpiId' + | '/extractedResult/$pitchBook' fileRoutesById: FileRoutesById } export interface RootRouteChildren { IndexRoute: typeof IndexRoute ConfigRoute: typeof ConfigRoute + ConfigDetailKpiIdRoute: typeof ConfigDetailKpiIdRoute ExtractedResultPitchBookRoute: typeof ExtractedResultPitchBookRoute } const rootRouteChildren: RootRouteChildren = { IndexRoute: IndexRoute, ConfigRoute: ConfigRoute, + ConfigDetailKpiIdRoute: ConfigDetailKpiIdRoute, ExtractedResultPitchBookRoute: ExtractedResultPitchBookRoute, } @@ -117,6 +145,7 @@ export const routeTree = rootRoute "children": [ "/", "/config", + "/config-detail/$kpiId", "/extractedResult/$pitchBook" ] }, @@ -126,6 +155,9 @@ export const routeTree = rootRoute "/config": { "filePath": "config.tsx" }, + "/config-detail/$kpiId": { + "filePath": "config-detail.$kpiId.tsx" + }, "/extractedResult/$pitchBook": { "filePath": "extractedResult.$pitchBook.tsx" } diff --git a/project/frontend/src/routes/config-detail.$kpiId.tsx b/project/frontend/src/routes/config-detail.$kpiId.tsx new file mode 100644 index 0000000..e4cabc8 --- /dev/null +++ b/project/frontend/src/routes/config-detail.$kpiId.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(null); + const [isEditing, setIsEditing] = useState(false); + const [editedKennzahl, setEditedKennzahl] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(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 ( + + + Lade KPI Details... + + ); + } + + if (error || !kennzahl) { + return ( + + + {error || 'KPI nicht gefunden'} + + + + ); + } + + const currentKennzahl = isEditing ? editedKennzahl! : kennzahl; + + return ( + + + + navigate({ to: "/config" })}> + + + + Detailansicht + + + + + + + + Kennzahl + + + {isEditing ? ( + setEditedKennzahl(prev => prev ? {...prev, name: e.target.value} : null)} + sx={{ mb: 2 }} + /> + ) : ( + + {currentKennzahl.name} + + )} + + + + + + Beschreibung + + + {isEditing ? ( + setEditedKennzahl(prev => prev ? {...prev, description: e.target.value} : null)} + helperText="Beschreibung der Kennzahl" + /> + ) : ( + + {currentKennzahl.description || "Zurzeit ist die Beschreibung der Kennzahl leer. Klicken Sie auf den Bearbeiten-Button, um die Beschreibung zu ergänzen."} + + )} + + + isEditing && setEditedKennzahl(prev => prev ? {...prev, mandatory: e.target.checked} : null)} + disabled={!isEditing} + sx={{ color: '#383838' }} + /> + } + label="Erforderlich" + /> + + Die Kennzahl erlaubt keine leeren Werte + + + + + + + + + Format: {typeDisplayMapping[currentKennzahl.type] || currentKennzahl.type} + + + {isEditing ? ( + + Typ + + + ) : null} + + + + + + Synonyme & Übersetzungen + + + {isEditing ? ( + setEditedKennzahl(prev => prev ? {...prev, translation: e.target.value} : null)} + helperText="z.B. Englische Übersetzung der Kennzahl" + /> + ) : ( + + {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."} + + )} + + + + + + Beispiele von Kennzahl + + + {isEditing ? ( + setEditedKennzahl(prev => prev ? {...prev, example: e.target.value} : null)} + helperText="Beispielwerte für diese Kennzahl" + /> + ) : ( + + {currentKennzahl.example || "Zurzeit gibt es keine Beispiele der Kennzahl. Klicken Sie auf den Bearbeiten-Button, um die Liste zu ergänzen."} + + )} + + {isEditing && ( + + + + + )} + + + ); +} \ No newline at end of file diff --git a/project/frontend/src/routes/config.tsx b/project/frontend/src/routes/config.tsx index 29eea58..a30f3ab 100644 --- a/project/frontend/src/routes/config.tsx +++ b/project/frontend/src/routes/config.tsx @@ -1,180 +1,16 @@ 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 DragIndicatorIcon from "@mui/icons-material/DragIndicator"; import { useNavigate } from "@tanstack/react-router"; -import { useEffect, useState } from "react"; +import { ConfigTable } from "../components/ConfigTable"; export const Route = createFileRoute("/config")({ 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": "Text", - "date": "Datum", - "boolean": "Ja/Nein", - "number": "Zahl", - "array": "Liste (mehrfach)" -}; - -const getDisplayType = (backendType: string): string => { - return typeDisplayMapping[backendType] || backendType; -}; function ConfigPage() { const navigate = useNavigate(); - const [kennzahlen, setKennzahlen] = useState([]); - const [loading, setLoading] = useState(true); - const [error, setError] = useState(null); - const [draggedItem, setDraggedItem] = useState(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, item: Kennzahl) => { - setDraggedItem(item); - e.dataTransfer.effectAllowed = "move"; - }; - - const handleDragOver = (e: React.DragEvent) => { - e.preventDefault(); - e.dataTransfer.dropEffect = "move"; - }; - - const handleDrop = (e: React.DragEvent, 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 ( - - - Lade Kennzahlen... - - ); - } - - if (error) { - return ( - - - Fehler beim Laden der Daten - - - {error} - - - - - - - ); - } return ( - - - - - - - - - - - - - {kennzahlen.map((kennzahl) => ( - 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"; - } - }} - > - - - - - - ))} - -
- - - Aktiv - - Name - - Format -
- - - handleToggleActive(kennzahl.id)} - style={{ - width: "18px", - height: "18px", - cursor: "pointer", - accentColor: "#383838" - }} - onClick={(e) => e.stopPropagation()} - /> - - {kennzahl.name} - - - {getDisplayType(kennzahl.type)} - -
+ + ); diff --git a/project/frontend/src/types/kpi.ts b/project/frontend/src/types/kpi.ts new file mode 100644 index 0000000..c8d66da --- /dev/null +++ b/project/frontend/src/types/kpi.ts @@ -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": "Text", + "date": "Datum", + "boolean": "Ja/Nein", + "number": "Zahl", + "array": "Liste (mehrfach)" +}; + +export const getDisplayType = (backendType: string): string => { + return typeDisplayMapping[backendType] || backendType; +}; \ No newline at end of file