From 97e953c87be4ccb25cb8361ae0a554d10adb5e31 Mon Sep 17 00:00:00 2001 From: beatz174-bit Date: Mon, 24 Nov 2025 16:08:41 +1000 Subject: [PATCH] Fix pick list item sorting --- src/screens/ActivePickListScreen.test.tsx | 85 +++++++++++++++++++++++ src/screens/ActivePickListScreen.tsx | 23 ++++-- src/screens/PickListsScreen.test.tsx | 46 +++++++++++- src/screens/PickListsScreen.tsx | 10 ++- 4 files changed, 153 insertions(+), 11 deletions(-) diff --git a/src/screens/ActivePickListScreen.test.tsx b/src/screens/ActivePickListScreen.test.tsx index f959f9c..6bdc8e6 100644 --- a/src/screens/ActivePickListScreen.test.tsx +++ b/src/screens/ActivePickListScreen.test.tsx @@ -181,6 +181,91 @@ describe('ActivePickListScreen product search', () => { expect(screen.getByText(/no available products/i)).toBeVisible(); }); + it('sorts available products alphabetically, ignoring whitespace and casing', async () => { + productsMock.mockReturnValue([ + { ...defaultProducts[0], id: 'prod-1', name: ' cola ' }, + { ...defaultProducts[1], id: 'prod-2', name: 'apple chips' }, + { ...defaultProducts[2], id: 'prod-3', name: 'Banana Bites' }, + ]); + + const user = userEvent.setup(); + + render( + + + } /> + + , + ); + + const combobox = screen.getByRole('combobox'); + await user.click(combobox); + + const listbox = await screen.findByRole('listbox'); + const options = within(listbox).getAllByRole('option'); + + const optionLabels = options.map((option) => option.textContent?.trim()); + expect(optionLabels).toEqual([ + expect.stringMatching(/apple chips/i), + expect.stringMatching(/banana bites/i), + expect.stringMatching(/cola/i), + ]); + }); + + it('sorts pick items alphabetically by product name, ignoring whitespace and casing', () => { + productsMock.mockReturnValue([ + { ...defaultProducts[0], id: 'prod-1', name: ' cola ' }, + { ...defaultProducts[1], id: 'prod-2', name: 'apple chips' }, + { ...defaultProducts[2], id: 'prod-3', name: 'Banana Bites' }, + ]); + + 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: 'pending', + created_at: 0, + updated_at: 0, + }, + { + id: 'item-3', + pick_list_id: 'list-1', + product_id: 'prod-3', + quantity: 1, + is_carton: false, + status: 'pending', + created_at: 0, + updated_at: 0, + }, + ]); + + render( + + + } /> + + , + ); + + const itemRows = screen.getAllByTestId('pick-item-title-row'); + expect(itemRows[0]).toHaveTextContent(/apple chips/i); + expect(itemRows[1]).toHaveTextContent(/banana bites/i); + expect(itemRows[2]).toHaveTextContent(/cola/i); + }); + it('adds a pick item when a product is selected', async () => { const user = userEvent.setup(); diff --git a/src/screens/ActivePickListScreen.tsx b/src/screens/ActivePickListScreen.tsx index f5ffe3c..b857315 100644 --- a/src/screens/ActivePickListScreen.tsx +++ b/src/screens/ActivePickListScreen.tsx @@ -25,6 +25,8 @@ import { PickItemRow } from '../components/PickItemRow'; import { PickItem } from '../models/PickItem'; import { Product } from '../models/Product'; +const normalizeName = (name: string) => name.trim().toLowerCase(); + export const ActivePickListScreen = () => { const { id } = useParams(); const pickList = usePickList(id); @@ -81,8 +83,8 @@ export const ActivePickListScreen = () => { 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 = productA ? normalizeName(productA.name) : ''; + const nameB = productB ? normalizeName(productB.name) : ''; const nameComparison = nameA.localeCompare(nameB, undefined, { sensitivity: 'base' }); if (nameComparison !== 0) { @@ -121,9 +123,20 @@ export const ActivePickListScreen = () => { } }); - return Array.from(dedupedByName.values()).sort((a, b) => - a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }), - ); + return Array.from(dedupedByName.values()).sort((a, b) => { + const normalizedNameA = normalizeName(a.name); + const normalizedNameB = normalizeName(b.name); + + const nameComparison = normalizedNameA.localeCompare(normalizedNameB, undefined, { + sensitivity: 'base', + }); + + if (nameComparison !== 0) { + return nameComparison; + } + + return a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }); + }); }, [products]); const categoryFilteredProducts = useMemo(() => { diff --git a/src/screens/PickListsScreen.test.tsx b/src/screens/PickListsScreen.test.tsx index 0f646a4..fa4c4ff 100644 --- a/src/screens/PickListsScreen.test.tsx +++ b/src/screens/PickListsScreen.test.tsx @@ -1,15 +1,15 @@ import { MemoryRouter } from 'react-router-dom'; import { render, screen, within } from '@testing-library/react'; -import { describe, expect, it, vi } from 'vitest'; +import { beforeEach, describe, expect, it, vi } from 'vitest'; import { PickListsScreen } from './PickListsScreen'; -const areasMock = [ +let areasMock = [ { id: 'area-1', name: 'Front Counter', created_at: 0, updated_at: 0 }, { id: 'area-2', name: 'back room', created_at: 0, updated_at: 0 }, { id: 'area-3', name: 'Cafe', created_at: 0, updated_at: 0 }, ]; -const pickListsMock = [ +let pickListsMock = [ { id: 'list-2', area_id: 'area-2', created_at: 3, categories: [], auto_add_new_products: false }, { id: 'list-3', area_id: 'area-3', created_at: 4, categories: [], auto_add_new_products: false }, { id: 'list-1', area_id: 'area-1', created_at: 5, categories: [], auto_add_new_products: false }, @@ -38,6 +38,20 @@ vi.mock('../context/DBProvider', () => ({ })); describe('PickListsScreen sorting', () => { + beforeEach(() => { + areasMock = [ + { id: 'area-1', name: 'Front Counter', created_at: 0, updated_at: 0 }, + { id: 'area-2', name: 'back room', created_at: 0, updated_at: 0 }, + { id: 'area-3', name: 'Cafe', created_at: 0, updated_at: 0 }, + ]; + + pickListsMock = [ + { id: 'list-2', area_id: 'area-2', created_at: 3, categories: [], auto_add_new_products: false }, + { id: 'list-3', area_id: 'area-3', created_at: 4, categories: [], auto_add_new_products: false }, + { id: 'list-1', area_id: 'area-1', created_at: 5, categories: [], auto_add_new_products: false }, + ]; + }); + it('sorts pick lists alphabetically by area name', () => { render( @@ -51,4 +65,30 @@ describe('PickListsScreen sorting', () => { expect(within(listItems[1]).getByText('Cafe')).toBeVisible(); expect(within(listItems[2]).getByText('Front Counter')).toBeVisible(); }); + + it('ignores casing and whitespace when ordering pick lists', () => { + areasMock = [ + { id: 'area-1', name: ' front counter', created_at: 0, updated_at: 0 }, + { id: 'area-2', name: ' Cafe ', created_at: 0, updated_at: 0 }, + { id: 'area-3', name: 'Back room', created_at: 0, updated_at: 0 }, + ]; + + pickListsMock = [ + { id: 'list-1', area_id: 'area-1', created_at: 5, categories: [], auto_add_new_products: false }, + { id: 'list-2', area_id: 'area-2', created_at: 3, categories: [], auto_add_new_products: false }, + { id: 'list-3', area_id: 'area-3', created_at: 4, categories: [], auto_add_new_products: false }, + ]; + + render( + + + , + ); + + const listItems = screen.getAllByRole('listitem'); + + expect(within(listItems[0]).getByText(/back room/i)).toBeVisible(); + expect(within(listItems[1]).getByText(/cafe/i)).toBeVisible(); + expect(within(listItems[2]).getByText(/front counter/i)).toBeVisible(); + }); }); diff --git a/src/screens/PickListsScreen.tsx b/src/screens/PickListsScreen.tsx index d04fb42..ade79fd 100644 --- a/src/screens/PickListsScreen.tsx +++ b/src/screens/PickListsScreen.tsx @@ -39,10 +39,14 @@ export const PickListsScreen = () => { const sortedLists = useMemo(() => { const locale = new Intl.Collator(undefined, { sensitivity: 'base' }); + const normalizeAreaName = (areaId: string) => + (areaNameById.get(areaId) ?? 'Unknown area').trim(); + return [...lists].sort((a, b) => { - const nameA = areaNameById.get(a.area_id) ?? 'Unknown area'; - const nameB = areaNameById.get(b.area_id) ?? 'Unknown area'; - const nameComparison = locale.compare(nameA, nameB); + const nameComparison = locale.compare( + normalizeAreaName(a.area_id), + normalizeAreaName(b.area_id), + ); if (nameComparison !== 0) return nameComparison; return a.created_at - b.created_at; });