Übersetzungen Server und Client

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

@@ -1,24 +1,35 @@
 import Tooltip from '@mui/material/Tooltip';
 import { ExportCsv } from '@mui/x-data-grid';
-import type {Language} from '../data/language';
-
+import * as React from 'react';
 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 {getLanguageById, updateLanguage} from '../api/language/languages.api';
+import type { Translation } from '../data/translation';
 import { Typography } from '@mui/material';
+import { getTranslationsByLanguageId, updateTranslation } from '../api/language/translations.api';
+import type { Language } from '../data/language';
 
 const TranslationsTableView = ({ selectedRow }: { selectedRow: number }) => {
-    // const [languages, setLanguages] = useState<Language[]>([]);
+    const [translations, setTranslations] = React.useState<Translation[]>([]);
+    const [language, setLanguage] = React.useState<Language | null>(null);
+
+    React.useEffect(() => {
+        getTranslationsByLanguageId(selectedRow).then(setTranslations);
+    }, [selectedRow]);
+
+    React.useEffect(() => {
+        getLanguageById(selectedRow).then(setLanguage);
+    }, [selectedRow]);
+
 
     function CustomToolbar() {
         return (
             <Toolbar>
                 <Typography variant="body1" component="div" sx={{ flexGrow: 1 }}>
-                    Here you see all your available languages for translations.
+                    Translations for {language?.language}.
                 </Typography>
                 <Tooltip title="Download as CSV">
                     <ExportCsv render={<ToolbarButton />}>
@@ -38,11 +49,8 @@ const TranslationsTableView = ({ selectedRow }: { selectedRow: number }) => {
 
     return (
         <div>
-            <Paper sx={{ height: 600, width: '100%' }}>{selectedRow}</Paper>
-        </div>
-    );
-}
-                /*{ <DataGrid
+            <Paper sx={{ height: 600, width: '50vw' }}>
+                <DataGrid
                     sx={{ border: 1, borderRadius: 2, 
                         boxShadow: 2, 
                         borderColor: 'primary.main', 
@@ -56,36 +64,35 @@ const TranslationsTableView = ({ selectedRow }: { selectedRow: number }) => {
                     rowSpacingType="margin"
                     initialState={{
                             sorting: {
-                            sortModel: [{ field: 'language', sort: 'asc' }],
+                            sortModel: [{ field: 'original', sort: 'asc' }],
                         },
                     }}
-                    rows={languages}
+                    rows={translations}
                     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},
+                        { field: 'original', headerName: 'Original', width: 200 , editable: true},
+                        { field: 'translated', headerName: 'Translated', width: 200 , editable: true},
                     ]}
-                     slots={{
+                    slots={{
                         toolbar: CustomToolbar,
                     }}
                     processRowUpdate={(updatedRow, originalRow) => {
-                        updateLanguage({id: updatedRow.id, locale: updatedRow.locale, language: updatedRow.language});
+                        updateTranslation({
+                            id: updatedRow.id, 
+                            language_id: updatedRow.language_id, 
+                            translated: updatedRow.translated, 
+                            original: updatedRow.original}
+                        )
                         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;