u
This commit is contained in:
seb
213
src/components/carrier/CarrierItem.jsx
Normal file
213
src/components/carrier/CarrierItem.jsx
Normal file
@@ -0,0 +1,213 @@
|
||||
import { PureComponent } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import Switch from '@mui/material/Switch';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import Tooltip from '@mui/material/Tooltip';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
|
||||
import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
|
||||
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import carrierAutomat from '../../automats/carrierAutomat';
|
||||
import { notifyError } from '../../utils/notify';
|
||||
|
||||
class CarrierItem extends PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const item = props.carrier ?? props.item;
|
||||
this.state = {
|
||||
draft: item?.name ?? '',
|
||||
};
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const prevItem = prevProps.carrier ?? prevProps.item;
|
||||
const item = this.props.carrier ?? this.props.item;
|
||||
if (prevItem?.name !== item?.name) {
|
||||
this.setState({ draft: item?.name ?? '' });
|
||||
} else if (prevProps.disabled && !this.props.disabled) {
|
||||
if (this.state.draft !== item?.name) {
|
||||
this.setState({ draft: item?.name ?? '' });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handleChange = (next) => {
|
||||
this.setState({ draft: next });
|
||||
const item = this.props.carrier ?? this.props.item;
|
||||
this.props.onChange?.(next, item);
|
||||
};
|
||||
|
||||
handleBlur = () => {
|
||||
const item = this.props.carrier ?? this.props.item;
|
||||
if (!item) return;
|
||||
const draft = this.state.draft.trim();
|
||||
if (!draft) {
|
||||
this.setState({ draft: item.name ?? '' });
|
||||
return;
|
||||
}
|
||||
if (draft !== item.name) {
|
||||
void this.updateCarrier(item, { name: draft });
|
||||
}
|
||||
};
|
||||
|
||||
async updateCarrier(item, patch) {
|
||||
try {
|
||||
await carrierAutomat.actions.update(item.id, patch);
|
||||
enqueueSnackbar('Lieferart gespeichert.', { variant: 'success' });
|
||||
} catch (err) {
|
||||
this.setState({ draft: item.name ?? '' });
|
||||
notifyError(err);
|
||||
}
|
||||
}
|
||||
|
||||
handleToggleHasPackages = (e) => {
|
||||
const item = this.props.carrier ?? this.props.item;
|
||||
if (!item) return;
|
||||
const nextVal = e.target.checked;
|
||||
void this.updateCarrier(item, { hasPackages: nextVal });
|
||||
};
|
||||
|
||||
handleToggleIsReverse = (e) => {
|
||||
const item = this.props.carrier ?? this.props.item;
|
||||
if (!item) return;
|
||||
const nextVal = e.target.checked;
|
||||
void this.updateCarrier(item, { isReverse: nextVal });
|
||||
};
|
||||
|
||||
handleKeyDown = (event) => {
|
||||
const item = this.props.carrier ?? this.props.item;
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
event.target.blur();
|
||||
}
|
||||
if (event.key === 'Escape') {
|
||||
event.preventDefault();
|
||||
this.setState({ draft: item?.name ?? '' });
|
||||
event.target.blur();
|
||||
}
|
||||
};
|
||||
|
||||
handleDelete = () => {
|
||||
const item = this.props.carrier ?? this.props.item;
|
||||
if (!item) return;
|
||||
if (!window.confirm(`Lieferart „${item.name}“ wirklich löschen?`)) return;
|
||||
void (async () => {
|
||||
try {
|
||||
await carrierAutomat.actions.remove(item.id);
|
||||
enqueueSnackbar('Lieferart gelöscht.', { variant: 'success' });
|
||||
} catch (err) {
|
||||
notifyError(err);
|
||||
}
|
||||
})();
|
||||
};
|
||||
|
||||
render() {
|
||||
const { disabled, sx } = this.props;
|
||||
const item = this.props.carrier ?? this.props.item;
|
||||
const { draft } = this.state;
|
||||
const name = item?.name ?? '';
|
||||
const hasPackages = Boolean(item?.hasPackages);
|
||||
const isReverse = Boolean(item?.isReverse);
|
||||
|
||||
return (
|
||||
<ListItem
|
||||
disableGutters
|
||||
data-id={item?.id}
|
||||
sx={{
|
||||
gap: 1,
|
||||
py: 0.75,
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
minWidth: 0,
|
||||
flexWrap: { xs: 'wrap', sm: 'nowrap' },
|
||||
...sx,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
className="drag-handle"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: 40,
|
||||
height: 40,
|
||||
flexShrink: 0,
|
||||
color: 'text.disabled',
|
||||
cursor: disabled ? 'default' : 'grab',
|
||||
userSelect: 'none',
|
||||
touchAction: 'none',
|
||||
'&:hover': disabled ? undefined : { color: 'text.secondary' },
|
||||
transition: 'color 0.15s',
|
||||
}}
|
||||
>
|
||||
<DragIndicatorIcon sx={{ fontSize: 24, pointerEvents: 'none' }} />
|
||||
</Box>
|
||||
|
||||
<SingleLineTextEdit
|
||||
size="small"
|
||||
label=""
|
||||
value={draft}
|
||||
disabled={disabled || !item}
|
||||
onChange={this.handleChange}
|
||||
onBlur={this.handleBlur}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
sx={{ flex: 1, minWidth: 140 }}
|
||||
/>
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, flexShrink: 0 }}>
|
||||
<Tooltip title="Paketverfolgung / Tracking für Sendungen aktivieren">
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
size="small"
|
||||
checked={hasPackages}
|
||||
disabled={disabled || !item}
|
||||
onChange={this.handleToggleHasPackages}
|
||||
/>
|
||||
}
|
||||
label={
|
||||
<Typography variant="caption" sx={{ userSelect: 'none', fontWeight: 500 }}>
|
||||
Pakete
|
||||
</Typography>
|
||||
}
|
||||
sx={{ m: 0, gap: 0.5 }}
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Für Retouren / Rücksendungen verwenden">
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
size="small"
|
||||
checked={isReverse}
|
||||
disabled={disabled || !item}
|
||||
onChange={this.handleToggleIsReverse}
|
||||
/>
|
||||
}
|
||||
label={
|
||||
<Typography variant="caption" sx={{ userSelect: 'none', fontWeight: 500 }}>
|
||||
Retoure
|
||||
</Typography>
|
||||
}
|
||||
sx={{ m: 0, gap: 0.5 }}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
|
||||
<IconButton
|
||||
aria-label={`„${name}“ löschen`}
|
||||
disabled={disabled || !item}
|
||||
onClick={this.handleDelete}
|
||||
sx={{ width: 40, height: 40, flexShrink: 0 }}
|
||||
>
|
||||
<DeleteOutlinedIcon sx={{ fontSize: 24 }} />
|
||||
</IconButton>
|
||||
</ListItem>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CarrierItem;
|
||||
Reference in New Issue
Block a user