import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import { connect, DispatchProp } from "react-redux";
-import Tree from "../../components/tree/tree";
-import { Project } from "../../models/project";
-import { RootState } from "../../store/root-reducer";
import ProjectList from "../../components/project-list/project-list";
import { Route, Switch } from "react-router";
import { Link } from "react-router-dom";
import Button from "@material-ui/core/Button/Button";
-import authActions from "../../store/auth-action";
-import { authService } from "../../services/services";
+import authActions from "../../store/auth/auth-action";
import IconButton from "@material-ui/core/IconButton/IconButton";
import Menu from "@material-ui/core/Menu/Menu";
import MenuItem from "@material-ui/core/MenuItem/MenuItem";
import { AccountCircle } from "@material-ui/icons";
-import { AnyAction } from "redux";
+import { User } from "../../models/user";
+import Grid from "@material-ui/core/Grid/Grid";
+import { RootState } from "../../store/store";
+import projectActions from "../../store/project/project-action"
+
+import ProjectTree from '../../components/project-tree/project-tree';
+import { TreeItem, TreeItemStatus } from "../../components/tree/tree";
+import { Project } from "../../models/project";
+import { projectService } from '../../services/services';
const drawerWidth = 240;
});
interface WorkbenchDataProps {
- projects: Project[];
+ projects: Array<TreeItem<Project>>;
+ user?: User;
}
interface WorkbenchActionProps {
}
login = () => {
- this.props.dispatch(authActions.LOGIN() as AnyAction);
+ this.props.dispatch(authActions.LOGIN());
};
logout = () => {
this.handleClose();
- this.props.dispatch(authActions.LOGOUT() as AnyAction);
+ this.props.dispatch(authActions.LOGOUT());
};
handleOpenMenu = (event: React.MouseEvent<any>) => {
});
};
+ toggleProjectTreeItem = (itemId: string, status: TreeItemStatus) => {
+ if (status === TreeItemStatus.Loaded) {
+ this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM(itemId))
+ } else {
+ this.props.dispatch<any>(projectService.getProjectList(itemId)).then(() => {
+ this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM(itemId));
+ })
+ }
+ };
+
render() {
- const {classes} = this.props;
- const userLoggedIn = authService.isUserLoggedIn();
+ const { classes, user } = this.props;
return (
<div className={classes.root}>
<AppBar position="absolute" className={classes.appBar}>
<Toolbar>
- <Typography variant="title" color="inherit" noWrap style={{flexGrow: 1}}>
- <span>Arvados</span><br/><span style={{fontSize: 12}}>Workbench 2</span>
+ <Typography variant="title" color="inherit" noWrap style={{ flexGrow: 1 }}>
+ <span>Arvados</span><br /><span style={{ fontSize: 12 }}>Workbench 2</span>
</Typography>
- {userLoggedIn ?
- <div>
- <IconButton
- aria-owns={this.state.anchorEl ? 'menu-appbar' : undefined}
- aria-haspopup="true"
- onClick={this.handleOpenMenu}
- color="inherit">
- <AccountCircle/>
- </IconButton>
+ {user ?
+ <Grid container style={{ width: 'auto' }}>
+ <Grid container style={{ width: 'auto' }} alignItems='center'>
+ <Typography variant="title" color="inherit" noWrap>
+ {user.firstName} {user.lastName}
+ </Typography>
+ </Grid>
+ <Grid item>
+ <IconButton
+ aria-owns={this.state.anchorEl ? 'menu-appbar' : undefined}
+ aria-haspopup="true"
+ onClick={this.handleOpenMenu}
+ color="inherit">
+ <AccountCircle />
+ </IconButton>
+ </Grid>
<Menu
- id="menu-appbar"
- anchorEl={this.state.anchorEl}
- anchorOrigin={{
- vertical: 'top',
- horizontal: 'right',
- }}
- transformOrigin={{
- vertical: 'top',
- horizontal: 'right',
- }}
- open={!!this.state.anchorEl}
- onClose={this.handleClose}>
- <MenuItem onClick={this.logout}>Logout</MenuItem>
- <MenuItem onClick={this.handleClose}>My account</MenuItem>
+ id="menu-appbar"
+ anchorEl={this.state.anchorEl}
+ anchorOrigin={{
+ vertical: 'top',
+ horizontal: 'right',
+ }}
+ transformOrigin={{
+ vertical: 'top',
+ horizontal: 'right',
+ }}
+ open={!!this.state.anchorEl}
+ onClose={this.handleClose}>
+ <MenuItem onClick={this.logout}>Logout</MenuItem>
+ <MenuItem onClick={this.handleClose}>My account</MenuItem>
</Menu>
- </div>
+ </Grid>
:
<Button color="inherit" onClick={this.login}>Login</Button>
}
</Toolbar>
</AppBar>
- {userLoggedIn &&
- <Drawer
- variant="permanent"
- classes={{
- paper: classes.drawerPaper,
- }}>
- <div className={classes.toolbar}/>
- <Tree items={this.props.projects} render={(p: Project) =>
- <Link to={`/project/${p.name}`}>{p.name}</Link>
- }/>
- </Drawer>}
+ {user &&
+ <Drawer
+ variant="permanent"
+ classes={{
+ paper: classes.drawerPaper,
+ }}>
+ <div className={classes.toolbar} />
+ <ProjectTree
+ projects={this.props.projects}
+ toggleProjectTreeItem={this.toggleProjectTreeItem} />
+ </Drawer>}
<main className={classes.content}>
- <div className={classes.toolbar}/>
+ <div className={classes.toolbar} />
<Switch>
- <Route path="/project/:name" component={ProjectList}/>
+ <Route path="/project/:name" component={ProjectList} />
</Switch>
</main>
</div>
export default connect<WorkbenchDataProps>(
(state: RootState) => ({
- projects: state.projects
+ projects: state.projects,
+ user: state.auth.user
})
)(
withStyles(styles)(Workbench)