// Copyright (C) The Arvados Authors. All rights reserved. // // SPDX-License-Identifier: AGPL-3.0 import * as React from 'react'; import { Grid, Paper, Toolbar, StyleRulesCallback, withStyles, WithStyles, TablePagination, IconButton, Tooltip, Button } from '@material-ui/core'; import { ColumnSelector } from "~/components/column-selector/column-selector"; import { DataTable, DataColumns, DataTableFetchMode } from "~/components/data-table/data-table"; import { DataColumn } from "~/components/data-table/data-column"; import { SearchInput } from '~/components/search-input/search-input'; import { ArvadosTheme } from "~/common/custom-theme"; import { createTree } from '~/models/tree'; import { DataTableFilters } from '~/components/data-table-filters/data-table-filters-tree'; import { MoreOptionsIcon } from '~/components/icon/icon'; import { PaperProps } from '@material-ui/core/Paper'; type CssRules = 'searchBox' | "toolbar" | "toolbarUnderTitle" | "footer" | "root" | 'moreOptionsButton' | 'title'; const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ searchBox: { paddingBottom: theme.spacing.unit * 2 }, toolbar: { paddingTop: theme.spacing.unit * 2 }, toolbarUnderTitle: { paddingTop: 0 }, footer: { overflow: 'auto' }, root: { height: '100%' }, moreOptionsButton: { padding: 0 }, title: { paddingLeft: theme.spacing.unit * 3, paddingTop: theme.spacing.unit * 3, fontSize: '18px' } }); interface DataExplorerDataProps { fetchMode: DataTableFetchMode; items: T[]; itemsAvailable: number; columns: DataColumns; searchValue: string; rowsPerPage: number; rowsPerPageOptions: number[]; page: number; contextMenuColumn: boolean; dataTableDefaultView?: React.ReactNode; working?: boolean; hideColumnSelector?: boolean; paperProps?: PaperProps; actions?: React.ReactNode; hideSearchInput?: boolean; title?: React.ReactNode; paperKey?: string; currentItemUuid: string; } interface DataExplorerActionProps { onSetColumns: (columns: DataColumns) => void; onSearch: (value: string) => void; onRowClick: (item: T) => void; onRowDoubleClick: (item: T) => void; onColumnToggle: (column: DataColumn) => void; onContextMenu: (event: React.MouseEvent, item: T) => void; onSortToggle: (column: DataColumn) => void; onFiltersChange: (filters: DataTableFilters, column: DataColumn) => void; onChangePage: (page: number) => void; onChangeRowsPerPage: (rowsPerPage: number) => void; onLoadMore: (page: number) => void; extractKey?: (item: T) => React.Key; } type DataExplorerProps = DataExplorerDataProps & DataExplorerActionProps & WithStyles; export const DataExplorer = withStyles(styles)( class DataExplorerGeneric extends React.Component> { componentDidMount() { if (this.props.onSetColumns) { this.props.onSetColumns(this.props.columns); } } render() { const { columns, onContextMenu, onFiltersChange, onSortToggle, working, extractKey, rowsPerPage, rowsPerPageOptions, onColumnToggle, searchValue, onSearch, items, itemsAvailable, onRowClick, onRowDoubleClick, classes, dataTableDefaultView, hideColumnSelector, actions, paperProps, hideSearchInput, paperKey, fetchMode, currentItemUuid, title } = this.props; return {title &&
{title}
} {(!hideColumnSelector || !hideSearchInput) &&
{!hideSearchInput && }
{actions} {!hideColumnSelector && }
} onRowClick(item)} onContextMenu={onContextMenu} onRowDoubleClick={(_, item: T) => onRowDoubleClick(item)} onFiltersChange={onFiltersChange} onSortToggle={onSortToggle} extractKey={extractKey} working={working} defaultView={dataTableDefaultView} currentItemUuid={currentItemUuid} currentRoute={paperKey} /> {fetchMode === DataTableFetchMode.PAGINATED ? : }
; } changePage = (event: React.MouseEvent, page: number) => { this.props.onChangePage(page); } changeRowsPerPage: React.ChangeEventHandler = (event) => { this.props.onChangeRowsPerPage(parseInt(event.target.value, 10)); } loadMore = () => { this.props.onLoadMore(this.props.page + 1); } renderContextMenuTrigger = (item: T) => this.props.onContextMenu(event, item)}> contextMenuColumn: DataColumn = { name: "Actions", selected: true, configurable: false, filters: createTree(), key: "context-actions", render: this.renderContextMenuTrigger }; } );