WIP Version 0.0.1

client/src/containers/Items/ItemsDataTable.js

@@ -0,0 +1,134 @@
+import React, {useState, useEffect, useCallback, useMemo} from 'react';
+import {
+  Button,
+  Popover,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Position,
+} from '@blueprintjs/core'
+import {compose} from 'utils';
+import DataTable from 'components/DataTable';
+import Icon from 'components/Icon';
+import Money from 'components/Money';
+
+import withItems from 'containers/Items/withItems';
+import LoadingIndicator from 'components/LoadingIndicator';
+
+const ItemsDataTable = ({
+  loading,
+
+  itemsTableLoading,
+  itemsCurrentPage,
+
+  // props
+  onEditItem,
+  onDeleteItem,
+  onFetchData,
+  onSelectedRowsChange,
+}) => {
+  const [initialMount, setInitialMount] = useState(false);
+
+  useEffect(() => {
+    if (!itemsTableLoading) {
+      setInitialMount(true);
+    }
+  }, [itemsTableLoading, setInitialMount]);
+
+  const handleEditItem = (item) => () => { onEditItem(item); };
+  const handleDeleteItem = (item) => () => { onDeleteItem(item); };
+  
+  const actionMenuList = useCallback((item) =>
+    (<Menu>
+      <MenuItem text="View Details" />
+      <MenuDivider />
+      <MenuItem text="Edit Item" onClick={handleEditItem(item)} />
+      <MenuItem text="Delete Item" onClick={handleDeleteItem(item)} />
+    </Menu>), [handleEditItem, handleDeleteItem]);
+
+  const columns = useMemo(() => [
+    {
+      Header: 'Item Name',
+      accessor: 'name',
+      className: "actions",
+    },
+    {
+      Header: 'SKU',
+      accessor: 'sku',
+      className: "sku",
+    },
+    {
+      Header: 'Category',
+      accessor: 'category.name',
+      className: 'category',
+    },
+    {
+      Header: 'Sell Price',
+      accessor: row => (<Money amount={row.sell_price} currency={'USD'} />),
+      className: 'sell-price',
+    },
+    {
+      Header: 'Cost Price',
+      accessor: row => (<Money amount={row.cost_price} currency={'USD'} />),
+      className: 'cost-price',
+    },
+    // {
+    //   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",
+    // },
+    {
+      id: 'actions',
+      Cell: ({ cell }) => (
+        <Popover
+          content={actionMenuList(cell.row.original)}
+          position={Position.RIGHT_BOTTOM}>
+          <Button icon={<Icon icon="ellipsis-h" />} />
+        </Popover>
+      ),
+      className: 'actions',
+      width: 50,
+    },
+  ], [actionMenuList]);
+
+  const selectionColumn = useMemo(() => ({
+    minWidth: 42,
+    width: 42,
+    maxWidth: 42,
+  }), []);
+
+  const handleFetchData = useCallback((...args) => {
+    onFetchData && onFetchData(...args)
+  }, [onFetchData]);
+
+  const handleSelectedRowsChange = useCallback((selectedRows) => {
+    onSelectedRowsChange && onSelectedRowsChange(selectedRows.map(s => s.original));
+  }, [onSelectedRowsChange]);
+
+  return (
+    <LoadingIndicator loading={loading} mount={false}>
+      <DataTable
+        columns={columns}
+        data={itemsCurrentPage}
+        selectionColumn={selectionColumn}
+        onFetchData={handleFetchData}
+        loading={itemsTableLoading && !initialMount}
+        noInitialFetch={true}
+        onSelectedRowsChange={handleSelectedRowsChange} />
+    </LoadingIndicator>
+  );
+};
+
+export default compose(
+  withItems,
+)(ItemsDataTable);