diff --git a/e2e/dashboard-grids.spec.ts b/e2e/dashboard-grids.spec.ts index 29bc24c..c46c79d 100644 --- a/e2e/dashboard-grids.spec.ts +++ b/e2e/dashboard-grids.spec.ts @@ -53,6 +53,19 @@ test.describe("dashboard grids", () => { /Pay run stub: [2-9]\d* invoice\(s\) selected/, ); + await page.getByTestId("columns-toggle").click(); + const drawer = page.getByTestId("columns-drawer"); + await drawer.getByTestId("columns-hidden-search").fill("Payment Date"); + await drawer + .getByTestId("columns-hidden-paymentDate") + .locator('input[type="checkbox"]') + .evaluate((el: HTMLInputElement) => { + el.click(); + }); + await expect( + readyGrid.locator('.MuiDataGrid-columnHeader[data-field="payDate"]'), + ).toBeVisible(); + const payDateCell = readyGrid.locator('[data-field="payDate"]').nth(1); await payDateCell.dblclick(); const editor = readyGrid diff --git a/src/dashboard/approved-columns.ts b/src/dashboard/approved-columns.ts index 176dde7..b94e671 100644 --- a/src/dashboard/approved-columns.ts +++ b/src/dashboard/approved-columns.ts @@ -1,16 +1,9 @@ import type { GridColDef } from "@mui/x-data-grid"; import type { MockInvoice } from "@/mocks"; -/** Keep one editable pay-date column on the approved grid. */ -export function withEditablePayDate( - columns: GridColDef[], - payDateColumn: GridColDef, -): GridColDef[] { - const next = columns.map((column) => +/** Mark a visible pay-date column editable. A hidden Payment Date stays omitted. */ +export function withEditablePayDate(columns: GridColDef[]): GridColDef[] { + return columns.map((column) => column.field === "payDate" ? { ...column, editable: true } : column, ); - if (next.some((column) => column.field === "payDate")) { - return next; - } - return [...next, { ...payDateColumn, editable: true }]; } diff --git a/src/dashboard/columns.test.ts b/src/dashboard/columns.test.ts index 4d2cc28..a3eb9d3 100644 --- a/src/dashboard/columns.test.ts +++ b/src/dashboard/columns.test.ts @@ -34,15 +34,13 @@ describe("withEditablePayDate", () => { const hidden: GridColDef = { field: "vendorName", headerName: "Vendor" }; const payDate: GridColDef = { field: "payDate", headerName: "Payment Date" }; - it("appends an editable pay date when the catalog hides Payment Date", () => { - const columns = withEditablePayDate([hidden], payDate); - expect(columns.filter((column) => column.field === "payDate")).toEqual([ - { field: "payDate", headerName: "Payment Date", editable: true }, - ]); + it("leaves Payment Date hidden when the catalog omits it", () => { + const columns = withEditablePayDate([hidden]); + expect(columns.some((column) => column.field === "payDate")).toBe(false); }); it("keeps a single editable pay date when Payment Date is already visible", () => { - const columns = withEditablePayDate([hidden, { ...payDate, editable: false }], payDate); + const columns = withEditablePayDate([hidden, { ...payDate, editable: false }]); const matches = columns.filter((column) => column.field === "payDate"); expect(matches).toHaveLength(1); expect(matches[0]?.editable).toBe(true); diff --git a/src/dashboard/columns.tsx b/src/dashboard/columns.tsx index c03a486..c720972 100644 --- a/src/dashboard/columns.tsx +++ b/src/dashboard/columns.tsx @@ -251,9 +251,9 @@ export function columnsFromCatalogKeys(keys: InvoiceColumnKey[]): GridColDef catalogColumnDefs[key]); } -/** Approved tab keeps an editable pay date even when the catalog hides Payment Date. */ +/** Approved tab keeps pay date editable when the drawer shows Payment Date. */ export function columnsForApprovedGrid(keys: InvoiceColumnKey[]): GridColDef[] { - return withEditablePayDate(columnsFromCatalogKeys(keys), catalogColumnDefs.paymentDate); + return withEditablePayDate(columnsFromCatalogKeys(keys)); } export const readyToPayColumns: GridColDef[] = [