85 lines
2.7 KiB
TypeScript
85 lines
2.7 KiB
TypeScript
import { Button, Container, Stack, Typography } from '@mui/material';
|
|
import { useParams, useNavigate, Link as RouterLink } from 'react-router-dom';
|
|
import { useEffect, useMemo } from 'react';
|
|
import { useAreas, usePickItems, usePickList, useProducts } from '../hooks/dataHooks';
|
|
import { useDatabase } from '../context/DBProvider';
|
|
import { PickItemRow } from '../components/PickItemRow';
|
|
|
|
export const ActivePickListScreen = () => {
|
|
const { id } = useParams();
|
|
const pickList = usePickList(id);
|
|
const items = usePickItems(id);
|
|
const products = useProducts();
|
|
const areas = useAreas();
|
|
const db = useDatabase();
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
if (!id || !pickList) return;
|
|
}, [id, pickList]);
|
|
|
|
const areaName = useMemo(
|
|
() => areas.find((area) => area.id === pickList?.area_id)?.name ?? 'Area',
|
|
[areas, pickList?.area_id],
|
|
);
|
|
|
|
const handleIncrementUnit = async (itemId: string) => {
|
|
const existing = await db.pickItems.get(itemId);
|
|
if (!existing) return;
|
|
await db.pickItems.update(itemId, {
|
|
quantity_units: existing.quantity_units + 1,
|
|
updated_at: Date.now(),
|
|
});
|
|
};
|
|
|
|
const handleIncrementBulk = async (itemId: string) => {
|
|
const existing = await db.pickItems.get(itemId);
|
|
if (!existing) return;
|
|
await db.pickItems.update(itemId, {
|
|
quantity_bulk: existing.quantity_bulk + 1,
|
|
updated_at: Date.now(),
|
|
});
|
|
};
|
|
|
|
const handleSwipeLeft = async (itemId: string) => {
|
|
await db.pickItems.update(itemId, { status: 'picked', updated_at: Date.now() });
|
|
};
|
|
|
|
const handleSwipeRight = async (itemId: string) => {
|
|
await db.pickItems.delete(itemId);
|
|
};
|
|
|
|
const completeList = async () => {
|
|
if (!id) return;
|
|
await db.pickLists.update(id, { completed_at: Date.now() });
|
|
navigate('/pick-lists');
|
|
};
|
|
|
|
return (
|
|
<Container sx={{ py: 4 }}>
|
|
<Stack direction="row" justifyContent="space-between" alignItems="center" mb={2}>
|
|
<Typography variant="h5">{areaName} List</Typography>
|
|
<Button component={RouterLink} to={`/pick-lists/${id}/add-item`} variant="contained">
|
|
Add Item
|
|
</Button>
|
|
</Stack>
|
|
<Stack spacing={1}>
|
|
{items.map((item) => (
|
|
<PickItemRow
|
|
key={item.id}
|
|
item={item}
|
|
product={products.find((p) => p.id === item.product_id)}
|
|
onIncrementUnit={() => handleIncrementUnit(item.id)}
|
|
onIncrementBulk={() => handleIncrementBulk(item.id)}
|
|
onSwipeLeft={() => handleSwipeLeft(item.id)}
|
|
onSwipeRight={() => handleSwipeRight(item.id)}
|
|
/>
|
|
))}
|
|
</Stack>
|
|
<Button fullWidth sx={{ mt: 3 }} variant="outlined" onClick={completeList}>
|
|
Complete List
|
|
</Button>
|
|
</Container>
|
|
);
|
|
};
|