src/components/data-table/data-table.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import { Table, TableBody, TableRow, TableCell, TableHead, TableSortLabel, StyleRulesCallback, Theme, WithStyles, withStyles, IconButton } from '@material-ui/core';
   7 import classnames from 'classnames';
   8 import { DataColumn, SortDirection } from './data-column';
   9 import { DataTableDefaultView } from '../data-table-default-view/data-table-default-view';
  10 import { DataTableFilters } from '../data-table-filters/data-table-filters-tree';
  11 import { DataTableFiltersPopover } from '../data-table-filters/data-table-filters-popover';
  12 import { countNodes, getTreeDirty } from 'models/tree';
  13 import { IconType, PendingIcon } from 'components/icon/icon';
  14 import { SvgIconProps } from '@material-ui/core/SvgIcon';
  15 import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
  16 //lisa
  17 import { Checkbox } from '@material-ui/core';
  18 import { createTree } from 'models/tree';
  19
  20 export type DataColumns<I, R> = Array<DataColumn<I, R>>;
  21
  22 export enum DataTableFetchMode {
  23     PAGINATED,
  24     INFINITE,
  25 }
  26
  27 export interface DataTableDataProps<I> {
  28     items: I[];
  29     columns: DataColumns<I, any>;
  30     onRowClick: (event: React.MouseEvent<HTMLTableRowElement>, item: I) => void;
  31     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: I) => void;
  32     onRowDoubleClick: (event: React.MouseEvent<HTMLTableRowElement>, item: I) => void;
  33     onSortToggle: (column: DataColumn<I, any>) => void;
  34     onFiltersChange: (filters: DataTableFilters, column: DataColumn<I, any>) => void;
  35     extractKey?: (item: I) => React.Key;
  36     working?: boolean;
  37     defaultViewIcon?: IconType;
  38     defaultViewMessages?: string[];
  39     currentItemUuid?: string;
  40     currentRoute?: string;
  41 }
  42
  43 type CssRules = 'tableBody' | 'root' | 'content' | 'noItemsInfo' | 'checkBoxCell' | 'tableCell' | 'arrow' | 'arrowButton' | 'tableCellWorkflows' | 'loader';
  44
  45 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
  46     root: {
  47         width: '100%',
  48     },
  49     content: {
  50         display: 'inline-block',
  51         width: '100%',
  52     },
  53     tableBody: {
  54         background: theme.palette.background.paper,
  55     },
  56     loader: {
  57         left: '50%',
  58         marginLeft: '-84px',
  59         position: 'absolute',
  60     },
  61     noItemsInfo: {
  62         textAlign: 'center',
  63         padding: theme.spacing.unit,
  64     },
  65     checkBoxCell: {
  66         // border: '1px dotted green',
  67         padding: '0',
  68     },
  69     tableCell: {
  70         wordWrap: 'break-word',
  71         paddingRight: '24px',
  72         color: '#737373',
  73     },
  74     tableCellWorkflows: {
  75         '&:nth-last-child(2)': {
  76             padding: '0px',
  77             maxWidth: '48px',
  78         },
  79         '&:last-child': {
  80             padding: '0px',
  81             paddingRight: '24px',
  82             width: '48px',
  83         },
  84     },
  85     arrow: {
  86         margin: 0,
  87     },
  88     arrowButton: {
  89         color: theme.palette.text.primary,
  90     },
  91 });
  92
  93 const checkBoxColumn: DataColumn<any, any> = {
  94     name: 'foo',
  95     selected: true,
  96     configurable: false,
  97     filters: createTree(),
  98     render: () => <></>,
  99 };
 100
 101 type DataTableProps<T> = DataTableDataProps<T> & WithStyles<CssRules>;
 102
 103 export const DataTable = withStyles(styles)(
 104     class Component<T> extends React.Component<DataTableProps<T>> {
 105         handleResourceSelect = (uuid) => {
 106             console.log(uuid);
 107         };
 108         render() {
 109             const { items, classes, working } = this.props;
 110             this.props.columns.unshift(checkBoxColumn);
 111             return (
 112                 <div className={classes.root}>
 113                     <div className={classes.content}>
 114                         <Table>
 115                             <TableHead>
 116                                 <TableRow>{this.mapVisibleColumns(this.renderHeadCell)}</TableRow>
 117                             </TableHead>
 118                             <TableBody className={classes.tableBody}>{!working && items.map(this.renderBodyRow)}</TableBody>
 119                         </Table>
 120                         {!!working && (
 121                             <div className={classes.loader}>
 122                                 <DataTableDefaultView icon={PendingIcon} messages={['Loading data, please wait.']} />
 123                             </div>
 124                         )}
 125                         {items.length === 0 && !working && this.renderNoItemsPlaceholder(this.props.columns)}
 126                     </div>
 127                 </div>
 128             );
 129         }
 130
 131         renderNoItemsPlaceholder = (columns: DataColumns<T, any>) => {
 132             const dirty = columns.some((column) => getTreeDirty('')(column.filters));
 133             return <DataTableDefaultView icon={this.props.defaultViewIcon} messages={this.props.defaultViewMessages} filtersApplied={dirty} />;
 134         };
 135
 136         renderHeadCell = (column: DataColumn<T, any>, index: number) => {
 137             const { name, key, renderHeader, filters, sort } = column;
 138             const { onSortToggle, onFiltersChange, classes } = this.props;
 139             return (
 140                 <TableCell className={classes.tableCell} key={key || index}>
 141                     {renderHeader ? (
 142                         renderHeader()
 143                     ) : countNodes(filters) > 0 ? (
 144                         <DataTableFiltersPopover
 145                             name={`${name} filters`}
 146                             mutuallyExclusive={column.mutuallyExclusiveFilters}
 147                             onChange={(filters) => onFiltersChange && onFiltersChange(filters, column)}
 148                             filters={filters}
 149                         >
 150                             {name}
 151                         </DataTableFiltersPopover>
 152                     ) : sort ? (
 153                         <TableSortLabel
 154                             active={sort.direction !== SortDirection.NONE}
 155                             direction={sort.direction !== SortDirection.NONE ? sort.direction : undefined}
 156                             IconComponent={this.ArrowIcon}
 157                             hideSortIcon
 158                             onClick={() => onSortToggle && onSortToggle(column)}
 159                         >
 160                             {name}
 161                         </TableSortLabel>
 162                     ) : (
 163                         <span>{name}</span>
 164                     )}
 165                 </TableCell>
 166             );
 167         };
 168
 169         ArrowIcon = ({ className, ...props }: SvgIconProps) => (
 170             <IconButton component='span' className={this.props.classes.arrowButton} tabIndex={-1}>
 171                 <ArrowDownwardIcon {...props} className={classnames(className, this.props.classes.arrow)} />
 172             </IconButton>
 173         );
 174
 175         renderBodyRow = (item: any, index: number) => {
 176             const { onRowClick, onRowDoubleClick, extractKey, classes, currentItemUuid, currentRoute } = this.props;
 177             return (
 178                 <TableRow
 179                     hover
 180                     key={extractKey ? extractKey(item) : index}
 181                     onClick={(event) => onRowClick && onRowClick(event, item)}
 182                     onContextMenu={this.handleRowContextMenu(item)}
 183                     onDoubleClick={(event) => onRowDoubleClick && onRowDoubleClick(event, item)}
 184                     selected={item === currentItemUuid}
 185                 >
 186                     {this.mapVisibleColumns((column, index) => {
 187                         return index === 0 ? (
 188                             <TableCell key={column.key || index} className={classes.checkBoxCell}>
 189                                 <Checkbox color='primary' onChange={() => this.handleResourceSelect(item)} />
 190                             </TableCell>
 191                         ) : (
 192                             <TableCell key={column.key || index} className={currentRoute === '/workflows' ? classes.tableCellWorkflows : classes.tableCell}>
 193                                 {column.render(item)}
 194                             </TableCell>
 195                         );
 196                     })}
 197                 </TableRow>
 198             );
 199         };
 200
 201         mapVisibleColumns = (fn: (column: DataColumn<T, any>, index: number) => React.ReactElement<any>) => {
 202             return this.props.columns.filter((column) => column.selected).map(fn);
 203         };
 204
 205         handleRowContextMenu = (item: T) => (event: React.MouseEvent<HTMLElement>) => this.props.onContextMenu(event, item);
 206     }
 207 );