Add expandHeight prop to various Dashboard components for improved layout flexibility
All checks were successful
farmcontrol/farmcontrol-ui/pipeline/head This commit looks good
All checks were successful
farmcontrol/farmcontrol-ui/pipeline/head This commit looks good
This commit is contained in:
parent
2c3cf9d02b
commit
657c1dd17e
@ -80,6 +80,7 @@ const Invoices = () => {
|
||||
type='invoice'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -80,6 +80,7 @@ const Payments = () => {
|
||||
type='payment'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
@ -105,4 +106,3 @@ const Payments = () => {
|
||||
}
|
||||
|
||||
export default Payments
|
||||
|
||||
|
||||
@ -80,6 +80,7 @@ const TaxRecords = () => {
|
||||
type='taxRecord'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -86,6 +86,7 @@ const FilamentStocks = () => {
|
||||
type='filamentStock'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -80,6 +80,7 @@ const OrderItems = () => {
|
||||
type='orderItem'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -86,6 +86,7 @@ const PartStocks = () => {
|
||||
type='partStock'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -87,6 +87,7 @@ const ProductStocks = () => {
|
||||
type='productStock'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -80,6 +80,7 @@ const PurchaseOrders = () => {
|
||||
type='purchaseOrder'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -80,6 +80,7 @@ const Shipments = () => {
|
||||
type='shipment'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -86,6 +86,7 @@ const StockAudits = () => {
|
||||
type='stockAudit'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -69,6 +69,7 @@ const StockEvents = () => {
|
||||
type='stockEvent'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
</>
|
||||
|
||||
@ -84,6 +84,7 @@ const StockLocations = () => {
|
||||
type='stockLocation'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -84,6 +84,7 @@ const StockTransfers = () => {
|
||||
type='stockTransfer'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -80,6 +80,7 @@ const AppPasswords = () => {
|
||||
cards={viewMode === 'cards'}
|
||||
visibleColumns={columnVisibility}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
|
||||
@ -62,6 +62,7 @@ const AuditLogs = () => {
|
||||
visibleColumns={columnVisibility}
|
||||
type='auditLog'
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
</>
|
||||
|
||||
@ -80,6 +80,7 @@ const CourierServices = () => {
|
||||
type='courierService'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -79,6 +79,7 @@ const Couriers = () => {
|
||||
type='courier'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -80,6 +80,7 @@ const DocumentJobs = () => {
|
||||
type='documentJob'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -79,6 +79,7 @@ const DocumentPrinters = () => {
|
||||
type='documentPrinter'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -78,6 +78,7 @@ const DocumentSizes = () => {
|
||||
type='documentSize'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -80,6 +80,7 @@ const DocumentTemplates = () => {
|
||||
type='documentTemplate'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -84,6 +84,7 @@ const FilamentSkus = () => {
|
||||
type='filamentSku'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -86,6 +86,7 @@ const Filaments = () => {
|
||||
cards={viewMode === 'cards'}
|
||||
visibleColumns={columnVisibility}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
|
||||
@ -68,6 +68,7 @@ const Files = () => {
|
||||
type='file'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
</>
|
||||
|
||||
@ -85,6 +85,7 @@ const Hosts = () => {
|
||||
cards={viewMode === 'cards'}
|
||||
visibleColumns={columnVisibility}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
|
||||
@ -83,6 +83,7 @@ const Materials = () => {
|
||||
cards={viewMode === 'cards'}
|
||||
visibleColumns={columnVisibility}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
|
||||
@ -80,6 +80,7 @@ const NoteTypes = () => {
|
||||
type='noteType'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -83,6 +83,7 @@ const PartSkus = () => {
|
||||
type='partSku'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -85,6 +85,7 @@ const Parts = (filter) => {
|
||||
cards={viewMode === 'cards'}
|
||||
filter={filter}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -83,6 +83,7 @@ const ProductCategories = () => {
|
||||
cards={viewMode === 'cards'}
|
||||
visibleColumns={columnVisibility}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
|
||||
@ -84,6 +84,7 @@ const ProductSkus = () => {
|
||||
type='productSku'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -355,6 +355,7 @@ const Products = () => {
|
||||
type={'product'}
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -79,6 +79,7 @@ const TaxRates = () => {
|
||||
type='taxRate'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -79,6 +79,7 @@ const Vendors = () => {
|
||||
type='vendor'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -82,6 +82,7 @@ const GCodeFiles = () => {
|
||||
cards={viewMode === 'cards'}
|
||||
visibleColumns={columnVisibility}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -86,6 +86,7 @@ const Jobs = () => {
|
||||
visibleColumns={columnVisibility}
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -71,6 +71,7 @@ const SubJobs = () => {
|
||||
visibleColumns={columnVisibility}
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
</>
|
||||
|
||||
@ -79,6 +79,7 @@ const Clients = () => {
|
||||
type='client'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
@ -101,4 +102,3 @@ const Clients = () => {
|
||||
}
|
||||
|
||||
export default Clients
|
||||
|
||||
|
||||
@ -80,6 +80,7 @@ const Listings = () => {
|
||||
type='listing'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -80,6 +80,7 @@ const Marketplaces = () => {
|
||||
type='marketplace'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -80,6 +80,7 @@ const SalesOrders = () => {
|
||||
type='salesOrder'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
@ -105,4 +106,3 @@ const SalesOrders = () => {
|
||||
}
|
||||
|
||||
export default SalesOrders
|
||||
|
||||
|
||||
@ -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 (
|
||||
<Row
|
||||
gutter={[16, 16]}
|
||||
style={{ overflowY: 'auto', maxHeight: adjustedScrollHeight }}
|
||||
style={{
|
||||
overflowY: 'auto',
|
||||
maxHeight: adjustedScrollHeight
|
||||
}}
|
||||
ref={cardsContainerRef}
|
||||
>
|
||||
{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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user