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