render() {
const { items, classes } = this.props;
return <div className={classes.tableContainer}>
- {items.length > 0 ?
- <Table>
- <TableHead>
- <TableRow>
- {this.mapVisibleColumns(this.renderHeadCell)}
- </TableRow>
- </TableHead>
- <TableBody className={classes.tableBody}>
- {items.map(this.renderBodyRow)}
- </TableBody>
- </Table> : <Typography
- className={classes.noItemsInfo}
- variant="body2"
- gutterBottom>
- No items
- </Typography>}
+ <Table>
+ <TableHead>
+ <TableRow>
+ {this.mapVisibleColumns(this.renderHeadCell)}
+ </TableRow>
+ </TableHead>
+ <TableBody className={classes.tableBody}>
+ {items.map(this.renderBodyRow)}
+ </TableBody>
+ </Table>
</div>;
}
renderHeadCell = (column: DataColumn<T>, index: number) => {
const { name, key, renderHeader, filters, sortDirection } = column;
const { onSortToggle, onFiltersChange } = this.props;
- return <TableCell key={key || index} style={{minWidth: column.width}}>
- return <TableCell key={key || index}>
++ return <TableCell key={key || index} style={{width: column.width, minWidth: column.width}}>
{renderHeader ?
renderHeader() :
filters
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
tableContainer: {
- overflowX: 'auto'
+ overflowX: 'auto',
+ overflowY: 'hidden'
},
tableBody: {
background: theme.palette.background.paper
import { DataColumn, toggleSortDirection, resetSortDirection } from '../../components/data-table/data-column';
import { DataTableFilterItem } from '../../components/data-table-filters/data-table-filters';
import { ContextMenuAction } from '../../components/context-menu/context-menu';
+ import { ResourceKind } from "../../models/resource";
export interface ProjectExplorerContextActions {
onAddToFavourite: (item: ProjectExplorerItem) => void;
interface ProjectExplorerProps {
items: ProjectExplorerItem[];
+ onRowClick: (item: ProjectExplorerItem) => void;
}
interface ProjectExplorerState {
name: "Name",
selected: true,
sortDirection: "asc",
- render: renderName
+ render: renderName,
+ width: "450px"
}, {
name: "Status",
selected: true,
name: "Complete",
selected: true
}],
- render: renderStatus
+ render: renderStatus,
+ width: "75px"
}, {
name: "Type",
selected: true,
name: "Group",
selected: true
}],
- render: item => renderType(item.type),
- render: item => renderType(item.kind)
++ render: item => renderType(item.kind),
+ width: "125px"
}, {
name: "Owner",
selected: true,
- render: item => renderOwner(item.owner)
+ render: item => renderOwner(item.owner),
+ width: "200px"
}, {
name: "File size",
selected: true,
sortDirection: "none",
- render: item => renderFileSize(item.fileSize)
+ render: item => renderFileSize(item.fileSize),
+ width: "50px"
}, {
name: "Last modified",
selected: true,
- render: item => renderDate(item.lastModified)
+ render: item => renderDate(item.lastModified),
+ width: "150px"
}]
};
rowsPerPage={this.state.rowsPerPage}
onColumnToggle={this.toggleColumn}
onFiltersChange={this.changeFilters}
- onRowClick={console.log}
+ onRowClick={this.props.onRowClick}
onSortToggle={this.toggleSort}
onSearch={this.search}
onContextAction={this.executeAction}
</Grid>
</Grid>;
+
const renderIcon = (item: ProjectExplorerItem) => {
- switch (item.type) {
- case "arvados#group":
- return <i className="fas fa-folder fa-lg" />;
- case "arvados#groupList":
- return <i className="fas fa-th fa-lg" />;
+ switch (item.kind) {
+ case ResourceKind.LEVEL_UP:
+ return <i className="icon-level-up" style={{fontSize: "1rem"}}/>;
+ case ResourceKind.PROJECT:
+ return <i className="fas fa-folder fa-lg"/>;
+ case ResourceKind.COLLECTION:
+ return <i className="fas fa-th fa-lg"/>;
default:
return <i />;
}