1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
6 import { ProjectPanelItem } from './project-panel-item';
7 import { Grid, Typography, Button, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
8 import { formatDate, formatFileSize } from '../../common/formatters';
9 import DataExplorer from "../../views-components/data-explorer/data-explorer";
10 import { DispatchProp, connect } from 'react-redux';
11 import { DataColumns } from '../../components/data-table/data-table';
12 import { RouteComponentProps } from 'react-router';
13 import { RootState } from '../../store/store';
14 import { DataTableFilterItem } from '../../components/data-table-filters/data-table-filters';
15 import { ContainerRequestState } from '../../models/container-request';
16 import { SortDirection } from '../../components/data-table/data-column';
17 import { ResourceKind } from '../../models/resource';
18 import { resourceLabel } from '../../common/labels';
19 import { ProjectIcon, CollectionIcon, ProcessIcon, DefaultIcon } from '../../components/icon/icon';
20 import { ArvadosTheme } from '../../common/custom-theme';
22 export const PROJECT_PANEL_ID = "projectPanel";
24 export interface ProjectPanelFilter extends DataTableFilterItem {
25 type: ResourceKind | ContainerRequestState;
28 interface ProjectPanelDataProps {
29 currentItemId: string;
32 interface ProjectPanelActionProps {
33 onItemClick: (item: ProjectPanelItem) => void;
34 onContextMenu: (event: React.MouseEvent<HTMLElement>, item: ProjectPanelItem) => void;
35 onDialogOpen: (ownerUuid: string) => void;
36 onItemDoubleClick: (item: ProjectPanelItem) => void;
37 onItemRouteChange: (itemId: string) => void;
40 type ProjectPanelProps = ProjectPanelDataProps & ProjectPanelActionProps & DispatchProp
41 & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
43 class ProjectPanel extends React.Component<ProjectPanelProps> {
45 const { classes } = this.props;
47 <div className={classes.toolbar}>
48 <Button color="primary" variant="raised" className={classes.button}>
51 <Button color="primary" variant="raised" className={classes.button}>
54 <Button color="primary" onClick={this.handleNewProjectClick} variant="raised" className={classes.button}>
60 onRowClick={this.props.onItemClick}
61 onRowDoubleClick={this.props.onItemDoubleClick}
62 onContextMenu={this.props.onContextMenu}
63 extractKey={(item: ProjectPanelItem) => item.uuid} />
67 handleNewProjectClick = () => {
68 this.props.onDialogOpen(this.props.currentItemId);
70 componentWillReceiveProps({ match, currentItemId, onItemRouteChange }: ProjectPanelProps) {
71 if (match.params.id !== currentItemId) {
72 onItemRouteChange(match.params.id);
77 type CssRules = "toolbar" | "button";
79 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
81 paddingBottom: theme.spacing.unit * 3,
85 marginLeft: theme.spacing.unit
89 const RENDER_NAME = (item: ProjectPanelItem) =>
90 <Grid container alignItems="center" wrap="nowrap" spacing={16}>
95 <Typography color="primary">
102 const RENDER_ICON = (item: ProjectPanelItem) => {
104 case ResourceKind.Project:
105 return <ProjectIcon />;
106 case ResourceKind.Collection:
107 return <CollectionIcon />;
108 case ResourceKind.Process:
109 return <ProcessIcon />;
111 return <DefaultIcon />;
115 const renderDate = (date: string) => {
116 return <Typography noWrap>{formatDate(date)}</Typography>;
119 const renderFileSize = (fileSize?: number) =>
121 {formatFileSize(fileSize)}
124 const renderOwner = (owner: string) =>
125 <Typography noWrap color="primary" >
129 const renderType = (type: string) =>
131 {resourceLabel(type)}
134 const renderStatus = (item: ProjectPanelItem) =>
135 <Typography noWrap align="center" >
139 export enum ProjectPanelColumnNames {
144 FILE_SIZE = "File size",
145 LAST_MODIFIED = "Last modified"
149 export const columns: DataColumns<ProjectPanelItem, ProjectPanelFilter> = [
151 name: ProjectPanelColumnNames.NAME,
153 sortDirection: SortDirection.Asc,
162 name: ContainerRequestState.Committed,
164 type: ContainerRequestState.Committed
167 name: ContainerRequestState.Final,
169 type: ContainerRequestState.Final
172 name: ContainerRequestState.Uncommitted,
174 type: ContainerRequestState.Uncommitted
177 render: renderStatus,
181 name: ProjectPanelColumnNames.TYPE,
185 name: resourceLabel(ResourceKind.Collection),
187 type: ResourceKind.Collection
190 name: resourceLabel(ResourceKind.Process),
192 type: ResourceKind.Process
195 name: resourceLabel(ResourceKind.Project),
197 type: ResourceKind.Project
200 render: item => renderType(item.kind),
204 name: ProjectPanelColumnNames.OWNER,
206 render: item => renderOwner(item.owner),
210 name: ProjectPanelColumnNames.FILE_SIZE,
212 render: item => renderFileSize(item.fileSize),
216 name: ProjectPanelColumnNames.LAST_MODIFIED,
218 sortDirection: SortDirection.None,
219 render: item => renderDate(item.lastModified),
224 export default withStyles(styles)(
225 connect((state: RootState) => ({ currentItemId: state.projects.currentItemId }))(ProjectPanel));