diff --git a/Agents.md b/Agents.md index 3391438..42d24ef 100644 --- a/Agents.md +++ b/Agents.md @@ -152,10 +152,8 @@ Dexie tables must be implemented exactly as follows: ### ActivePickListScreen - List of PickItems\ -- Tap = +1 unit\ -- Long-press = +1 bulk\ -- Swipe left = mark picked\ -- Swipe right = delete\ +- Use the checkbox in each row to toggle between pending and picked without removing the item\ +- Row controls provide explicit +1 unit and +1 bulk actions (no long-press or swipe)\ - Add Item button\ - Complete List button @@ -188,23 +186,15 @@ Dexie tables must be implemented exactly as follows: ------------------------------------------------------------------------ -## 6. Gestures & Interaction Rules +## 6. Interaction Rules -### Tap +### Checkbox Toggle -Increase `quantity_units` by **1**. +Use a checkbox in each pick item row to switch between `"pending"` and `"picked"` without removing the item from the list. Picked rows must remain visible with clear status cues (e.g., checkmarks/strikethrough). -### Long Press +### Increment Controls -Increase `quantity_bulk` by **1** using a shared `useLongPress()` hook. - -### Swipe Left - -Mark item as `"picked"`. - -### Swipe Right - -Delete item. +Provide explicit controls to increase `quantity_units` and `quantity_bulk` (no long-press). Avoid swipe gestures for status changes or deletion on pick item rows. ### Barcode Scanning @@ -318,6 +308,7 @@ Expose port 8080: - Product creation must be minimal friction\ - Auto-save pick lists\ - Smooth animations on long press +- Pick list rows use checkboxes to toggle items between pending and picked; no swipe or long-press gestures should be required to update status, and picked rows stay visible with clear status cues ------------------------------------------------------------------------ diff --git a/src/components/PickItemRow.tsx b/src/components/PickItemRow.tsx index 4089c5c..6046528 100644 --- a/src/components/PickItemRow.tsx +++ b/src/components/PickItemRow.tsx @@ -1,34 +1,26 @@ -import { Chip, Stack, Typography } from '@mui/material'; -import { PickItem, PickItemStatus } from '../models/PickItem'; +import { Add, Delete } from '@mui/icons-material'; +import { Button, Checkbox, Stack, Typography } from '@mui/material'; +import { PickItem } 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; + onToggleStatus: () => void; + onDelete: () => void; } -const statusColor: Record = { - pending: 'default', - picked: 'success', - skipped: 'warning', -}; - export const PickItemRow = ({ item, product, onIncrementUnit, onIncrementBulk, - onSwipeLeft, - onSwipeRight, + onToggleStatus, + onDelete, }: PickItemRowProps) => { - const longPressHandlers = useLongPress({ onLongPress: onIncrementBulk, onClick: onIncrementUnit }); - const swipeHandlers = useSwipe({ onSwipeLeft, onSwipeRight }); + const isPicked = item.status === 'picked'; return ( -
- {product?.name ?? 'Unknown product'} - - {item.quantity_units} units / {item.quantity_bulk} bulk - -
- + + + + + {isPicked ? '✔️' : null} {product?.name ?? 'Unknown product'} + + + {item.quantity_units} units / {item.quantity_bulk} bulk + + + + + + + +
); }; diff --git a/src/screens/ActivePickListScreen.tsx b/src/screens/ActivePickListScreen.tsx index 3a4b04d..5e30ec3 100644 --- a/src/screens/ActivePickListScreen.tsx +++ b/src/screens/ActivePickListScreen.tsx @@ -37,11 +37,14 @@ export const ActivePickListScreen = () => { }); }; - const handleSwipeLeft = async (itemId: string) => { - await db.pickItems.update(itemId, { status: 'picked', updated_at: Date.now() }); + const handleToggleStatus = async (itemId: string) => { + const existing = await db.pickItems.get(itemId); + if (!existing) return; + const nextStatus = existing.status === 'picked' ? 'pending' : 'picked'; + await db.pickItems.update(itemId, { status: nextStatus, updated_at: Date.now() }); }; - const handleSwipeRight = async (itemId: string) => { + const handleDeleteItem = async (itemId: string) => { await db.pickItems.delete(itemId); }; @@ -70,8 +73,8 @@ export const ActivePickListScreen = () => { 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)} + onToggleStatus={() => handleToggleStatus(item.id)} + onDelete={() => handleDeleteItem(item.id)} /> ))}