X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/c384037883732764d73829804aabee0ccfc8aa61..f63f3a5360ae6381d4b332bf86ef52b4e22107fb:/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 de040eff..37a6d202 100644 --- a/src/views/project-panel/project-panel.tsx +++ b/src/views/project-panel/project-panel.tsx @@ -3,26 +3,41 @@ // 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'; -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"; +import { RootState } from '~/store/store'; +import { DataTableFilterItem } from '~/components/data-table-filters/data-table-filters'; +import { ProcessState } from '~/models/process'; +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, resourceKindToContextMenuKind, openContextMenu } from '~/store/context-menu/context-menu-actions'; +import { CollectionResource } from '~/models/collection'; +import { ProjectResource } from '~/models/project'; +import { navigateTo } from '~/store/navigation/navigation-action'; +import { getProperty } from '~/store/properties/properties'; +import { PROJECT_PANEL_CURRENT_UUID } from '~/store/project-panel/project-panel-action'; +import { openCollectionCreateDialog } from '../../store/collections/collection-create-actions'; +import { openProjectCreateDialog } from '~/store/projects/project-create-actions'; + +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" @@ -32,61 +47,6 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ }, }); -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", @@ -97,43 +57,49 @@ export enum ProjectPanelColumnNames { } export interface ProjectPanelFilter extends DataTableFilterItem { - type: ResourceKind | ContainerRequestState; + type: ResourceKind | ProcessState; } -export const columns: DataColumns = [ +export const projectPanelColumns: DataColumns = [ { name: ProjectPanelColumnNames.NAME, selected: true, + configurable: true, sortDirection: SortDirection.ASC, - render: renderName, + filters: [], + render: uuid => , width: "450px" }, { name: "Status", selected: true, + configurable: true, + sortDirection: SortDirection.NONE, filters: [ { - name: ContainerRequestState.COMMITTED, + name: ProcessState.COMMITTED, selected: true, - type: ContainerRequestState.COMMITTED + type: ProcessState.COMMITTED }, { - name: ContainerRequestState.FINAL, + name: ProcessState.FINAL, selected: true, - type: ContainerRequestState.FINAL + type: ProcessState.FINAL }, { - name: ContainerRequestState.UNCOMMITTED, + name: ProcessState.UNCOMMITTED, selected: true, - type: ContainerRequestState.UNCOMMITTED + type: ProcessState.UNCOMMITTED } ], - render: renderStatus, + render: uuid => , width: "75px" }, { name: ProjectPanelColumnNames.TYPE, selected: true, + configurable: true, + sortDirection: SortDirection.NONE, filters: [ { name: resourceLabel(ResourceKind.COLLECTION), @@ -151,26 +117,34 @@ export const columns: DataColumns = [ type: ResourceKind.PROJECT } ], - render: item => renderType(item.kind), + render: uuid => , width: "125px" }, { name: ProjectPanelColumnNames.OWNER, selected: true, - render: item => renderOwner(item.owner), + configurable: true, + sortDirection: SortDirection.NONE, + filters: [], + render: uuid => , width: "200px" }, { name: ProjectPanelColumnNames.FILE_SIZE, selected: true, - render: item => renderFileSize(item.fileSize), + configurable: true, + sortDirection: SortDirection.NONE, + filters: [], + render: uuid => , width: "50px" }, { name: ProjectPanelColumnNames.LAST_MODIFIED, selected: true, + configurable: true, sortDirection: SortDirection.NONE, - render: item => renderDate(item.lastModified), + filters: [], + render: uuid => , width: "150px" } ]; @@ -179,26 +153,21 @@ export const PROJECT_PANEL_ID = "projectPanel"; interface ProjectPanelDataProps { currentItemId: string; + resources: ResourcesState; } -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 +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.onProjectCreationDialogOpen(this.props.currentItemId); + this.props.dispatch(openProjectCreateDialog(this.props.currentItemId)); } handleNewCollectionClick = () => { - this.props.onCollectionCreationDialogOpen(this.props.currentItemId); + this.props.dispatch(openCollectionCreateDialog(this.props.currentItemId)); } - componentWillReceiveProps({ match, currentItemId, onItemRouteChange }: ProjectPanelProps) { - if (match.params.id !== currentItemId) { - onItemRouteChange(match.params.id); + + handleContextMenu = (event: React.MouseEvent, resourceUuid: string) => { + const kind = resourceKindToContextMenuKind(resourceUuid); + if (kind) { + this.props.dispatch(openContextMenu(event, { name: '', uuid: resourceUuid, kind })); } } + + handleRowDoubleClick = (uuid: string) => { + this.props.dispatch(navigateTo(uuid)); + } + + handleRowClick = (uuid: string) => { + this.props.dispatch(loadDetailsPanel(uuid)); + } + } ) -); \ No newline at end of file +);