From 657c1dd17e57345a2fbb92e669d61ad99b5ffffc Mon Sep 17 00:00:00 2001 From: Tom Butcher Date: Mon, 22 Jun 2026 01:48:12 +0100 Subject: [PATCH] Add expandHeight prop to various Dashboard components for improved layout flexibility --- src/components/Dashboard/Finance/Invoices.jsx | 1 + src/components/Dashboard/Finance/Payments.jsx | 2 +- .../Dashboard/Finance/TaxRecords.jsx | 1 + .../Dashboard/Inventory/FilamentStocks.jsx | 1 + .../Dashboard/Inventory/OrderItems.jsx | 1 + .../Dashboard/Inventory/PartStocks.jsx | 1 + .../Dashboard/Inventory/ProductStocks.jsx | 1 + .../Dashboard/Inventory/PurchaseOrders.jsx | 1 + .../Dashboard/Inventory/Shipments.jsx | 1 + .../Dashboard/Inventory/StockAudits.jsx | 1 + .../Dashboard/Inventory/StockEvents.jsx | 1 + .../Dashboard/Inventory/StockLocations.jsx | 1 + .../Dashboard/Inventory/StockTransfers.jsx | 1 + .../Dashboard/Management/AppPasswords.jsx | 1 + .../Dashboard/Management/AuditLogs.jsx | 1 + .../Dashboard/Management/CourierServices.jsx | 1 + .../Dashboard/Management/Couriers.jsx | 1 + .../Dashboard/Management/DocumentJobs.jsx | 1 + .../Dashboard/Management/DocumentPrinters.jsx | 1 + .../Dashboard/Management/DocumentSizes.jsx | 1 + .../Management/DocumentTemplates.jsx | 1 + .../Dashboard/Management/FilamentSkus.jsx | 1 + .../Dashboard/Management/Filaments.jsx | 1 + src/components/Dashboard/Management/Files.jsx | 1 + src/components/Dashboard/Management/Hosts.jsx | 1 + .../Dashboard/Management/Materials.jsx | 1 + .../Dashboard/Management/NoteTypes.jsx | 1 + .../Dashboard/Management/PartSkus.jsx | 1 + src/components/Dashboard/Management/Parts.jsx | 1 + .../Management/ProductCategories.jsx | 1 + .../Dashboard/Management/ProductSkus.jsx | 1 + .../Dashboard/Management/Products.jsx | 1 + .../Dashboard/Management/TaxRates.jsx | 1 + .../Dashboard/Management/Vendors.jsx | 1 + .../Dashboard/Production/GCodeFiles.jsx | 1 + src/components/Dashboard/Production/Jobs.jsx | 1 + .../Dashboard/Production/SubJobs.jsx | 1 + src/components/Dashboard/Sales/Clients.jsx | 2 +- src/components/Dashboard/Sales/Listings.jsx | 1 + .../Dashboard/Sales/Marketplaces.jsx | 1 + .../Dashboard/Sales/SalesOrders.jsx | 2 +- .../Dashboard/common/ObjectTable.jsx | 35 +++++++++++++++++-- 42 files changed, 73 insertions(+), 6 deletions(-) diff --git a/src/components/Dashboard/Finance/Invoices.jsx b/src/components/Dashboard/Finance/Invoices.jsx index efb0be1..7a55e89 100644 --- a/src/components/Dashboard/Finance/Invoices.jsx +++ b/src/components/Dashboard/Finance/Invoices.jsx @@ -80,6 +80,7 @@ const Invoices = () => { type='invoice' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { type='payment' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { } export default Payments - diff --git a/src/components/Dashboard/Finance/TaxRecords.jsx b/src/components/Dashboard/Finance/TaxRecords.jsx index 0207390..ed4fecd 100644 --- a/src/components/Dashboard/Finance/TaxRecords.jsx +++ b/src/components/Dashboard/Finance/TaxRecords.jsx @@ -80,6 +80,7 @@ const TaxRecords = () => { type='taxRecord' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { type='filamentStock' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { type='orderItem' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { type='partStock' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { type='productStock' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { type='purchaseOrder' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { type='shipment' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { type='stockAudit' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { type='stockEvent' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> diff --git a/src/components/Dashboard/Inventory/StockLocations.jsx b/src/components/Dashboard/Inventory/StockLocations.jsx index c56081d..1b45562 100644 --- a/src/components/Dashboard/Inventory/StockLocations.jsx +++ b/src/components/Dashboard/Inventory/StockLocations.jsx @@ -84,6 +84,7 @@ const StockLocations = () => { type='stockLocation' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { type='stockTransfer' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { cards={viewMode === 'cards'} visibleColumns={columnVisibility} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { visibleColumns={columnVisibility} type='auditLog' showFilterSidebar={showFilterSidebar} + expandHeight={true} /> diff --git a/src/components/Dashboard/Management/CourierServices.jsx b/src/components/Dashboard/Management/CourierServices.jsx index d2dd307..3ca521f 100644 --- a/src/components/Dashboard/Management/CourierServices.jsx +++ b/src/components/Dashboard/Management/CourierServices.jsx @@ -80,6 +80,7 @@ const CourierServices = () => { type='courierService' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { type='courier' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { type='documentJob' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { type='documentPrinter' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { type='documentSize' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { type='documentTemplate' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { type='filamentSku' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { cards={viewMode === 'cards'} visibleColumns={columnVisibility} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { type='file' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> diff --git a/src/components/Dashboard/Management/Hosts.jsx b/src/components/Dashboard/Management/Hosts.jsx index 60e1973..bd28d69 100644 --- a/src/components/Dashboard/Management/Hosts.jsx +++ b/src/components/Dashboard/Management/Hosts.jsx @@ -85,6 +85,7 @@ const Hosts = () => { cards={viewMode === 'cards'} visibleColumns={columnVisibility} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { cards={viewMode === 'cards'} visibleColumns={columnVisibility} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { type='noteType' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { type='partSku' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { cards={viewMode === 'cards'} filter={filter} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { cards={viewMode === 'cards'} visibleColumns={columnVisibility} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { type='productSku' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { type={'product'} cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { type='taxRate' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { type='vendor' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { cards={viewMode === 'cards'} visibleColumns={columnVisibility} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { visibleColumns={columnVisibility} cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { visibleColumns={columnVisibility} cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> diff --git a/src/components/Dashboard/Sales/Clients.jsx b/src/components/Dashboard/Sales/Clients.jsx index 7c84e12..607688e 100644 --- a/src/components/Dashboard/Sales/Clients.jsx +++ b/src/components/Dashboard/Sales/Clients.jsx @@ -79,6 +79,7 @@ const Clients = () => { type='client' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { } export default Clients - diff --git a/src/components/Dashboard/Sales/Listings.jsx b/src/components/Dashboard/Sales/Listings.jsx index fb7b4bd..84a0cc2 100644 --- a/src/components/Dashboard/Sales/Listings.jsx +++ b/src/components/Dashboard/Sales/Listings.jsx @@ -80,6 +80,7 @@ const Listings = () => { type='listing' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { type='marketplace' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { type='salesOrder' cards={viewMode === 'cards'} showFilterSidebar={showFilterSidebar} + expandHeight={true} /> { } export default SalesOrders - diff --git a/src/components/Dashboard/common/ObjectTable.jsx b/src/components/Dashboard/common/ObjectTable.jsx index 6ab3fea..06f5f6d 100644 --- a/src/components/Dashboard/common/ObjectTable.jsx +++ b/src/components/Dashboard/common/ObjectTable.jsx @@ -101,7 +101,8 @@ const ObjectTable = forwardRef( masterFilter = {}, size = 'middle', onStateChange, - showFilterSidebar = false + showFilterSidebar = false, + expandHeight = false }, ref ) => { @@ -728,6 +729,30 @@ const ObjectTable = forwardRef( setTableData(pages.flatMap((page) => page.items)) }, [pages]) + useEffect(() => { + if (!expandHeight || cards) return + + const findAntTableBody = (element) => { + if (!element) return null + if (element.classList?.contains('ant-table-body')) return element + for (const child of element.children) { + const found = findAntTableBody(child) + if (found) return found + } + return null + } + + const root = tableRef.current?.nativeElement ?? tableRef.current + const tableBody = findAntTableBody(root) + if (!tableBody) return + + tableBody.style.minHeight = adjustedScrollHeight + + return () => { + tableBody.style.minHeight = '' + } + }, [expandHeight, adjustedScrollHeight, cards, loading, tableData]) + // Add columns in the order specified by model.columns model.columns.forEach((colName) => { const prop = modelProperties.find((p) => p.name === colName) @@ -878,7 +903,10 @@ const ObjectTable = forwardRef( return ( {tableData.map((record) => { @@ -1002,7 +1030,8 @@ ObjectTable.propTypes = { masterFilter: PropTypes.object, size: PropTypes.string, onStateChange: PropTypes.func, - showFilterSidebar: PropTypes.bool + showFilterSidebar: PropTypes.bool, + expandHeight: PropTypes.bool } export default ObjectTable