src/views/collection-panel/collection-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 {
   7     StyleRulesCallback, WithStyles, withStyles, Card, CardHeader, IconButton,
   8     CardContent, Grid, MenuItem, Menu, ListItemIcon, ListItemText, Typography
   9 } from '@material-ui/core';
  10 import { connect } from 'react-redux';
  11 import { RouteComponentProps } from 'react-router';
  12 import { ArvadosTheme } from '../../common/custom-theme';
  13 import { RootState } from '../../store/store';
  14 import {
  15     MoreOptionsIcon, CollectionIcon, ShareIcon, RenameIcon, AddFavoriteIcon, MoveToIcon,
  16     CopyIcon, ProvenanceGraphIcon, DetailsIcon, AdvancedIcon, RemoveIcon
  17 } from '../../components/icon/icon';
  18 import { DetailsAttribute } from '../../components/details-attribute/details-attribute';
  19 import { CollectionResource } from '../../models/collection';
  20
  21 type CssRules = 'card' | 'iconHeader';
  22
  23 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  24     card: {
  25         marginBottom: '20px'
  26     },
  27     iconHeader: {
  28         fontSize: '1.875rem',
  29         color: theme.customs.colors.yellow700
  30     }
  31 });
  32
  33 const MENU_OPTIONS = [
  34     {
  35         title: 'Edit collection',
  36         icon: RenameIcon
  37     },
  38     {
  39         title: 'Share',
  40         icon: ShareIcon
  41     },
  42     {
  43         title: 'Move to',
  44         icon: MoveToIcon
  45     },
  46     {
  47         title: 'Add to favorites',
  48         icon: AddFavoriteIcon
  49     },
  50     {
  51         title: 'Copy to project',
  52         icon: CopyIcon
  53     },
  54     {
  55         title: 'View details',
  56         icon: DetailsIcon
  57     },
  58     {
  59         title: 'Provenance graph',
  60         icon: ProvenanceGraphIcon
  61     },
  62     {
  63         title: 'Advanced',
  64         icon: AdvancedIcon
  65     },
  66     {
  67         title: 'Remove',
  68         icon: RemoveIcon
  69     }
  70 ];
  71
  72 interface CollectionPanelDataProps {
  73     item: CollectionResource;
  74 }
  75
  76 interface CollectionPanelActionProps {
  77     onItemRouteChange: (collectionId: string) => void;
  78 }
  79
  80 type CollectionPanelProps = CollectionPanelDataProps & CollectionPanelActionProps
  81                             & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
  82
  83 export const CollectionPanel = withStyles(styles)(
  84     connect((state: RootState) => ({ item: state.collectionPanel.item }))(
  85         class extends React.Component<CollectionPanelProps> {
  86
  87             state = {
  88                 anchorEl: undefined,
  89                 open: false
  90             };
  91
  92             showMenu = (event: any) => {
  93                 this.setState({ anchorEl: event.currentTarget, open: true });
  94             }
  95
  96             closeMenu = () => {
  97                 this.setState({ anchorEl: undefined, open: false });
  98             }
  99
 100             displayMenuAction = () => {
 101                 return <IconButton
 102                     aria-label="More options"
 103                     aria-owns={this.state.anchorEl ? 'submenu' : undefined}
 104                     aria-haspopup="true"
 105                     onClick={this.showMenu}>
 106                     <MoreOptionsIcon />
 107                 </IconButton>;
 108             }
 109
 110             render() {
 111                 const { anchorEl, open } = this.state;
 112                 const { classes, item } = this.props;
 113                 return <div>
 114                         <Card className={classes.card}>
 115                             <CardHeader
 116                                 avatar={ <CollectionIcon className={classes.iconHeader} /> }
 117                                 action={
 118                                     <IconButton
 119                                         aria-label="More options"
 120                                         aria-owns={anchorEl ? 'submenu' : undefined}
 121                                         aria-haspopup="true"
 122                                         onClick={this.showMenu}>
 123                                         <MoreOptionsIcon />
 124                                     </IconButton>
 125                                 }
 126                                 title={item && item.name } />
 127                             <CardContent>
 128                                 <Menu
 129                                     id="submenu"
 130                                     anchorEl={anchorEl}
 131                                     open={open}
 132                                     onClose={this.closeMenu}>
 133                                     {MENU_OPTIONS.map((option) => (
 134                                         <MenuItem key={option.title}>
 135                                             <ListItemIcon>
 136                                                 <option.icon />
 137                                             </ListItemIcon>
 138                                             <ListItemText inset primary={
 139                                                 <Typography variant='body1'>
 140                                                     {option.title}
 141                                                 </Typography>
 142                                             }/>
 143                                         </MenuItem>
 144                                     ))}
 145                                 </Menu>
 146                                 <Grid container direction="column">
 147                                     <Grid item xs={6}>
 148                                     <DetailsAttribute label='Collection UUID' value={item && item.uuid} />
 149                                         <DetailsAttribute label='Content size' value='54 MB' />
 150                                     <DetailsAttribute label='Owner' value={item && item.ownerUuid} />
 151                                     </Grid>
 152                                 </Grid>
 153                             </CardContent>
 154                         </Card>
 155
 156                         <Card className={classes.card}>
 157                             <CardHeader title="Tags" />
 158                             <CardContent>
 159                                 <Grid container direction="column">
 160                                     <Grid item xs={4}>
 161                                         Tags
 162                                     </Grid>
 163                                 </Grid>
 164                             </CardContent>
 165                         </Card>
 166
 167                         <Card className={classes.card}>
 168                             <CardHeader title="Files" />
 169                             <CardContent>
 170                                 <Grid container direction="column">
 171                                     <Grid item xs={4}>
 172                                         Tags
 173                                     </Grid>
 174                                 </Grid>
 175                             </CardContent>
 176                         </Card>
 177                     </div>;
 178             }
 179
 180             componentWillReceiveProps({ match, item, onItemRouteChange }: CollectionPanelProps) {
 181                 if (!item || match.params.id !== item.uuid) {
 182                     onItemRouteChange(match.params.id);
 183                 }
 184             }
 185
 186         }
 187     )
 188 );