src/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 DataExplorer, { DataExplorerProps } from "../../components/data-explorer/data-explorer";
   7 import { RouteComponentProps } from 'react-router';
   8 import { Project } from '../../models/project';
   9 import { ProjectState, findTreeItem } from '../../store/project/project-reducer';
  10 import { RootState } from '../../store/store';
  11 import { connect, DispatchProp } from 'react-redux';
  12 import { push } from 'react-router-redux';
  13 import projectActions from "../../store/project/project-action";
  14 import { Typography } from '@material-ui/core';
  15 import { Column } from '../../components/data-explorer/column';
  16
  17 interface ProjectExplorerProps {
  18     projects: Project[];
  19     onProjectClick: (project: Project) => void;
  20 }
  21
  22 type ProjectExplorerState = Pick<DataExplorerProps<Project>, "columns">;
  23
  24 class ProjectExplorer extends React.Component<ProjectExplorerProps, ProjectExplorerState> {
  25
  26     state: ProjectExplorerState = {
  27         columns: [
  28             { header: "Name", selected: true, render: item => <Typography noWrap>{renderIcon(item.kind)} {item.name}</Typography> },
  29             { header: "Created at", selected: true, render: item => <Typography noWrap>{formatDate(item.createdAt)}</Typography> },
  30             { header: "Modified at", selected: true, render: item => <Typography noWrap>{formatDate(item.modifiedAt)}</Typography> },
  31             { header: "UUID", selected: true, render: item => <Typography noWrap>{item.uuid}</Typography> },
  32             { header: "Owner UUID", selected: true, render: item => <Typography noWrap>{item.ownerUuid}</Typography> },
  33             { header: "URL", selected: true, render: item => <Typography noWrap>{item.href}</Typography> }
  34         ]
  35     };
  36
  37     render() {
  38         return (
  39             <DataExplorer
  40                 columns={this.state.columns}
  41                 items={this.props.projects}
  42                 onItemClick={this.props.onProjectClick}
  43                 onColumnToggle={this.toggleColumn}
  44             />
  45         );
  46     }
  47
  48     toggleColumn = (column: Column<Project>) => {
  49         const index = this.state.columns.indexOf(column);
  50         const columns = this.state.columns.slice(0);
  51         columns.splice(index, 1, { ...column, selected: !column.selected });
  52         this.setState({ columns });
  53     }
  54 }
  55
  56 const formatDate = (isoDate: string) => {
  57     const date = new Date(isoDate);
  58     return date.toLocaleString();
  59 };
  60
  61 const renderIcon = (kind: string) => {
  62     switch (kind) {
  63         case "arvados#group":
  64             return <i className="fas fa-folder" />;
  65         case "arvados#groupList":
  66             return <i className="fas fa-th" />;
  67         default:
  68             return <i />;
  69     }
  70 };
  71
  72 export default ProjectExplorer;