Übersetzungen Server und Client

buildtime/client/material-editor/src/api/language/translations.api.ts

@@ -0,0 +1,26 @@
+import ky from 'ky'
+import type { Translation } from '../../data/translation'
+
+export const getTranslations = async (): Promise<Translation[]> => {
+  return ky.get(`http://localhost:8088/translations`).json<Translation[]>()
+}
+
+export const getTranslationById = async (id: number): Promise<Translation> => {
+  return ky.get(`http://localhost:8088/translation/${id}`).json<Translation>()
+}
+
+export const createTranslation = async (translation: Translation): Promise<Translation> => {
+  return ky.post(`http://localhost:8088/translation`, { json: translation }).json<Translation>()
+}
+
+export const updateTranslation = async (translation: Translation): Promise<Translation> => {
+  return ky.put(`http://localhost:8088/translation`, { json: translation }).json<Translation>()
+}   
+
+export const deleteTranslation = async (id: number): Promise<void> => {
+  return ky.delete(`http://localhost:8088/translation/${id}`).json<void>()
+}
+
+export const getTranslationsByLanguageId = async (language_id: number): Promise<Translation[]> => {
+  return ky.get(`http://localhost:8088/translations/${language_id}`).json<Translation[]>()
+}

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

@@ -38,7 +38,7 @@ const LanguagesTableView = ({ languages, setSelectedRow }: { languages: Language
 
     return (
         <div>
-            <Paper sx={{ height: 600, width: '100%' }}>
+            <Paper sx={{ height: 600, width: '30vw', marginRight: 2 }}>
                 <DataGrid
                     sx={{ border: 1, borderRadius: 2, 
                         boxShadow: 2, 

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;  

buildtime/client/material-editor/src/data/translation.ts

@@ -0,0 +1,7 @@
+export type Translation = {
+  id: number;
+  language_id: number;
+  original: string;
+  translated: string;
+};
+

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

@@ -1,9 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import LanguagesTableView from '../components/LanguagesTableView';  
-import TranslationsTableView from '../components/TranslationsTableView';  
+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';
 
@@ -23,6 +22,7 @@ const LanguagesPage: React.FC = () => {
                 sx={{
                   display: "flex",           // Arrange children in a row
                   flexDirection: "row",
+                  width: "100vw",             // Full width of the parent
                   p: 2,                       // Padding around the flex container
                   bgcolor: "#f5f5f5"
                 }}