349 lines
12 KiB
JavaScript
349 lines
12 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 Stack from '@mui/material/Stack';
|
|
import Typography from '@mui/material/Typography';
|
|
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
|
|
import GroupsIcon from '@mui/icons-material/Groups';
|
|
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
|
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
|
|
import { enqueueSnackbar } from 'notistack';
|
|
import BackendError from '../../components/BackendError';
|
|
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
|
|
import { PanelTile, PanelTileGrid } from 'dashgui/panels';
|
|
import { StorageManagerContext } from '../../api/storageManagerContext';
|
|
import { requireArray, requireDefined, requireObject } from '../../utils/apiShape';
|
|
import { backendErrorFrom } from '../../utils/backendError';
|
|
import { notifyError } from '../../utils/notify';
|
|
|
|
function sortGroups(groups) {
|
|
return [...groups].sort((a, b) => {
|
|
const bySort = a.sort - b.sort;
|
|
if (bySort !== 0) return bySort;
|
|
const byName = String(a.name).localeCompare(String(b.name), 'de');
|
|
if (byName !== 0) return byName;
|
|
return a.id - b.id;
|
|
});
|
|
}
|
|
|
|
function draftsFrom(groups) {
|
|
return Object.fromEntries(groups.map((row) => [row.id, row.name]));
|
|
}
|
|
|
|
function requireGroupListItem(row, path) {
|
|
requireObject(row, path);
|
|
requireDefined(row.id, `${path}.id`);
|
|
requireDefined(row.name, `${path}.name`);
|
|
requireDefined(row.sort, `${path}.sort`);
|
|
requireDefined(row.editable, `${path}.editable`);
|
|
}
|
|
|
|
class KundeGruppenPage extends PureComponent {
|
|
static contextType = StorageManagerContext;
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
status: 'loading',
|
|
error: null,
|
|
groups: [],
|
|
drafts: {},
|
|
newName: '',
|
|
busyKey: null,
|
|
};
|
|
this._cancelled = false;
|
|
this.handleCreate = this.handleCreate.bind(this);
|
|
this.handleRetry = this.handleRetry.bind(this);
|
|
}
|
|
|
|
componentDidMount() {
|
|
this._cancelled = false;
|
|
void this.load();
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this._cancelled = true;
|
|
}
|
|
|
|
applyGroups(groups) {
|
|
groups.forEach((row, index) => {
|
|
requireGroupListItem(row, `customergroups[${index}]`);
|
|
});
|
|
const sorted = sortGroups(groups);
|
|
this.setState({
|
|
status: 'ready',
|
|
error: null,
|
|
groups: sorted,
|
|
drafts: draftsFrom(sorted),
|
|
});
|
|
}
|
|
|
|
async load() {
|
|
this.setState({ status: 'loading', error: null });
|
|
try {
|
|
const list =
|
|
this.context.customergroups ??
|
|
(await this.context.customergroupPromise);
|
|
if (this._cancelled) return;
|
|
this.applyGroups(list);
|
|
} catch (err) {
|
|
if (this._cancelled) return;
|
|
this.setState({ status: 'failed', error: backendErrorFrom(err) });
|
|
}
|
|
}
|
|
|
|
handleRetry() {
|
|
void this.load();
|
|
}
|
|
|
|
async refreshFromServer() {
|
|
const list = await this.context.updateCustomergroup();
|
|
if (this._cancelled) return;
|
|
this.applyGroups(list);
|
|
}
|
|
|
|
async handleCreate() {
|
|
const name = this.state.newName.trim();
|
|
if (!name || this.state.busyKey != null) return;
|
|
|
|
this.setState({ busyKey: 'new' });
|
|
try {
|
|
const data = await this.context.customergroup.create({ name });
|
|
requireObject(data, 'POST /api/customergroup');
|
|
requireObject(data.customergroup, 'customergroup');
|
|
requireDefined(data.customergroup.id, 'customergroup.id');
|
|
requireDefined(data.customergroup.sort, 'customergroup.sort');
|
|
await this.refreshFromServer();
|
|
if (this._cancelled) return;
|
|
this.setState({ newName: '', busyKey: null });
|
|
enqueueSnackbar('Kundengruppe angelegt.', { variant: 'success' });
|
|
} catch (err) {
|
|
if (this._cancelled) return;
|
|
notifyError(err);
|
|
this.setState({ busyKey: null });
|
|
}
|
|
}
|
|
|
|
async handleRename(group) {
|
|
if (!group.editable) return;
|
|
const draft = String(this.state.drafts[group.id] ?? '').trim();
|
|
if (!draft) {
|
|
this.setState((prev) => ({
|
|
drafts: { ...prev.drafts, [group.id]: group.name },
|
|
}));
|
|
return;
|
|
}
|
|
if (draft === group.name || this.state.busyKey != null) return;
|
|
|
|
this.setState({ busyKey: group.id });
|
|
try {
|
|
const data = await this.context.customergroup.update(group.id, {
|
|
name: draft,
|
|
});
|
|
requireObject(data, 'PATCH /api/customergroup/:id');
|
|
requireObject(data.customergroup, 'customergroup');
|
|
requireDefined(data.customergroup.id, 'customergroup.id');
|
|
requireDefined(data.customergroup.sort, 'customergroup.sort');
|
|
await this.refreshFromServer();
|
|
if (this._cancelled) return;
|
|
this.setState({ busyKey: null });
|
|
enqueueSnackbar('Kundengruppe gespeichert.', { variant: 'success' });
|
|
} catch (err) {
|
|
if (this._cancelled) return;
|
|
notifyError(err);
|
|
this.setState((prev) => ({
|
|
busyKey: null,
|
|
drafts: { ...prev.drafts, [group.id]: group.name },
|
|
}));
|
|
}
|
|
}
|
|
|
|
async handleMove(group, delta) {
|
|
const { groups, busyKey } = this.state;
|
|
if (busyKey != null) return;
|
|
|
|
const index = groups.findIndex((row) => row.id === group.id);
|
|
const targetIndex = index + delta;
|
|
if (index < 0 || targetIndex < 0 || targetIndex >= groups.length) return;
|
|
|
|
const next = [...groups];
|
|
const [row] = next.splice(index, 1);
|
|
next.splice(targetIndex, 0, row);
|
|
const customergroupIds = next.map((item) => item.id);
|
|
|
|
this.setState({ busyKey: group.id });
|
|
try {
|
|
const data = await this.context.customergroup.order({ customergroupIds });
|
|
requireObject(data, 'PUT /api/customergroup/order');
|
|
requireArray(data.customergroupIds, 'customergroupIds');
|
|
await this.refreshFromServer();
|
|
if (this._cancelled) return;
|
|
this.setState({ busyKey: null });
|
|
} catch (err) {
|
|
if (this._cancelled) return;
|
|
notifyError(err);
|
|
try {
|
|
await this.refreshFromServer();
|
|
} catch (refreshErr) {
|
|
notifyError(refreshErr);
|
|
}
|
|
if (this._cancelled) return;
|
|
this.setState({ busyKey: null });
|
|
}
|
|
}
|
|
|
|
async handleDelete(group) {
|
|
if (!group.editable || this.state.busyKey != null) return;
|
|
if (!window.confirm(`Kundengruppe „${group.name}“ wirklich löschen?`)) {
|
|
return;
|
|
}
|
|
|
|
this.setState({ busyKey: group.id });
|
|
try {
|
|
await this.context.customergroup.delete(group.id);
|
|
await this.refreshFromServer();
|
|
if (this._cancelled) return;
|
|
this.setState({ busyKey: null });
|
|
enqueueSnackbar('Kundengruppe gelöscht.', { variant: 'success' });
|
|
} catch (err) {
|
|
if (this._cancelled) return;
|
|
notifyError(err);
|
|
this.setState({ busyKey: null });
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { status, error, groups, 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="#e9d5ff">
|
|
<Stack spacing={2}>
|
|
<List dense disablePadding>
|
|
{groups.length === 0 ? (
|
|
<Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
|
|
Noch keine Kundengruppen.
|
|
</Typography>
|
|
) : (
|
|
groups.map((group, index) => {
|
|
const editable = group.editable === true;
|
|
return (
|
|
<ListItem
|
|
key={group.id}
|
|
disableGutters
|
|
sx={{ gap: 1, py: 0.75, alignItems: 'center' }}
|
|
>
|
|
<GroupsIcon
|
|
sx={{ color: 'text.secondary', fontSize: 20, flexShrink: 0 }}
|
|
/>
|
|
<SingleLineTextEdit
|
|
size="small"
|
|
label=""
|
|
value={drafts[group.id] ?? ''}
|
|
disabled={busy || !editable}
|
|
onChange={(next) =>
|
|
this.setState((prev) => ({
|
|
drafts: { ...prev.drafts, [group.id]: next },
|
|
}))
|
|
}
|
|
onBlur={() => void this.handleRename(group)}
|
|
onKeyDown={(event) => {
|
|
if (!editable) return;
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault();
|
|
event.target.blur();
|
|
}
|
|
if (event.key === 'Escape') {
|
|
event.preventDefault();
|
|
this.setState((prev) => ({
|
|
drafts: {
|
|
...prev.drafts,
|
|
[group.id]: group.name,
|
|
},
|
|
}));
|
|
event.target.blur();
|
|
}
|
|
}}
|
|
sx={{ flex: 1 }}
|
|
/>
|
|
<IconButton
|
|
size="small"
|
|
aria-label={`„${group.name}“ nach oben`}
|
|
disabled={busy || index === 0}
|
|
onClick={() => void this.handleMove(group, -1)}
|
|
>
|
|
<KeyboardArrowUpIcon fontSize="small" />
|
|
</IconButton>
|
|
<IconButton
|
|
size="small"
|
|
aria-label={`„${group.name}“ nach unten`}
|
|
disabled={busy || index >= groups.length - 1}
|
|
onClick={() => void this.handleMove(group, 1)}
|
|
>
|
|
<KeyboardArrowDownIcon fontSize="small" />
|
|
</IconButton>
|
|
<IconButton
|
|
edge="end"
|
|
size="small"
|
|
aria-label={`„${group.name}“ löschen`}
|
|
disabled={busy || !editable}
|
|
onClick={() => void this.handleDelete(group)}
|
|
>
|
|
<DeleteOutlinedIcon fontSize="small" />
|
|
</IconButton>
|
|
</ListItem>
|
|
);
|
|
})
|
|
)}
|
|
</List>
|
|
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
<SingleLineTextEdit
|
|
size="small"
|
|
label="Neue Kundengruppe"
|
|
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>
|
|
</Stack>
|
|
</PanelTile>
|
|
</PanelTileGrid>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default KundeGruppenPage;
|