X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/b6a5b173cd4e9f325f371d26204dfe156d911c20..d6d85de50096eb0053d58c5022fd4e949c830929:/src/views/project-panel/project-panel.tsx diff --git a/src/views/project-panel/project-panel.tsx b/src/views/project-panel/project-panel.tsx index 312a2485..37712c7d 100644 --- a/src/views/project-panel/project-panel.tsx +++ b/src/views/project-panel/project-panel.tsx @@ -3,23 +3,43 @@ // 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 { Button, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core'; +import { DataExplorer } from "~/views-components/data-explorer/data-explorer"; import { DispatchProp, connect } from 'react-redux'; -import { DataColumns } from '../../components/data-table/data-table'; +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'; - -type CssRules = "toolbar" | "button"; - -const styles: StyleRulesCallback = theme => ({ +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 { ArvadosTheme } from '~/common/custom-theme'; +import { ResourceFileSize, ResourceLastModifiedDate, ProcessStatus, ResourceType, ResourceOwner } from '~/views-components/data-explorer/renderers'; +import { ProjectIcon } from '~/components/icon/icon'; +import { ResourceName } from '~/views-components/data-explorer/renderers'; +import { ResourcesState, getResource } from '~/store/resources/resources'; +import { loadDetailsPanel } from '~/store/details-panel/details-panel-action'; +import { ContextMenuKind } from '~/views-components/context-menu/context-menu'; +import { contextMenuActions } from '~/store/context-menu/context-menu-actions'; +import { CollectionResource } from '~/models/collection'; +import { ProjectResource } from '~/models/project'; +import { openProjectCreator } from '~/store/project/project-action'; +import { reset } from 'redux-form'; +import { COLLECTION_CREATE_DIALOG } from '~/views-components/dialog-create/dialog-collection-create'; +import { collectionCreateActions } from '~/store/collections/creator/collection-creator-action'; +import { navigateToResource } from '~/store/navigation/navigation-action'; +import { getProperty } from '~/store/properties/properties'; +import { PROJECT_PANEL_CURRENT_UUID } from '~/store/project-panel/project-panel-action'; + +type CssRules = 'root' | "toolbar" | "button"; + +const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ + root: { + position: 'relative', + width: '100%', + height: '100%' + }, toolbar: { paddingBottom: theme.spacing.unit * 3, textAlign: "right" @@ -29,157 +49,129 @@ const styles: StyleRulesCallback = theme => ({ }, }); -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 renderType = (type: string) => { - return - {resourceLabel(type)} - ; -}; - -const renderStatus = (item: ProjectPanelItem) => - - {item.status || "-"} - ; - export enum ProjectPanelColumnNames { - Name = "Name", - Status = "Status", - Type = "Type", - Owner = "Owner", - FileSize = "File size", - LastModified = "Last modified" + 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, +export const projectPanelColumns: DataColumns = [ + { + name: ProjectPanelColumnNames.NAME, selected: true, - type: ContainerRequestState.Committed - }, { - name: ContainerRequestState.Final, + configurable: true, + sortDirection: SortDirection.ASC, + filters: [], + render: uuid => , + width: "450px" + }, + { + name: "Status", selected: true, - type: ContainerRequestState.Final - }, { - name: ContainerRequestState.Uncommitted, + configurable: true, + sortDirection: SortDirection.NONE, + 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: uuid => , + width: "75px" + }, + { + name: ProjectPanelColumnNames.TYPE, selected: true, - type: ContainerRequestState.Uncommitted - }], - render: renderStatus, - width: "75px" -}, { - name: ProjectPanelColumnNames.Type, - selected: true, - filters: [{ - name: resourceLabel(ResourceKind.Collection), + configurable: true, + sortDirection: SortDirection.NONE, + 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: uuid => , + width: "125px" + }, + { + name: ProjectPanelColumnNames.OWNER, selected: true, - type: ResourceKind.Collection - }, { - name: resourceLabel(ResourceKind.Process), + configurable: true, + sortDirection: SortDirection.NONE, + filters: [], + render: uuid => , + width: "200px" + }, + { + name: ProjectPanelColumnNames.FILE_SIZE, selected: true, - type: ResourceKind.Process - }, { - name: resourceLabel(ResourceKind.Project), + configurable: true, + sortDirection: SortDirection.NONE, + filters: [], + render: uuid => , + width: "50px" + }, + { + name: ProjectPanelColumnNames.LAST_MODIFIED, 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" -}]; + configurable: true, + sortDirection: SortDirection.NONE, + filters: [], + render: uuid => , + width: "150px" + } +]; export const PROJECT_PANEL_ID = "projectPanel"; -type ProjectPanelProps = { - currentItemId: string, - onItemClick: (item: ProjectPanelItem) => void, - onContextMenu: (event: React.MouseEvent, item: ProjectPanelItem) => void; - onDialogOpen: (ownerUuid: string) => void; - onItemDoubleClick: (item: ProjectPanelItem) => void, - onItemRouteChange: (itemId: string) => void +interface ProjectPanelDataProps { + currentItemId: string; + resources: ResourcesState; } - & DispatchProp - & WithStyles - & RouteComponentProps<{ id: string }>; + +type ProjectPanelProps = ProjectPanelDataProps & DispatchProp + & WithStyles & RouteComponentProps<{ id: string }>; export const ProjectPanel = withStyles(styles)( - connect((state: RootState) => ({ currentItemId: state.projects.currentItemId }))( + connect((state: RootState) => ({ + currentItemId: getProperty(PROJECT_PANEL_CURRENT_UUID)(state.properties), + resources: state.resources + }))( class extends React.Component { render() { const { classes } = this.props; - return
+ return
-
item.uuid} /> + onRowClick={this.handleRowClick} + onRowDoubleClick={this.handleRowDoubleClick} + onContextMenu={this.handleContextMenu} + defaultIcon={ProjectIcon} + defaultMessages={['Your project is empty.', 'Please create a project or create a collection and upload a data.']} />
; } handleNewProjectClick = () => { - this.props.onDialogOpen(this.props.currentItemId); + this.props.dispatch(openProjectCreator(this.props.currentItemId)); } - componentWillReceiveProps({ match, currentItemId, onItemRouteChange }: ProjectPanelProps) { - if (match.params.id !== currentItemId) { - onItemRouteChange(match.params.id); + + handleNewCollectionClick = () => { + this.props.dispatch(reset(COLLECTION_CREATE_DIALOG)); + this.props.dispatch(collectionCreateActions.OPEN_COLLECTION_CREATOR({ ownerUuid: this.props.currentItemId })); + } + + handleContextMenu = (event: React.MouseEvent, resourceUuid: string) => { + event.preventDefault(); + const resource = getResource(resourceUuid)(this.props.resources) as CollectionResource | ProjectResource | undefined; + if (resource) { + let kind: ContextMenuKind; + + if (resource.kind === ResourceKind.PROJECT) { + kind = ContextMenuKind.PROJECT; + } else if (resource.kind === ResourceKind.COLLECTION) { + kind = ContextMenuKind.COLLECTION_RESOURCE; + } else { + kind = ContextMenuKind.RESOURCE; + } + if (kind !== ContextMenuKind.RESOURCE) { + this.props.dispatch( + contextMenuActions.OPEN_CONTEXT_MENU({ + position: { x: event.clientX, y: event.clientY }, + resource: { + uuid: resource.uuid, + name: resource.name || '', + description: resource.description, + kind, + } + }) + ); + } } } + + handleRowDoubleClick = (uuid: string) => { + this.props.dispatch(navigateToResource(uuid)); + } + + handleRowClick = (uuid: string) => { + this.props.dispatch(loadDetailsPanel(uuid)); + } + } ) );