diff --git a/src/screens/ActivePickListScreen.test.tsx b/src/screens/ActivePickListScreen.test.tsx
index f959f9c..8e0928e 100644
--- a/src/screens/ActivePickListScreen.test.tsx
+++ b/src/screens/ActivePickListScreen.test.tsx
@@ -415,12 +415,13 @@ describe('ActivePickListScreen product search', () => {
expect(itemLabels).toEqual(['Apple Juice', 'Chips', 'Cola', 'Cola']);
});
- it('disables packaging filters when only one packaging type is present', () => {
+ it('renders pick items even when product metadata is missing', () => {
+ productsMock.mockReturnValue([]);
pickItemsMock.mockReturnValue([
{
id: 'item-1',
pick_list_id: 'list-1',
- product_id: 'prod-1',
+ product_id: 'missing-product',
quantity: 1,
is_carton: false,
status: 'pending',
@@ -437,9 +438,43 @@ 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.getByText(/unknown product/i)).toBeVisible();
+ });
+
+ it('keeps packaging filters enabled when items share a single packaging type but mixed statuses', () => {
+ pickItemsMock.mockReturnValue([
+ {
+ id: 'item-1',
+ pick_list_id: 'list-1',
+ product_id: 'prod-1',
+ quantity: 1,
+ is_carton: false,
+ status: 'pending',
+ 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 })).toBeEnabled();
+ expect(screen.getByRole('radio', { name: /units/i })).toBeEnabled();
});
it('enables and disables packaging filters based on the visible item statuses', async () => {
@@ -492,9 +527,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 +551,9 @@ describe('ActivePickListScreen product search', () => {
},
]);
- const { rerender } = render(
+ const user = userEvent.setup();
+
+ render(
} />
@@ -529,32 +564,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([
{
@@ -650,6 +667,48 @@ describe('ActivePickListScreen product search', () => {
expect(screen.queryByText('Chips')).not.toBeInTheDocument();
});
+ it('retains a chosen packaging filter when statuses are mixed but packaging types are not', async () => {
+ pickItemsMock.mockReturnValue([
+ {
+ id: 'item-1',
+ pick_list_id: 'list-1',
+ product_id: 'prod-1',
+ quantity: 1,
+ is_carton: false,
+ status: 'pending',
+ 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,
+ },
+ ]);
+
+ const user = userEvent.setup();
+
+ render(
+
+
+ } />
+
+ ,
+ );
+
+ const unitsRadio = screen.getByRole('radio', { name: /units/i });
+ await user.click(unitsRadio);
+
+ expect(unitsRadio).toBeChecked();
+ expect(screen.getByText('Cola')).toBeVisible();
+ expect(screen.getByText('Chips')).toBeVisible();
+ });
+
it('disables packaging filters when all items share the same status', () => {
pickItemsMock.mockReturnValue([
{
@@ -686,6 +745,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..2b1dbd2 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();
@@ -77,12 +80,15 @@ export const ActivePickListScreen = () => {
);
const sortedItems = useMemo(() => {
+ const normalizeProductName = (product?: Product | null) =>
+ product?.name ? product.name.trim().toLowerCase() : '';
+
return [...itemsVisibleByStatus].sort((a, b) => {
const productA = productMap.get(a.product_id);
const productB = productMap.get(b.product_id);
- const nameA = productA?.name.trim().toLowerCase() ?? '';
- const nameB = productB?.name.trim().toLowerCase() ?? '';
+ const nameA = normalizeProductName(productA);
+ const nameB = normalizeProductName(productB);
const nameComparison = nameA.localeCompare(nameB, undefined, { sensitivity: 'base' });
if (nameComparison !== 0) {
@@ -140,17 +146,19 @@ export const ActivePickListScreen = () => {
);
}, [pickList?.categories, sortedProducts]);
- const hasCartonItems = useMemo(
- () => itemsVisibleByStatus.some((item) => item.is_carton),
+ const visibleHasPicked = useMemo(
+ () => itemsVisibleByStatus.some((item) => item.status === 'picked'),
[itemsVisibleByStatus],
);
- const hasUnitItems = useMemo(
- () => itemsVisibleByStatus.some((item) => !item.is_carton),
+ const visibleHasUnpicked = useMemo(
+ () => itemsVisibleByStatus.some((item) => item.status !== 'picked'),
[itemsVisibleByStatus],
);
- const packagingTypeCount = Number(hasCartonItems) + Number(hasUnitItems);
- const singlePackagingType = packagingTypeCount === 1;
- const packagingFiltersDisabled = !hasMixedPickStatuses;
+
+ const packagingFiltersDisabled =
+ !showPicked || itemsVisibleByStatus.length === 0 || !visibleHasPicked || !visibleHasUnpicked;
+
+ const appliedItemFilter = packagingFiltersDisabled ? 'all' : itemFilter;
const productIdsInList = useMemo(
() => new Set(itemState.map((item) => item.product_id)),
@@ -185,36 +193,26 @@ 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
? sortedItems
: sortedItems.filter((item) => item.status !== 'picked');
- if (itemFilter === 'cartons') {
+ if (appliedItemFilter === 'cartons') {
return filteredItems.filter((item) => item.is_carton);
}
- if (itemFilter === 'units') {
+ if (appliedItemFilter === 'units') {
return filteredItems.filter((item) => !item.is_carton);
}
return filteredItems;
- }, [itemFilter, showPicked, sortedItems]);
+ }, [appliedItemFilter, showPicked, sortedItems]);
const updateItemState = (itemId: string, updater: (item: PickItem) => PickItem) => {
setItemState((current) => current.map((item) => (item.id === itemId ? updater(item) : item)));
@@ -423,7 +421,7 @@ export const ActivePickListScreen = () => {
>
setItemFilter(event.target.value as 'all' | 'cartons' | 'units')
}
@@ -434,13 +432,13 @@ export const ActivePickListScreen = () => {
value="cartons"
control={}
label="Cartons"
- disabled={packagingFiltersDisabled || !hasCartonItems}
+ disabled={packagingFiltersDisabled}
/>
}
label="Units"
- disabled={packagingFiltersDisabled || !hasUnitItems}
+ disabled={packagingFiltersDisabled}
/>