src/views/trash-panel/trash-panel.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { TrashPanelItem } from './trash-panel-item';
   7 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
   8 import { DataExplorer } from "~/views-components/data-explorer/data-explorer";
   9 import { DispatchProp, connect } from 'react-redux';
  10 import { DataColumns } from '~/components/data-table/data-table';
  11 import { RouteComponentProps } from 'react-router';
  12 import { RootState } from '~/store/store';
  13 import { DataTableFilterItem } from '~/components/data-table-filters/data-table-filters';
  14 import { SortDirection } from '~/components/data-table/data-column';
  15 import { ResourceKind } from '~/models/resource';
  16 import { resourceLabel } from '~/common/labels';
  17 import { ArvadosTheme } from '~/common/custom-theme';
  18 import { renderName, renderType, renderFileSize, renderDate } from '~/views-components/data-explorer/renderers';
  19 import { TrashIcon } from '~/components/icon/icon';
  20 import { TRASH_PANEL_ID } from "~/store/trash-panel/trash-panel-action";
  21
  22 type CssRules = "toolbar" | "button";
  23
  24 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  25     toolbar: {
  26         paddingBottom: theme.spacing.unit * 3,
  27         textAlign: "right"
  28     },
  29     button: {
  30         marginLeft: theme.spacing.unit
  31     },
  32 });
  33
  34 export enum TrashPanelColumnNames {
  35     NAME = "Name",
  36     TYPE = "Type",
  37     FILE_SIZE = "File size",
  38     TRASHED_DATE = "Trashed date",
  39     TO_BE_DELETED = "To be deleted"
  40 }
  41
  42 export interface TrashPanelFilter extends DataTableFilterItem {
  43     type: ResourceKind;
  44 }
  45
  46 export const columns: DataColumns<TrashPanelItem, TrashPanelFilter> = [
  47     {
  48         name: TrashPanelColumnNames.NAME,
  49         selected: true,
  50         configurable: true,
  51         sortDirection: SortDirection.ASC,
  52         filters: [],
  53         render: renderName,
  54         width: "450px"
  55     },
  56     {
  57         name: TrashPanelColumnNames.TYPE,
  58         selected: true,
  59         configurable: true,
  60         sortDirection: SortDirection.NONE,
  61         filters: [
  62             {
  63                 name: resourceLabel(ResourceKind.COLLECTION),
  64                 selected: true,
  65                 type: ResourceKind.COLLECTION
  66             },
  67             {
  68                 name: resourceLabel(ResourceKind.PROCESS),
  69                 selected: true,
  70                 type: ResourceKind.PROCESS
  71             },
  72             {
  73                 name: resourceLabel(ResourceKind.PROJECT),
  74                 selected: true,
  75                 type: ResourceKind.PROJECT
  76             }
  77         ],
  78         render: item => renderType(item.kind),
  79         width: "125px"
  80     },
  81     {
  82         name: TrashPanelColumnNames.FILE_SIZE,
  83         selected: true,
  84         configurable: true,
  85         sortDirection: SortDirection.NONE,
  86         filters: [],
  87         render: item => renderFileSize(item.fileSize),
  88         width: "50px"
  89     },
  90     {
  91         name: TrashPanelColumnNames.TRASHED_DATE,
  92         selected: true,
  93         configurable: true,
  94         sortDirection: SortDirection.NONE,
  95         filters: [],
  96         render: item => renderDate(item.trashAt),
  97         width: "50px"
  98     },
  99     {
 100         name: TrashPanelColumnNames.TO_BE_DELETED,
 101         selected: true,
 102         configurable: true,
 103         sortDirection: SortDirection.NONE,
 104         filters: [],
 105         render: item => renderDate(item.deleteAt),
 106         width: "50px"
 107     },
 108 ];
 109
 110 interface TrashPanelDataProps {
 111     currentItemId: string;
 112 }
 113
 114 interface TrashPanelActionProps {
 115     onItemClick: (item: TrashPanelItem) => void;
 116     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: TrashPanelItem) => void;
 117     onDialogOpen: (ownerUuid: string) => void;
 118     onItemDoubleClick: (item: TrashPanelItem) => void;
 119     onItemRouteChange: (itemId: string) => void;
 120 }
 121
 122 type TrashPanelProps = TrashPanelDataProps & TrashPanelActionProps & DispatchProp
 123                         & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
 124
 125 export const TrashPanel = withStyles(styles)(
 126     connect((state: RootState) => ({ currentItemId: state.projects.currentItemId }))(
 127         class extends React.Component<TrashPanelProps> {
 128             render() {
 129                 return <DataExplorer
 130                     id={TRASH_PANEL_ID}
 131                     columns={columns}
 132                     onRowClick={this.props.onItemClick}
 133                     onRowDoubleClick={this.props.onItemDoubleClick}
 134                     onContextMenu={this.props.onContextMenu}
 135                     extractKey={(item: TrashPanelItem) => item.uuid}
 136                     defaultIcon={TrashIcon}
 137                     defaultMessages={['Your trash list is empty.']}/>
 138                 ;
 139             }
 140
 141             componentWillReceiveProps({ match, currentItemId, onItemRouteChange }: TrashPanelProps) {
 142                 if (match.params.id !== currentItemId) {
 143                     onItemRouteChange(match.params.id);
 144                 }
 145             }
 146         }
 147     )
 148 );