53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import { Chip, Stack, Typography } from '@mui/material';
|
|
import { PickItem, PickItemStatus } from '../models/PickItem';
|
|
import { Product } from '../models/Product';
|
|
import { useLongPress } from '../hooks/useLongPress';
|
|
import { useSwipe } from '../hooks/useSwipe';
|
|
|
|
interface PickItemRowProps {
|
|
item: PickItem;
|
|
product?: Product | null;
|
|
onIncrementUnit: () => void;
|
|
onIncrementBulk: () => void;
|
|
onSwipeLeft: () => void;
|
|
onSwipeRight: () => void;
|
|
}
|
|
|
|
const statusColor: Record<PickItemStatus, 'default' | 'success' | 'warning'> = {
|
|
pending: 'default',
|
|
picked: 'success',
|
|
skipped: 'warning',
|
|
};
|
|
|
|
export const PickItemRow = ({
|
|
item,
|
|
product,
|
|
onIncrementUnit,
|
|
onIncrementBulk,
|
|
onSwipeLeft,
|
|
onSwipeRight,
|
|
}: PickItemRowProps) => {
|
|
const longPressHandlers = useLongPress({ onLongPress: onIncrementBulk, onClick: onIncrementUnit });
|
|
const swipeHandlers = useSwipe({ onSwipeLeft, onSwipeRight });
|
|
|
|
return (
|
|
<Stack
|
|
direction="row"
|
|
alignItems="center"
|
|
justifyContent="space-between"
|
|
spacing={1}
|
|
sx={{ p: 1, borderRadius: 1, bgcolor: 'background.paper', boxShadow: 1 }}
|
|
{...longPressHandlers}
|
|
{...swipeHandlers}
|
|
>
|
|
<div>
|
|
<Typography variant="subtitle1">{product?.name ?? 'Unknown product'}</Typography>
|
|
<Typography variant="caption" color="text.secondary">
|
|
{item.quantity_units} units / {item.quantity_bulk} bulk
|
|
</Typography>
|
|
</div>
|
|
<Chip label={item.status} color={statusColor[item.status]} size="small" />
|
|
</Stack>
|
|
);
|
|
};
|