diff --git a/src/screens/ActivePickListScreen.test.tsx b/src/screens/ActivePickListScreen.test.tsx index df07382..23797a5 100644 --- a/src/screens/ActivePickListScreen.test.tsx +++ b/src/screens/ActivePickListScreen.test.tsx @@ -355,8 +355,54 @@ describe('ActivePickListScreen product search', () => { , ); + expect(screen.getByRole('radio', { name: /all/i })).toBeChecked(); expect(screen.getByRole('radio', { name: /cartons/i })).toBeDisabled(); + expect(screen.getByRole('radio', { name: /units/i })).toBeDisabled(); + }); + + it('evaluates packaging filters based on visible (unpicketed) items when hiding picked', async () => { + pickItemsMock.mockReturnValue([ + { + id: 'item-1', + pick_list_id: 'list-1', + product_id: 'prod-1', + quantity: 1, + is_carton: true, + status: 'picked', + created_at: 0, + updated_at: 0, + }, + { + id: 'item-2', + pick_list_id: 'list-1', + product_id: 'prod-2', + quantity: 1, + is_carton: false, + status: 'pending', + created_at: 0, + updated_at: 0, + }, + ]); + + const user = userEvent.setup(); + + render( + + + } /> + + , + ); + + expect(screen.getByRole('radio', { name: /cartons/i })).toBeEnabled(); expect(screen.getByRole('radio', { name: /units/i })).toBeEnabled(); + + await user.click(screen.getByLabelText(/show picked/i)); + + await waitFor(() => expect(screen.getByRole('radio', { name: /cartons/i })).toBeDisabled()); + + expect(screen.getByRole('radio', { name: /all/i })).toBeChecked(); + expect(screen.getByRole('radio', { name: /units/i })).toBeDisabled(); }); it('resets the filter when the selected packaging type is unavailable', async () => { @@ -418,7 +464,8 @@ describe('ActivePickListScreen product search', () => { ); await waitFor(() => expect(screen.getByRole('radio', { name: /cartons/i })).toBeDisabled()); - expect(screen.getByRole('radio', { name: /units/i })).toBeChecked(); + expect(screen.getByRole('radio', { name: /all/i })).toBeChecked(); + expect(screen.getByRole('radio', { name: /units/i })).toBeDisabled(); }); it('hides picked items when show picked is unchecked', async () => { diff --git a/src/screens/ActivePickListScreen.tsx b/src/screens/ActivePickListScreen.tsx index 048bbe2..df6638b 100644 --- a/src/screens/ActivePickListScreen.tsx +++ b/src/screens/ActivePickListScreen.tsx @@ -57,8 +57,13 @@ export const ActivePickListScreen = () => { [areas, pickList?.area_id], ); + const visibleItemsByStatus = useMemo( + () => (showPicked ? items : items.filter((item) => item.status !== 'picked')), + [items, showPicked], + ); + const sortedItems = useMemo(() => { - return [...items].sort((a, b) => { + return [...visibleItemsByStatus].sort((a, b) => { const productA = productMap.get(a.product_id); const productB = productMap.get(b.product_id); @@ -79,7 +84,7 @@ export const ActivePickListScreen = () => { return timeA - timeB; }); - }, [items, productMap]); + }, [visibleItemsByStatus, productMap]); const sortedProducts = useMemo(() => { const uniqueProducts = new Map(); @@ -98,8 +103,16 @@ export const ActivePickListScreen = () => { ); }, [products]); - const hasCartonItems = useMemo(() => items.some((item) => item.is_carton), [items]); - const hasUnitItems = useMemo(() => items.some((item) => !item.is_carton), [items]); + const hasCartonItems = useMemo( + () => visibleItemsByStatus.some((item) => item.is_carton), + [visibleItemsByStatus], + ); + const hasUnitItems = useMemo( + () => visibleItemsByStatus.some((item) => !item.is_carton), + [visibleItemsByStatus], + ); + const packagingTypeCount = Number(hasCartonItems) + Number(hasUnitItems); + const singlePackagingType = packagingTypeCount === 1; const filteredProducts = useMemo(() => { const normalizedQuery = query.trim().toLowerCase(); @@ -125,12 +138,20 @@ export const ActivePickListScreen = () => { }, [allItemsPicked, showPicked]); useEffect(() => { - if (itemFilter === 'cartons' && !hasCartonItems) { - setItemFilter(hasUnitItems ? 'units' : 'all'); - } else if (itemFilter === 'units' && !hasUnitItems) { - setItemFilter(hasCartonItems ? 'cartons' : 'all'); + if (packagingTypeCount <= 1) { + if (itemFilter !== 'all') { + setItemFilter('all'); + } + + return; } - }, [itemFilter, hasCartonItems, hasUnitItems]); + + if (itemFilter === 'cartons' && !hasCartonItems) { + setItemFilter('units'); + } else if (itemFilter === 'units' && !hasUnitItems) { + setItemFilter('cartons'); + } + }, [itemFilter, hasCartonItems, hasUnitItems, packagingTypeCount]); const visibleItems = useMemo(() => { let filteredItems = showPicked @@ -326,13 +347,13 @@ export const ActivePickListScreen = () => { value="cartons" control={} label="Cartons" - disabled={!hasCartonItems} + disabled={singlePackagingType || !hasCartonItems} /> } label="Units" - disabled={!hasUnitItems} + disabled={singlePackagingType || !hasUnitItems} />