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