WIP Feature / General & Users & Sidebar

client/src/components/Items/ItemsCategoryList.js

@@ -5,25 +5,34 @@ import DialogConnect from 'connectors/Dialog.connector';
 import LoadingIndicator from 'components/LoadingIndicator';
 import { compose } from 'utils';
 import DataTable from 'components/DataTable';
-import { Button, Popover, Menu, MenuItem, Position } from '@blueprintjs/core';
+import {
+  Button,
+  Popover,
+  Menu,
+  MenuItem,
+  Position,
+  Classes,
+  Tooltip,
+} from '@blueprintjs/core';
 
 const ItemsCategoryList = ({
   categories,
   onFetchData,
   onDeleteCategory,
   onEditCategory,
-  openDialog
+  openDialog,
+  count,
 }) => {
-  const handelEditCategory = category => () => {
+  const handelEditCategory = (category) => () => {
     openDialog('item-form', { action: 'edit', id: category.id });
     onEditCategory(category.id);
   };
 
-  const handleDeleteCategory = category => () => {
+  const handleDeleteCategory = (category) => () => {
     onDeleteCategory(category);
   };
 
-  const actionMenuList = category => (
+  const actionMenuList = (category) => (
     <Menu>
       <MenuItem text='Edit Category' onClick={handelEditCategory(category)} />
       <MenuItem
@@ -38,17 +47,22 @@ const ItemsCategoryList = ({
       {
         id: 'name',
         Header: 'Category Name',
-        accessor: 'name'
+        accessor: 'name',
+        width: 150,
       },
       {
         id: 'description',
         Header: 'Description',
-        accessor: 'description'
+        accessor: 'description',
+        className: 'description',
+        width: 150,
       },
       {
         id: 'count',
         Header: 'Count',
-        // accessor: ''
+        accessor: () => <span>{count}</span>,
+        className: 'count',
+        width: 50,
       },
       {
         id: 'actions',
@@ -62,9 +76,9 @@ const ItemsCategoryList = ({
           </Popover>
         ),
         className: 'actions',
-        width: 50
+        width: 50,
         // canResize: false
-      }
+      },
     ],
     []
   );
@@ -73,6 +87,7 @@ const ItemsCategoryList = ({
     onFetchData && onFetchData();
   }, []);
 
+
   return (
     <LoadingIndicator spinnerSize={30}>
       <DataTable
@@ -81,6 +96,8 @@ const ItemsCategoryList = ({
         onFetchData={handelFetchData}
         manualSortBy={true}
         selectionColumn={true}
+        expandable={true}
+        treeGraph={true}
       />
     </LoadingIndicator>
   );

client/src/components/Preferences/PreferencesContent.js

@@ -2,14 +2,14 @@ import React from 'react';
 import PreferencesTopbar from 'components/Preferences/PreferencesTopbar';
 import PreferencesContentRoute from 'components/Preferences/PreferencesContentRoute';
 
-export default function() {
+export default function () {
   return (
-    <div className="dashboard-content dashboard-content--preferences">
-      <PreferencesTopbar pageTitle={"asdad"}/>
-      
-      <div class="dashboard__preferences-content">
+    <div className='dashboard-content dashboard-content--preferences'>
+      <PreferencesTopbar pageTitle={'asdad'} />
+
+      <div className='dashboard__preferences-content'>
         <PreferencesContentRoute />
       </div>
     </div>
-  )
-}
+  );
+}

client/src/components/Sidebar/SidebarContainer.js

@@ -1,11 +1,70 @@
-import React from 'react';
+import * as React from 'react';
+import { Scrollbar } from 'react-scrollbars-custom';
+
+const style = {
+  holder: {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+  },
+
+  wrapper: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+  },
+
+  content: {
+    boxSizing: 'border-box',
+  },
+
+  track: {
+    common: {
+      position: 'absolute',
+      overflow: 'hidden',
+      borderRadius: 4,
+      background: 'rgba(0,0,0,.1)',
+      userSelect: 'none',
+    },
+    x: {
+      height: 10,
+      width: 'calc(100% - 20px)',
+      bottom: 0,
+      left: 10,
+    },
+    y: {
+      width: 10,
+      height: 'calc(100% - 20px)',
+      top: 10,
+    },
+  },
+
+  thumb: {
+    common: {
+      cursor: 'pointer',
+      borderRadius: 4,
+      background: 'rgba(0,0,0,.4)',
+    },
+    x: {
+      height: '100%',
+      width: 0,
+    },
+    y: {
+      width: '100%',
+      height: 0,
+    },
+  },
+};
 
 export default function SidebarContainer(props) {
   return (
-    <div className="sidebar" id="sidebar">
-      <div class="sidebar__inner">
-        {props.children}
-      </div>
+    <div className='sidebar' id='sidebar'>
+      {/* <div className='sidebar__inner'>{props.children}</div> */}
+      <Scrollbar noDefaultStyles={true}>
+        <div className='sidebar__inner'>{props.children}</div>
+      </Scrollbar>
     </div>
-  )
-}
+  );
+}

client/src/components/Sidebar/SidebarMenu.js

@@ -32,7 +32,7 @@ export default function SidebarMenu() {
             dropdownType={item.dropdownType || 'collapse'}
             caretIconSize={15}
             onClick={handleItemClick}
-            callapseActive={!!isActive}
+            // callapseActive={!!isActive}
             className={classNames({ 'is-active': isActive })} />
       );
     });