tsindt/simply_cpq
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hinzufügen und Löschen Dialoge in den Tabellen hinzugefügt

Browse Source
This commit is contained in:
tsindt
2026-08-09 19:39:41 +02:00
parent c5a82603ee
commit 3b1828291a
67 changed files with 991 additions and 3643 deletions
Download Patch File Download Diff File Expand all files Collapse all files
buildtime/client/material-editor/src/components/TranslationsTableView.tsx
+77 -54
View File
@@ -1,67 +1,76 @@
import Tooltip from '@mui/material/Tooltip';
import { ExportCsv } from '@mui/x-data-grid';
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 {getLanguageById, updateLanguage} from '../api/language/languages.api';
import Alert from '@mui/material/Alert';
import CrudDataGrid from './CrudDataGrid';
import CrudTableToolbar from './CrudTableToolbar';
import { alternatingRowClassName, createEmptyRowSelectionModel, getSelectedNumericRowId, isDeleteDisabled } from './tableViewUtils';
import type { GridRowSelectionModel } from '@mui/x-data-grid';
import {getLanguageById} 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 TranslationCreateDialog from './TranslationCreateDialog';
import { deleteTranslation, getTranslationsByLanguageId, updateTranslation } from '../api/language/translations.api';
import type { Language } from '../data/language';
const TranslationsTableView = ({ selectedRow }: { selectedRow: number }) => {
const [translations, setTranslations] = React.useState<Translation[]>([]);
const [language, setLanguage] = React.useState<Language | null>(null);
const [rowSelectionModel, setRowSelectionModel] = React.useState<GridRowSelectionModel>(createEmptyRowSelectionModel);
const [isCreateDialogOpen, setIsCreateDialogOpen] = React.useState(false);
const [errorMessage, setErrorMessage] = React.useState('');
const loadTranslations = () => {
if (selectedRow <= 0) {
setTranslations([]);
setRowSelectionModel(createEmptyRowSelectionModel());
return;
}
getTranslationsByLanguageId(selectedRow)
.then(setTranslations)
.catch(() => setErrorMessage('Loading translations failed.'));
};
React.useEffect(() => {
getTranslationsByLanguageId(selectedRow).then(setTranslations);
loadTranslations();
}, [selectedRow]);
React.useEffect(() => {
if (selectedRow <= 0) {
setLanguage(null);
return;
}
getLanguageById(selectedRow).then(setLanguage);
}, [selectedRow]);
const handleTranslationCreated = () => {
setIsCreateDialogOpen(false);
setErrorMessage('');
loadTranslations();
};
function CustomToolbar() {
return (
<Toolbar>
<Typography variant="body1" component="div" sx={{ flexGrow: 1 }}>
Translations for {language?.language}.
</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>
)
}
const handleDeleteTranslation = async () => {
const selectedTranslationId = getSelectedNumericRowId(rowSelectionModel);
if (selectedTranslationId == null) {
setErrorMessage('Select a translation before deleting it.');
return;
}
try {
await deleteTranslation(selectedTranslationId);
setRowSelectionModel(createEmptyRowSelectionModel());
setErrorMessage('');
loadTranslations();
} catch {
setErrorMessage('Deleting the translation failed.');
}
};
return (
<div>
<Paper sx={{ height: 600, width: '50vw' }}>
<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"
{errorMessage !== '' && <Alert severity="error" sx={{ mb: 2 }}>{errorMessage}</Alert>}
<CrudDataGrid
paperSx={{ height: 600, width: '50vw' }}
initialState={{
sorting: {
sortModel: [{ field: 'original', sort: 'asc' }],
@@ -74,23 +83,37 @@ const TranslationsTableView = ({ selectedRow }: { selectedRow: number }) => {
{ field: 'translated', headerName: 'Translated', width: 200 , editable: true},
]}
slots={{
toolbar: CustomToolbar,
toolbar: () => (
<CrudTableToolbar
title={`Translations for ${language?.language}.`}
disableAdd={selectedRow <= 0}
disableDelete={isDeleteDisabled(rowSelectionModel)}
onDelete={handleDeleteTranslation}
onAdd={() => setIsCreateDialogOpen(true)}
/>
),
}}
processRowUpdate={(updatedRow, originalRow) => {
updateTranslation({
processRowUpdate={async (updatedRow) => {
await updateTranslation({
id: updatedRow.id,
language_id: updatedRow.language_id,
translated: updatedRow.translated,
original: updatedRow.original}
)
original: updatedRow.original,
});
setErrorMessage('');
return updatedRow;
}}
getRowClassName={(params) =>
params.indexRelativeToCurrentPage % 2 === 0 ? 'even-row' : 'odd-row'
}
showToolbar
onProcessRowUpdateError={() => setErrorMessage('Saving the translation failed.')}
getRowClassName={alternatingRowClassName}
rowSelectionModel={rowSelectionModel}
onRowSelectionModelChange={(newRowSelectionModel) => setRowSelectionModel(newRowSelectionModel)}
/>
</Paper>
<TranslationCreateDialog
open={isCreateDialogOpen}
languageId={selectedRow}
onClose={() => setIsCreateDialogOpen(false)}
onCreated={handleTranslationCreated}
/>
</div>
);
};