56 lines
2.0 KiB
TypeScript
56 lines
2.0 KiB
TypeScript
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; |