diff --git a/src/components/PickItemRow.tsx b/src/components/PickItemRow.tsx index 6046528..6baae4b 100644 --- a/src/components/PickItemRow.tsx +++ b/src/components/PickItemRow.tsx @@ -6,21 +6,24 @@ import { Product } from '../models/Product'; interface PickItemRowProps { item: PickItem; product?: Product | null; - onIncrementUnit: () => void; - onIncrementBulk: () => void; - onToggleStatus: () => void; - onDelete: () => void; + onIncrementQuantity: () => void; + onToggleCarton: () => void; + onSwipeLeft: () => void; + onSwipeRight: () => void; } export const PickItemRow = ({ item, product, - onIncrementUnit, - onIncrementBulk, - onToggleStatus, - onDelete, + onIncrementQuantity, + onToggleCarton, + onSwipeLeft, + onSwipeRight, }: PickItemRowProps) => { - const isPicked = item.status === 'picked'; + const longPressHandlers = useLongPress({ onLongPress: onToggleCarton, onClick: onIncrementQuantity }); + const swipeHandlers = useSwipe({ onSwipeLeft, onSwipeRight }); + + const isCarton = item.quantity_bulk > 0; return ( - - - - - {isPicked ? '✔️' : null} {product?.name ?? 'Unknown product'} - - - {item.quantity_units} units / {item.quantity_bulk} bulk - - - +
+ {product?.name ?? 'Unknown product'} + + Qty: {item.quantity_units} + +
- - - + {isCarton ? : null} +
); diff --git a/src/screens/ActivePickListScreen.tsx b/src/screens/ActivePickListScreen.tsx index 3bce4ac..861e0b3 100644 --- a/src/screens/ActivePickListScreen.tsx +++ b/src/screens/ActivePickListScreen.tsx @@ -19,7 +19,7 @@ export const ActivePickListScreen = () => { [areas, pickList?.area_id], ); - const handleIncrement = async (itemId: string) => { + const handleIncrementQuantity = async (itemId: string) => { const existing = await db.pickItems.get(itemId); if (!existing) return; await db.pickItems.update(itemId, { @@ -28,11 +28,17 @@ export const ActivePickListScreen = () => { }); }; - const handleToggleStatus = async (itemId: string) => { + const handleToggleCarton = 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() }); + await db.pickItems.update(itemId, { + quantity_bulk: existing.quantity_bulk > 0 ? 0 : 1, + updated_at: Date.now(), + }); + }; + + const handleSwipeLeft = async (itemId: string) => { + await db.pickItems.update(itemId, { status: 'picked', updated_at: Date.now() }); }; const handleDeleteItem = async (itemId: string) => { @@ -62,10 +68,10 @@ export const ActivePickListScreen = () => { key={item.id} item={item} product={products.find((p) => p.id === item.product_id)} - onIncrementUnit={() => handleIncrementUnit(item.id)} - onIncrementBulk={() => handleIncrementBulk(item.id)} - onToggleStatus={() => handleToggleStatus(item.id)} - onDelete={() => handleDeleteItem(item.id)} + onIncrementQuantity={() => handleIncrementQuantity(item.id)} + onToggleCarton={() => handleToggleCarton(item.id)} + onSwipeLeft={() => handleSwipeLeft(item.id)} + onSwipeRight={() => handleSwipeRight(item.id)} /> ))} diff --git a/src/screens/AddItemScreen.tsx b/src/screens/AddItemScreen.tsx index 71e2f87..0985e7f 100644 --- a/src/screens/AddItemScreen.tsx +++ b/src/screens/AddItemScreen.tsx @@ -1,17 +1,18 @@ import { Autocomplete, Button, + Checkbox, Container, + FormControlLabel, + InputAdornment, Stack, TextField, Typography, - InputAdornment, } from '@mui/material'; import SearchIcon from '@mui/icons-material/Search'; import { useEffect, useMemo, useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import { v4 as uuidv4 } from 'uuid'; -import { NumericStepper } from '../components/NumericStepper'; import { usePickItems, useProducts } from '../hooks/dataHooks'; import { useDatabase } from '../context/DBProvider'; @@ -22,8 +23,8 @@ export const AddItemScreen = () => { const products = useProducts(); const [selectedProduct, setSelectedProduct] = useState(null); const [query, setQuery] = useState(''); - const [units, setUnits] = useState(1); - const [bulk, setBulk] = useState(0); + const [quantity, setQuantity] = useState(1); + const [isCarton, setIsCarton] = useState(false); const navigate = useNavigate(); const unitLabel = selectedProduct?.unit_type ?? 'Units'; const cartonLabel = selectedProduct?.bulk_name ?? 'Cartons'; @@ -45,6 +46,16 @@ export const AddItemScreen = () => { } }, [filteredProducts, selectedProduct]); + useEffect(() => { + setQuantity(1); + setIsCarton(false); + }, [selectedProduct]); + + const quantityHelperText = selectedProduct?.unit_type + ? `Enter ${selectedProduct.unit_type} to pick` + : 'Enter the quantity to pick'; + const cartonLabel = selectedProduct?.bulk_name ? `Carton (${selectedProduct.bulk_name})` : 'Carton'; + const addItem = async () => { const productId = selectedProduct?.id;