src/views-components/project-explorer/project-explorer.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 { ProjectExplorerItem } from './project-explorer-item';
   7 import { Grid, Typography } from '@material-ui/core';
   8 import { formatDate, formatFileSize } from '../../common/formatters';
   9 import DataExplorer from '../../components/data-explorer/data-explorer';
  10 import { DataColumn, toggleSortDirection, resetSortDirection } 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 { ResourceKind } from "../../models/resource";
  14
  15 export interface ProjectExplorerContextActions {
  16     onAddToFavourite: (item: ProjectExplorerItem) => void;
  17     onCopy: (item: ProjectExplorerItem) => void;
  18     onDownload: (item: ProjectExplorerItem) => void;
  19     onMoveTo: (item: ProjectExplorerItem) => void;
  20     onRemove: (item: ProjectExplorerItem) => void;
  21     onRename: (item: ProjectExplorerItem) => void;
  22     onShare: (item: ProjectExplorerItem) => void;
  23 }
  24
  25 interface ProjectExplorerProps {
  26     items: ProjectExplorerItem[];
  27     onRowClick: (item: ProjectExplorerItem) => void;
  28     onToggleSort: (toggledColumn: DataColumn<ProjectExplorerItem>) => void;
  29 }
  30
  31 interface ProjectExplorerState {
  32     columns: Array<DataColumn<ProjectExplorerItem>>;
  33     searchValue: string;
  34     page: number;
  35     rowsPerPage: number;
  36 }
  37
  38 class ProjectExplorer extends React.Component<ProjectExplorerProps, ProjectExplorerState> {
  39     state: ProjectExplorerState = {
  40         searchValue: "",
  41         page: 0,
  42         rowsPerPage: 10,
  43         columns: [{
  44             name: "Name",
  45             selected: true,
  46             sortDirection: "desc",
  47             render: renderName,
  48             width: "450px"
  49         }, {
  50             name: "Status",
  51             selected: true,
  52             filters: [{
  53                 name: "In progress",
  54                 selected: true
  55             }, {
  56                 name: "Complete",
  57                 selected: true
  58             }],
  59             render: renderStatus,
  60             width: "75px"
  61         }, {
  62             name: "Type",
  63             selected: true,
  64             filters: [{
  65                 name: "Collection",
  66                 selected: true
  67             }, {
  68                 name: "Group",
  69                 selected: true
  70             }],
  71             render: item => renderType(item.kind),
  72             width: "125px"
  73         }, {
  74             name: "Owner",
  75             selected: true,
  76             render: item => renderOwner(item.owner),
  77             width: "200px"
  78         }, {
  79             name: "File size",
  80             selected: true,
  81             render: item => renderFileSize(item.fileSize),
  82             width: "50px"
  83         }, {
  84             name: "Last modified",
  85             selected: true,
  86             sortDirection: "none",
  87             render: item => renderDate(item.lastModified),
  88             width: "150px"
  89         }]
  90     };
  91
  92     contextMenuActions = [[{
  93         icon: "fas fa-users fa-fw",
  94         name: "Share"
  95     }, {
  96         icon: "fas fa-sign-out-alt fa-fw",
  97         name: "Move to"
  98     }, {
  99         icon: "fas fa-star fa-fw",
 100         name: "Add to favourite"
 101     }, {
 102         icon: "fas fa-edit fa-fw",
 103         name: "Rename"
 104     }, {
 105         icon: "fas fa-copy fa-fw",
 106         name: "Make a copy"
 107     }, {
 108         icon: "fas fa-download fa-fw",
 109         name: "Download"
 110     }], [{
 111         icon: "fas fa-trash-alt fa-fw",
 112         name: "Remove"
 113     }
 114     ]];
 115
 116     render() {
 117         return <DataExplorer
 118             items={this.props.items}
 119             columns={this.state.columns}
 120             contextActions={this.contextMenuActions}
 121             searchValue={this.state.searchValue}
 122             page={this.state.page}
 123             rowsPerPage={this.state.rowsPerPage}
 124             onColumnToggle={this.toggleColumn}
 125             onFiltersChange={this.changeFilters}
 126             onRowClick={this.props.onRowClick}
 127             onSortToggle={this.toggleSort}
 128             onSearch={this.search}
 129             onContextAction={this.executeAction}
 130             onChangePage={this.changePage}
 131             onChangeRowsPerPage={this.changeRowsPerPage} />;
 132     }
 133
 134     toggleColumn = (toggledColumn: DataColumn<ProjectExplorerItem>) => {
 135         this.setState({
 136             columns: this.state.columns.map(column =>
 137                 column.name === toggledColumn.name
 138                     ? { ...column, selected: !column.selected }
 139                     : column
 140             )
 141         });
 142     }
 143
 144     toggleSort = (column: DataColumn<ProjectExplorerItem>) => {
 145         const columns = this.state.columns.map(c =>
 146             c.name === column.name
 147                 ? toggleSortDirection(c)
 148                 : resetSortDirection(c)
 149         );
 150         this.setState({ columns });
 151         const toggledColumn = columns.find(c => c.name === column.name);
 152         if (toggledColumn) {
 153             this.props.onToggleSort(toggledColumn);
 154         }
 155     }
 156
 157     changeFilters = (filters: DataTableFilterItem[], updatedColumn: DataColumn<ProjectExplorerItem>) => {
 158         this.setState({
 159             columns: this.state.columns.map(column =>
 160                 column.name === updatedColumn.name
 161                     ? { ...column, filters }
 162                     : column
 163             )
 164         });
 165     }
 166
 167     executeAction = (action: ContextMenuAction, item: ProjectExplorerItem) => {
 168         alert(`Executing ${action.name} on ${item.name}`);
 169     }
 170
 171     search = (searchValue: string) => {
 172         this.setState({ searchValue });
 173     }
 174
 175     changePage = (page: number) => {
 176         this.setState({ page });
 177     }
 178
 179     changeRowsPerPage = (rowsPerPage: number) => {
 180         this.setState({ rowsPerPage });
 181     }
 182 }
 183
 184 const renderName = (item: ProjectExplorerItem) =>
 185     <Grid
 186         container
 187         alignItems="center"
 188         wrap="nowrap"
 189         spacing={16}>
 190         <Grid item>
 191             {renderIcon(item)}
 192         </Grid>
 193         <Grid item>
 194             <Typography color="primary">
 195                 {item.name}
 196             </Typography>
 197         </Grid>
 198     </Grid>;
 199
 200
 201 const renderIcon = (item: ProjectExplorerItem) => {
 202     switch (item.kind) {
 203         case ResourceKind.LEVEL_UP:
 204             return <i className="icon-level-up" style={{ fontSize: "1rem" }} />;
 205         case ResourceKind.PROJECT:
 206             return <i className="fas fa-folder fa-lg" />;
 207         case ResourceKind.COLLECTION:
 208             return <i className="fas fa-th fa-lg" />;
 209         default:
 210             return <i />;
 211     }
 212 };
 213
 214 const renderDate = (date: string) =>
 215     <Typography noWrap>
 216         {formatDate(date)}
 217     </Typography>;
 218
 219 const renderFileSize = (fileSize?: number) =>
 220     <Typography noWrap>
 221         {formatFileSize(fileSize)}
 222     </Typography>;
 223
 224 const renderOwner = (owner: string) =>
 225     <Typography noWrap color="primary">
 226         {owner}
 227     </Typography>;
 228
 229 const renderType = (type: string) =>
 230     <Typography noWrap>
 231         {type}
 232     </Typography>;
 233
 234 const renderStatus = (item: ProjectExplorerItem) =>
 235     <Typography noWrap align="center">
 236         {item.status || "-"}
 237     </Typography>;
 238
 239 export default ProjectExplorer;