121 lines
5.0 KiB
TypeScript
121 lines
5.0 KiB
TypeScript
import * as React from 'react';
|
|
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 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(() => {
|
|
loadTranslations();
|
|
}, [selectedRow]);
|
|
|
|
React.useEffect(() => {
|
|
if (selectedRow <= 0) {
|
|
setLanguage(null);
|
|
return;
|
|
}
|
|
|
|
getLanguageById(selectedRow).then(setLanguage);
|
|
}, [selectedRow]);
|
|
|
|
const handleTranslationCreated = () => {
|
|
setIsCreateDialogOpen(false);
|
|
setErrorMessage('');
|
|
loadTranslations();
|
|
};
|
|
|
|
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>
|
|
{errorMessage !== '' && <Alert severity="error" sx={{ mb: 2 }}>{errorMessage}</Alert>}
|
|
<CrudDataGrid
|
|
paperSx={{ height: 600, width: '50vw' }}
|
|
initialState={{
|
|
sorting: {
|
|
sortModel: [{ field: 'original', sort: 'asc' }],
|
|
},
|
|
}}
|
|
rows={translations}
|
|
columns={[
|
|
{ field: 'id', headerName: 'ID', width: 100 ,align: 'right', headerAlign: 'right', editable: false},
|
|
{ field: 'original', headerName: 'Original', width: 200 , editable: true},
|
|
{ field: 'translated', headerName: 'Translated', width: 200 , editable: true},
|
|
]}
|
|
slots={{
|
|
toolbar: () => (
|
|
<CrudTableToolbar
|
|
title={`Translations for ${language?.language}.`}
|
|
disableAdd={selectedRow <= 0}
|
|
disableDelete={isDeleteDisabled(rowSelectionModel)}
|
|
onDelete={handleDeleteTranslation}
|
|
onAdd={() => setIsCreateDialogOpen(true)}
|
|
/>
|
|
),
|
|
}}
|
|
processRowUpdate={async (updatedRow) => {
|
|
await updateTranslation({
|
|
id: updatedRow.id,
|
|
language_id: updatedRow.language_id,
|
|
translated: updatedRow.translated,
|
|
original: updatedRow.original,
|
|
});
|
|
setErrorMessage('');
|
|
return updatedRow;
|
|
}}
|
|
onProcessRowUpdateError={() => setErrorMessage('Saving the translation failed.')}
|
|
getRowClassName={alternatingRowClassName}
|
|
rowSelectionModel={rowSelectionModel}
|
|
onRowSelectionModelChange={(newRowSelectionModel) => setRowSelectionModel(newRowSelectionModel)}
|
|
/>
|
|
<TranslationCreateDialog
|
|
open={isCreateDialogOpen}
|
|
languageId={selectedRow}
|
|
onClose={() => setIsCreateDialogOpen(false)}
|
|
onCreated={handleTranslationCreated}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TranslationsTableView;
|