src/views-components/details-panel/details-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 { Drawer, IconButton, Tabs, Tab, Typography, Grid } from '@material-ui/core';
   7 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
   8 import { ArvadosTheme } from '../../common/custom-theme';
   9 import * as classnames from "classnames";
  10 import { connect } from 'react-redux';
  11 import { RootState } from '../../store/store';
  12 import { detailsPanelActions } from "../../store/details-panel/details-panel-action";
  13 import { CloseIcon } from '../../components/icon/icon';
  14 import { EmptyResource } from '../../models/empty';
  15 import { Dispatch } from "redux";
  16 import { ResourceKind } from "../../models/resource";
  17 import { ProjectDetails } from "./project-details";
  18 import { CollectionDetails } from "./collection-details";
  19 import { ProcessDetails } from "./process-details";
  20 import { EmptyDetails } from "./empty-details";
  21 import { DetailsData } from "./details-data";
  22 import { DetailsResource } from "../../models/details";
  23
  24 type CssRules = 'drawerPaper' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'tabContainer';
  25
  26 const drawerWidth = 320;
  27 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  28     container: {
  29         width: 0,
  30         position: 'relative',
  31         height: 'auto',
  32         transition: 'width 0.5s ease',
  33         '&$opened': {
  34             width: drawerWidth
  35         }
  36     },
  37     opened: {},
  38     drawerPaper: {
  39         position: 'relative',
  40         width: drawerWidth
  41     },
  42     headerContainer: {
  43         color: theme.palette.grey["600"],
  44         margin: `${theme.spacing.unit}px 0`,
  45         textAlign: 'center'
  46     },
  47     headerIcon: {
  48         fontSize: "34px"
  49     },
  50     tabContainer: {
  51         padding: theme.spacing.unit * 3
  52     }
  53 });
  54
  55 const getItem = (resource: DetailsResource): DetailsData => {
  56     const res = resource || { kind: undefined, name: 'Projects' };
  57     switch (res.kind) {
  58         case ResourceKind.Project:
  59             return new ProjectDetails(res);
  60         case ResourceKind.Collection:
  61             return new CollectionDetails(res);
  62         case ResourceKind.Process:
  63             return new ProcessDetails(res);
  64         default:
  65             return new EmptyDetails(res as EmptyResource);
  66     }
  67 };
  68
  69 const mapStateToProps = ({ detailsPanel }: RootState) => ({
  70     isOpened: detailsPanel.isOpened,
  71     item: getItem(detailsPanel.item as DetailsResource)
  72 });
  73
  74 const mapDispatchToProps = (dispatch: Dispatch) => ({
  75     onCloseDrawer: () => {
  76         dispatch(detailsPanelActions.TOGGLE_DETAILS_PANEL());
  77     }
  78 });
  79
  80 export interface DetailsPanelDataProps {
  81     onCloseDrawer: () => void;
  82     isOpened: boolean;
  83     item: DetailsData;
  84 }
  85
  86 type DetailsPanelProps = DetailsPanelDataProps & WithStyles<CssRules>;
  87
  88 export const DetailsPanel = withStyles(styles)(
  89     connect(mapStateToProps, mapDispatchToProps)(
  90         class extends React.Component<DetailsPanelProps> {
  91             state = {
  92                 tabsValue: 0
  93             };
  94
  95             handleChange = (event: any, value: boolean) => {
  96                 this.setState({ tabsValue: value });
  97             }
  98
  99             renderTabContainer = (children: React.ReactElement<any>) =>
 100                 <Typography className={this.props.classes.tabContainer} component="div">
 101                     {children}
 102                 </Typography>
 103
 104             render() {
 105                 const { classes, onCloseDrawer, isOpened, item } = this.props;
 106                 const { tabsValue } = this.state;
 107                 return (
 108                     <Typography component="div"
 109                                 className={classnames([classes.container, { [classes.opened]: isOpened }])}>
 110                         <Drawer variant="permanent" anchor="right" classes={{ paper: classes.drawerPaper }}>
 111                             <Typography component="div" className={classes.headerContainer}>
 112                                 <Grid container alignItems='center' justify='space-around'>
 113                                     <Grid item xs={2}>
 114                                         {item.getIcon(classes.headerIcon)}
 115                                     </Grid>
 116                                     <Grid item xs={8}>
 117                                         <Typography variant="title">
 118                                             {item.getTitle()}
 119                                         </Typography>
 120                                     </Grid>
 121                                     <Grid item>
 122                                         <IconButton color="inherit" onClick={onCloseDrawer}>
 123                                             {<CloseIcon/>}
 124                                         </IconButton>
 125                                     </Grid>
 126                                 </Grid>
 127                             </Typography>
 128                             <Tabs value={tabsValue} onChange={this.handleChange}>
 129                                 <Tab disableRipple label="Details"/>
 130                                 <Tab disableRipple label="Activity" disabled/>
 131                             </Tabs>
 132                             {tabsValue === 0 && this.renderTabContainer(
 133                                 <Grid container direction="column">
 134                                     {item.getDetails()}
 135                                 </Grid>
 136                             )}
 137                             {tabsValue === 1 && this.renderTabContainer(
 138                                 <Grid container direction="column"/>
 139                             )}
 140                         </Drawer>
 141                     </Typography>
 142                 );
 143             }
 144         }
 145     )
 146 );