fix(web): hide Payment Date when the drawer omits it

This commit is contained in:
Adam Moussa 2026-09-25 17:30:48 -04:00
parent 2c40943908
commit cf86cfed30
No known key found for this signature in database
4 changed files with 22 additions and 18 deletions

View file

@ -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

View file

@ -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<MockInvoice>[],
payDateColumn: GridColDef<MockInvoice>,
): GridColDef<MockInvoice>[] {
const next = columns.map((column) =>
/** Mark a visible pay-date column editable. A hidden Payment Date stays omitted. */
export function withEditablePayDate(columns: GridColDef<MockInvoice>[]): GridColDef<MockInvoice>[] {
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 }];
}

View file

@ -34,15 +34,13 @@ describe("withEditablePayDate", () => {
const hidden: GridColDef<MockInvoice> = { field: "vendorName", headerName: "Vendor" };
const payDate: GridColDef<MockInvoice> = { 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);

View file

@ -251,9 +251,9 @@ export function columnsFromCatalogKeys(keys: InvoiceColumnKey[]): GridColDef<Moc
return keys.map((key) => 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<MockInvoice>[] {
return withEditablePayDate(columnsFromCatalogKeys(keys), catalogColumnDefs.paymentDate);
return withEditablePayDate(columnsFromCatalogKeys(keys));
}
export const readyToPayColumns: GridColDef<MockInvoice>[] = [