feat: Items data table.

client/src/containers/Dashboard/Accounts/AccountsChart.js

@@ -116,7 +116,8 @@ function AccountsChart({
 
   return (
     <DashboardInsider loading={fetchHook.pending} name={'accounts-chart'}>
-      <DashboardActionsBar onFilterChange={handleFilterChange} />
+      <DashboardActionsBar
+        onFilterChange={handleFilterChange} />
       <DashboardPageContent>
         <Switch>
           <Route

client/src/containers/Dashboard/Items/ItemsActionsBar.js

@@ -0,0 +1,93 @@
+import React, {useMemo} from 'react';
+import {useRouteMatch} from 'react-router-dom'
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+
+import { compose } from 'utils';
+import {
+  MenuItem,
+  Popover,
+  Menu,
+  PopoverInteractionKind,
+  Position,
+  Button,
+  Classes,
+} from '@blueprintjs/core';
+import classNames from 'classnames';
+import Icon from 'components/Icon';
+import DashboardConnect from 'connectors/Dashboard.connector';
+import ResourceConnect from 'connectors/Resource.connector'
+import FilterDropdown from 'components/FilterDropdown';
+import ItemsConnect from 'connectors/Items.connect';
+
+const ItemsActionsBar = ({
+  getResourceFields,
+  getResourceViews,
+  views,
+  onFilterChange,
+  bulkSelected,
+}) => {
+  const {path} = useRouteMatch();
+  const viewsMenuItems = views.map((view) => {
+    return (<MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />);
+  });
+
+  const onClickNewItem = () => {
+    
+  };
+  const itemsFields = getResourceFields('items');
+
+  const filterDropdown = FilterDropdown({
+    fields: itemsFields,
+    onFilterChange,
+  });
+
+  const hasBulkActionsSelected = useMemo(() => 
+    !!Object.keys(bulkSelected).length, [bulkSelected]);
+
+  return (
+    <DashboardActionsBar>
+      <Popover
+        content={<Menu>{viewsMenuItems}</Menu>}
+        minimal={true}
+        interactionKind={PopoverInteractionKind.HOVER}
+        position={Position.BOTTOM_LEFT}>
+        
+        <Button
+          className={classNames(Classes.MINIMAL, 'button--table-views')}
+          icon={ <Icon icon="table" /> }
+          text="Table Views"
+          rightIcon={'caret-down'} />
+      </Popover>
+
+      <Popover
+        content={filterDropdown}
+        interactionKind={PopoverInteractionKind.CLICK}
+        position={Position.BOTTOM_LEFT}>
+
+        <Button
+          className={classNames(Classes.MINIMAL, 'button--filter')}
+          text="Filter"
+          icon={ <Icon icon="filter" /> } />
+      </Popover>
+
+      <Button
+        className={Classes.MINIMAL}
+        icon={ <Icon icon="plus" /> }
+        text="New Item"
+        onClick={onClickNewItem} />
+
+      {hasBulkActionsSelected && (
+        <Button
+          className={Classes.MINIMAL}
+          icon={ <Icon icon="trash" />} 
+          text="Delete" />)}
+
+    </DashboardActionsBar>
+  );
+};
+
+export default compose(
+  DashboardConnect,
+  ResourceConnect,
+  ItemsConnect,
+)(ItemsActionsBar);

client/src/containers/Dashboard/Items/ItemsDataTable.js

@@ -0,0 +1,114 @@
+import React, {useEffect, useMemo} from 'react';
+import {
+  Button,
+  Popover,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Position,
+  Checkbox,
+} from '@blueprintjs/core'
+import LoadingIndicator from 'components/LoadingIndicator';
+import CustomViewConnect from 'connectors/View.connector';
+import ItemsConnect from 'connectors/Items.connect';
+import {useParams} from 'react-router-dom'
+import {compose} from 'utils';
+import useAsync from 'hooks/async';
+import DataTable from 'components/DataTable';
+import Icon from 'components/Icon';
+import {handleBooleanChange} from 'utils';
+
+const ItemsDataTable = ({
+  fetchItems,
+  filterConditions,
+  currentPageItems,
+  onEditItem,
+  onDeleteItem,
+  addBulkActionItem,
+  removeBulkActionItem,
+}) => {
+  const { custom_view_id: customViewId } = useParams();
+
+  const fetchHook = useAsync(async () => {
+    await Promise.all([
+      fetchItems({
+        custom_view_id: customViewId,
+        stringified_filter_roles: JSON.stringify(filterConditions),
+      }),
+    ]);
+  });
+
+  const handleEditItem = (item) => () => { onEditItem(item); };
+  const handleDeleteItem = (item) => () => { onDeleteItem(item); };
+  const handleClickCheckboxBulk = (item) => handleBooleanChange((value) => {
+    if (value) {
+      addBulkActionItem(item.id);
+    } else {
+      removeBulkActionItem(item.id);
+    }
+  });
+
+  const actionMenuList = (item) =>
+    (<Menu>
+      <MenuItem text="View Details" />
+      <MenuDivider />
+      <MenuItem text="Edit Item" onClick={handleEditItem(item)} />
+      <MenuItem text="Delete Item" onClick={handleDeleteItem(item)} />
+    </Menu>);
+
+  const columns = useMemo(() => [
+    {
+      id: 'bulk_select',
+      Cell: ({ cell }) => 
+        (<Checkbox onChange={handleClickCheckboxBulk(cell.row.original)} />),
+    },
+    {
+      Header: 'Item Name',
+      accessor: 'name',
+      className: "actions",
+    },
+    {
+      Header: 'Cost Account',
+      accessor: 'cost_account.name',
+      className: "cost-account",
+    },
+    {
+      Header: 'Sell Account',
+      accessor: 'sell_account.name',
+      className: "sell-account",
+    },
+    {
+      Header: 'Inventory Account',
+      accessor: 'inventory_account.name',
+      className: "inventory-account",
+    },
+    {
+      Header: 'Category',
+      accessor: 'category.name',
+      className: 'category',
+    },
+    {
+      id: 'actions',
+      Cell: ({ cell }) => (
+        <Popover
+          content={actionMenuList(cell.row.original)}
+          position={Position.RIGHT_BOTTOM}>
+          <Button icon={<Icon icon="ellipsis-h" />} />
+        </Popover>
+      ),
+    },
+  ]);
+
+  return (
+    <LoadingIndicator loading={fetchHook.pending} spinnerSize={30}>
+      <DataTable
+        columns={columns}
+        data={currentPageItems} />
+    </LoadingIndicator>
+  );
+};
+
+export default compose(
+  ItemsConnect,
+  CustomViewConnect,
+)(ItemsDataTable);

client/src/containers/Dashboard/Items/ItemsList.js

@@ -0,0 +1,94 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Route,
+  Switch,
+} from 'react-router-dom';
+import {
+  Intent,
+  Alert,
+} from '@blueprintjs/core';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import useAsync from 'hooks/async';
+import ItemsActionsBar from 'containers/Dashboard/Items/ItemsActionsBar';
+import { compose } from 'utils';
+import ItemsDataTable from './ItemsDataTable';
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import ResourceConnect from 'connectors/Resource.connector';
+import DashboardConnect from 'connectors/Dashboard.connector';
+import ItemsConnect from 'connectors/Items.connect';
+import CustomViewsConnect from 'connectors/CustomView.connector'
+import DashboardViewsTabs from 'components/Accounts/AccountsViewsTabs';
+import AppToaster from 'components/AppToaster';
+
+function ItemsList({
+  changePageTitle,
+  fetchResourceViews,
+  fetchResourceFields,
+  views,
+  requestDeleteItem,
+}) {
+  const [filterConditions, setFilterConditions] = useState([]);
+  const [deleteItem, setDeleteItem] = useState(false);
+
+  useEffect(() => {
+    changePageTitle('Items List');
+  }, []);
+
+  const fetchHook = useAsync(async () => {
+    await Promise.all([
+      fetchResourceViews('items'),
+      fetchResourceFields('items'),
+    ])
+  });
+  const handleDeleteItem = (item) => { setDeleteItem(item); };
+  const handleEditItem = () => {};
+  const handleCancelDeleteItem = () => { setDeleteItem(false) };
+  const handleConfirmDeleteItem = () => {
+    requestDeleteItem(deleteItem.id).then(() => {
+      AppToaster.show({ message: 'the_item_has_been_deleted' });
+      setDeleteItem(false);
+    });
+  };
+
+  const handleFilterChange = (filter) => { setFilterConditions(filter); };
+  
+  return (
+    <DashboardInsider isLoading={fetchHook.pending} name={'items-list'}>
+      <ItemsActionsBar views={views} onFilterChange={handleFilterChange} />
+
+      <DashboardPageContent>
+        <Switch>
+          <Route>
+            <DashboardViewsTabs resourceName={'items'} />
+
+            <ItemsDataTable
+              filterConditions={filterConditions}
+              onDeleteItem={handleDeleteItem}
+              onEditItem={handleEditItem} />
+
+            <Alert
+              cancelButtonText="Cancel"
+              confirmButtonText="Move to Trash"
+              icon="trash"
+              intent={Intent.DANGER}
+              isOpen={deleteItem}
+              onCancel={handleCancelDeleteItem}
+              onConfirm={handleConfirmDeleteItem}>
+              <p>
+              Are you sure you want to move <b>filename</b> to Trash? You will be able to restore it later,
+              but it will become private to you.
+              </p>
+            </Alert>
+          </Route>
+        </Switch>
+      </DashboardPageContent>
+    </DashboardInsider>
+  )
+}
+
+export default compose(
+  DashboardConnect,
+  ResourceConnect,
+  ItemsConnect,
+  CustomViewsConnect,
+)(ItemsList);