beatzaplenty/stockfill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: remove packaging filter radios

Browse Source
This commit is contained in:
beatz174-bit
2025-11-25 07:40:59 +10:00
parent 3a79149956
commit f5094343dc
3 changed files with 31 additions and 447 deletions
Download Patch File Download Diff File Expand all files Collapse all files
e2e/picklist.spec.ts
+4 -34
View File
@@ -264,42 +264,12 @@ test.describe('Active pick list', () => {
await expect(showPickedToggle).toBeChecked();
});
test('disables packaging filters when statuses are mixed and filters by packaging when enabled', async ({ page }) => {
test('omits global packaging filter controls', async ({ page }) => {
await navigateToNewPickList(page);
await addProductToPickList(page, additionalProduct);
await addProductToPickList(page, secondaryProduct);
const cartonToggle = page.getByRole('button', { name: /Switch to carton packaging/i }).first();
await cartonToggle.click();
const cartonsRadio = page.getByRole('radio', { name: 'Cartons' });
const unitsRadio = page.getByRole('radio', { name: 'Units' });
await expect(cartonsRadio).toBeEnabled();
await expect(unitsRadio).toBeEnabled();
await unitsRadio.click();
await expect(unitsRadio).toBeChecked();
await expect(page.getByText(additionalProduct)).toHaveCount(0);
await expect(page.getByText(secondaryProduct)).toBeVisible();
await cartonsRadio.click();
await expect(cartonsRadio).toBeChecked();
await expect(page.getByText(secondaryProduct)).toHaveCount(0);
await expect(page.getByText(additionalProduct)).toBeVisible();
const statusToggles = page.getByLabel('Toggle picked status');
await statusToggles.first().check();
await expect(cartonsRadio).toBeDisabled();
await expect(unitsRadio).toBeDisabled();
await expect(page.getByRole('radio', { name: 'All' })).toBeChecked();
const showPickedToggle = page.getByRole('checkbox', { name: 'Show picked' });
await showPickedToggle.click();
await expect(cartonsRadio).toBeDisabled();
await expect(unitsRadio).toBeDisabled();
await expect(page.getByText('Filter list by packaging')).toHaveCount(0);
await expect(page.getByRole('radio', { name: 'Cartons' })).toHaveCount(0);
await expect(page.getByRole('radio', { name: 'Units' })).toHaveCount(0);
});
test('toggles packaging type and persists the selection', async ({ page }) => {
src/screens/ActivePickListScreen.test.tsx
+1 -292
View File
@@ -1,5 +1,5 @@
import { MemoryRouter, Route, Routes } from 'react-router-dom';
import { render, screen, waitFor, within } from '@testing-library/react';
import { render, screen, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, expect, it, vi, beforeEach } from 'vitest';
import { ActivePickListScreen } from './ActivePickListScreen';
@@ -500,177 +500,6 @@ describe('ActivePickListScreen product search', () => {
expect(itemLabels).toEqual(['Apple Juice', 'Chips', 'Cola', 'Cola']);
});
it('disables packaging filters when the visible list has mixed pick 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(
<MemoryRouter initialEntries={['/pick-lists/1']}>
<Routes>
<Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
</Routes>
</MemoryRouter>,
);
expect(screen.getByRole('radio', { name: /cartons/i })).toBeDisabled();
expect(screen.getByRole('radio', { name: /units/i })).toBeDisabled();
});
it('disables packaging filters 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: '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: 'pending',
created_at: 0,
updated_at: 0,
},
]);
const user = userEvent.setup();
render(
<MemoryRouter initialEntries={['/pick-lists/1']}>
<Routes>
<Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
</Routes>
</MemoryRouter>,
);
const cartonsRadio = screen.getByRole('radio', { name: /cartons/i });
const unitsRadio = screen.getByRole('radio', { name: /units/i });
expect(cartonsRadio).toBeEnabled();
expect(unitsRadio).toBeEnabled();
const togglePicked = screen.getByLabelText(/show picked/i);
await user.click(togglePicked);
expect(cartonsRadio).toBeDisabled();
expect(unitsRadio).toBeDisabled();
});
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: '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: 'pending',
created_at: 0,
updated_at: 0,
},
]);
const user = userEvent.setup();
render(
<MemoryRouter initialEntries={['/pick-lists/1']}>
<Routes>
<Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
</Routes>
</MemoryRouter>,
);
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 () => {
pickItemsMock.mockReturnValue([
{
id: 'item-1',
pick_list_id: 'list-1',
product_id: 'prod-1',
quantity: 1,
is_carton: true,
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: 'pending',
created_at: 0,
updated_at: 0,
},
]);
const user = userEvent.setup();
render(
<MemoryRouter initialEntries={['/pick-lists/1']}>
<Routes>
<Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
</Routes>
</MemoryRouter>,
);
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('hides picked items when show picked is unchecked', async () => {
pickItemsMock.mockReturnValue([
{
@@ -718,126 +547,6 @@ describe('ActivePickListScreen product search', () => {
expect(screen.getByText('Cola')).toBeVisible();
});
it('filters the visible list by packaging type and keeps the selection active', async () => {
pickItemsMock.mockReturnValue([
{
id: 'item-1',
pick_list_id: 'list-1',
product_id: 'prod-1',
quantity: 1,
is_carton: true,
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: 'pending',
created_at: 0,
updated_at: 0,
},
]);
const user = userEvent.setup();
render(
<MemoryRouter initialEntries={['/pick-lists/1']}>
<Routes>
<Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
</Routes>
</MemoryRouter>,
);
const cartonsRadio = screen.getByRole('radio', { name: /cartons/i });
const unitsRadio = screen.getByRole('radio', { name: /units/i });
await user.click(unitsRadio);
expect(unitsRadio).toBeChecked();
expect(screen.getByText('Chips')).toBeVisible();
expect(screen.queryByText('Cola')).not.toBeInTheDocument();
await user.click(cartonsRadio);
expect(cartonsRadio).toBeChecked();
expect(screen.getByText('Cola')).toBeVisible();
expect(screen.queryByText('Chips')).not.toBeInTheDocument();
});
it('keeps packaging filters enabled when all items share the same status', () => {
pickItemsMock.mockReturnValue([
{
id: 'item-1',
pick_list_id: 'list-1',
product_id: 'prod-1',
quantity: 1,
is_carton: true,
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: 'pending',
created_at: 0,
updated_at: 0,
},
]);
render(
<MemoryRouter initialEntries={['/pick-lists/1']}>
<Routes>
<Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
</Routes>
</MemoryRouter>,
);
expect(screen.getByRole('radio', { name: /cartons/i })).toBeEnabled();
expect(screen.getByRole('radio', { name: /units/i })).toBeEnabled();
});
it('keeps packaging filters enabled 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(
<MemoryRouter initialEntries={['/pick-lists/1']}>
<Routes>
<Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
</Routes>
</MemoryRouter>,
);
expect(screen.getByRole('radio', { name: /cartons/i })).toBeEnabled();
expect(screen.getByRole('radio', { name: /units/i })).toBeEnabled();
});
it('disables show picked toggle when all items are picked', async () => {
pickItemsMock.mockReturnValue([
{
src/screens/ActivePickListScreen.tsx
+4 -99
View File
@@ -3,12 +3,9 @@ import {
Button,
Checkbox,
Container,
FormControl,
FormControlLabel,
IconButton,
InputAdornment,
Radio,
RadioGroup,
Stack,
TextField,
Tooltip,
@@ -37,7 +34,6 @@ export const ActivePickListScreen = () => {
const navigate = useNavigate();
const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
const [query, setQuery] = useState('');
const [itemFilter, setItemFilter] = useState<'all' | 'cartons' | 'units'>('all');
const [showPicked, setShowPicked] = useState(true);
const [itemState, setItemState] = useState(items);
@@ -45,50 +41,17 @@ export const ActivePickListScreen = () => {
setItemState(items);
}, [items]);
// Reworked visible/filter logic:
// - Keep `itemFilter` as the single source-of-truth for the radio selection.
// - Compute items after applying `showPicked` and `itemFilter`, and derive
// disabled flags from the actual visible items to avoid races / feedback loops.
// Reworked visible logic:
const itemsAfterShowPicked = useMemo(
() => (showPicked ? itemState : itemState.filter((item) => item.status !== 'picked')),
[itemState, showPicked],
);
const hasCartonItemsOverall = useMemo(
() => itemsAfterShowPicked.some((item) => item.is_carton),
[itemsAfterShowPicked],
);
const hasUnitItemsOverall = useMemo(
() => itemsAfterShowPicked.some((item) => !item.is_carton),
[itemsAfterShowPicked],
);
const itemsAfterPackagingFilter = useMemo(() => {
if (itemFilter === 'cartons') return itemsAfterShowPicked.filter((item) => item.is_carton);
if (itemFilter === 'units') return itemsAfterShowPicked.filter((item) => !item.is_carton);
return itemsAfterShowPicked;
}, [itemsAfterShowPicked, itemFilter]);
const hasPickedItemsVisible = useMemo(
() => itemsAfterPackagingFilter.some((item) => item.status === 'picked'),
[itemsAfterPackagingFilter],
);
const hasUnpickedItemsVisible = useMemo(
() => itemsAfterPackagingFilter.some((item) => item.status !== 'picked'),
[itemsAfterPackagingFilter],
);
const allItemsPicked = useMemo(
() => itemState.length > 0 && itemState.every((item) => item.status === 'picked'),
[itemState],
);
const packagingFiltersDisabled = useMemo(
// packaging filters disabled when showPicked is false, or visible items contain mixed statuses
() => !showPicked || (hasPickedItemsVisible && hasUnpickedItemsVisible),
[hasPickedItemsVisible, hasUnpickedItemsVisible, showPicked],
);
const productMap = useMemo(() => {
const map = new Map<string, Product>();
products.forEach((product) => {
@@ -103,23 +66,6 @@ export const ActivePickListScreen = () => {
[areas, pickList?.area_id],
);
// Keep a sorted list for available items after applying showPicked (used for other UX)
const sortedItems = useMemo(() => {
return [...itemsAfterShowPicked].sort((a, b) => {
const timeA = a.created_at ?? a.updated_at ?? 0;
const timeB = b.created_at ?? b.updated_at ?? 0;
if (timeA !== timeB) {
return timeA - timeB;
}
const nameA = normalizeName(productMap.get(a.product_id)?.name ?? '');
const nameB = normalizeName(productMap.get(b.product_id)?.name ?? '');
return nameA.localeCompare(nameB, undefined, { sensitivity: 'base' });
});
}, [itemsAfterShowPicked, productMap]);
const sortedProducts = useMemo(() => {
const dedupedById = new Map<string, Product>();
@@ -203,24 +149,9 @@ export const ActivePickListScreen = () => {
}
}, [allItemsPicked, showPicked]);
// Sanitize itemFilter whenever availability changes or packaging is disabled.
useEffect(() => {
if (packagingFiltersDisabled) {
if (itemFilter !== 'all') setItemFilter('all');
return;
}
if (itemFilter === 'cartons' && !hasCartonItemsOverall) {
setItemFilter(hasUnitItemsOverall ? 'units' : 'all');
} else if (itemFilter === 'units' && !hasUnitItemsOverall) {
setItemFilter(hasCartonItemsOverall ? 'cartons' : 'all');
}
}, [packagingFiltersDisabled, itemFilter, hasCartonItemsOverall, hasUnitItemsOverall]);
// Sort the items that are actually visible (after showPicked + packaging filter)
// Sort the items that are actually visible (after showPicked)
const visibleItems = useMemo(() => {
// itemsAfterPackagingFilter is already computed after showPicked & packaging
const arr = [...itemsAfterPackagingFilter];
const arr = [...itemsAfterShowPicked];
arr.sort((a, b) => {
const timeA = a.created_at ?? a.updated_at ?? 0;
const timeB = b.created_at ?? b.updated_at ?? 0;
@@ -230,7 +161,7 @@ export const ActivePickListScreen = () => {
return nameA.localeCompare(nameB, undefined, { sensitivity: 'base' });
});
return arr;
}, [itemsAfterPackagingFilter, productMap]);
}, [itemsAfterShowPicked, productMap]);
const updateItemState = (itemId: string, updater: (item: PickItem) => PickItem) => {
setItemState((current) => current.map((item) => (item.id === itemId ? updater(item) : item)));
@@ -426,10 +357,6 @@ export const ActivePickListScreen = () => {
<Typography variant="caption" color="text.secondary">
Selecting a product immediately adds it to the pick list.
</Typography>
<FormControl>
<Typography variant="subtitle2" color="text.secondary" sx={{ mb: 0.5 }}>
Filter list by packaging
</Typography>
<Stack
direction="row"
alignItems="center"
@@ -437,27 +364,6 @@ export const ActivePickListScreen = () => {
flexWrap="wrap"
rowGap={1}
>
<RadioGroup
row
value={itemFilter}
// use the second arg (value) provided by MUI RadioGroup onChange
onChange={(_, value) => setItemFilter(value as 'all' | 'cartons' | 'units')}
sx={{ flexGrow: 1 }}
>
<FormControlLabel value="all" control={<Radio />} label="All" />
<FormControlLabel
value="cartons"
control={<Radio />}
label="Cartons"
disabled={packagingFiltersDisabled}
/>
<FormControlLabel
value="units"
control={<Radio />}
label="Units"
disabled={packagingFiltersDisabled}
/>
</RadioGroup>
<Stack direction="row" spacing={1} alignItems="center" sx={{ ml: { xs: 0, sm: 2 } }}>
<FormControlLabel
control={
@@ -474,7 +380,6 @@ export const ActivePickListScreen = () => {
</Button>
</Stack>
</Stack>
</FormControl>
</Stack>
</Stack>
{pickList?.notes ? (