1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
6 import { ProjectPanelItem } from './project-panel-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 "../../views-components/data-explorer/data-explorer";
10 import { DataColumn, toggleSortDirection } 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';
16 import { ResourceKind } from "../../models/resource";
17 import { RouteComponentProps } from 'react-router';
18 import { RootState } from '../../store/store';
20 export const PROJECT_PANEL_ID = "projectPanel";
22 type ProjectPanelProps = {
23 currentItemId: string,
24 onItemClick: (item: ProjectPanelItem) => void,
25 onItemRouteChange: (itemId: string) => void
28 & WithStyles<CssRules>
29 & RouteComponentProps<{ id: string }>;
30 class ProjectPanel extends React.Component<ProjectPanelProps> {
33 <div className={this.props.classes.toolbar}>
34 <Button color="primary" variant="raised" className={this.props.classes.button}>
37 <Button color="primary" variant="raised" className={this.props.classes.button}>
40 <Button color="primary" variant="raised" className={this.props.classes.button}>
46 contextActions={contextMenuActions}
47 onColumnToggle={this.toggleColumn}
48 onFiltersChange={this.changeFilters}
49 onRowClick={this.props.onItemClick}
50 onSortToggle={this.toggleSort}
51 onSearch={this.search}
52 onContextAction={this.executeAction}
53 onChangePage={this.changePage}
54 onChangeRowsPerPage={this.changeRowsPerPage} />;
59 this.props.dispatch(actions.SET_COLUMNS({ id: PROJECT_PANEL_ID, columns }));
62 componentWillReceiveProps({ match, currentItemId }: ProjectPanelProps) {
63 if (match.params.id !== currentItemId) {
64 this.props.onItemRouteChange(match.params.id);
68 toggleColumn = (toggledColumn: DataColumn<ProjectPanelItem>) => {
69 this.props.dispatch(actions.TOGGLE_COLUMN({ id: PROJECT_PANEL_ID, columnName: toggledColumn.name }));
72 toggleSort = (column: DataColumn<ProjectPanelItem>) => {
73 this.props.dispatch(actions.TOGGLE_SORT({ id: PROJECT_PANEL_ID, columnName: column.name }));
76 changeFilters = (filters: DataTableFilterItem[], column: DataColumn<ProjectPanelItem>) => {
77 this.props.dispatch(actions.SET_FILTERS({ id: PROJECT_PANEL_ID, columnName: column.name, filters }));
80 executeAction = (action: ContextMenuAction, item: ProjectPanelItem) => {
81 alert(`Executing ${action.name} on ${item.name}`);
84 search = (searchValue: string) => {
85 this.props.dispatch(actions.SET_SEARCH_VALUE({ id: PROJECT_PANEL_ID, searchValue }));
88 changePage = (page: number) => {
89 this.props.dispatch(actions.SET_PAGE({ id: PROJECT_PANEL_ID, page }));
92 changeRowsPerPage = (rowsPerPage: number) => {
93 this.props.dispatch(actions.SET_ROWS_PER_PAGE({ id: PROJECT_PANEL_ID, rowsPerPage }));
98 type CssRules = "toolbar" | "button";
100 const styles: StyleRulesCallback<CssRules> = theme => ({
102 paddingBottom: theme.spacing.unit * 3,
106 marginLeft: theme.spacing.unit
110 const renderName = (item: ProjectPanelItem) =>
120 <Typography color="primary">
127 const renderIcon = (item: ProjectPanelItem) => {
129 case ResourceKind.PROJECT:
130 return <i className="fas fa-folder fa-lg" />;
131 case ResourceKind.COLLECTION:
132 return <i className="fas fa-th fa-lg" />;
138 const renderDate = (date: string) =>
143 const renderFileSize = (fileSize?: number) =>
145 {formatFileSize(fileSize)}
148 const renderOwner = (owner: string) =>
149 <Typography noWrap color="primary">
153 const renderType = (type: string) =>
158 const renderStatus = (item: ProjectPanelItem) =>
159 <Typography noWrap align="center">
163 const columns: DataColumns<ProjectPanelItem> = [{
166 sortDirection: "desc",
172 render: renderStatus,
184 render: item => renderType(item.kind),
189 render: item => renderOwner(item.owner),
194 render: item => renderFileSize(item.fileSize),
197 name: "Last modified",
199 sortDirection: "none",
200 render: item => renderDate(item.lastModified),
204 const contextMenuActions = [[{
205 icon: "fas fa-users fa-fw",
208 icon: "fas fa-sign-out-alt fa-fw",
211 icon: "fas fa-star fa-fw",
212 name: "Add to favourite"
214 icon: "fas fa-edit fa-fw",
217 icon: "fas fa-copy fa-fw",
220 icon: "fas fa-download fa-fw",
223 icon: "fas fa-trash-alt fa-fw",
228 export default withStyles(styles)(
229 connect((state: RootState) => ({ currentItemId: state.projects.currentItemId }))(