61 lines
1.8 KiB
JavaScript
61 lines
1.8 KiB
JavaScript
import { PureComponent } from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Button from '@mui/material/Button';
|
|
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
|
|
import { enqueueSnackbar } from 'notistack';
|
|
import brandAutomat from '../../automats/brandAutomat';
|
|
import { notifyError } from '../../utils/notify';
|
|
|
|
// Own component so typing a new brand name never rerenders ArtikelMarkenPage
|
|
// (and its FillSpace measurement). Holds the draft locally and performs the
|
|
// automat mutation itself — no callbacks.
|
|
class ArtikelMarkeNew extends PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = { newName: '' };
|
|
}
|
|
|
|
async submit() {
|
|
const name = this.state.newName.trim();
|
|
if (!name) return;
|
|
try {
|
|
const row = await brandAutomat.actions.create({ name });
|
|
enqueueSnackbar(`Marke „${row.name || name}" angelegt.`, { variant: 'success' });
|
|
this.setState({ newName: '' });
|
|
} catch (err) {
|
|
notifyError(err);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { rowRef } = this.props;
|
|
const { newName } = this.state;
|
|
return (
|
|
<Box ref={rowRef} sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 2, pb: 2 }}>
|
|
<SingleLineTextEdit
|
|
size="small"
|
|
value={newName}
|
|
onChange={(next) => this.setState({ newName: next })}
|
|
onKeyDown={(event) => {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault();
|
|
void this.submit();
|
|
}
|
|
}}
|
|
sx={{ flex: 1 }}
|
|
/>
|
|
<Button
|
|
variant="contained"
|
|
size="small"
|
|
disabled={!newName.trim()}
|
|
onClick={() => void this.submit()}
|
|
>
|
|
Hinzufügen
|
|
</Button>
|
|
</Box>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default ArtikelMarkeNew;
|