Vereinfachung des Datenmodells und Anpassen der UI

buildtime/client/material-editor/src/components/LanguagesTableView.tsx

@@ -1,22 +1,18 @@
-import {useState, useEffect} from 'react';
 import Tooltip from '@mui/material/Tooltip';
 import { ExportCsv } from '@mui/x-data-grid';
 import type {Language} from '../data/language';
 
-import { DataGrid, Toolbar, ToolbarButton, useGridApiRef } from '@mui/x-data-grid';
+import { DataGrid, Toolbar, ToolbarButton} from '@mui/x-data-grid';
 import Paper from '@mui/material/Paper';
 import DeleteIcon from '@mui/icons-material/Delete';
 import AddIcon from '@mui/icons-material/Add';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
-
-import {getLanguages} from '../api/language/languages.api'; 
 import {updateLanguage} from '../api/language/languages.api';
+import type { GridSelectionModel } from '@mui/x-data-grid';
 import { Typography } from '@mui/material';
 
-const LanguagesTableView = () => {
-    const [languages, setLanguages] = useState<Language[]>([]);
-
-    const apiRef = useGridApiRef();
+const LanguagesTableView = ({ languages, setSelectedRow }: { languages: Language[]; setSelectedRow: (id: number) => void }) => {
+    // const [languages, setLanguages] = useState<Language[]>([]);
 
     function CustomToolbar() {
         return (
@@ -38,34 +34,50 @@ const LanguagesTableView = () => {
             </Toolbar>
         )
     }
-    useEffect(() => {
-        getLanguages().then(setLanguages);
-    }, []);
+
 
     return (
         <div>
-            <Paper sx={{ height: 600, width: '50%' }}>
+            <Paper sx={{ height: 600, width: '100%' }}>
                 <DataGrid
-                      initialState={{
+                    sx={{ border: 1, borderRadius: 2, 
+                        boxShadow: 2, 
+                        borderColor: 'primary.main', 
+                        '& .MuiDataGrid-cell:hover': { color: 'primary.main' },
+                        '& .even-row': { backgroundColor: 'rgba(0, 0, 1, 0.02)' },
+                        '& .odd-row': { backgroundColor: 'rgba(0, 0, 20, 0.04)' },
+                    }}
+
+                    columnHeaderHeight={36}
+                    rowHeight={25}
+                    rowSpacingType="margin"
+                    initialState={{
                             sorting: {
                             sortModel: [{ field: 'language', sort: 'asc' }],
                         },
                     }}
                     rows={languages}
                     columns={[
-                        { field: 'id', headerName: 'ID', width: 100 ,align: 'right'},
+                        { field: 'id', headerName: 'ID', width: 100 ,align: 'right', headerAlign: 'right', editable: false},
                         { field: 'locale', headerName: 'Locale', width: 200, editable: true },
                         { field: 'language', headerName: 'Language', width: 200 , editable: true},
                     ]}
                      slots={{
                         toolbar: CustomToolbar,
                     }}
-                    pageSize={5}
-                    rowsPerPageOptions={[5]}
                     processRowUpdate={(updatedRow, originalRow) => {
                         updateLanguage({id: updatedRow.id, locale: updatedRow.locale, language: updatedRow.language});
                         return updatedRow;
                     }}
+                    getRowClassName={(params) =>
+                        params.indexRelativeToCurrentPage % 2 === 0 ? 'even-row' : 'odd-row'
+                    }  
+                    onCellClick={(params) => {
+                        const selectedRowId = params.id as number;
+                        const selectedRow = languages.find((row) => row.id === selectedRowId);
+                        setSelectedRow(selectedRow ? selectedRow.id : 0);
+                    }}
+
                     showToolbar
                 />
             </Paper>

buildtime/client/material-editor/src/components/TranslationsTableView.tsx

@@ -0,0 +1,91 @@
+import Tooltip from '@mui/material/Tooltip';
+import { ExportCsv } from '@mui/x-data-grid';
+import type {Language} from '../data/language';
+
+import { DataGrid, Toolbar, ToolbarButton} from '@mui/x-data-grid';
+import Paper from '@mui/material/Paper';
+import DeleteIcon from '@mui/icons-material/Delete';
+import AddIcon from '@mui/icons-material/Add';
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
+import {updateLanguage} from '../api/language/languages.api';
+import type { GridSelectionModel } from '@mui/x-data-grid';
+import { Typography } from '@mui/material';
+
+const TranslationsTableView = ({ selectedRow }: { selectedRow: number }) => {
+    // const [languages, setLanguages] = useState<Language[]>([]);
+
+    function CustomToolbar() {
+        return (
+            <Toolbar>
+                <Typography variant="body1" component="div" sx={{ flexGrow: 1 }}>
+                    Here you see all your available languages for translations.
+                </Typography>
+                <Tooltip title="Download as CSV">
+                    <ExportCsv render={<ToolbarButton />}>
+                        <FileDownloadIcon fontSize="small" />
+                    </ExportCsv>
+                </Tooltip>
+                <ToolbarButton onClick={() => console.log('Delete Row clicked')}>
+                    <DeleteIcon fontSize="small" sx={{ ml: 'auto' }} />
+                </ToolbarButton>
+                <ToolbarButton onClick={() => console.log('Add Row clicked')}>
+                    <AddIcon fontSize="small" sx={{ ml: 'auto' }} /> 
+                </ToolbarButton>
+            </Toolbar>
+        )
+    }
+
+
+    return (
+        <div>
+            <Paper sx={{ height: 600, width: '100%' }}>{selectedRow}</Paper>
+        </div>
+    );
+}
+                /*{ <DataGrid
+                    sx={{ border: 1, borderRadius: 2, 
+                        boxShadow: 2, 
+                        borderColor: 'primary.main', 
+                        '& .MuiDataGrid-cell:hover': { color: 'primary.main' },
+                        '& .even-row': { backgroundColor: 'rgba(0, 0, 1, 0.02)' },
+                        '& .odd-row': { backgroundColor: 'rgba(0, 0, 20, 0.04)' },
+                    }}
+
+                    columnHeaderHeight={36}
+                    rowHeight={25}
+                    rowSpacingType="margin"
+                    initialState={{
+                            sorting: {
+                            sortModel: [{ field: 'language', sort: 'asc' }],
+                        },
+                    }}
+                    rows={languages}
+                    columns={[
+                        { field: 'id', headerName: 'ID', width: 100 ,align: 'right', headerAlign: 'right', editable: false},
+                        { field: 'locale', headerName: 'Locale', width: 200, editable: true },
+                        { field: 'language', headerName: 'Language', width: 200 , editable: true},
+                    ]}
+                     slots={{
+                        toolbar: CustomToolbar,
+                    }}
+                    processRowUpdate={(updatedRow, originalRow) => {
+                        updateLanguage({id: updatedRow.id, locale: updatedRow.locale, language: updatedRow.language});
+                        return updatedRow;
+                    }}
+                    getRowClassName={(params) =>
+                        params.indexRelativeToCurrentPage % 2 === 0 ? 'even-row' : 'odd-row'
+                    }  
+                    onSelectionModelChange={(newSelection) => {
+                        const selectedRowId = newSelection[0];
+                        const selectedRow = languages.find((row) => row.id === selectedRowId);
+                        setSelectedRow(selectedRow ? selectedRow.id : 0);
+                    }}
+
+                    showToolbar
+                /> }
+            </Paper>
+        </div>
+    );
+};*/
+
+export default TranslationsTableView;  

buildtime/client/material-editor/src/pages/LanguagesPage.tsx

@@ -1,17 +1,37 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import LanguagesTableView from '../components/LanguagesTableView';  
+import TranslationsTableView from '../components/TranslationsTableView';  
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Grid';
+import type { Language } from '../data/language';
+import { getLanguages } from '../api/language/languages.api';
 
 const LanguagesPage: React.FC = () => {
-  return (
-    <Box component="section" sx={{ p: 2, border: '1px dashed grey' }}>
-      <Typography variant="h3">
-        Language Management
-      </Typography>
-      <LanguagesTableView />
-    </Box>
-  );
-};
+    const [languages, setLanguages] = useState<Language[]>([]);
+    const [selectedRow, setSelectedRow] = useState(0);
+    useEffect(() => {
+        getLanguages().then(setLanguages);
+    }, []);
+
+    return (
+          <Box component="section" sx={{ p: 2, border: '1px dashed grey' }}>
+              <Typography variant="h3">
+                  Language Management
+              </Typography>
+              <Box
+                sx={{
+                  display: "flex",           // Arrange children in a row
+                  flexDirection: "row",
+                  p: 2,                       // Padding around the flex container
+                  bgcolor: "#f5f5f5"
+                }}
+              >
+                <LanguagesTableView languages={languages} setSelectedRow={setSelectedRow} />
+                <TranslationsTableView selectedRow={selectedRow} />
+              </Box>
+          </Box>
+      );
+  };
 
 export default LanguagesPage;

buildtime/client/material-editor/src/pages/PropertyPage.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
 
 const PropertyPage: React.FC = () => {
   return (
-    <div>
-      <h1>Welcome to the Property Page</h1>
-      <p>This is the main landing page for Property handling.</p>
-    </div>
+    <Box component="section" sx={{ p: 2, border: '1px dashed grey' }}>
+      <Typography variant="h3">
+        Property Management
+      </Typography>
+    </Box>
   );
 };