diff --git a/src/screens/ActivePickListScreen.test.tsx b/src/screens/ActivePickListScreen.test.tsx
index 6bdc8e6..16e58c0 100644
--- a/src/screens/ActivePickListScreen.test.tsx
+++ b/src/screens/ActivePickListScreen.test.tsx
@@ -577,6 +577,50 @@ describe('ActivePickListScreen product search', () => {
expect(unitsRadio).toBeEnabled();
});
+ it('resets the packaging filter when show picked is unchecked', 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(
+
+
+ } />
+
+ ,
+ );
+
+ await user.click(screen.getByRole('radio', { name: /cartons/i }));
+ expect(screen.getByRole('radio', { name: /cartons/i })).toBeChecked();
+
+ await user.click(screen.getByLabelText(/show picked/i));
+
+ 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('resets the filter when the selected packaging type is unavailable', async () => {
const user = userEvent.setup();
@@ -771,6 +815,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 b857315..971b29b 100644
--- a/src/screens/ActivePickListScreen.tsx
+++ b/src/screens/ActivePickListScreen.tsx
@@ -50,19 +50,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();
@@ -163,7 +166,7 @@ export const ActivePickListScreen = () => {
);
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)),
@@ -197,6 +200,12 @@ export const ActivePickListScreen = () => {
}
}, [allItemsPicked, showPicked]);
+ useEffect(() => {
+ if (packagingFiltersDisabled && itemFilter !== 'all') {
+ setItemFilter('all');
+ }
+ }, [itemFilter, packagingFiltersDisabled]);
+
useEffect(() => {
if (packagingTypeCount <= 1) {
if (itemFilter !== 'all') {