diff --git a/src/components/ListPage.tsx b/src/components/ListPage.tsx index e2436d59..5bca585f 100644 --- a/src/components/ListPage.tsx +++ b/src/components/ListPage.tsx @@ -74,12 +74,24 @@ function ActiveFilterChips() { ) } +type ListPageToolbarProps = { + hideFilter?: boolean + hideColumns?: boolean + hideDensity?: boolean + hideExport?: boolean +} + // Toolbar inside the DataGrid: // - Row 1 (right-aligned): filter, columns, density, export buttons // - Row 2 (only when filters are active): dismissible filter chips // The search input lives OUTSIDE the DataGrid to avoid focus-loss on re-render. // Built-in toolbar buttons are used (not custom icon buttons) so panels anchor correctly. -function ListPageToolbar() { +function ListPageToolbar({ + hideFilter = false, + hideColumns = false, + hideDensity = false, + hideExport = false, +}: ListPageToolbarProps) { return ( - - - - + {!hideFilter && ( + + )} + + {!hideColumns && ( + + )} + + {!hideDensity && ( + + )} + + {!hideExport && ( + + )} + ) @@ -128,6 +154,7 @@ type ListPageProps = { headerButtons?: any disableRowClick?: boolean + toolbarOptions?: ListPageToolbarProps searchMode?: 'client' | 'server' searchValue?: string onSearchChange?: (value: string) => void @@ -148,6 +175,8 @@ export const ListPage: React.FC = ({ isLoading, headerButtons, disableRowClick = false, + + toolbarOptions, searchMode = 'client', searchValue, onSearchChange, @@ -221,6 +250,10 @@ export const ListPage: React.FC = ({ } } + const toolbarConfig = { + hideExport: restDataGridProps.paginationMode === 'server', + } + return ( = ({ showToolbar slots={{ toolbar: ListPageToolbar }} slotProps={{ + toolbar: { + ...toolbarOptions, + hideExport: + toolbarOptions?.hideExport ?? + restDataGridProps.paginationMode === 'server', + }, loadingOverlay: { variant: 'linear-progress', noRowsVariant: 'skeleton', diff --git a/src/pages/ocotillo/thing/list.tsx b/src/pages/ocotillo/thing/list.tsx index b29c4f7b..67554f7b 100644 --- a/src/pages/ocotillo/thing/list.tsx +++ b/src/pages/ocotillo/thing/list.tsx @@ -245,7 +245,9 @@ export const WellList: React.FC = () => { id: contact.id, }, }} - onClick={(e) => e.stopPropagation()} + onClick={(e: React.MouseEvent) => + e.stopPropagation() + } > {contact.name} @@ -265,7 +267,8 @@ export const WellList: React.FC = () => { { field: 'well_driller_name', headerName: WellListColumnLabels.driller, - description: 'Drilling company name when it was recorded for this well.', + description: + 'Drilling company name when it was recorded for this well.', type: 'string', minWidth: 150, flex: 1,