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