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