WIP

client/src/components/Dashboard/Dashboard.js

@@ -1,12 +1,27 @@
 import React from 'react';
+import {Switch, Route} from 'react-router';
 import Sidebar from 'components/Sidebar/Sidebar';
 import DashboardContent from 'components/Dashboard/DashboardContent';
+import DialogsContainer from 'components/DialogsContainer';
+import PreferencesContent from 'components/Preferences/PreferencesContent';
+import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
 
 export default function() {
-  return ( 
-    <div className="dashboard" id="dashboard">
-      <Sidebar />
-      <DashboardContent />
+  return (
+    <div className="dashboard dashboard--preferences">
+      <Switch>
+        <Route path="/dashboard/preferences">
+          <Sidebar />
+          <PreferencesSidebar />
+          <PreferencesContent />
+        </Route>
+
+        <Route path="/dashboard">
+          <Sidebar />
+          <DashboardContent />
+        </Route>
+      </Switch>
+      <DialogsContainer />
     </div>
-  )
+  );
 }

client/src/components/Dashboard/DashboardActionsBar.js

@@ -1,10 +1,18 @@
 import React from 'react';
+import classnames from 'classnames';
+import { Navbar } from "@blueprintjs/core";
 
-
-export default function DashboardActionsBar() {
+export default function DashboardActionsBar({
+  children, name
+}) {
   return (
-    <div class="dashboard__actions-bar">
-      
+    <div className={classnames({
+      'dashboard__actions-bar': true,
+      [`dashboard__actions-bar--${name}`]: !!name,
+    })}>
+      <Navbar className="navbar--dashboard-actions-bar">
+        { children }
+      </Navbar>
     </div>
-  )
+  );
 }

client/src/components/Dashboard/DashboardBreadcrumbs.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {
+  CollapsibleList,
+  MenuItem,
+  Classes,
+  Boundary,
+} from "@blueprintjs/core";
+import classNames from "classnames";
+
+export default function DashboardBreadcrumbs() {
+
+  function renderBreadcrumb(props) {
+    if (props.href != null) {
+      return <a className={Classes.BREADCRUMB}>{props.text}</a>;
+    } else {
+      return <span className={classNames(Classes.BREADCRUMB, Classes.BREADCRUMB_CURRENT)}>{props.text}</span>;
+    }
+  }
+  return (
+    <CollapsibleList
+      className={Classes.BREADCRUMBS}
+      dropdownTarget={<span className={Classes.BREADCRUMBS_COLLAPSED} />}
+      visibleItemRenderer={renderBreadcrumb}
+      collapseFrom={Boundary.START}
+      visibleItemCount={0}
+    >
+      <MenuItem icon="folder-close" text="All files" href="#" />
+      <MenuItem icon="folder-close" text="Users" href="#" />
+      <MenuItem icon="folder-close" text="Jane Person" href="#" />
+      <MenuItem icon="folder-close" text="My documents" href="#" />
+      <MenuItem icon="folder-close" text="Classy dayjob" href="#" />
+      <MenuItem icon="document" text="How to crush it" />
+  </CollapsibleList>
+  );
+}

client/src/components/Dashboard/DashboardContent.js

@@ -1,25 +1,12 @@
 import React from 'react';
-import { Route, Switch } from 'react-router-dom';
-import dashboardRoutes from 'routes/dashboard'
 import DashboardTopbar from 'components/Dashboard/DashboardTopbar';
+import DashboardContentRoute from 'components/Dashboard/DashboardContentRoute';
 
 export default function() {
   return (
     <div className="dashboard-content" id="dashboard">
-      <DashboardTopbar pageTitle={"asdad"}/>
-      
-      <Route pathname="/dashboard/">
-        <Switch>
-          { dashboardRoutes.map((route, index) => (
-            <Route
-              key={index}
-              path={route.path}
-              exact={route.exact}
-              component={route.component}
-            />          
-          ))}
-        </Switch>
-      </Route>
+      <DashboardTopbar />
+      <DashboardContentRoute />
     </div>
-  )
+  );
 }

client/src/components/Dashboard/DashboardContentRoute.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Route, Switch  } from 'react-router-dom';
+import routes from 'routes/dashboard'
+
+export default function DashboardContentRoute() {
+
+  return (
+    <Route pathname="/dashboard">
+      <Switch>
+        { routes.map((route, index) => (
+          <Route
+            key={index}
+            path={`${route.path}`}
+            component={route.component} />
+        ))}
+      </Switch>
+    </Route>
+  );
+}

client/src/components/Dashboard/DashboardInsider.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import classnames from 'classnames';
+import LoadingIndicator from 'components/LoadingIndicator';
+
+export default function DashboardInsider({ loading, children, name }) {
+  return (
+    <div className={classnames({
+      'dashboard__insider': true,
+      'dashboard__insider--loading': loading,
+      [`dashboard__insider--${name}`]: !!name,
+    })}>
+      <LoadingIndicator loading={loading}>
+        { children }
+      </LoadingIndicator>
+    </div>
+  );
+}

