src/views/project-panel/project-panel.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   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';
  19
  20 export const PROJECT_PANEL_ID = "projectPanel";
  21
  22 type ProjectPanelProps = {
  23     currentItemId: string,
  24     onItemClick: (item: ProjectPanelItem) => void,
  25     onItemRouteChange: (itemId: string) => void
  26 }
  27     & DispatchProp
  28     & WithStyles<CssRules>
  29     & RouteComponentProps<{ id: string }>;
  30 class ProjectPanel extends React.Component<ProjectPanelProps> {
  31     render() {
  32         return <div>
  33             <div className={this.props.classes.toolbar}>
  34                 <Button color="primary" variant="raised" className={this.props.classes.button}>
  35                     Create a collection
  36                 </Button>
  37                 <Button color="primary" variant="raised" className={this.props.classes.button}>
  38                     Run a process
  39                 </Button>
  40                 <Button color="primary" variant="raised" className={this.props.classes.button}>
  41                     Create a project
  42                 </Button>
  43             </div>
  44             <DataExplorer
  45                 id={PROJECT_PANEL_ID}
  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} />;
  55         </div>;
  56     }
  57
  58     componentDidMount() {
  59         this.props.dispatch(actions.SET_COLUMNS({ id: PROJECT_PANEL_ID, columns }));
  60     }
  61
  62     componentWillReceiveProps({ match, currentItemId }: ProjectPanelProps) {
  63         if (match.params.id !== currentItemId) {
  64             this.props.onItemRouteChange(match.params.id);
  65         }
  66     }
  67
  68     toggleColumn = (toggledColumn: DataColumn<ProjectPanelItem>) => {
  69         this.props.dispatch(actions.TOGGLE_COLUMN({ id: PROJECT_PANEL_ID, columnName: toggledColumn.name }));
  70     }
  71
  72     toggleSort = (column: DataColumn<ProjectPanelItem>) => {
  73         this.props.dispatch(actions.TOGGLE_SORT({ id: PROJECT_PANEL_ID, columnName: column.name }));
  74     }
  75
  76     changeFilters = (filters: DataTableFilterItem[], column: DataColumn<ProjectPanelItem>) => {
  77         this.props.dispatch(actions.SET_FILTERS({ id: PROJECT_PANEL_ID, columnName: column.name, filters }));
  78     }
  79
  80     executeAction = (action: ContextMenuAction, item: ProjectPanelItem) => {
  81         alert(`Executing ${action.name} on ${item.name}`);
  82     }
  83
  84     search = (searchValue: string) => {
  85         this.props.dispatch(actions.SET_SEARCH_VALUE({ id: PROJECT_PANEL_ID, searchValue }));
  86     }
  87
  88     changePage = (page: number) => {
  89         this.props.dispatch(actions.SET_PAGE({ id: PROJECT_PANEL_ID, page }));
  90     }
  91
  92     changeRowsPerPage = (rowsPerPage: number) => {
  93         this.props.dispatch(actions.SET_ROWS_PER_PAGE({ id: PROJECT_PANEL_ID, rowsPerPage }));
  94     }
  95
  96 }
  97
  98 type CssRules = "toolbar" | "button";
  99
 100 const styles: StyleRulesCallback<CssRules> = theme => ({
 101     toolbar: {
 102         paddingBottom: theme.spacing.unit * 3,
 103         textAlign: "right"
 104     },
 105     button: {
 106         marginLeft: theme.spacing.unit
 107     }
 108 });
 109
 110 const renderName = (item: ProjectPanelItem) =>
 111     <Grid
 112         container
 113         alignItems="center"
 114         wrap="nowrap"
 115         spacing={16}>
 116         <Grid item>
 117             {renderIcon(item)}
 118         </Grid>
 119         <Grid item>
 120             <Typography color="primary">
 121                 {item.name}
 122             </Typography>
 123         </Grid>
 124     </Grid>;
 125
 126
 127 const renderIcon = (item: ProjectPanelItem) => {
 128     switch (item.kind) {
 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" />;
 133         default:
 134             return <i />;
 135     }
 136 };
 137
 138 const renderDate = (date: string) =>
 139     <Typography noWrap>
 140         {formatDate(date)}
 141     </Typography>;
 142
 143 const renderFileSize = (fileSize?: number) =>
 144     <Typography noWrap>
 145         {formatFileSize(fileSize)}
 146     </Typography>;
 147
 148 const renderOwner = (owner: string) =>
 149     <Typography noWrap color="primary">
 150         {owner}
 151     </Typography>;
 152
 153 const renderType = (type: string) =>
 154     <Typography noWrap>
 155         {type}
 156     </Typography>;
 157
 158 const renderStatus = (item: ProjectPanelItem) =>
 159     <Typography noWrap align="center">
 160         {item.status || "-"}
 161     </Typography>;
 162
 163 const columns: DataColumns<ProjectPanelItem> = [{
 164     name: "Name",
 165     selected: true,
 166     sortDirection: "desc",
 167     render: renderName,
 168     width: "450px"
 169 }, {
 170     name: "Status",
 171     selected: true,
 172     render: renderStatus,
 173     width: "75px"
 174 }, {
 175     name: "Type",
 176     selected: true,
 177     filters: [{
 178         name: "Collection",
 179         selected: true
 180     }, {
 181         name: "Project",
 182         selected: true
 183     }],
 184     render: item => renderType(item.kind),
 185     width: "125px"
 186 }, {
 187     name: "Owner",
 188     selected: true,
 189     render: item => renderOwner(item.owner),
 190     width: "200px"
 191 }, {
 192     name: "File size",
 193     selected: true,
 194     render: item => renderFileSize(item.fileSize),
 195     width: "50px"
 196 }, {
 197     name: "Last modified",
 198     selected: true,
 199     sortDirection: "none",
 200     render: item => renderDate(item.lastModified),
 201     width: "150px"
 202 }];
 203
 204 const contextMenuActions = [[{
 205     icon: "fas fa-users fa-fw",
 206     name: "Share"
 207 }, {
 208     icon: "fas fa-sign-out-alt fa-fw",
 209     name: "Move to"
 210 }, {
 211     icon: "fas fa-star fa-fw",
 212     name: "Add to favourite"
 213 }, {
 214     icon: "fas fa-edit fa-fw",
 215     name: "Rename"
 216 }, {
 217     icon: "fas fa-copy fa-fw",
 218     name: "Make a copy"
 219 }, {
 220     icon: "fas fa-download fa-fw",
 221     name: "Download"
 222 }], [{
 223     icon: "fas fa-trash-alt fa-fw",
 224     name: "Remove"
 225 }
 226 ]];
 227
 228 export default withStyles(styles)(
 229     connect((state: RootState) => ({ currentItemId: state.projects.currentItemId }))(
 230         ProjectPanel));