1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
6 import { ProjectExplorerItem } from './project-explorer-item';
7 import { Grid, Typography, Button, Toolbar, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
8 import { formatDate, formatFileSize } from '../../common/formatters';
9 import DataExplorer from '../data-explorer/data-explorer';
10 import { DataColumn } from '../../components/data-table/data-column';
11 import { DataTableFilterItem } from '../../components/data-table-filters/data-table-filters';
12 import { ContextMenuAction } from '../../components/context-menu/context-menu';
13 import { DispatchProp, connect } from 'react-redux';
14 import actions from "../../store/data-explorer/data-explorer-action";
15 import { DataColumns } from '../../components/data-table/data-table';
17 export const PROJECT_EXPLORER_ID = "projectExplorer";
18 class ProjectExplorer extends React.Component<DispatchProp & WithStyles<CssRules>> {
21 <div className={this.props.classes.toolbar}>
22 <Button color="primary" variant="raised" className={this.props.classes.button}>
25 <Button color="primary" variant="raised" className={this.props.classes.button}>
28 <Button color="primary" variant="raised" className={this.props.classes.button}>
33 id={PROJECT_EXPLORER_ID}
34 contextActions={contextMenuActions}
35 onColumnToggle={this.toggleColumn}
36 onFiltersChange={this.changeFilters}
37 onRowClick={console.log}
38 onSortToggle={this.toggleSort}
39 onSearch={this.search}
40 onContextAction={this.executeAction}
41 onChangePage={this.changePage}
42 onChangeRowsPerPage={this.changeRowsPerPage} />;
47 this.props.dispatch(actions.SET_COLUMNS({ id: PROJECT_EXPLORER_ID, columns }));
50 toggleColumn = (toggledColumn: DataColumn<ProjectExplorerItem>) => {
51 this.props.dispatch(actions.TOGGLE_COLUMN({ id: PROJECT_EXPLORER_ID, columnName: toggledColumn.name }));
54 toggleSort = (toggledColumn: DataColumn<ProjectExplorerItem>) => {
55 this.props.dispatch(actions.TOGGLE_SORT({ id: PROJECT_EXPLORER_ID, columnName: toggledColumn.name }));
58 changeFilters = (filters: DataTableFilterItem[], updatedColumn: DataColumn<ProjectExplorerItem>) => {
59 this.props.dispatch(actions.SET_FILTERS({ id: PROJECT_EXPLORER_ID, columnName: updatedColumn.name, filters }));
62 executeAction = (action: ContextMenuAction, item: ProjectExplorerItem) => {
63 alert(`Executing ${action.name} on ${item.name}`);
66 search = (searchValue: string) => {
67 this.props.dispatch(actions.SET_SEARCH_VALUE({ id: PROJECT_EXPLORER_ID, searchValue }));
70 changePage = (page: number) => {
71 this.props.dispatch(actions.SET_PAGE({ id: PROJECT_EXPLORER_ID, page }));
74 changeRowsPerPage = (rowsPerPage: number) => {
75 this.props.dispatch(actions.SET_ROWS_PER_PAGE({ id: PROJECT_EXPLORER_ID, rowsPerPage }));
79 type CssRules = "toolbar" | "button";
81 const styles: StyleRulesCallback<CssRules> = theme => ({
83 paddingBottom: theme.spacing.unit * 3,
87 marginLeft: theme.spacing.unit
91 const renderName = (item: ProjectExplorerItem) =>
101 <Typography color="primary">
107 const renderIcon = (item: ProjectExplorerItem) => {
109 case "arvados#group":
110 return <i className="fas fa-folder fa-lg" />;
111 case "arvados#groupList":
112 return <i className="fas fa-th fa-lg" />;
118 const renderDate = (date: string) =>
123 const renderFileSize = (fileSize?: number) =>
125 {formatFileSize(fileSize)}
128 const renderOwner = (owner: string) =>
129 <Typography noWrap color="primary">
133 const renderType = (type: string) =>
138 const renderStatus = (item: ProjectExplorerItem) =>
139 <Typography noWrap align="center">
143 const columns: DataColumns<ProjectExplorerItem> = [{
146 sortDirection: "asc",
169 render: item => renderType(item.type)
173 render: item => renderOwner(item.owner)
177 sortDirection: "none",
178 render: item => renderFileSize(item.fileSize)
180 name: "Last modified",
182 render: item => renderDate(item.lastModified)
185 const contextMenuActions = [[{
186 icon: "fas fa-users fa-fw",
189 icon: "fas fa-sign-out-alt fa-fw",
192 icon: "fas fa-star fa-fw",
193 name: "Add to favourite"
195 icon: "fas fa-edit fa-fw",
198 icon: "fas fa-copy fa-fw",
201 icon: "fas fa-download fa-fw",
204 icon: "fas fa-trash-alt fa-fw",
209 export default withStyles(styles)(connect()(ProjectExplorer));