Vereinfachung des Datenmodells und Anpassen der UI

2026-08-02 19:37:45 +02:00
parent 7fc8012dac
commit a73de0b81f
18 changed files with 512 additions and 225 deletions
@@ -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;