From acb1ec4c8362a78e981d9b321e5621e1b4b20efb Mon Sep 17 00:00:00 2001 From: Oliver Date: Fri, 17 May 2024 11:38:55 +1000 Subject: [PATCH] [PUI] Column Refactoring (#7242) * Refactor column helpers * Make reference column switchable in BomTable * Make 'accessor' a required field againt * Update props * Fix c0d3 --- src/frontend/src/tables/Column.tsx | 14 +- src/frontend/src/tables/ColumnRenderers.tsx | 163 +++++++----------- src/frontend/src/tables/bom/BomTable.tsx | 6 +- src/frontend/src/tables/bom/UsedInTable.tsx | 2 +- .../src/tables/build/BuildOrderTable.tsx | 10 +- .../purchasing/PurchaseOrderLineItemTable.tsx | 6 +- .../tables/purchasing/PurchaseOrderTable.tsx | 10 +- .../tables/purchasing/SupplierPartTable.tsx | 2 +- .../src/tables/sales/ReturnOrderTable.tsx | 10 +- .../src/tables/sales/SalesOrderTable.tsx | 10 +- .../src/tables/settings/ProjectCodeTable.tsx | 2 +- .../tables/stock/StockItemTestResultTable.tsx | 2 +- 12 files changed, 102 insertions(+), 135 deletions(-) diff --git a/src/frontend/src/tables/Column.tsx b/src/frontend/src/tables/Column.tsx index ad20497702..b2ea9fcccd 100644 --- a/src/frontend/src/tables/Column.tsx +++ b/src/frontend/src/tables/Column.tsx @@ -1,8 +1,5 @@ -/** - * Interface for the table column definition - */ -export type TableColumn = { - accessor: string; // The key in the record to access +export type TableColumnProps = { + accessor?: string; // The key in the record to access title?: string; // The title of the column - Note: this may be supplied by the API, and is not required, but it can be overridden if required ordering?: string; // The key in the record to sort by (defaults to accessor) sortable?: boolean; // Whether the column is sortable @@ -18,3 +15,10 @@ export type TableColumn = { cellsStyle?: any; // The style of the cells in the column extra?: any; // Extra data to pass to the render function }; + +/** + * Interface for the table column definition + */ +export type TableColumn = { + accessor: string; // The key in the record to access +} & TableColumnProps; diff --git a/src/frontend/src/tables/ColumnRenderers.tsx b/src/frontend/src/tables/ColumnRenderers.tsx index 55108cf4eb..d4f59d9a09 100644 --- a/src/frontend/src/tables/ColumnRenderers.tsx +++ b/src/frontend/src/tables/ColumnRenderers.tsx @@ -13,7 +13,7 @@ import { formatCurrency, renderDate } from '../defaults/formatters'; import { ModelType } from '../enums/ModelType'; import { resolveItem } from '../functions/conversion'; import { cancelEvent } from '../functions/events'; -import { TableColumn } from './Column'; +import { TableColumn, TableColumnProps } from './Column'; import { ProjectCodeHoverCard } from './TableHoverCard'; // Render a Part instance within a table @@ -26,24 +26,14 @@ export function PartColumn(part: any, full_name?: boolean) { ); } -export function LocationColumn({ - accessor, - title, - sortable, - ordering -}: { - accessor: string; - title?: string; - sortable?: boolean; - ordering?: string; -}): TableColumn { +export function LocationColumn(props: TableColumnProps): TableColumn { return { - accessor: accessor, - title: title ?? t`Location`, - sortable: sortable ?? true, - ordering: ordering ?? 'location', + accessor: 'location', + title: t`Location`, + sortable: true, + ordering: 'location', render: (record: any) => { - let location = resolveItem(record, accessor); + let location = resolveItem(record, props.accessor ?? ''); if (!location) { return ( @@ -52,62 +42,38 @@ export function LocationColumn({ } return {location.name}; - } + }, + ...props }; } -export function BooleanColumn({ - accessor, - title, - sortable, - switchable, - ordering -}: { - accessor: string; - title?: string; - ordering?: string; - sortable?: boolean; - switchable?: boolean; -}): TableColumn { +export function BooleanColumn(props: TableColumn): TableColumn { return { - accessor: accessor, - title: title, - ordering: ordering, - sortable: sortable ?? true, - switchable: switchable ?? true, + sortable: true, + switchable: true, render: (record: any) => ( - - ) + + ), + ...props }; } -export function DescriptionColumn({ - accessor, - sortable, - switchable -}: { - accessor?: string; - sortable?: boolean; - switchable?: boolean; -}): TableColumn { +export function DescriptionColumn(props: TableColumnProps): TableColumn { return { - accessor: accessor ?? 'description', + accessor: 'description', title: t`Description`, - sortable: sortable ?? false, - switchable: switchable ?? true + sortable: false, + switchable: true, + ...props }; } -export function LinkColumn({ - accessor = 'link' -}: { - accessor?: string; -}): TableColumn { +export function LinkColumn(props: TableColumnProps): TableColumn { return { - accessor: accessor, + accessor: 'link', sortable: false, render: (record: any) => { - let url = resolveItem(record, accessor); + let url = resolveItem(record, props.accessor ?? 'link'); if (!url) { return '-'; @@ -127,24 +93,28 @@ export function LinkColumn({ {url} ); - } + }, + ...props }; } -export function ReferenceColumn(): TableColumn { +export function ReferenceColumn(props: TableColumnProps): TableColumn { return { accessor: 'reference', + title: t`Reference`, sortable: true, - switchable: false + switchable: true, + ...props }; } -export function NoteColumn(): TableColumn { +export function NoteColumn(props: TableColumnProps): TableColumn { return { accessor: 'note', sortable: false, title: t`Note`, - render: (record: any) => record.note ?? record.notes + render: (record: any) => record.note ?? record.notes, + ...props }; } @@ -162,13 +132,14 @@ export function LineItemsProgressColumn(): TableColumn { }; } -export function ProjectCodeColumn(): TableColumn { +export function ProjectCodeColumn(props: TableColumnProps): TableColumn { return { accessor: 'project_code', sortable: true, render: (record: any) => ( - ) + ), + ...props }; } @@ -188,62 +159,52 @@ export function StatusColumn({ }; } -export function ResponsibleColumn(): TableColumn { +export function ResponsibleColumn(props: TableColumnProps): TableColumn { return { accessor: 'responsible', sortable: true, + switchable: true, render: (record: any) => - record.responsible && RenderOwner({ instance: record.responsible_detail }) + record.responsible && + RenderOwner({ instance: record.responsible_detail }), + ...props }; } -export function DateColumn({ - accessor, - sortable, - switchable, - ordering, - title -}: { - accessor?: string; - ordering?: string; - sortable?: boolean; - switchable?: boolean; - title?: string; -}): TableColumn { +export function DateColumn(props: TableColumnProps): TableColumn { return { - accessor: accessor ?? 'date', - sortable: sortable ?? true, - ordering: ordering, - title: title ?? t`Date`, - switchable: switchable, - render: (record: any) => renderDate(resolveItem(record, accessor ?? 'date')) + accessor: 'date', + sortable: true, + title: t`Date`, + switchable: true, + render: (record: any) => + renderDate(resolveItem(record, props.accessor ?? 'date')), + ...props }; } -export function TargetDateColumn(): TableColumn { - return { +export function TargetDateColumn(props: TableColumnProps): TableColumn { + return DateColumn({ accessor: 'target_date', - sortable: true, title: t`Target Date`, - // TODO: custom renderer which alerts user if target date is overdue - render: (record: any) => renderDate(record.target_date) - }; + ...props + }); } -export function CreationDateColumn(): TableColumn { - return { +export function CreationDateColumn(props: TableColumnProps): TableColumn { + return DateColumn({ accessor: 'creation_date', - sortable: true, - render: (record: any) => renderDate(record.creation_date) - }; + title: t`Creation Date`, + ...props + }); } -export function ShipmentDateColumn(): TableColumn { - return { +export function ShipmentDateColumn(props: TableColumnProps): TableColumn { + return DateColumn({ accessor: 'shipment_date', - sortable: true, - render: (record: any) => renderDate(record.shipment_date) - }; + title: t`Shipment Date`, + ...props + }); } export function CurrencyColumn({ diff --git a/src/frontend/src/tables/bom/BomTable.tsx b/src/frontend/src/tables/bom/BomTable.tsx index b2e5cf018f..51b065d161 100644 --- a/src/frontend/src/tables/bom/BomTable.tsx +++ b/src/frontend/src/tables/bom/BomTable.tsx @@ -99,7 +99,9 @@ export function BomTable({ DescriptionColumn({ accessor: 'sub_part_detail.description' }), - ReferenceColumn(), + ReferenceColumn({ + switchable: true + }), { accessor: 'quantity', switchable: false, @@ -248,7 +250,7 @@ export function BomTable({ ); } }, - NoteColumn() + NoteColumn({}) ]; }, [partId, params]); diff --git a/src/frontend/src/tables/bom/UsedInTable.tsx b/src/frontend/src/tables/bom/UsedInTable.tsx index ef9c050807..f9227f92e2 100644 --- a/src/frontend/src/tables/bom/UsedInTable.tsx +++ b/src/frontend/src/tables/bom/UsedInTable.tsx @@ -52,7 +52,7 @@ export function UsedInTable({ ); } }, - ReferenceColumn() + ReferenceColumn({}) ]; }, [partId]); diff --git a/src/frontend/src/tables/build/BuildOrderTable.tsx b/src/frontend/src/tables/build/BuildOrderTable.tsx index 707b55c164..ac41aa7fd0 100644 --- a/src/frontend/src/tables/build/BuildOrderTable.tsx +++ b/src/frontend/src/tables/build/BuildOrderTable.tsx @@ -36,7 +36,7 @@ import { InvenTreeTable } from '../InvenTreeTable'; */ function buildOrderTableColumns(): TableColumn[] { return [ - ReferenceColumn(), + ReferenceColumn({}), { accessor: 'part', sortable: true, @@ -60,13 +60,13 @@ function buildOrderTableColumns(): TableColumn[] { ) }, StatusColumn({ model: ModelType.build }), - ProjectCodeColumn(), + ProjectCodeColumn({}), { accessor: 'priority', sortable: true }, - CreationDateColumn(), - TargetDateColumn(), + CreationDateColumn({}), + TargetDateColumn({}), DateColumn({ accessor: 'completion_date', sortable: true @@ -78,7 +78,7 @@ function buildOrderTableColumns(): TableColumn[] { ) }, - ResponsibleColumn() + ResponsibleColumn({}) ]; } diff --git a/src/frontend/src/tables/purchasing/PurchaseOrderLineItemTable.tsx b/src/frontend/src/tables/purchasing/PurchaseOrderLineItemTable.tsx index 7fb5fbdde1..5e858d6254 100644 --- a/src/frontend/src/tables/purchasing/PurchaseOrderLineItemTable.tsx +++ b/src/frontend/src/tables/purchasing/PurchaseOrderLineItemTable.tsx @@ -88,7 +88,7 @@ export function PurchaseOrderLineItemTable({ sortable: false, render: (record: any) => record?.part_detail?.description }, - ReferenceColumn(), + ReferenceColumn({}), { accessor: 'quantity', title: t`Quantity`, @@ -170,7 +170,7 @@ export function PurchaseOrderLineItemTable({ title: t`Unit Price` }), TotalPriceColumn(), - TargetDateColumn(), + TargetDateColumn({}), { accessor: 'destination', title: t`Destination`, @@ -180,7 +180,7 @@ export function PurchaseOrderLineItemTable({ ? RenderStockLocation({ instance: record.destination_detail }) : '-' }, - NoteColumn(), + NoteColumn({}), LinkColumn({}) ]; }, [orderId, user]); diff --git a/src/frontend/src/tables/purchasing/PurchaseOrderTable.tsx b/src/frontend/src/tables/purchasing/PurchaseOrderTable.tsx index 9eb090201b..6bd7c6ccbb 100644 --- a/src/frontend/src/tables/purchasing/PurchaseOrderTable.tsx +++ b/src/frontend/src/tables/purchasing/PurchaseOrderTable.tsx @@ -81,7 +81,7 @@ export function PurchaseOrderTable({ const tableColumns = useMemo(() => { return [ - ReferenceColumn(), + ReferenceColumn({}), DescriptionColumn({}), { accessor: 'supplier__name', @@ -104,9 +104,9 @@ export function PurchaseOrderTable({ }, LineItemsProgressColumn(), StatusColumn({ model: ModelType.purchaseorder }), - ProjectCodeColumn(), - CreationDateColumn(), - TargetDateColumn(), + ProjectCodeColumn({}), + CreationDateColumn({}), + TargetDateColumn({}), { accessor: 'total_price', title: t`Total Price`, @@ -117,7 +117,7 @@ export function PurchaseOrderTable({ }); } }, - ResponsibleColumn() + ResponsibleColumn({}) ]; }, []); diff --git a/src/frontend/src/tables/purchasing/SupplierPartTable.tsx b/src/frontend/src/tables/purchasing/SupplierPartTable.tsx index 0b3f21ba3e..b34beb31a5 100644 --- a/src/frontend/src/tables/purchasing/SupplierPartTable.tsx +++ b/src/frontend/src/tables/purchasing/SupplierPartTable.tsx @@ -134,7 +134,7 @@ export function SupplierPartTable({ params }: { params: any }): ReactNode { } }, LinkColumn({}), - NoteColumn(), + NoteColumn({}), { accessor: 'available', sortable: true, diff --git a/src/frontend/src/tables/sales/ReturnOrderTable.tsx b/src/frontend/src/tables/sales/ReturnOrderTable.tsx index 38faa05849..afabc55bd6 100644 --- a/src/frontend/src/tables/sales/ReturnOrderTable.tsx +++ b/src/frontend/src/tables/sales/ReturnOrderTable.tsx @@ -72,7 +72,7 @@ export function ReturnOrderTable({ params }: { params?: any }) { const tableColumns = useMemo(() => { return [ - ReferenceColumn(), + ReferenceColumn({}), { accessor: 'customer__name', title: t`Customer`, @@ -95,10 +95,10 @@ export function ReturnOrderTable({ params }: { params?: any }) { DescriptionColumn({}), LineItemsProgressColumn(), StatusColumn({ model: ModelType.returnorder }), - ProjectCodeColumn(), - CreationDateColumn(), - TargetDateColumn(), - ResponsibleColumn(), + ProjectCodeColumn({}), + CreationDateColumn({}), + TargetDateColumn({}), + ResponsibleColumn({}), { accessor: 'total_price', title: t`Total Price`, diff --git a/src/frontend/src/tables/sales/SalesOrderTable.tsx b/src/frontend/src/tables/sales/SalesOrderTable.tsx index cf6050ba92..076c516290 100644 --- a/src/frontend/src/tables/sales/SalesOrderTable.tsx +++ b/src/frontend/src/tables/sales/SalesOrderTable.tsx @@ -101,7 +101,7 @@ export function SalesOrderTable({ const tableColumns = useMemo(() => { return [ - ReferenceColumn(), + ReferenceColumn({}), { accessor: 'customer__name', title: t`Customer`, @@ -125,10 +125,10 @@ export function SalesOrderTable({ DescriptionColumn({}), LineItemsProgressColumn(), StatusColumn({ model: ModelType.salesorder }), - ProjectCodeColumn(), - CreationDateColumn(), - TargetDateColumn(), - ShipmentDateColumn(), + ProjectCodeColumn({}), + CreationDateColumn({}), + TargetDateColumn({}), + ShipmentDateColumn({}), { accessor: 'total_price', title: t`Total Price`, diff --git a/src/frontend/src/tables/settings/ProjectCodeTable.tsx b/src/frontend/src/tables/settings/ProjectCodeTable.tsx index ee21364d34..d68923f63f 100644 --- a/src/frontend/src/tables/settings/ProjectCodeTable.tsx +++ b/src/frontend/src/tables/settings/ProjectCodeTable.tsx @@ -33,7 +33,7 @@ export default function ProjectCodeTable() { sortable: true }, DescriptionColumn({}), - ResponsibleColumn() + ResponsibleColumn({}) ]; }, []); diff --git a/src/frontend/src/tables/stock/StockItemTestResultTable.tsx b/src/frontend/src/tables/stock/StockItemTestResultTable.tsx index 2439ba870b..a01794a79d 100644 --- a/src/frontend/src/tables/stock/StockItemTestResultTable.tsx +++ b/src/frontend/src/tables/stock/StockItemTestResultTable.tsx @@ -187,7 +187,7 @@ export default function StockItemTestResultTable({ render: (record: any) => record.attachment && }, - NoteColumn(), + NoteColumn({}), DateColumn({}), { accessor: 'user',