1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
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';
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;
24 interface ProjectExplorerProps {
25 items: ProjectExplorerItem[];
28 interface ProjectExplorerState {
29 columns: Array<DataColumn<ProjectExplorerItem>>;
35 class ProjectExplorer extends React.Component<ProjectExplorerProps, ProjectExplorerState> {
36 state: ProjectExplorerState = {
66 render: item => renderType(item.type)
70 render: item => renderOwner(item.owner)
74 sortDirection: "none",
75 render: item => renderFileSize(item.fileSize)
77 name: "Last modified",
79 render: item => renderDate(item.lastModified)
83 contextMenuActions = [[{
84 icon: "fas fa-users fa-fw",
87 icon: "fas fa-sign-out-alt fa-fw",
90 icon: "fas fa-star fa-fw",
91 name: "Add to favourite"
93 icon: "fas fa-edit fa-fw",
96 icon: "fas fa-copy fa-fw",
99 icon: "fas fa-download fa-fw",
102 icon: "fas fa-trash-alt fa-fw",
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} />;
125 toggleColumn = (toggledColumn: DataColumn<ProjectExplorerItem>) => {
127 columns: this.state.columns.map(column =>
128 column.name === toggledColumn.name
129 ? { ...column, selected: !column.selected }
135 toggleSort = (toggledColumn: DataColumn<ProjectExplorerItem>) => {
137 columns: this.state.columns.map(column =>
138 column.name === toggledColumn.name
139 ? toggleSortDirection(column)
140 : resetSortDirection(column)
145 changeFilters = (filters: DataTableFilterItem[], updatedColumn: DataColumn<ProjectExplorerItem>) => {
147 columns: this.state.columns.map(column =>
148 column.name === updatedColumn.name
149 ? { ...column, filters }
155 executeAction = (action: ContextMenuAction, item: ProjectExplorerItem) => {
156 alert(`Executing ${action.name} on ${item.name}`);
159 search = (searchValue: string) => {
160 this.setState({ searchValue });
163 changePage = (page: number) => {
164 this.setState({ page });
167 changeRowsPerPage = (rowsPerPage: number) => {
168 this.setState({ rowsPerPage });
172 const renderName = (item: ProjectExplorerItem) =>
182 <Typography color="primary">
188 const renderIcon = (item: ProjectExplorerItem) => {
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" />;
199 const renderDate = (date: string) =>
204 const renderFileSize = (fileSize?: number) =>
206 {formatFileSize(fileSize)}
209 const renderOwner = (owner: string) =>
210 <Typography noWrap color="primary">
214 const renderType = (type: string) =>
219 const renderStatus = (item: ProjectExplorerItem) =>
220 <Typography noWrap align="center">
224 export default ProjectExplorer;