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' | 'headerTitle' | '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: '2.125rem'
  49     },
  50     headerTitle: {
  51         wordBreak: 'break-all'
  52     },
  53     tabContainer: {
  54         padding: theme.spacing.unit * 3
  55     }
  56 });
  57
  58 const getItem = (resource: DetailsResource): DetailsData => {
  59     const res = resource || { kind: undefined, name: 'Projects' };
  60     switch (res.kind) {
  61         case ResourceKind.PROJECT:
  62             return new ProjectDetails(res);
  63         case ResourceKind.COLLECTION:
  64             return new CollectionDetails(res);
  65         case ResourceKind.PROCESS:
  66             return new ProcessDetails(res);
  67         default:
  68             return new EmptyDetails(res as EmptyResource);
  69     }
  70 };
  71
  72 const mapStateToProps = ({ detailsPanel }: RootState) => ({
  73     isOpened: detailsPanel.isOpened,
  74     item: getItem(detailsPanel.item as DetailsResource)
  75 });
  76
  77 const mapDispatchToProps = (dispatch: Dispatch) => ({
  78     onCloseDrawer: () => {
  79         dispatch(detailsPanelActions.TOGGLE_DETAILS_PANEL());
  80     }
  81 });
  82
  83 export interface DetailsPanelDataProps {
  84     onCloseDrawer: () => void;
  85     isOpened: boolean;
  86     item: DetailsData;
  87 }
  88
  89 type DetailsPanelProps = DetailsPanelDataProps & WithStyles<CssRules>;
  90
  91 export const DetailsPanel = withStyles(styles)(
  92     connect(mapStateToProps, mapDispatchToProps)(
  93         class extends React.Component<DetailsPanelProps> {
  94             state = {
  95                 tabsValue: 0
  96             };
  97
  98             handleChange = (event: any, value: boolean) => {
  99                 this.setState({ tabsValue: value });
 100             }
 101
 102             renderTabContainer = (children: React.ReactElement<any>) =>
 103                 <Typography className={this.props.classes.tabContainer} component="div">
 104                     {children}
 105                 </Typography>
 106
 107             render() {
 108                 const { classes, onCloseDrawer, isOpened, item } = this.props;
 109                 const { tabsValue } = this.state;
 110                 return (
 111                     <Typography component="div"
 112                                 className={classnames([classes.container, { [classes.opened]: isOpened }])}>
 113                         <Drawer variant="permanent" anchor="right" classes={{ paper: classes.drawerPaper }}>
 114                             <Typography component="div" className={classes.headerContainer}>
 115                                 <Grid container alignItems='center' justify='space-around'>
 116                                     <Grid item xs={2}>
 117                                         {item.getIcon(classes.headerIcon)}
 118                                     </Grid>
 119                                     <Grid item xs={8}>
 120                                         <Typography variant="title" className={classes.headerTitle}>
 121                                             {item.getTitle()}
 122                                         </Typography>
 123                                     </Grid>
 124                                     <Grid item>
 125                                         <IconButton color="inherit" onClick={onCloseDrawer}>
 126                                             {<CloseIcon/>}
 127                                         </IconButton>
 128                                     </Grid>
 129                                 </Grid>
 130                             </Typography>
 131                             <Tabs value={tabsValue} onChange={this.handleChange}>
 132                                 <Tab disableRipple label="Details"/>
 133                                 <Tab disableRipple label="Activity" disabled/>
 134                             </Tabs>
 135                             {tabsValue === 0 && this.renderTabContainer(
 136                                 <Grid container direction="column">
 137                                     {item.getDetails()}
 138                                 </Grid>
 139                             )}
 140                             {tabsValue === 1 && this.renderTabContainer(
 141                                 <Grid container direction="column"/>
 142                             )}
 143                         </Drawer>
 144                     </Typography>
 145                 );
 146             }
 147         }
 148     )
 149 );