297 lines
9.6 KiB
JavaScript
297 lines
9.6 KiB
JavaScript
import { PureComponent } from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Button from '@mui/material/Button';
|
|
import CircularProgress from '@mui/material/CircularProgress';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import List from '@mui/material/List';
|
|
import ListItem from '@mui/material/ListItem';
|
|
import Tooltip from '@mui/material/Tooltip';
|
|
import Typography from '@mui/material/Typography';
|
|
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
|
|
import CopyrightIcon from '@mui/icons-material/Copyright';
|
|
import ImageSearchIcon from '@mui/icons-material/ImageSearch';
|
|
import BackendError from '../../components/BackendError';
|
|
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
|
|
import { PanelTile, PanelTileGrid } from 'dashgui/panels';
|
|
import { backendErrorFrom } from '../../utils/backendError';
|
|
import { notifyError } from '../../utils/notify';
|
|
import { setLastArticleSku } from '../../automats';
|
|
import brandAutomat from '../../automats/brandAutomat';
|
|
import { enqueueSnackbar } from 'notistack';
|
|
import { BrandThumb, BrandImageSearchDialog } from '../../components/brand';
|
|
import {
|
|
PURPLE_PANEL,
|
|
} from '../../colors';
|
|
|
|
function draftsFrom(brands) {
|
|
return Object.fromEntries(brands.map((b) => [b.id, b.name]));
|
|
}
|
|
|
|
class ArtikelMarkenPage extends PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
const initialBrands = brandAutomat.state.brands || [];
|
|
this.state = {
|
|
status: brandAutomat.state.status === 'succeeded' ? 'ready' : 'loading',
|
|
error: brandAutomat.state.error ? backendErrorFrom({ message: brandAutomat.state.error }) : null,
|
|
brands: initialBrands,
|
|
drafts: draftsFrom(initialBrands),
|
|
newName: '',
|
|
busyKey: null,
|
|
searchBrand: null,
|
|
};
|
|
this._cancelled = false;
|
|
this.handleCreate = this.handleCreate.bind(this);
|
|
this.handleRetry = this.handleRetry.bind(this);
|
|
this.loadBrands = this.loadBrands.bind(this);
|
|
}
|
|
|
|
componentDidMount() {
|
|
setLastArticleSku(null);
|
|
this._cancelled = false;
|
|
|
|
this.unsub = brandAutomat.subscribe((state) => {
|
|
if (this._cancelled) return;
|
|
if (state.status === 'succeeded') {
|
|
this.applyBrands(state.brands);
|
|
} else if (state.status === 'failed') {
|
|
this.setState({ status: 'failed', error: backendErrorFrom({ message: state.error }) });
|
|
}
|
|
});
|
|
|
|
if (brandAutomat.state.status !== 'succeeded') {
|
|
void this.loadBrands();
|
|
}
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this._cancelled = true;
|
|
this.unsub?.();
|
|
}
|
|
|
|
applyBrands(brands) {
|
|
this.setState((prev) => {
|
|
const currentDrafts = prev.drafts || {};
|
|
const nextDrafts = { ...draftsFrom(brands) };
|
|
for (const b of brands) {
|
|
if (prev.busyKey !== b.id && currentDrafts[b.id] !== undefined) {
|
|
nextDrafts[b.id] = currentDrafts[b.id];
|
|
}
|
|
}
|
|
return {
|
|
status: 'ready',
|
|
error: null,
|
|
brands,
|
|
drafts: nextDrafts,
|
|
};
|
|
});
|
|
}
|
|
|
|
async loadBrands() {
|
|
if (brandAutomat.state.status !== 'succeeded') {
|
|
this.setState({ status: 'loading', error: null });
|
|
}
|
|
try {
|
|
const list = await brandAutomat.actions.load();
|
|
if (this._cancelled) return;
|
|
this.applyBrands(list);
|
|
} catch (err) {
|
|
if (this._cancelled) return;
|
|
this.setState({ status: 'failed', error: backendErrorFrom(err) });
|
|
}
|
|
}
|
|
|
|
handleRetry() {
|
|
void this.loadBrands();
|
|
}
|
|
|
|
async handleCreate() {
|
|
const name = this.state.newName.trim();
|
|
if (!name || this.state.busyKey != null) return;
|
|
|
|
this.setState({ busyKey: 'new' });
|
|
try {
|
|
const row = await brandAutomat.actions.upsert({ name });
|
|
if (this._cancelled) return;
|
|
this.setState({ newName: '', busyKey: null });
|
|
enqueueSnackbar(`Marke „${row.name || name}" angelegt.`, { variant: 'success' });
|
|
} catch (err) {
|
|
if (this._cancelled) return;
|
|
notifyError(err);
|
|
this.setState({ busyKey: null });
|
|
}
|
|
}
|
|
|
|
async handleRename(brand) {
|
|
const draft = String(this.state.drafts[brand.id] ?? '').trim();
|
|
if (!draft) {
|
|
this.setState((prev) => ({
|
|
drafts: { ...prev.drafts, [brand.id]: brand.name },
|
|
}));
|
|
return;
|
|
}
|
|
if (draft === brand.name || this.state.busyKey != null) return;
|
|
|
|
this.setState({ busyKey: brand.id });
|
|
try {
|
|
await brandAutomat.actions.upsert({ name: draft });
|
|
if (this._cancelled) return;
|
|
this.setState({ busyKey: null });
|
|
enqueueSnackbar('Marke gespeichert.', { variant: 'success' });
|
|
} catch (err) {
|
|
if (this._cancelled) return;
|
|
notifyError(err);
|
|
this.setState((prev) => ({
|
|
busyKey: null,
|
|
drafts: { ...prev.drafts, [brand.id]: brand.name },
|
|
}));
|
|
}
|
|
}
|
|
|
|
async handleDelete(brand) {
|
|
if (this.state.busyKey != null) return;
|
|
if (!window.confirm(`Marke „${brand.name}" wirklich löschen?`)) return;
|
|
|
|
this.setState({ busyKey: brand.id });
|
|
try {
|
|
await brandAutomat.actions.remove(brand.id);
|
|
if (this._cancelled) return;
|
|
this.setState({ busyKey: null });
|
|
enqueueSnackbar('Marke gelöscht.', { variant: 'success' });
|
|
} catch (err) {
|
|
if (this._cancelled) return;
|
|
notifyError(err);
|
|
this.setState({ busyKey: null });
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { status, error, brands, drafts, newName, busyKey } = this.state;
|
|
const busy = busyKey != null;
|
|
|
|
if (status === 'loading') {
|
|
return (
|
|
<Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
|
|
<CircularProgress />
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
if (status === 'failed') {
|
|
return <BackendError error={error} onRetry={this.handleRetry} />;
|
|
}
|
|
|
|
return (
|
|
<PanelTileGrid>
|
|
<PanelTile wide={2} minHeight={280} color={PURPLE_PANEL}>
|
|
<List dense disablePadding>
|
|
{brands.length === 0 ? (
|
|
<Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
|
|
Noch keine Marken angelegt.
|
|
</Typography>
|
|
) : (
|
|
brands.map((b) => (
|
|
<ListItem
|
|
key={b.id}
|
|
disableGutters
|
|
sx={{ gap: 1, py: 0.75, alignItems: 'center' }}
|
|
>
|
|
<BrandThumb
|
|
brand={b}
|
|
size={22}
|
|
fallback={<CopyrightIcon sx={{ color: 'text.secondary', fontSize: 20, flexShrink: 0 }} />}
|
|
/>
|
|
<SingleLineTextEdit
|
|
size="small"
|
|
label=""
|
|
value={drafts[b.id] ?? ''}
|
|
disabled={busy}
|
|
onChange={(next) =>
|
|
this.setState((prev) => ({
|
|
drafts: { ...prev.drafts, [b.id]: next },
|
|
}))
|
|
}
|
|
onBlur={() => void this.handleRename(b)}
|
|
onKeyDown={(event) => {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault();
|
|
event.target.blur();
|
|
}
|
|
if (event.key === 'Escape') {
|
|
event.preventDefault();
|
|
this.setState((prev) => ({
|
|
drafts: { ...prev.drafts, [b.id]: b.name },
|
|
}));
|
|
event.target.blur();
|
|
}
|
|
}}
|
|
sx={{ flex: 1 }}
|
|
/>
|
|
<Tooltip title="Logo suchen">
|
|
<span>
|
|
<IconButton
|
|
size="small"
|
|
aria-label={`Logo für „${b.name}" suchen`}
|
|
disabled={busy}
|
|
onClick={() => this.setState({ searchBrand: b })}
|
|
>
|
|
<ImageSearchIcon fontSize="small" />
|
|
</IconButton>
|
|
</span>
|
|
</Tooltip>
|
|
<Tooltip title="Löschen">
|
|
<span>
|
|
<IconButton
|
|
edge="end"
|
|
size="small"
|
|
aria-label={`„${b.name}" löschen`}
|
|
disabled={busy}
|
|
onClick={() => void this.handleDelete(b)}
|
|
>
|
|
<DeleteOutlinedIcon fontSize="small" />
|
|
</IconButton>
|
|
</span>
|
|
</Tooltip>
|
|
</ListItem>
|
|
))
|
|
)}
|
|
</List>
|
|
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 2 }}>
|
|
<SingleLineTextEdit
|
|
size="small"
|
|
label="Neue Marke"
|
|
value={newName}
|
|
disabled={busy}
|
|
onChange={(next) => this.setState({ newName: next })}
|
|
onKeyDown={(event) => {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault();
|
|
void this.handleCreate();
|
|
}
|
|
}}
|
|
sx={{ flex: 1 }}
|
|
/>
|
|
<Button
|
|
variant="contained"
|
|
size="small"
|
|
disabled={busy || !newName.trim()}
|
|
onClick={() => void this.handleCreate()}
|
|
>
|
|
{busyKey === 'new' ? '…' : 'Hinzufügen'}
|
|
</Button>
|
|
</Box>
|
|
</PanelTile>
|
|
|
|
<BrandImageSearchDialog
|
|
open={Boolean(this.state.searchBrand)}
|
|
brand={this.state.searchBrand}
|
|
onClose={() => this.setState({ searchBrand: null })}
|
|
/>
|
|
</PanelTileGrid>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default ArtikelMarkenPage;
|