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,
   8     CardHeader, IconButton, CardContent, Grid
   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 { MoreOptionsIcon, CollectionIcon } from '../../components/icon/icon';
  15 import { DetailsAttribute } from '../../components/details-attribute/details-attribute';
  16 import { CollectionResource } from '../../models/collection';
  17
  18 type CssRules = 'card' | 'iconHeader';
  19
  20 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  21     card: {
  22         marginBottom: '20px'
  23     },
  24     iconHeader: {
  25         fontSize: '1.875rem',
  26         color: theme.customs.colors.yellow700
  27     }
  28 });
  29
  30 interface CollectionPanelDataProps {
  31     item: CollectionResource;
  32 }
  33
  34 interface CollectionPanelActionProps {
  35     onItemRouteChange: (collectionId: string) => void;
  36     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: CollectionResource) => void;
  37 }
  38
  39 type CollectionPanelProps = CollectionPanelDataProps & CollectionPanelActionProps
  40                             & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
  41
  42 export const CollectionPanel = withStyles(styles)(
  43     connect((state: RootState) => ({ item: state.collectionPanel.item }))(
  44         class extends React.Component<CollectionPanelProps> {
  45
  46             render() {
  47                 const { classes, item, onContextMenu } = this.props;
  48                 return <div>
  49                         <Card className={classes.card}>
  50                             <CardHeader
  51                                 avatar={ <CollectionIcon className={classes.iconHeader} /> }
  52                                 action={
  53                                     <IconButton
  54                                         aria-label="More options"
  55                                         onClick={event => onContextMenu(event, item)}>
  56                                         <MoreOptionsIcon />
  57                                     </IconButton>
  58                                 }
  59                                 title={item && item.name } />
  60                             <CardContent>
  61                                 <Grid container direction="column">
  62                                     <Grid item xs={6}>
  63                                     <DetailsAttribute label='Collection UUID' value={item && item.uuid} />
  64                                         <DetailsAttribute label='Content size' value='54 MB' />
  65                                     <DetailsAttribute label='Owner' value={item && item.ownerUuid} />
  66                                     </Grid>
  67                                 </Grid>
  68                             </CardContent>
  69                         </Card>
  70
  71                         <Card className={classes.card}>
  72                             <CardHeader title="Tags" />
  73                             <CardContent>
  74                                 <Grid container direction="column">
  75                                     <Grid item xs={4}>
  76                                         Tags
  77                                     </Grid>
  78                                 </Grid>
  79                             </CardContent>
  80                         </Card>
  81
  82                         <Card className={classes.card}>
  83                             <CardHeader title="Files" />
  84                             <CardContent>
  85                                 <Grid container direction="column">
  86                                     <Grid item xs={4}>
  87                                         Tags
  88                                     </Grid>
  89                                 </Grid>
  90                             </CardContent>
  91                         </Card>
  92                     </div>;
  93             }
  94
  95             componentWillReceiveProps({ match, item, onItemRouteChange }: CollectionPanelProps) {
  96                 if (!item || match.params.id !== item.uuid) {
  97                     onItemRouteChange(match.params.id);
  98                 }
  99             }
 100
 101         }
 102     )
 103 );