client/src/components/Dashboard/DashboardTopbar.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {connect} from 'react-redux';
+import {useHistory} from 'react-router';
 import {
   Navbar,
   NavbarGroup,
@@ -10,44 +11,64 @@ import {
   Menu,
   Popover,
 } from '@blueprintjs/core';
+import DashboardBreadcrumbs from 'components/Dashboard/DashboardBreadcrumbs';
+import DashboardTopbarUser from 'components/Dashboard/TopbarUser';
+import Icon from 'components/Icon';
 
-function DashboardTopbar({ pageTitle }) {
-  const userAvatarDropMenu = (
-    <Menu>
-      <MenuItem icon="graph" text="Graph" />
-      <MenuItem icon="map" text="Map" />
-      <MenuItem icon="th" text="Table" shouldDismissPopover={false} />
-      <MenuItem icon="zoom-to-fit" text="Nucleus" disabled={true} />
-      <MenuDivider />
-      <MenuItem icon="cog" text="Logout" />
-    </Menu>
-  );
+function DashboardTopbar({
+  pageTitle,
+  pageSubtitle,
+  editViewId,
+}) {
+  const history = useHistory();
+
+  const handlerClickEditView = () => {
+    history.push(`/dashboard/custom_views/${editViewId}/edit`)
+  }
   return (
     <div class="dashboard__topbar">
-      <div>
-        <Button>
-          <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false">
-            <title>Menu</title>
-            <path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path>
-          </svg>
-        </Button>
-        <h1 class="dashboard__title">{ pageTitle }</h1>
+      <div class="dashboard__topbar-left">
+        <div class="dashboard__topbar-sidebar-toggle">
+          <Button>
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" role="img" focusable="false">
+              <title>Menu</title>
+              <path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="5" stroke-width="2" d="M4 7h15M4 12h15M4 17h15"></path>
+            </svg>
+          </Button>
+        </div>
+
+        <div class="dashboard__title">
+          <h1>{ pageTitle }</h1>
+
+          { pageSubtitle && (
+            <>
+              <span class="sep"></span>
+              <h3>{ pageSubtitle }</h3>  
+              <Button
+                className="button--view-edit"
+                icon={<Icon icon="pen" />}
+                onClick={handlerClickEditView} />
+            </>
+          )}
+        </div>
+
+        <div class="dashboard__breadcrumbs">
+          <DashboardBreadcrumbs />
+        </div>
       </div>
 
-      <div class="dashboard__topbar-actions">
+      <div class="dashboard__topbar-right">
         <Navbar class="dashboard__topbar-navbar">
           <NavbarGroup>
-            <Button className={Classes.MINIMAL} icon="home" text="Home" />
-            <Button className={Classes.MINIMAL} icon="document" text="Files" />
+            <Button className={Classes.MINIMAL} icon="home" text="Search" />
+            <Button className={Classes.MINIMAL} icon="document" text="Filters" />
+            <Button className={Classes.MINIMAL} icon="document" text="Add order" />
+            <Button className={Classes.MINIMAL} icon="document" text="More" />
           </NavbarGroup>
         </Navbar>
 
-        <div class="dashboard__user">
-          <Popover content={userAvatarDropMenu}>
-            <Button>
-              <div className="user-avatar"></div>
-            </Button>
-          </Popover>
+        <div class="dashboard__topbar-user">
+          <DashboardTopbarUser />
         </div>
       </div>
     </div>
@@ -56,5 +77,8 @@ function DashboardTopbar({ pageTitle }) {
 
 const mapStateToProps = (state) => ({
   pageTitle: state.dashboard.pageTitle,
+  pageSubtitle: state.dashboard.pageSubtitle,
+  editViewId: state.dashboard.topbarEditViewId, 
 });
+
 export default connect(mapStateToProps)(DashboardTopbar);

client/src/components/Dashboard/TopbarUser.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import {connect} from 'react-redux';
+import {Menu, MenuItem, MenuDivider, Button, Popover} from '@blueprintjs/core';
+import t from 'store/types';
+
+function DashboardTopbarUser({ logout }) {
+  const onClickLogout = () => { logout(); };
+
+  const userAvatarDropMenu = (
+    <Menu>
+      <MenuItem icon="graph" text="Graph" />
+      <MenuItem icon="map" text="Map" />
+      <MenuItem icon="th" text="Table" shouldDismissPopover={false} />
+      <MenuItem icon="zoom-to-fit" text="Nucleus" disabled={true} />
+      <MenuDivider />
+      <MenuItem icon="cog" text="Logout" onClick={onClickLogout} />
+    </Menu>
+  );
+
+  return (
+    <Popover content={userAvatarDropMenu}>
+      <Button>
+        <div className="user-avatar"></div>
+      </Button>
+    </Popover>
+  )
+}
+
+const mapDispatchToProps = (dispatch) => ({
+  logout: () => dispatch({ type: t.LOGOUT }),
+});
+
+export default connect(null, mapDispatchToProps)(DashboardTopbarUser);