import { StyleRulesCallback, Theme, WithStyles, withStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import { connect, DispatchProp } from "react-redux";
-import { Route, Switch, RouteComponentProps } from "react-router";
+import { Route, Switch, RouteComponentProps, withRouter } from "react-router";
import authActions from "../../store/auth/auth-action";
import dataExplorerActions from "../../store/data-explorer/data-explorer-action";
import { User } from "../../models/user";
import { ItemMode, setProjectItem } from "../../store/navigation/navigation-action";
import projectActions from "../../store/project/project-action";
import ProjectPanel from "../project-panel/project-panel";
+import { sidePanelData } from '../../store/side-panel/side-panel-reducer';
+import DetailsPanel from '../../views-components/details-panel/details-panel';
const drawerWidth = 240;
-const appBarHeight = 102;
+const appBarHeight = 116;
type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'contentWrapper' | 'toolbar';
helpMenu: NavMenuItem[],
anonymousMenu: NavMenuItem[]
};
+ isDetailsPanelOpened: boolean;
}
class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
action: () => this.props.dispatch(authActions.LOGIN())
}
]
- }
+ },
+ isDetailsPanelOpened: false
};
mainAppBarActions: MainAppBarActionProps = {
this.setState({ searchText });
this.props.dispatch(push(`/search?q=${searchText}`));
},
- onMenuItemClick: (menuItem: NavMenuItem) => menuItem.action()
+ onMenuItemClick: (menuItem: NavMenuItem) => menuItem.action(),
+ onDetailsPanelClick: (isOpened: boolean) => {
+ this.setState({ isDetailsPanelOpened: isOpened });
+ }
};
toggleSidePanelOpen = (itemId: string) => {
sidePanelItems={this.props.sidePanelItems}>
<ProjectTree
projects={this.props.projects}
- toggleOpen={itemId =>
- this.props.dispatch<any>(
- setProjectItem(itemId, ItemMode.OPEN)
- )}
- toggleActive={itemId =>
- this.props.dispatch<any>(
- setProjectItem(itemId, ItemMode.ACTIVE)
- )}
+ toggleOpen={itemId => this.props.dispatch<any>(setProjectItem(itemId, ItemMode.OPEN))}
+ toggleActive={itemId => this.props.dispatch<any>(setProjectItem(itemId, ItemMode.ACTIVE))}
/>
</SidePanel>
</Drawer>}
<Route path="/projects/:id" render={this.renderProjectPanel} />
</Switch>
</div>
+ <DetailsPanel
+ isOpened={this.state.isDetailsPanelOpened}
+ toggleDrawer={this.mainAppBarActions.onDetailsPanelClick} />
</main>
</div>
);
}
- renderProjectPanel = (props: RouteComponentProps<{ id: string }>) => {
- if (props.match.params.id !== this.props.currentProjectId) {
- this.props.dispatch<any>(
- setProjectItem(props.match.params.id, ItemMode.ACTIVE)
- );
- }
- return <ProjectPanel
- onItemClick={item => this.props.dispatch<any>(
- setProjectItem(item.uuid, ItemMode.ACTIVE)
- )} />;
- }
+ renderProjectPanel = (props: RouteComponentProps<{ id: string }>) => <ProjectPanel
+ onItemRouteChange={itemId => this.props.dispatch<any>(setProjectItem(itemId, ItemMode.ACTIVE))}
+ onItemClick={item => this.props.dispatch<any>(setProjectItem(item.uuid, ItemMode.ACTIVE))}
+ {...props} />
}