152 lines
4.1 KiB
JavaScript
152 lines
4.1 KiB
JavaScript
import { PureComponent } from 'react';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import ListItem from '@mui/material/ListItem';
|
|
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
|
|
import ImageSearchIcon from '@mui/icons-material/ImageSearch';
|
|
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
|
|
import { enqueueSnackbar } from 'notistack';
|
|
import brandAutomat from '../../automats/brandAutomat';
|
|
import { notifyError } from '../../utils/notify';
|
|
import BrandThumb from './BrandThumb';
|
|
import BrandImageSearchDialog from './BrandImageSearchDialog';
|
|
|
|
class ArtikelMarke extends PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
draft: props.brand?.name ?? '',
|
|
logoOpen: false,
|
|
};
|
|
}
|
|
|
|
componentDidUpdate(prevProps) {
|
|
if (prevProps.brand?.name !== this.props.brand?.name) {
|
|
this.setState({ draft: this.props.brand?.name ?? '' });
|
|
} else if (prevProps.disabled && !this.props.disabled) {
|
|
if (this.state.draft !== this.props.brand?.name) {
|
|
this.setState({ draft: this.props.brand?.name ?? '' });
|
|
}
|
|
}
|
|
}
|
|
|
|
handleChange = (next) => {
|
|
this.setState({ draft: next });
|
|
this.props.onChange?.(next, this.props.brand);
|
|
};
|
|
|
|
handleBlur = () => {
|
|
const { brand } = this.props;
|
|
const draft = this.state.draft.trim();
|
|
if (!draft) {
|
|
this.setState({ draft: brand?.name ?? '' });
|
|
return;
|
|
}
|
|
if (draft !== brand?.name) {
|
|
void this.renameBrand(brand, draft);
|
|
}
|
|
};
|
|
|
|
async renameBrand(brand, name) {
|
|
try {
|
|
await brandAutomat.actions.rename(brand.id, { name });
|
|
enqueueSnackbar('Marke gespeichert.', { variant: 'success' });
|
|
} catch (err) {
|
|
this.setState({ draft: brand?.name ?? '' });
|
|
notifyError(err);
|
|
}
|
|
}
|
|
|
|
handleKeyDown = (event) => {
|
|
const { brand } = this.props;
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault();
|
|
event.target.blur();
|
|
}
|
|
if (event.key === 'Escape') {
|
|
event.preventDefault();
|
|
this.setState({ draft: brand?.name ?? '' });
|
|
event.target.blur();
|
|
}
|
|
};
|
|
|
|
handleSearchLogo = () => {
|
|
this.setState({ logoOpen: true });
|
|
};
|
|
|
|
handleLogoClose = () => {
|
|
this.setState({ logoOpen: false });
|
|
};
|
|
|
|
handleDelete = () => {
|
|
const { brand } = this.props;
|
|
if (!window.confirm(`Marke „${brand.name}" wirklich löschen?`)) return;
|
|
void (async () => {
|
|
try {
|
|
await brandAutomat.actions.remove(brand.id);
|
|
enqueueSnackbar('Marke gelöscht.', { variant: 'success' });
|
|
} catch (err) {
|
|
notifyError(err);
|
|
}
|
|
})();
|
|
};
|
|
|
|
render() {
|
|
const { brand, disabled, sx } = this.props;
|
|
const { draft, logoOpen } = this.state;
|
|
const name = brand?.name ?? '';
|
|
|
|
return (
|
|
<>
|
|
<ListItem
|
|
disableGutters
|
|
sx={{ gap: 1, py: 0.75, alignItems: 'center', width: '100%', minWidth: 0, ...sx }}
|
|
>
|
|
<BrandThumb
|
|
brand={brand}
|
|
size={40}
|
|
fallback={
|
|
<IconButton
|
|
aria-label={`Logo für „${name}" suchen`}
|
|
disabled={disabled}
|
|
onClick={this.handleSearchLogo}
|
|
sx={{ width: 40, height: 40, flexShrink: 0 }}
|
|
>
|
|
<ImageSearchIcon sx={{ fontSize: 24 }} />
|
|
</IconButton>
|
|
}
|
|
/>
|
|
|
|
<SingleLineTextEdit
|
|
size="small"
|
|
label=""
|
|
value={draft}
|
|
disabled={disabled}
|
|
onChange={this.handleChange}
|
|
onBlur={this.handleBlur}
|
|
onKeyDown={this.handleKeyDown}
|
|
sx={{ flex: 1, minWidth: 0 }}
|
|
/>
|
|
|
|
<IconButton
|
|
aria-label={`„${name}" löschen`}
|
|
disabled={disabled}
|
|
onClick={this.handleDelete}
|
|
sx={{ width: 40, height: 40, flexShrink: 0 }}
|
|
>
|
|
<DeleteOutlinedIcon sx={{ fontSize: 24 }} />
|
|
</IconButton>
|
|
</ListItem>
|
|
{logoOpen ? (
|
|
<BrandImageSearchDialog
|
|
open
|
|
brand={brand}
|
|
onClose={this.handleLogoClose}
|
|
/>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default ArtikelMarke;
|