[bug] Fix table ordering (#11277)

* Additional filtering options for stock list

* Fix ordering for stock table

* Ordering fix for build order table

* Ordering for supplier parts and manufacturer parts

* SalesOrderLineItem: Order by IPN

* ReturnOrderLineItem table:

- Order by part name
- Order by part IPN

* Update API version to 451

Increment API version to 451 and update changelog.

* Add playwright tests for column sorting

* Add backend tests for API ordering

---------

Co-authored-by: Matthias Mair <code@mjmair.com>

src/frontend/src/tables/build/BuildOrderTable.tsx

@@ -75,6 +75,7 @@ export function BuildOrderTable({
       {
         accessor: 'part_detail.IPN',
         sortable: true,
+        ordering: 'IPN',
         switchable: true,
         title: t`IPN`
       },

src/frontend/src/tables/purchasing/ManufacturerPartTable.tsx

@@ -67,7 +67,8 @@ export function ManufacturerPartTable({
       {
         accessor: 'part_detail.IPN',
         title: t`IPN`,
-        sortable: false,
+        sortable: true,
+        ordering: 'IPN',
         switchable: true
       },
       {

src/frontend/src/tables/purchasing/SupplierPartTable.tsx

@@ -68,7 +68,8 @@ export function SupplierPartTable({
       {
         accessor: 'part_detail.IPN',
         title: t`IPN`,
-        sortable: false,
+        sortable: true,
+        ordering: 'IPN',
         switchable: true
       },
       {
@@ -94,7 +95,6 @@ export function SupplierPartTable({
       },
       {
         accessor: 'MPN',
-
         sortable: true,
         title: t`MPN`,
         render: (record: any) => record?.manufacturer_part_detail?.MPN

src/frontend/src/tables/sales/ReturnOrderLineItemTable.tsx

@@ -110,11 +110,13 @@ export default function ReturnOrderLineItemTable({
   const tableColumns: TableColumn[] = useMemo(() => {
     return [
       PartColumn({
-        part: 'part_detail'
+        part: 'part_detail',
+        ordering: 'part'
       }),
       {
         accessor: 'part_detail.IPN',
-        sortable: false
+        sortable: true,
+        ordering: 'IPN'
       },
       DescriptionColumn({
         accessor: 'part_detail.description'
@@ -123,6 +125,8 @@ export default function ReturnOrderLineItemTable({
         accessor: 'item_detail.serial',
         title: t`Quantity`,
         switchable: false,
+        sortable: true,
+        ordering: 'stock',
         render: (record: any) => {
           if (record.item_detail.serial && record.quantity == 1) {
             return `# ${record.item_detail.serial}`;

src/frontend/src/tables/sales/SalesOrderLineItemTable.tsx

@@ -97,6 +97,8 @@ export default function SalesOrderLineItemTable({
       {
         accessor: 'part_detail.IPN',
         title: t`IPN`,
+        sortable: true,
+        ordering: 'IPN',
         switchable: true
       },
       DescriptionColumn({

src/frontend/src/tables/stock/StockItemTable.tsx

@@ -67,7 +67,8 @@ function stockItemTableColumns({
     {
       accessor: 'part_detail.IPN',
       title: t`IPN`,
-      sortable: true
+      sortable: true,
+      ordering: 'IPN'
     },
     {
       accessor: 'part_detail.revision',

src/frontend/tests/helpers.ts

@@ -167,3 +167,16 @@ export const deletePart = async (name: string) => {
     expect(res.status()).toBe(204);
   }
 };
+
+// Click on the column sorting toggle
+export const toggleColumnSorting = async (page: Page, columnName: string) => {
+  // Click on the column header to toggle sorting
+  const regex = new RegExp(
+    `^${columnName}\\s*(Not sorted|Sorted ascending|Sorted descending)$`,
+    'i'
+  );
+
+  await page.getByRole('button', { name: regex }).click();
+  await page.waitForTimeout(50);
+  await page.waitForLoadState('networkidle');
+};

src/frontend/tests/pui_modals.spec.ts

@@ -104,9 +104,10 @@ test('Spotlight - No Keys', async ({ browser }) => {
   await page.waitForTimeout(250);
 
   // assert the nav headers are visible
-  await page.getByText('Navigation').waitFor();
-  await page.getByText('Documentation').waitFor();
+  await page.getByText('Navigation').first().waitFor();
+  await page.getByText('Documentation').first().waitFor();
   await page.getByText('About').first().waitFor();
+
   await page
     .getByRole('button', { name: 'Notifications', exact: true })
     .waitFor();

src/frontend/tests/pui_tables.spec.ts

@@ -2,7 +2,8 @@ import { test } from './baseFixtures.js';
 import {
   clearTableFilters,
   navigate,
-  setTableChoiceFilter
+  setTableChoiceFilter,
+  toggleColumnSorting
 } from './helpers.js';
 import { doCachedLogin } from './login.js';
 
@@ -98,3 +99,25 @@ test('Tables - Columns', async ({ browser }) => {
   await page.getByRole('menuitem', { name: 'Reference', exact: true }).click();
   await page.getByRole('menuitem', { name: 'Project Code' }).click();
 });
+
+test('Tables - Sorting', async ({ browser }) => {
+  // Go to the "stock list" page
+  const page = await doCachedLogin(browser, {
+    url: 'stock/location/index/stock-items',
+    username: 'steven',
+    password: 'wizardstaff'
+  });
+
+  // Stock table sorting
+  await toggleColumnSorting(page, 'Part');
+  await toggleColumnSorting(page, 'IPN');
+  await toggleColumnSorting(page, 'Stock');
+  await toggleColumnSorting(page, 'Status');
+
+  // Purchase order sorting
+  await navigate(page, '/web/purchasing/index/purchaseorders');
+  await toggleColumnSorting(page, 'Reference');
+  await toggleColumnSorting(page, 'Supplier');
+  await toggleColumnSorting(page, 'Order Status');
+  await toggleColumnSorting(page, 'Line Items');
+});