// Copyright (C) The Arvados Authors. All rights reserved. // // SPDX-License-Identifier: AGPL-3.0 import * as React from 'react'; import { ProjectPanelItem } from './project-panel-item'; import { Grid, Typography, Button, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core'; import { formatDate, formatFileSize } from '../../common/formatters'; import DataExplorer from "../../views-components/data-explorer/data-explorer"; import { DispatchProp, connect } from 'react-redux'; import { DataColumns } from '../../components/data-table/data-table'; import { RouteComponentProps } from 'react-router'; import { RootState } from '../../store/store'; import { ResourceKind } from '../../models/kinds'; import { DataTableFilterItem } from '../../components/data-table-filters/data-table-filters'; import { ContainerRequestState } from '../../models/container-request'; import { SortDirection } from '../../components/data-table/data-column'; export const PROJECT_PANEL_ID = "projectPanel"; export interface ProjectPanelFilter extends DataTableFilterItem { type: ResourceKind | ContainerRequestState; } type ProjectPanelProps = { currentItemId: string, onItemClick: (item: ProjectPanelItem) => void, onItemRouteChange: (itemId: string) => void, onContextMenu: (event: React.MouseEvent, item: ProjectPanelItem) => void; onDialogOpen: () => void; } & DispatchProp & WithStyles & RouteComponentProps<{ id: string }>; class ProjectPanel extends React.Component { render() { return
;
; } componentWillReceiveProps({ match, currentItemId }: ProjectPanelProps) { if (match.params.id !== currentItemId) { this.props.onItemRouteChange(match.params.id); } } } type CssRules = "toolbar" | "button"; const styles: StyleRulesCallback = theme => ({ toolbar: { paddingBottom: theme.spacing.unit * 3, textAlign: "right" }, button: { marginLeft: theme.spacing.unit }, }); const renderName = (item: ProjectPanelItem) => {renderIcon(item)} {item.name} ; const renderIcon = (item: ProjectPanelItem) => { switch (item.kind) { case ResourceKind.Project: return ; case ResourceKind.Collection: return ; case ResourceKind.Process: return ; default: return ; } }; const renderDate = (date: string) => {formatDate(date)} ; const renderFileSize = (fileSize?: number) => {formatFileSize(fileSize)} ; const renderOwner = (owner: string) => {owner} ; const typeToLabel = (type: string) => { switch (type) { case ResourceKind.Collection: return "Data collection"; case ResourceKind.Project: return "Project"; case ResourceKind.Process: return "Process"; default: return "Unknown"; } }; const renderType = (type: string) => { return {typeToLabel(type)} ; }; const renderStatus = (item: ProjectPanelItem) => {item.status || "-"} ; export enum ProjectPanelColumnNames { Name = "Name", Status = "Status", Type = "Type", Owner = "Owner", FileSize = "File size", LastModified = "Last modified" } export const columns: DataColumns = [{ name: ProjectPanelColumnNames.Name, selected: true, sortDirection: SortDirection.Asc, render: renderName, width: "450px" }, { name: "Status", selected: true, filters: [{ name: ContainerRequestState.Committed, selected: true, type: ContainerRequestState.Committed }, { name: ContainerRequestState.Final, selected: true, type: ContainerRequestState.Final }, { name: ContainerRequestState.Uncommitted, selected: true, type: ContainerRequestState.Uncommitted }], render: renderStatus, width: "75px" }, { name: ProjectPanelColumnNames.Type, selected: true, filters: [{ name: typeToLabel(ResourceKind.Collection), selected: true, type: ResourceKind.Collection }, { name: typeToLabel(ResourceKind.Process), selected: true, type: ResourceKind.Process }, { name: typeToLabel(ResourceKind.Project), selected: true, type: ResourceKind.Project }], render: item => renderType(item.kind), width: "125px" }, { name: ProjectPanelColumnNames.Owner, selected: true, render: item => renderOwner(item.owner), width: "200px" }, { name: ProjectPanelColumnNames.FileSize, selected: true, render: item => renderFileSize(item.fileSize), width: "50px" }, { name: ProjectPanelColumnNames.LastModified, selected: true, sortDirection: SortDirection.None, render: item => renderDate(item.lastModified), width: "150px" }]; export default withStyles(styles)( connect((state: RootState) => ({ currentItemId: state.projects.currentItemId }))( ProjectPanel));