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