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