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