// 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 { DataTableFilterItem } from '../../components/data-table-filters/data-table-filters'; import { ContainerRequestState } from '../../models/container-request'; import { SortDirection } from '../../components/data-table/data-column'; import { ResourceKind } from '../../models/resource'; import { resourceLabel } from '../../common/labels'; import { ProjectIcon, CollectionIcon, ProcessIcon, DefaultIcon, FavoriteIcon } from '../../components/icon/icon'; import { ArvadosTheme } from '../../common/custom-theme'; import { FavoriteStar } from '../../views-components/favorite-star/favorite-star'; type CssRules = "toolbar" | "button"; const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ 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) => { return {formatDate(date)}; }; const renderFileSize = (fileSize?: number) => {formatFileSize(fileSize)} ; const renderOwner = (owner: string) => {owner} ; const renderType = (type: string) => {resourceLabel(type)} ; const renderStatus = (item: ProjectPanelItem) => {item.status || "-"} ; export enum ProjectPanelColumnNames { NAME = "Name", STATUS = "Status", TYPE = "Type", OWNER = "Owner", FILE_SIZE = "File size", LAST_MODIFIED = "Last modified" } export interface ProjectPanelFilter extends DataTableFilterItem { type: ResourceKind | ContainerRequestState; } 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: resourceLabel(ResourceKind.COLLECTION), selected: true, type: ResourceKind.COLLECTION }, { name: resourceLabel(ResourceKind.PROCESS), selected: true, type: ResourceKind.PROCESS }, { name: resourceLabel(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.FILE_SIZE, selected: true, render: item => renderFileSize(item.fileSize), width: "50px" }, { name: ProjectPanelColumnNames.LAST_MODIFIED, selected: true, sortDirection: SortDirection.NONE, render: item => renderDate(item.lastModified), width: "150px" } ]; export const PROJECT_PANEL_ID = "projectPanel"; interface ProjectPanelDataProps { currentItemId: string; } interface ProjectPanelActionProps { onItemClick: (item: ProjectPanelItem) => void; onContextMenu: (event: React.MouseEvent, item: ProjectPanelItem) => void; onProjectCreationDialogOpen: (ownerUuid: string) => void; onCollectionCreationDialogOpen: (ownerUuid: string) => void; onItemDoubleClick: (item: ProjectPanelItem) => void; onItemRouteChange: (itemId: string) => void; } type ProjectPanelProps = ProjectPanelDataProps & ProjectPanelActionProps & DispatchProp & WithStyles & RouteComponentProps<{ id: string }>; export const ProjectPanel = withStyles(styles)( connect((state: RootState) => ({ currentItemId: state.projects.currentItemId }))( class extends React.Component { render() { const { classes } = this.props; return
item.uuid} />
; } handleNewProjectClick = () => { this.props.onProjectCreationDialogOpen(this.props.currentItemId); } handleNewCollectionClick = () => { this.props.onCollectionCreationDialogOpen(this.props.currentItemId); } componentWillReceiveProps({ match, currentItemId, onItemRouteChange }: ProjectPanelProps) { if (match.params.id !== currentItemId) { onItemRouteChange(match.params.id); } } } ) );