diff --git a/src/screens/ActivePickListScreen.tsx b/src/screens/ActivePickListScreen.tsx index 83b4e91..3a4b04d 100644 --- a/src/screens/ActivePickListScreen.tsx +++ b/src/screens/ActivePickListScreen.tsx @@ -1,6 +1,6 @@ import { Button, Container, Stack, Typography } from '@mui/material'; import { useParams, useNavigate, Link as RouterLink } from 'react-router-dom'; -import { useEffect, useMemo } from 'react'; +import { useMemo } from 'react'; import { useAreas, usePickItems, usePickList, useProducts } from '../hooks/dataHooks'; import { useDatabase } from '../context/DBProvider'; import { PickItemRow } from '../components/PickItemRow'; @@ -14,10 +14,6 @@ export const ActivePickListScreen = () => { 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], @@ -49,9 +45,7 @@ export const ActivePickListScreen = () => { await db.pickItems.delete(itemId); }; - const completeList = async () => { - if (!id) return; - await db.pickLists.update(id, { completed_at: Date.now() }); + const returnToLists = () => { navigate('/pick-lists'); }; @@ -63,6 +57,11 @@ export const ActivePickListScreen = () => { Add Item + {pickList?.notes ? ( + + {pickList.notes} + + ) : null} {items.map((item) => ( { /> ))} - ); diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx index 36e58d7..a4a455a 100644 --- a/src/screens/HomeScreen.tsx +++ b/src/screens/HomeScreen.tsx @@ -8,10 +8,10 @@ export const HomeScreen = () => ( - {lists.map((list) => ( - - - + {sortedLists.map((list) => ( + + { + event.stopPropagation(); + event.preventDefault(); + openEdit(list); + }} + > + + + { + event.stopPropagation(); + event.preventDefault(); + deleteList(list); + }} + > + + + + }> + + + {list.notes ? {list.notes} : null} + + Created {format(list.created_at, 'PPpp')} + + + } + /> + + ))} + + + Edit Pick List + + + setAreaId(event.target.value)} + > + {areas.map((area) => ( + + {area.name} + + ))} + + setNotes(event.target.value)} + multiline + minRows={2} + /> + + + + + + + ); }; diff --git a/src/screens/StartPickListScreen.tsx b/src/screens/StartPickListScreen.tsx index dfaf25f..f137c1f 100644 --- a/src/screens/StartPickListScreen.tsx +++ b/src/screens/StartPickListScreen.tsx @@ -10,18 +10,27 @@ export const StartPickListScreen = () => { const db = useDatabase(); const navigate = useNavigate(); const [areaId, setAreaId] = useState(''); + const [notes, setNotes] = useState(''); const start = async () => { if (!areaId) return; const pickListId = uuidv4(); - await db.pickLists.add({ id: pickListId, area_id: areaId, created_at: Date.now() }); + await db.pickLists.add({ + id: pickListId, + area_id: areaId, + created_at: Date.now(), + notes: notes.trim() || undefined, + }); navigate(`/pick-lists/${pickListId}`); }; return ( - Start Pick List + Create Pick List + + + Pick lists are reusable. Create one for each store area and update it anytime you restock. { ))} + setNotes(event.target.value)} + multiline + minRows={2} + />