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}
/>