diff --git a/src/screens/ActivePickListScreen.test.tsx b/src/screens/ActivePickListScreen.test.tsx index f959f9c..2d3533c 100644 --- a/src/screens/ActivePickListScreen.test.tsx +++ b/src/screens/ActivePickListScreen.test.tsx @@ -415,7 +415,7 @@ describe('ActivePickListScreen product search', () => { expect(itemLabels).toEqual(['Apple Juice', 'Chips', 'Cola', 'Cola']); }); - it('disables packaging filters when only one packaging type is present', () => { + it('keeps packaging filters enabled when items share a single packaging type but mixed statuses', () => { pickItemsMock.mockReturnValue([ { id: 'item-1', @@ -427,6 +427,16 @@ describe('ActivePickListScreen product search', () => { created_at: 0, updated_at: 0, }, + { + id: 'item-2', + pick_list_id: 'list-1', + product_id: 'prod-2', + quantity: 1, + is_carton: false, + status: 'picked', + created_at: 0, + updated_at: 0, + }, ]); render( @@ -437,9 +447,8 @@ 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(); + expect(screen.getByRole('radio', { name: /cartons/i })).toBeEnabled(); + expect(screen.getByRole('radio', { name: /units/i })).toBeEnabled(); }); it('enables and disables packaging filters based on the visible item statuses', async () => { @@ -492,9 +501,7 @@ describe('ActivePickListScreen product search', () => { expect(unitsRadio).toBeEnabled(); }); - it('resets the filter when the selected packaging type is unavailable', async () => { - const user = userEvent.setup(); - + it('resets the packaging filter when show picked is unchecked', async () => { pickItemsMock.mockReturnValue([ { id: 'item-1', @@ -518,7 +525,9 @@ describe('ActivePickListScreen product search', () => { }, ]); - const { rerender } = render( + const user = userEvent.setup(); + + render( } /> @@ -529,32 +538,14 @@ describe('ActivePickListScreen product search', () => { await user.click(screen.getByRole('radio', { name: /cartons/i })); expect(screen.getByRole('radio', { name: /cartons/i })).toBeChecked(); - pickItemsMock.mockReturnValue([ - { - 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, - }, - ]); + await user.click(screen.getByLabelText(/show picked/i)); - rerender( - - - } /> - - , - ); - - await waitFor(() => expect(screen.getByRole('radio', { name: /cartons/i })).toBeDisabled()); - expect(screen.getByRole('radio', { name: /all/i })).toBeChecked(); + await waitFor(() => 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('hides picked items when show picked is unchecked', async () => { pickItemsMock.mockReturnValue([ { @@ -686,6 +677,42 @@ describe('ActivePickListScreen product search', () => { expect(screen.getByRole('radio', { name: /units/i })).toBeDisabled(); }); + it('disables packaging filters when every item is picked', () => { + 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: 'picked', + created_at: 0, + updated_at: 0, + }, + ]); + + render( + + + } /> + + , + ); + + expect(screen.getByRole('radio', { name: /cartons/i })).toBeDisabled(); + expect(screen.getByRole('radio', { name: /units/i })).toBeDisabled(); + }); + it('disables show picked toggle when all items are picked', async () => { pickItemsMock.mockReturnValue([ { diff --git a/src/screens/ActivePickListScreen.tsx b/src/screens/ActivePickListScreen.tsx index f5ffe3c..fab5cb0 100644 --- a/src/screens/ActivePickListScreen.tsx +++ b/src/screens/ActivePickListScreen.tsx @@ -48,19 +48,22 @@ export const ActivePickListScreen = () => { [itemState, showPicked], ); - const allItemsPicked = useMemo( - () => itemState.length > 0 && itemState.every((item) => item.status === 'picked'), + const hasPickedItemsInList = useMemo( + () => itemState.some((item) => item.status === 'picked'), [itemState], ); - const hasUnpickedItems = useMemo( - () => itemsVisibleByStatus.some((item) => item.status !== 'picked'), - [itemsVisibleByStatus], + const hasUnpickedItemsInList = useMemo( + () => itemState.some((item) => item.status !== 'picked'), + [itemState], ); - const hasPickedItems = useMemo( - () => itemsVisibleByStatus.some((item) => item.status === 'picked'), - [itemsVisibleByStatus], + const allItemsPicked = useMemo( + () => itemState.length > 0 && !hasUnpickedItemsInList, + [hasUnpickedItemsInList, itemState.length], + ); + const allItemsUnpicked = useMemo( + () => itemState.length > 0 && !hasPickedItemsInList, + [hasPickedItemsInList, itemState.length], ); - const hasMixedPickStatuses = hasPickedItems && hasUnpickedItems; const productMap = useMemo(() => { const map = new Map(); @@ -140,17 +143,7 @@ export const ActivePickListScreen = () => { ); }, [pickList?.categories, sortedProducts]); - const hasCartonItems = useMemo( - () => itemsVisibleByStatus.some((item) => item.is_carton), - [itemsVisibleByStatus], - ); - const hasUnitItems = useMemo( - () => itemsVisibleByStatus.some((item) => !item.is_carton), - [itemsVisibleByStatus], - ); - const packagingTypeCount = Number(hasCartonItems) + Number(hasUnitItems); - const singlePackagingType = packagingTypeCount === 1; - const packagingFiltersDisabled = !hasMixedPickStatuses; + const packagingFiltersDisabled = !showPicked || allItemsPicked || allItemsUnpicked; const productIdsInList = useMemo( () => new Set(itemState.map((item) => item.product_id)), @@ -185,20 +178,10 @@ export const ActivePickListScreen = () => { }, [allItemsPicked, showPicked]); useEffect(() => { - if (packagingTypeCount <= 1) { - if (itemFilter !== 'all') { - setItemFilter('all'); - } - - return; + if (packagingFiltersDisabled && itemFilter !== 'all') { + setItemFilter('all'); } - - if (itemFilter === 'cartons' && !hasCartonItems) { - setItemFilter('units'); - } else if (itemFilter === 'units' && !hasUnitItems) { - setItemFilter('cartons'); - } - }, [itemFilter, hasCartonItems, hasUnitItems, packagingTypeCount]); + }, [itemFilter, packagingFiltersDisabled]); const visibleItems = useMemo(() => { let filteredItems = showPicked @@ -434,13 +417,13 @@ export const ActivePickListScreen = () => { value="cartons" control={} label="Cartons" - disabled={packagingFiltersDisabled || !hasCartonItems} + disabled={packagingFiltersDisabled} /> } label="Units" - disabled={packagingFiltersDisabled || !hasUnitItems} + disabled={packagingFiltersDisabled} />