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/App.tsx
+18 -10
View File
@@ -1,22 +1,30 @@
import { Suspense, lazy, type ComponentType } from 'react'
import { createBrowserRouter, RouterProvider } from 'react-router'
import Layout from './Layout.tsx'
import HomePage from './pages/HomePage.tsx'
import LanguagesPage from './pages/LanguagesPage.tsx'
import PropertyPage from './pages/PropertyPage.tsx'
import NotFoundPage from './pages/NotFoundPage.tsx'
import './App.css'
const Layout = lazy(() => import('./Layout.tsx'))
const HomePage = lazy(() => import('./pages/HomePage.tsx'))
const LanguagesPage = lazy(() => import('./pages/LanguagesPage.tsx'))
const PropertyPage = lazy(() => import('./pages/PropertyPage.tsx'))
const NotFoundPage = lazy(() => import('./pages/NotFoundPage.tsx'))
const renderLazyRoute = (Component: ComponentType) => (
<Suspense fallback={<div>Loading...</div>}>
<Component />
</Suspense>
)
// routing configuration
const router = createBrowserRouter([
{
path: '/',
element: <Layout />,
element: renderLazyRoute(Layout),
children: [
{ index: true, element: <HomePage /> },
{ path: 'language', element: <LanguagesPage /> },
{ path: 'propertypool', element: <PropertyPage /> },
{ path: '*', element: <NotFoundPage /> },
{ index: true, element: renderLazyRoute(HomePage) },
{ path: 'language', element: renderLazyRoute(LanguagesPage) },
{ path: 'propertypool', element: renderLazyRoute(PropertyPage) },
{ path: '*', element: renderLazyRoute(NotFoundPage) },
],
},
])
buildtime/client/material-editor/src/Layout.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
// Layouting Main Application
import { Outlet, Link } from 'react-router'
import { Outlet } from 'react-router'
import NavBar from './components/NavBar'
import Footer from './components/Footer'
buildtime/client/material-editor/src/api/language/languages.api.ts
+3 -3
View File
@@ -13,10 +13,10 @@ export const createLanguage = async (language: Language): Promise<Language> => {
return ky.post(`http://localhost:8088/language`, { json: language }).json<Language>()
}
export const updateLanguage = async (language: Language): Promise<Language> => {
return ky.put(`http://localhost:8088/language`, { json: language }).json<Language>()
export const updateLanguage = async (language: Language): Promise<void> => {
await ky.put(`http://localhost:8088/language`, { json: language })
}
export const deleteLanguage = async (id: number): Promise<void> => {
return ky.delete(`http://localhost:8088/language/${id}`).json<void>()
await ky.delete(`http://localhost:8088/language/${id}`)
}
buildtime/client/material-editor/src/api/language/propertyGroup.api.ts
+10 -10
View File
@@ -1,22 +1,22 @@
import ky from 'ky'
import type { propertyGroup } from '../../data/propertyGroup'
import type { PropertyGroup } from '../../data/propertyGroup'
export const getPropertyGroups = async (): Promise<propertyGroup[]> => {
return ky.get(`http://localhost:8088/propertygroups`).json<propertyGroup[]>()
export const getPropertyGroups = async (): Promise<PropertyGroup[]> => {
return ky.get(`http://localhost:8088/propertygroups`).json<PropertyGroup[]>()
}
export const getPropertyGroupById = async (id: number): Promise<propertyGroup> => {
return ky.get(`http://localhost:8088/propertygroup/${id}`).json<propertyGroup>()
export const getPropertyGroupById = async (id: number): Promise<PropertyGroup> => {
return ky.get(`http://localhost:8088/propertygroup/${id}`).json<PropertyGroup>()
}
export const createPropertyGroup = async (propertyGroup: propertyGroup): Promise<propertyGroup> => {
return ky.post(`http://localhost:8088/propertygroup`, { json: propertyGroup }).json<propertyGroup>()
export const createPropertyGroup = async (propertyGroup: PropertyGroup): Promise<PropertyGroup> => {
return ky.post(`http://localhost:8088/propertygroup`, { json: propertyGroup }).json<PropertyGroup>()
}
export const updatePropertyGroup = async (propertyGroup: propertyGroup): Promise<propertyGroup> => {
return ky.put(`http://localhost:8088/propertygroup`, { json: propertyGroup }).json<propertyGroup>()
export const updatePropertyGroup = async (propertyGroup: PropertyGroup): Promise<void> => {
await ky.put(`http://localhost:8088/propertygroup`, { json: propertyGroup })
}
export const deletePropertyGroup = async (id: number): Promise<void> => {
return ky.delete(`http://localhost:8088/propertygroup/${id}`).json<void>()
await ky.delete(`http://localhost:8088/propertygroup/${id}`)
}
buildtime/client/material-editor/src/api/language/propertyTypes.api.ts
+3 -3
View File
@@ -13,12 +13,12 @@ export const createPropertyType = async (propertyType: PropertyType): Promise<Pr
return ky.post(`http://localhost:8088/propertytype`, { json: propertyType }).json<PropertyType>()
}
export const updatePropertyType = async (propertyType: PropertyType): Promise<PropertyType> => {
return ky.put(`http://localhost:8088/propertytype`, { json: propertyType }).json<PropertyType>()
export const updatePropertyType = async (propertyType: PropertyType): Promise<void> => {
await ky.put(`http://localhost:8088/propertytype`, { json: propertyType })
}
export const deletePropertyType = async (id: number): Promise<void> => {
return ky.delete(`http://localhost:8088/propertytype/${id}`).json<void>()
await ky.delete(`http://localhost:8088/propertytype/${id}`)
}
export const getPropertyTypesByPropertyGroupId = async (propertyGroupId: number): Promise<PropertyType[]> => {
buildtime/client/material-editor/src/api/language/translations.api.ts
+3 -3
View File
@@ -13,12 +13,12 @@ export const createTranslation = async (translation: Translation): Promise<Trans
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 updateTranslation = async (translation: Translation): Promise<void> => {
await ky.put(`http://localhost:8088/translation`, { json: translation })
}
export const deleteTranslation = async (id: number): Promise<void> => {
return ky.delete(`http://localhost:8088/translation/${id}`).json<void>()
await ky.delete(`http://localhost:8088/translation/${id}`)
}
export const getTranslationsByLanguageId = async (language_id: number): Promise<Translation[]> => {
buildtime/client/material-editor/src/api/language/valueComplexities.api.ts
+7
View File
@@ -0,0 +1,7 @@
import ky from 'ky'
import type { ValueComplexity } from '../../data/valueComplexity'
export const getValueComplexities = async (): Promise<ValueComplexity[]> => {
return ky.get(`http://localhost:8088/valuecomplexities`).json<ValueComplexity[]>()
}
buildtime/client/material-editor/src/api/language/valueTypes.api.ts
+11
View File
@@ -0,0 +1,11 @@
import ky from 'ky'
import type { ValueType } from '../../data/valueType'
export const getValueTypes = async (): Promise<ValueType[]> => {
return ky.get(`http://localhost:8088/valuetypes`).json<ValueType[]>()
}
export const getValueTypeById = async (id: number): Promise<ValueType> => {
return ky.get(`http://localhost:8088/valuetype/${id}`).json<ValueType>()
}
buildtime/client/material-editor/src/components/CreateEntityDialog.tsx
+89
View File
@@ -0,0 +1,89 @@
import * as React from 'react';
import Alert from '@mui/material/Alert';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
type CreateEntityDialogProps<TFormState, TEntity> = {
open: boolean;
title: string;
initialState: TFormState;
onClose: () => void;
onCreated: (entity: TEntity) => void | Promise<void>;
createEntity: (formState: TFormState) => Promise<TEntity>;
children: (props: {
formState: TFormState;
setFormState: React.Dispatch<React.SetStateAction<TFormState>>;
isSubmitting: boolean;
}) => React.ReactNode;
validate?: (formState: TFormState) => string | null;
submitLabel?: string;
errorMessageText?: string;
};
const CreateEntityDialog = <TFormState, TEntity>({
open,
title,
initialState,
onClose,
onCreated,
createEntity,
children,
validate,
submitLabel = 'Create',
errorMessageText = 'Creating the entry failed.',
}: CreateEntityDialogProps<TFormState, TEntity>) => {
const [formState, setFormState] = React.useState<TFormState>(initialState);
const [errorMessage, setErrorMessage] = React.useState('');
const [isSubmitting, setIsSubmitting] = React.useState(false);
React.useEffect(() => {
if (!open) {
setFormState(initialState);
setErrorMessage('');
setIsSubmitting(false);
}
}, [initialState, open]);
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
const validationError = validate?.(formState);
if (validationError != null) {
setErrorMessage(validationError);
return;
}
setIsSubmitting(true);
setErrorMessage('');
try {
const createdEntity = await createEntity(formState);
await onCreated(createdEntity);
} catch {
setErrorMessage(errorMessageText);
setIsSubmitting(false);
}
};
return (
<Dialog open={open} onClose={isSubmitting ? undefined : onClose} fullWidth maxWidth="sm">
<form onSubmit={handleSubmit}>
<DialogTitle>{title}</DialogTitle>
<DialogContent>
{errorMessage !== '' && <Alert severity="error" sx={{ mb: 2, mt: 1 }}>{errorMessage}</Alert>}
{children({ formState, setFormState, isSubmitting })}
</DialogContent>
<DialogActions>
<Button onClick={onClose} disabled={isSubmitting}>Cancel</Button>
<Button type="submit" variant="contained" disabled={isSubmitting}>{submitLabel}</Button>
</DialogActions>
</form>
</Dialog>
);
};
export default CreateEntityDialog;
buildtime/client/material-editor/src/components/CrudDataGrid.tsx
+35
View File
@@ -0,0 +1,35 @@
import Paper from '@mui/material/Paper';
import { DataGrid } from '@mui/x-data-grid';
import type { DataGridProps } from '@mui/x-data-grid';
import type { SxProps, Theme } from '@mui/material/styles';
type CrudDataGridProps = DataGridProps & {
paperSx?: SxProps<Theme>;
};
const sharedGridSx: SxProps<Theme> = {
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)' },
};
const CrudDataGrid = ({ paperSx, sx, ...dataGridProps }: CrudDataGridProps) => {
return (
<Paper sx={paperSx}>
<DataGrid
sx={[sharedGridSx, ...(Array.isArray(sx) ? sx : sx != null ? [sx] : [])]}
columnHeaderHeight={36}
rowHeight={25}
rowSpacingType="margin"
showToolbar
{...dataGridProps}
/>
</Paper>
);
};
export default CrudDataGrid;
buildtime/client/material-editor/src/components/CrudTableToolbar.tsx
+38
View File
@@ -0,0 +1,38 @@
import AddIcon from '@mui/icons-material/Add';
import DeleteIcon from '@mui/icons-material/Delete';
import FileDownloadIcon from '@mui/icons-material/FileDownload';
import Tooltip from '@mui/material/Tooltip';
import Typography from '@mui/material/Typography';
import { ExportCsv } from '@mui/x-data-grid';
import { Toolbar, ToolbarButton } from '@mui/x-data-grid';
type CrudTableToolbarProps = {
title: string;
disableAdd?: boolean;
disableDelete?: boolean;
onAdd: () => void;
onDelete: () => void;
};
const CrudTableToolbar = ({ title, disableAdd = false, disableDelete = false, onAdd, onDelete }: CrudTableToolbarProps) => {
return (
<Toolbar>
<Typography variant="body1" component="div" sx={{ flexGrow: 1 }}>
{title}
</Typography>
<Tooltip title="Download as CSV">
<ExportCsv render={<ToolbarButton />}>
<FileDownloadIcon fontSize="small" />
</ExportCsv>
</Tooltip>
<ToolbarButton disabled={disableDelete} onClick={onDelete}>
<DeleteIcon fontSize="small" sx={{ ml: 'auto' }} />
</ToolbarButton>
<ToolbarButton disabled={disableAdd} onClick={onAdd}>
<AddIcon fontSize="small" sx={{ ml: 'auto' }} />
</ToolbarButton>
</Toolbar>
);
};
export default CrudTableToolbar;
buildtime/client/material-editor/src/components/Footer.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ function Footer() {
<AppBar position="static">
<Toolbar>
<Typography variant="body2" component="div" sx={{ flexGrow: 1 }}>
SimplyCPQ Material Editor (c) 2026 Dr. Thomas Sindt
Simply CPQ Material Editor (c) 2026 Dr. Thomas Sindt
</Typography>
</Toolbar>
</AppBar>
buildtime/client/material-editor/src/components/LanguageCreateDialog.tsx
+56
View File
@@ -0,0 +1,56 @@
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import { createLanguage } from '../api/language/languages.api';
import CreateEntityDialog from './CreateEntityDialog';
import type { Language } from '../data/language';
type LanguageCreateDialogProps = {
open: boolean;
onClose: () => void;
onCreated: (language: Language) => void | Promise<void>;
};
type LanguageFormState = {
locale: string;
language: string;
};
const initialFormState: LanguageFormState = {
locale: '',
language: '',
};
const LanguageCreateDialog = ({ open, onClose, onCreated }: LanguageCreateDialogProps) => {
return (
<CreateEntityDialog
open={open}
title="New Language"
initialState={initialFormState}
onClose={onClose}
onCreated={onCreated}
createEntity={(formState) => createLanguage({ id: 0, locale: formState.locale, language: formState.language })}
errorMessageText="Creating the language failed."
>
{({ formState, setFormState }) => (
<Stack spacing={2} sx={{ pt: 1 }}>
<TextField
autoFocus
required
label="Locale"
value={formState.locale}
onChange={(event) => setFormState((currentState) => ({ ...currentState, locale: event.target.value }))}
/>
<TextField
required
label="Language"
value={formState.language}
onChange={(event) => setFormState((currentState) => ({ ...currentState, language: event.target.value }))}
/>
</Stack>
)}
</CreateEntityDialog>
);
};
export default LanguageCreateDialog;
buildtime/client/material-editor/src/components/LanguagesTableView.tsx
+62 -57
View File
@@ -1,56 +1,50 @@
import Tooltip from '@mui/material/Tooltip';
import { ExportCsv } from '@mui/x-data-grid';
import * as React from 'react';
import Alert from '@mui/material/Alert';
import type {Language} from '../data/language';
import CrudDataGrid from './CrudDataGrid';
import CrudTableToolbar from './CrudTableToolbar';
import LanguageCreateDialog from './LanguageCreateDialog';
import { alternatingRowClassName, createEmptyRowSelectionModel, getSelectedNumericRowId, isDeleteDisabled, isSelectedRowId } from './tableViewUtils';
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';
import type { GridRowSelectionModel } from '@mui/x-data-grid';
import {deleteLanguage, updateLanguage} from '../api/language/languages.api';
const LanguagesTableView = ({ languages, setSelectedRow }: { languages: Language[]; setSelectedRow: (id: number) => void }) => {
// const [languages, setLanguages] = useState<Language[]>([]);
const LanguagesTableView = ({ languages, setSelectedRow, refreshLanguages }: { languages: Language[]; setSelectedRow: (id: number) => void; refreshLanguages: () => Promise<void> }) => {
const [rowSelectionModel, setRowSelectionModel] = React.useState<GridRowSelectionModel>(createEmptyRowSelectionModel);
const [isCreateDialogOpen, setIsCreateDialogOpen] = React.useState(false);
const [errorMessage, setErrorMessage] = React.useState('');
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>
)
}
const handleLanguageCreated = async () => {
setIsCreateDialogOpen(false);
setErrorMessage('');
await refreshLanguages();
};
const handleDeleteLanguage = async () => {
const selectedLanguageId = getSelectedNumericRowId(rowSelectionModel);
if (selectedLanguageId == null) {
setErrorMessage('Select a language before deleting it.');
return;
}
try {
await deleteLanguage(selectedLanguageId);
setRowSelectionModel(createEmptyRowSelectionModel());
setSelectedRow(0);
setErrorMessage('');
await refreshLanguages();
} catch {
setErrorMessage('Deleting the language failed.');
}
};
return (
<div>
<Paper sx={{ height: 600, width: '30vw', marginRight: 2 }}>
<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: '30vw', marginRight: 2 }}
initialState={{
sorting: {
sortModel: [{ field: 'language', sort: 'asc' }],
@@ -62,25 +56,36 @@ const LanguagesTableView = ({ languages, setSelectedRow }: { languages: Language
{ field: 'locale', headerName: 'Locale', width: 200, editable: true },
{ field: 'language', headerName: 'Language', width: 200 , editable: true},
]}
slots={{
toolbar: CustomToolbar,
slots={{
toolbar: () => (
<CrudTableToolbar
title="Here you see all your available languages for translations."
disableDelete={isDeleteDisabled(rowSelectionModel)}
onDelete={handleDeleteLanguage}
onAdd={() => setIsCreateDialogOpen(true)}
/>
),
}}
processRowUpdate={(updatedRow, originalRow) => {
updateLanguage({id: updatedRow.id, locale: updatedRow.locale, language: updatedRow.language});
processRowUpdate={async (updatedRow) => {
await updateLanguage({id: updatedRow.id, locale: updatedRow.locale, language: updatedRow.language});
setErrorMessage('');
await refreshLanguages();
return updatedRow;
}}
getRowClassName={(params) =>
params.indexRelativeToCurrentPage % 2 === 0 ? 'even-row' : 'odd-row'
}
onProcessRowUpdateError={() => setErrorMessage('Saving the language failed.')}
getRowClassName={alternatingRowClassName}
onCellClick={(params) => {
const selectedRowId = params.id as number;
const selectedRow = languages.find((row) => row.id === selectedRowId);
const selectedRow = languages.find((row) => isSelectedRowId(params.id, row.id));
setSelectedRow(selectedRow ? selectedRow.id : 0);
}}
showToolbar
rowSelectionModel={rowSelectionModel}
onRowSelectionModelChange={(newRowSelectionModel) => setRowSelectionModel(newRowSelectionModel)}
/>
</Paper>
<LanguageCreateDialog
open={isCreateDialogOpen}
onClose={() => setIsCreateDialogOpen(false)}
onCreated={handleLanguageCreated}
/>
</div>
);
};
buildtime/client/material-editor/src/components/NavBar.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ function NavBar() {
<img src={SimplyCPQLogo} alt="SimplyCPQ Logo" style={{ width: '40px', height: '40px' }} />
</IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
SimplyCPQ Material Editor
Simply CPQ Material Editor
</Typography>
<Stack direction="row" spacing={2}>
<Button color="inherit" onClick={() => navigate('/propertypool')}>Property Pool</Button>
buildtime/client/material-editor/src/components/PropertyGroupCreateDialog.tsx
+56
View File
@@ -0,0 +1,56 @@
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import { createPropertyGroup } from '../api/language/propertyGroup.api';
import CreateEntityDialog from './CreateEntityDialog';
import type { PropertyGroup } from '../data/propertyGroup';
type PropertyGroupCreateDialogProps = {
open: boolean;
onClose: () => void;
onCreated: (propertyGroup: PropertyGroup) => void | Promise<void>;
};
type PropertyGroupFormState = {
label: string;
description: string;
};
const initialFormState: PropertyGroupFormState = {
label: '',
description: '',
};
const PropertyGroupCreateDialog = ({ open, onClose, onCreated }: PropertyGroupCreateDialogProps) => {
return (
<CreateEntityDialog
open={open}
title="New Property Group"
initialState={initialFormState}
onClose={onClose}
onCreated={onCreated}
createEntity={(formState) => createPropertyGroup({ id: 0, label: formState.label, description: formState.description })}
errorMessageText="Creating the property group failed."
>
{({ formState, setFormState }) => (
<Stack spacing={2} sx={{ pt: 1 }}>
<TextField
autoFocus
required
label="Label"
value={formState.label}
onChange={(event) => setFormState((currentState) => ({ ...currentState, label: event.target.value }))}
/>
<TextField
required
label="Description"
value={formState.description}
onChange={(event) => setFormState((currentState) => ({ ...currentState, description: event.target.value }))}
/>
</Stack>
)}
</CreateEntityDialog>
);
};
export default PropertyGroupCreateDialog;
buildtime/client/material-editor/src/components/PropertyGroupsTableView.tsx
+63 -57
View File
@@ -1,55 +1,50 @@
import Tooltip from '@mui/material/Tooltip';
import { ExportCsv } from '@mui/x-data-grid';
import type {propertyGroup} from '../data/propertyGroup';
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 { updatePropertyGroup } from '../api/language/propertyGroup.api';
import Typography from '@mui/material/Typography';
import Alert from '@mui/material/Alert';
import type { PropertyGroup } from '../data/propertyGroup';
import CrudDataGrid from './CrudDataGrid';
import CrudTableToolbar from './CrudTableToolbar';
import PropertyGroupCreateDialog from './PropertyGroupCreateDialog';
import { alternatingRowClassName, createEmptyRowSelectionModel, getSelectedNumericRowId, isDeleteDisabled, isSelectedRowId } from './tableViewUtils';
const PropertyGroupsTableView = ({ propertyGroups, setSelectedRow }: { propertyGroups: propertyGroup[]; setSelectedRow: (id: number) => void }) => {
// const [languages, setLanguages] = useState<Language[]>([]);
import type { GridRowSelectionModel } from '@mui/x-data-grid';
import { deletePropertyGroup, updatePropertyGroup } from '../api/language/propertyGroup.api';
function CustomToolbar() {
return (
<Toolbar>
<Typography variant="body1" component="div" sx={{ flexGrow: 1 }}>
Available PropertyGroups.
</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 PropertyGroupsTableView = ({ propertyGroups, setSelectedRow, refreshPropertyGroups }: { propertyGroups: PropertyGroup[]; setSelectedRow: (id: number) => void; refreshPropertyGroups: () => Promise<void> }) => {
const [rowSelectionModel, setRowSelectionModel] = React.useState<GridRowSelectionModel>(createEmptyRowSelectionModel);
const [isCreateDialogOpen, setIsCreateDialogOpen] = React.useState(false);
const [errorMessage, setErrorMessage] = React.useState('');
const handlePropertyGroupCreated = async () => {
setIsCreateDialogOpen(false);
setErrorMessage('');
await refreshPropertyGroups();
};
const handleDeletePropertyGroup = async () => {
const selectedPropertyGroupId = getSelectedNumericRowId(rowSelectionModel);
if (selectedPropertyGroupId == null) {
setErrorMessage('Select a property group before deleting it.');
return;
}
try {
await deletePropertyGroup(selectedPropertyGroupId);
setRowSelectionModel(createEmptyRowSelectionModel());
setSelectedRow(0);
setErrorMessage('');
await refreshPropertyGroups();
} catch {
setErrorMessage('Deleting the property group failed.');
}
};
return (
<div>
<Paper sx={{ height: 600, width: '30vw', marginRight: 2 }}>
<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: '30vw', marginRight: 2 }}
initialState={{
sorting: {
sortModel: [{ field: 'label', sort: 'asc' }],
@@ -61,25 +56,36 @@ const PropertyGroupsTableView = ({ propertyGroups, setSelectedRow }: { propertyG
{ field: 'label', headerName: 'Label', width: 200, editable: true },
{ field: 'description', headerName: 'Description', width: 200 , editable: true},
]}
slots={{
toolbar: CustomToolbar,
slots={{
toolbar: () => (
<CrudTableToolbar
title="Available PropertyGroups."
disableDelete={isDeleteDisabled(rowSelectionModel)}
onDelete={handleDeletePropertyGroup}
onAdd={() => setIsCreateDialogOpen(true)}
/>
),
}}
processRowUpdate={(updatedRow, originalRow) => {
updatePropertyGroup({id: updatedRow.id, label: updatedRow.label, description: updatedRow.description});
processRowUpdate={async (updatedRow) => {
await updatePropertyGroup({id: updatedRow.id, label: updatedRow.label, description: updatedRow.description});
setErrorMessage('');
await refreshPropertyGroups();
return updatedRow;
}}
getRowClassName={(params) =>
params.indexRelativeToCurrentPage % 2 === 0 ? 'even-row' : 'odd-row'
}
onProcessRowUpdateError={() => setErrorMessage('Saving the property group failed.')}
getRowClassName={alternatingRowClassName}
onCellClick={(params) => {
const selectedRowId = params.id as number;
const selectedRow = propertyGroups.find((row) => row.id === selectedRowId);
const selectedRow = propertyGroups.find((row) => isSelectedRowId(params.id, row.id));
setSelectedRow(selectedRow ? selectedRow.id : 0);
}}
showToolbar
rowSelectionModel={rowSelectionModel}
onRowSelectionModelChange={(newRowSelectionModel) => setRowSelectionModel(newRowSelectionModel)}
/>
</Paper>
<PropertyGroupCreateDialog
open={isCreateDialogOpen}
onClose={() => setIsCreateDialogOpen(false)}
onCreated={handlePropertyGroupCreated}
/>
</div>
);
};
buildtime/client/material-editor/src/components/PropertyTypeCreateDialog.tsx
+121
View File
@@ -0,0 +1,121 @@
import MenuItem from '@mui/material/MenuItem';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import { createPropertyType } from '../api/language/propertyTypes.api';
import CreateEntityDialog from './CreateEntityDialog';
import type { PropertyType } from '../data/propertyType';
import type { ValueComplexity } from '../data/valueComplexity';
import type { ValueType } from '../data/valueType';
type PropertyTypeCreateDialogProps = {
open: boolean;
propertyGroupId: number;
valueTypes: ValueType[];
valueComplexities: ValueComplexity[];
onClose: () => void;
onCreated: (propertyType: PropertyType) => void | Promise<void>;
};
type PropertyTypeFormState = {
label: string;
valueTypeId: string;
valueComplexityId: string;
value: string;
};
const initialFormState: PropertyTypeFormState = {
label: '',
valueTypeId: '',
valueComplexityId: '',
value: '',
};
const PropertyTypeCreateDialog = ({
open,
propertyGroupId,
valueTypes,
valueComplexities,
onClose,
onCreated,
}: PropertyTypeCreateDialogProps) => {
return (
<CreateEntityDialog
open={open}
title="New Property Type"
initialState={initialFormState}
onClose={onClose}
onCreated={onCreated}
validate={(formState) => {
if (propertyGroupId <= 0) {
return 'Select a property group before creating a property type.';
}
if (formState.valueTypeId === '') {
return 'Select a value type.';
}
if (formState.valueComplexityId === '') {
return 'Select a value complexity.';
}
return null;
}}
createEntity={(formState) => createPropertyType({
id: 0,
label: formState.label,
valueTypeId: Number(formState.valueTypeId),
propertyGroupId,
valueComplexityId: formState.valueComplexityId,
value: formState.value,
})}
errorMessageText="Creating the property type failed."
>
{({ formState, setFormState }) => (
<Stack spacing={2} sx={{ pt: 1 }}>
<TextField
autoFocus
required
label="Label"
value={formState.label}
onChange={(event) => setFormState((currentState) => ({ ...currentState, label: event.target.value }))}
/>
<TextField
required
select
label="Value Type"
value={formState.valueTypeId}
onChange={(event) => setFormState((currentState) => ({ ...currentState, valueTypeId: event.target.value }))}
>
{valueTypes.map((valueType) => (
<MenuItem key={valueType.id} value={String(valueType.id)}>
{valueType.label}
</MenuItem>
))}
</TextField>
<TextField
required
select
label="Value Complexity"
value={formState.valueComplexityId}
onChange={(event) => setFormState((currentState) => ({ ...currentState, valueComplexityId: event.target.value }))}
>
{valueComplexities.map((valueComplexity) => (
<MenuItem key={valueComplexity.id} value={String(valueComplexity.id)}>
{valueComplexity.complexity}
</MenuItem>
))}
</TextField>
<TextField
required
label="Value"
value={formState.value}
onChange={(event) => setFormState((currentState) => ({ ...currentState, value: event.target.value }))}
/>
</Stack>
)}
</CreateEntityDialog>
);
};
export default PropertyTypeCreateDialog;
buildtime/client/material-editor/src/components/PropertyTypesTableView.tsx
+140 -67
View File
@@ -1,106 +1,179 @@
import * as React from 'react';
import type { propertyGroup } from '../data/propertyGroup';
import type { PropertyGroup } from '../data/propertyGroup';
import type { PropertyType } from '../data/propertyType';
import type { ValueType } from '../data/valueType';
import type { ValueComplexity } from '../data/valueComplexity';
import CrudDataGrid from './CrudDataGrid';
import CrudTableToolbar from './CrudTableToolbar';
import PropertyTypeCreateDialog from './PropertyTypeCreateDialog';
import { alternatingRowClassName, createEmptyRowSelectionModel, getSelectedNumericRowId, isDeleteDisabled } from './tableViewUtils';
import Paper from '@mui/material/Paper';
import DeleteIcon from '@mui/icons-material/Delete';
import AddIcon from '@mui/icons-material/Add';
import Tooltip from '@mui/material/Tooltip';
import FileDownloadIcon from '@mui/icons-material/FileDownload';
import { Typography } from '@mui/material';
import { DataGrid, Toolbar, ToolbarButton} from '@mui/x-data-grid';
import { ExportCsv } from '@mui/x-data-grid';
import Alert from '@mui/material/Alert';
import type { GridColDef } from '@mui/x-data-grid';
import type { GridRowSelectionModel } from '@mui/x-data-grid';
import { getPropertyGroupById } from '../api/language/propertyGroup.api';
import { updatePropertyType } from '../api/language/propertyTypes.api';
import { deletePropertyType, updatePropertyType } from '../api/language/propertyTypes.api';
import { getPropertyTypesByPropertyGroupId } from '../api/language/propertyTypes.api';
import { getValueTypes } from '../api/language/valueTypes.api';
import { getValueComplexities } from '../api/language/valueComplexities.api';
const PropertyTypesTableView = ({ selectedRow }: { selectedRow: number }) => {
const [propertyTypes, setPropertyTypes] = React.useState<PropertyType[]>([]);
const [propertyGroup, setPropertyGroup] = React.useState<propertyGroup | null>(null);
const [propertyGroup, setPropertyGroup] = React.useState<PropertyGroup | null>(null);
const [valueTypes, setValueTypes] = React.useState<ValueType[]>([]);
const [valueComplexities, setValueComplexities] = React.useState<ValueComplexity[]>([]);
const [isCreateDialogOpen, setIsCreateDialogOpen] = React.useState(false);
const [rowSelectionModel, setRowSelectionModel] = React.useState<GridRowSelectionModel>(createEmptyRowSelectionModel);
const [errorMessage, setErrorMessage] = React.useState('');
const valueTypeLabelById = React.useMemo(() => {
return new Map(valueTypes.map((valueType) => [valueType.id, valueType.label]));
}, [valueTypes]);
const valueComplexityById = React.useMemo(() => {
return new Map(valueComplexities.map((valueComplexity) => [String(valueComplexity.id), valueComplexity.complexity]));
}, [valueComplexities]);
const columns = React.useMemo<GridColDef<PropertyType>[]>(() => [
{ field: 'id', headerName: 'ID', width: 100, align: 'right', headerAlign: 'right', editable: false },
{ field: 'label', headerName: 'Label', width: 200, editable: true },
{ field: 'propertyGroupId', headerName: 'Property Group Id', width: 130, editable: true },
{
field: 'valueTypeId',
headerName: 'Value Type',
width: 180,
editable: true,
type: 'singleSelect',
valueOptions: valueTypes.map((valueType) => ({ value: valueType.id, label: valueType.label })),
valueFormatter: (value) => valueTypeLabelById.get(Number(value)) ?? String(value),
},
{
field: 'valueComplexityId',
headerName: 'Value Complexity',
width: 200,
editable: true,
type: 'singleSelect',
valueOptions: valueComplexities.map((valueComplexity) => ({
value: String(valueComplexity.id),
label: valueComplexity.complexity,
})),
valueFormatter: (value) => valueComplexityById.get(String(value)) ?? String(value),
},
{ field: 'value', headerName: 'Value', width: 200, editable: true },
], [valueComplexities, valueComplexityById, valueTypeLabelById, valueTypes]);
const loadPropertyTypes = () => {
if (selectedRow <= 0) {
setPropertyTypes([]);
setRowSelectionModel(createEmptyRowSelectionModel());
return;
}
getPropertyTypesByPropertyGroupId(selectedRow)
.then(setPropertyTypes)
.catch(() => setErrorMessage('Loading property types failed.'));
};
React.useEffect(() => {
getPropertyTypesByPropertyGroupId(selectedRow).then(setPropertyTypes);
getValueTypes()
.then(setValueTypes)
.catch(() => setErrorMessage('Loading value types failed.'));
getValueComplexities()
.then(setValueComplexities)
.catch(() => setErrorMessage('Loading value complexities failed.'));
}, []);
React.useEffect(() => {
loadPropertyTypes();
}, [selectedRow]);
React.useEffect(() => {
if (selectedRow <= 0) {
setPropertyGroup(null);
return;
}
getPropertyGroupById(selectedRow).then(setPropertyGroup);
}, [selectedRow]);
const handleCreateDialogClose = () => {
setIsCreateDialogOpen(false);
};
function CustomToolbar() {
return (
<Toolbar>
<Typography variant="body1" component="div" sx={{ flexGrow: 1 }}>
Property types for group {propertyGroup?.label}.
</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 handlePropertyTypeCreated = () => {
setIsCreateDialogOpen(false);
setErrorMessage('');
loadPropertyTypes();
};
const handleDeletePropertyType = async () => {
const selectedPropertyTypeId = getSelectedNumericRowId(rowSelectionModel);
if (selectedPropertyTypeId == null) {
setErrorMessage('Select a property type before deleting it.');
return;
}
try {
await deletePropertyType(selectedPropertyTypeId);
setErrorMessage('');
setRowSelectionModel(createEmptyRowSelectionModel());
loadPropertyTypes();
} catch {
setErrorMessage('Deleting the property type 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: 'id', sort: 'asc' }],
},
}}
rows={propertyTypes}
columns={[
{ field: 'id', headerName: 'ID', width: 100 ,align: 'right', headerAlign: 'right', editable: false},
{ field: 'label', headerName: 'Label', width: 200 , editable: true},
{ field: 'valueTypeId', headerName: 'Value Type Id', width: 100 , editable: true},
{ field: 'propertyGroupId', headerName: 'Property Group Id', width: 100 , editable: true},
{ field: 'valueComplexityId', headerName: 'Value Complexity Id', width: 100 , editable: true},
{ field: 'value', headerName: 'Value', width: 200 , editable: true},
]}
columns={columns}
slots={{
toolbar: CustomToolbar,
toolbar: () => (
<CrudTableToolbar
title={`Property types for group ${propertyGroup?.label}.`}
disableAdd={selectedRow <= 0}
disableDelete={isDeleteDisabled(rowSelectionModel)}
onDelete={handleDeletePropertyType}
onAdd={() => setIsCreateDialogOpen(true)}
/>
),
}}
processRowUpdate={(updatedRow, originalRow) => {
updatePropertyType({
processRowUpdate={async (updatedRow) => {
await updatePropertyType({
id: updatedRow.id,
valueTypeId: updatedRow.valueTypeId,
label: updatedRow.label,
valueTypeId: Number(updatedRow.valueTypeId),
propertyGroupId: updatedRow.propertyGroupId,
valueComplexityId: updatedRow.valueComplexityId,
valueComplexityId: String(updatedRow.valueComplexityId),
value: updatedRow.value
}
)
});
setErrorMessage('');
return updatedRow;
}}
getRowClassName={(params) =>
params.indexRelativeToCurrentPage % 2 === 0 ? 'even-row' : 'odd-row'
}
showToolbar
onProcessRowUpdateError={() => setErrorMessage('Saving the property type failed.')}
getRowClassName={alternatingRowClassName}
rowSelectionModel={rowSelectionModel}
onRowSelectionModelChange={(newRowSelectionModel) => setRowSelectionModel(newRowSelectionModel)}
/>
</Paper>
<PropertyTypeCreateDialog
open={isCreateDialogOpen}
propertyGroupId={selectedRow}
valueTypes={valueTypes}
valueComplexities={valueComplexities}
onClose={handleCreateDialogClose}
onCreated={handlePropertyTypeCreated}
/>
</div>
);
};
buildtime/client/material-editor/src/components/TranslationCreateDialog.tsx
+69
View File
@@ -0,0 +1,69 @@
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import { createTranslation } from '../api/language/translations.api';
import CreateEntityDialog from './CreateEntityDialog';
import type { Translation } from '../data/translation';
type TranslationCreateDialogProps = {
open: boolean;
languageId: number;
onClose: () => void;
onCreated: (translation: Translation) => void | Promise<void>;
};
type TranslationFormState = {
original: string;
translated: string;
};
const initialFormState: TranslationFormState = {
original: '',
translated: '',
};
const TranslationCreateDialog = ({ open, languageId, onClose, onCreated }: TranslationCreateDialogProps) => {
return (
<CreateEntityDialog
open={open}
title="New Translation"
initialState={initialFormState}
onClose={onClose}
onCreated={onCreated}
validate={() => {
if (languageId <= 0) {
return 'Select a language before creating a translation.';
}
return null;
}}
createEntity={(formState) => createTranslation({
id: 0,
language_id: languageId,
original: formState.original,
translated: formState.translated,
})}
errorMessageText="Creating the translation failed."
>
{({ formState, setFormState }) => (
<Stack spacing={2} sx={{ pt: 1 }}>
<TextField
autoFocus
required
label="Original"
value={formState.original}
onChange={(event) => setFormState((currentState) => ({ ...currentState, original: event.target.value }))}
/>
<TextField
required
label="Translated"
value={formState.translated}
onChange={(event) => setFormState((currentState) => ({ ...currentState, translated: event.target.value }))}
/>
</Stack>
)}
</CreateEntityDialog>
);
};
export default TranslationCreateDialog;
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>
);
};
buildtime/client/material-editor/src/components/tableViewUtils.ts
+23
View File
@@ -0,0 +1,23 @@
import type { GridRowClassNameParams, GridRowId, GridRowSelectionModel } from '@mui/x-data-grid';
export const createEmptyRowSelectionModel = (): GridRowSelectionModel => ({
type: 'include',
ids: new Set(),
});
export const getSelectedNumericRowId = (rowSelectionModel: GridRowSelectionModel): number | null => {
const selectedRowId = Array.from(rowSelectionModel.ids)[0];
return typeof selectedRowId === 'number' ? selectedRowId : null;
};
export const isDeleteDisabled = (rowSelectionModel: GridRowSelectionModel): boolean => {
return rowSelectionModel.ids.size === 0;
};
export const alternatingRowClassName = (params: GridRowClassNameParams): string => {
return params.indexRelativeToCurrentPage % 2 === 0 ? 'even-row' : 'odd-row';
};
export const isSelectedRowId = (rowId: GridRowId, expectedId: number): boolean => {
return typeof rowId === 'number' && rowId === expectedId;
};
buildtime/client/material-editor/src/data/propertyGroup.ts
+1 -1
View File
@@ -1,4 +1,4 @@
export type propertyGroup = {
export type PropertyGroup = {
id: number;
label: string;
description: string;
buildtime/client/material-editor/src/data/propertyType.ts
+2 -2
View File
@@ -1,9 +1,9 @@
export type PropertyType = {
id: number;
label: string;
valueTypeId: number;
propertyGroupId: number;
valueComplexityId: number;
valueTypeId: number;
valueComplexityId: string;
value: string;
};
buildtime/client/material-editor/src/data/valueComplexity.ts
+6
View File
@@ -0,0 +1,6 @@
export type ValueComplexity = {
id: number;
complexity: string;
valueDefinition: string;
};
buildtime/client/material-editor/src/data/valueType.ts
+5
View File
@@ -0,0 +1,5 @@
export type ValueType = {
id: number;
label: string;
};
buildtime/client/material-editor/src/pages/LanguagesPage.tsx
+9 -3
View File
@@ -9,9 +9,15 @@ import { getLanguages } from '../api/language/languages.api';
const LanguagesPage: React.FC = () => {
const [languages, setLanguages] = useState<Language[]>([]);
const [selectedRow, setSelectedRow] = useState(0);
const loadLanguages = React.useCallback(async () => {
const loadedLanguages = await getLanguages();
setLanguages(loadedLanguages);
}, []);
useEffect(() => {
getLanguages().then(setLanguages);
}, []);
loadLanguages();
}, [loadLanguages]);
return (
<Box component="section" sx={{ p: 2, border: '1px dashed grey' }}>
@@ -27,7 +33,7 @@ const LanguagesPage: React.FC = () => {
bgcolor: "#f5f5f5"
}}
>
<LanguagesTableView languages={languages} setSelectedRow={setSelectedRow} />
<LanguagesTableView languages={languages} setSelectedRow={setSelectedRow} refreshLanguages={loadLanguages} />
<TranslationsTableView selectedRow={selectedRow} />
</Box>
</Box>
buildtime/client/material-editor/src/pages/PropertyPage.tsx
+11 -5
View File
@@ -3,15 +3,21 @@ import PropertyTypesTableView from '../components/PropertyTypesTableView';
import PropertyGroupsTableView from '../components/PropertyGroupsTableView';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import type { propertyGroup } from '../data/propertyGroup';
import type { PropertyGroup } from '../data/propertyGroup';
import { getPropertyGroups } from '../api/language/propertyGroup.api';
const PropertyPage: React.FC = () => {
const [propertyGroups, setPropertyGroups] = useState<propertyGroup[]>([]);
const [propertyGroups, setPropertyGroups] = useState<PropertyGroup[]>([]);
const [selectedRow, setSelectedRow] = useState(0);
const loadPropertyGroups = React.useCallback(async () => {
const loadedPropertyGroups = await getPropertyGroups();
setPropertyGroups(loadedPropertyGroups);
}, []);
useEffect(() => {
getPropertyGroups().then(setPropertyGroups);
}, []);
loadPropertyGroups();
}, [loadPropertyGroups]);
return (
<Box component="section" sx={{ p: 2, border: '1px dashed grey' }}>
@@ -27,7 +33,7 @@ const PropertyPage: React.FC = () => {
bgcolor: "#f5f5f5"
}}
>
<PropertyGroupsTableView propertyGroups={propertyGroups} setSelectedRow={setSelectedRow} />
<PropertyGroupsTableView propertyGroups={propertyGroups} setSelectedRow={setSelectedRow} refreshPropertyGroups={loadPropertyGroups} />
<PropertyTypesTableView selectedRow={selectedRow} />
</Box>
</Box>
buildtime/client/material-editor/vite.config.ts
+37
View File
@@ -4,4 +4,41 @@ import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
build: {
rollupOptions: {
output: {
manualChunks(id) {
if (!id.includes('node_modules')) {
return undefined
}
if (id.includes('@mui/x-data-grid')) {
return 'mui-data-grid'
}
if (
id.includes('@mui/material') ||
id.includes('@mui/icons-material') ||
id.includes('@emotion')
) {
return 'mui-core'
}
if (id.includes('react-router')) {
return 'react-router'
}
if (id.includes('react-dom') || id.match(/[\\/]node_modules[\\/]react[\\/]/)) {
return 'react-vendor'
}
if (id.includes('keycloak-js')) {
return 'keycloak'
}
return 'vendor'
},
},
},
},
})