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 import { getProperty } from "~/store/properties/properties";
  22 import { PROJECT_PANEL_CURRENT_UUID } from "~/store/project-panel/project-panel-action";
  23
  24 type CssRules = "toolbar" | "button";
  25
  26 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  27     toolbar: {
  28         paddingBottom: theme.spacing.unit * 3,
  29         textAlign: "right"
  30     },
  31     button: {
  32         marginLeft: theme.spacing.unit
  33     },
  34 });
  35
  36 export enum TrashPanelColumnNames {
  37     NAME = "Name",
  38     TYPE = "Type",
  39     FILE_SIZE = "File size",
  40     TRASHED_DATE = "Trashed date",
  41     TO_BE_DELETED = "To be deleted"
  42 }
  43
  44 export interface TrashPanelFilter extends DataTableFilterItem {
  45     type: ResourceKind;
  46 }
  47
  48 export const trashPanelColumns: DataColumns<TrashPanelItem, TrashPanelFilter> = [
  49     {
  50         name: TrashPanelColumnNames.NAME,
  51         selected: true,
  52         configurable: true,
  53         sortDirection: SortDirection.ASC,
  54         filters: [],
  55         render: renderName,
  56         width: "450px"
  57     },
  58     {
  59         name: TrashPanelColumnNames.TYPE,
  60         selected: true,
  61         configurable: true,
  62         sortDirection: SortDirection.NONE,
  63         filters: [
  64             {
  65                 name: resourceLabel(ResourceKind.COLLECTION),
  66                 selected: true,
  67                 type: ResourceKind.COLLECTION
  68             },
  69             {
  70                 name: resourceLabel(ResourceKind.PROCESS),
  71                 selected: true,
  72                 type: ResourceKind.PROCESS
  73             },
  74             {
  75                 name: resourceLabel(ResourceKind.PROJECT),
  76                 selected: true,
  77                 type: ResourceKind.PROJECT
  78             }
  79         ],
  80         render: item => renderType(item.kind),
  81         width: "125px"
  82     },
  83     {
  84         name: TrashPanelColumnNames.FILE_SIZE,
  85         selected: true,
  86         configurable: true,
  87         sortDirection: SortDirection.NONE,
  88         filters: [],
  89         render: item => renderFileSize(item.fileSize),
  90         width: "50px"
  91     },
  92     {
  93         name: TrashPanelColumnNames.TRASHED_DATE,
  94         selected: true,
  95         configurable: true,
  96         sortDirection: SortDirection.NONE,
  97         filters: [],
  98         render: item => renderDate(item.trashAt),
  99         width: "50px"
 100     },
 101     {
 102         name: TrashPanelColumnNames.TO_BE_DELETED,
 103         selected: true,
 104         configurable: true,
 105         sortDirection: SortDirection.NONE,
 106         filters: [],
 107         render: item => renderDate(item.deleteAt),
 108         width: "50px"
 109     },
 110 ];
 111
 112 interface TrashPanelDataProps {
 113     currentItemId: string;
 114 }
 115
 116 interface TrashPanelActionProps {
 117     onItemClick: (item: TrashPanelItem) => void;
 118     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: TrashPanelItem) => void;
 119     onDialogOpen: (ownerUuid: string) => void;
 120     onItemDoubleClick: (item: TrashPanelItem) => void;
 121     onItemRouteChange: (itemId: string) => void;
 122 }
 123
 124 type TrashPanelProps = TrashPanelDataProps & TrashPanelActionProps & DispatchProp & WithStyles<CssRules>;
 125
 126 export const TrashPanel = withStyles(styles)(
 127     connect((state: RootState) => ({
 128         currentItemId: getProperty(PROJECT_PANEL_CURRENT_UUID)(state.properties),
 129         resources: state.resources
 130     }))(
 131         class extends React.Component<TrashPanelProps> {
 132             render() {
 133                 return <DataExplorer
 134                     id={TRASH_PANEL_ID}
 135                     onRowClick={this.props.onItemClick}
 136                     onRowDoubleClick={this.props.onItemDoubleClick}
 137                     onContextMenu={this.props.onContextMenu}
 138                     extractKey={(item: TrashPanelItem) => item.uuid}
 139                     defaultIcon={TrashIcon}
 140                     defaultMessages={['Your trash list is empty.']}/>
 141                 ;
 142             }
 143         }
 144     )
 145 );