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