feat: Context menu on data-table.

client/src/containers/Accounting/ManualJournalsDataTable.js

@@ -102,28 +102,32 @@ function ManualJournalsDataTable({
   const actionMenuList = useCallback(
     (journal) => (
       <Menu>
-        <MenuItem text={<T id={'view_details'} />} />
+        <MenuItem text={formatMessage({ id: 'view_details' })} />
         <MenuDivider />
         {!journal.status && (
           <MenuItem
-            text={<T id={'publish_journal'} />}
+          text={formatMessage({ id: 'publish_journal' })}
             onClick={handlePublishJournal(journal)}
           />
         )}
         <MenuItem
-          text={<T id={'edit_journal'} />}
+          text={formatMessage({ id: 'edit_journal' })}
           onClick={handleEditJournal(journal)}
         />
         <MenuItem
-          text={<T id={'delete_journal'} />}
+          text={formatMessage({ id: 'delete_journal' })}
           intent={Intent.DANGER}
           onClick={handleDeleteJournal(journal)}
         />
       </Menu>
     ),
-    [handleEditJournal, handleDeleteJournal, handlePublishJournal],
+    [handleEditJournal, handleDeleteJournal, handlePublishJournal, formatMessage],
   );
 
+  const onRowContextMenu = useCallback((cell) => {
+    return actionMenuList(cell.row.original);
+  }, [actionMenuList]);
+
   const columns = useMemo(
     () => [
       {
@@ -245,6 +249,8 @@ function ManualJournalsDataTable({
         onSelectedRowsChange={handleSelectedRowsChange}
         pagination={true}
 
+        rowContextMenu={onRowContextMenu}
+
         pagesCount={manualJournalsPagination.pagesCount}
         initialPageSize={manualJournalsTableQuery.page_size}
         initialPageIndex={manualJournalsTableQuery.page - 1}

client/src/containers/Accounts/AccountsDataTable.js

@@ -1,4 +1,4 @@
-import React, {useCallback, useState, useMemo } from 'react';
+import React, { useCallback, useState, useMemo } from 'react';
 import {
   Button,
   Popover,
@@ -8,6 +8,7 @@ import {
   Position,
   Classes,
   Tooltip,
+  Intent,
 } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 
@@ -26,12 +27,11 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 
 import { If } from 'components';
 
-
 function AccountsDataTable({
-  // #withDashboardActions  
+  // #withDashboardActions
   accounts,
   accountsLoading,
-  
+
   // #withDialog.
   openDialog,
 
@@ -52,136 +52,179 @@ function AccountsDataTable({
     }
   }, [accountsLoading, setInitialMount]);
 
-  const handleEditAccount = useCallback((account) => () => {
-    openDialog('account-form', { action: 'edit', id: account.id });
-  }, [openDialog]);
+  const handleEditAccount = useCallback(
+    (account) => () => {
+      openDialog('account-form', { action: 'edit', id: account.id });
+    },
+    [openDialog],
+  );
 
-  const handleNewParentAccount = useCallback((account) => {
-    openDialog('account-form', { action: 'new_child', id: account.id });
-  }, [openDialog]);
+  const handleNewParentAccount = useCallback(
+    (account) => {
+      openDialog('account-form', { action: 'new_child', id: account.id });
+    },
+    [openDialog],
+  );
 
-  const actionMenuList = useCallback((account) => (
-    <Menu>
-      <MenuItem text={<T id={'view_details'}/>} />
-      <MenuDivider />
-      <MenuItem
-        text={<T id={'edit_account'}/>}
-        onClick={handleEditAccount(account)} />
-      <MenuItem
-        text={<T id={'new_account'}/>}
-        onClick={() => handleNewParentAccount(account)} />
-      <MenuDivider />
-      <If condition={account.active}>
+  const actionMenuList = useCallback(
+    (account) => (
+      <Menu>
+        <MenuItem text={formatMessage({ id: 'view_details' })} />
+        <MenuDivider />
         <MenuItem
-          text={<T id={'inactivate_account'}/>}
-          onClick={() => onInactiveAccount(account)} />
-      </If>
-      <If condition={!account.active}>
+          text={formatMessage({ id: 'edit_account' })}
+          onClick={handleEditAccount(account)}
+        />
         <MenuItem
-          text={<T id={'activate_account'}/>}
-          onClick={() => onActivateAccount(account)} />
-      </If>
-      <MenuItem
-        text={<T id={'delete_account'}/>}
-        onClick={() => onDeleteAccount(account)} />
-    </Menu>
-  ), [handleEditAccount, onDeleteAccount, onInactiveAccount,handleNewParentAccount]);
+          text={formatMessage({ id: 'new_child_account' })}
+          onClick={() => handleNewParentAccount(account)}
+        />
+        <MenuDivider />
+        <If condition={account.active}>
+          <MenuItem
+            text={formatMessage({ id: 'inactivate_account' })}
+            onClick={() => onInactiveAccount(account)}
+          />
+        </If>
+        <If condition={!account.active}>
+          <MenuItem
+            text={formatMessage({ id: 'activate_account' })}
+            onClick={() => onActivateAccount(account)}
+          />
+        </If>
+        <MenuItem
+          text={formatMessage({ id: 'delete_account' })}
+          intent={Intent.DANGER}
+          onClick={() => onDeleteAccount(account)}
+        />
+      </Menu>
+    ),
+    [
+      handleEditAccount,
+      onDeleteAccount,
+      onInactiveAccount,
+      handleNewParentAccount,
+      formatMessage,
+    ],
+  );
 
-  const columns = useMemo(() => [
-    {
-      id: 'name',
-      Header: formatMessage({id:'account_name'}),
-      accessor: row => {
-        return (row.description) ?
-          (<Tooltip
-            className={Classes.TOOLTIP_INDICATOR}
-            content={row.description}
+  const rowContextMenu = (cell) => {
+    return actionMenuList(cell.row.original);
+  };
+
+  const columns = useMemo(
+    () => [
+      {
+        id: 'name',
+        Header: formatMessage({ id: 'account_name' }),
+        accessor: (row) => {
+          return row.description ? (
+            <Tooltip
+              className={Classes.TOOLTIP_INDICATOR}
+              content={row.description}
+              position={Position.RIGHT_TOP}
+              hoverOpenDelay={500}
+            >
+              {row.name}
+            </Tooltip>
+          ) : (
+            row.name
+          );
+        },
+        className: 'account_name',
+        width: 300,
+      },
+      {
+        id: 'code',
+        Header: formatMessage({ id: 'code' }),
+        accessor: 'code',
+        className: 'code',
+        width: 100,
+      },
+      {
+        id: 'type',
+        Header: formatMessage({ id: 'type' }),
+        accessor: 'type.name',
+        className: 'type',
+        width: 120,
+      },
+      {
+        id: 'normal',
+        Header: formatMessage({ id: 'normal' }),
+        Cell: ({ cell }) => {
+          const account = cell.row.original;
+          const normal = account.type ? account.type.normal : '';
+          const arrowDirection = normal === 'credit' ? 'down' : 'up';
+
+          return (
+            <Tooltip
+              className={Classes.TOOLTIP_INDICATOR}
+              content={formatMessage({ id: normal })}
+              position={Position.RIGHT}
+              hoverOpenDelay={500}
+            >
+              <Icon icon={`arrow-${arrowDirection}`} />
+            </Tooltip>
+          );
+        },
+        className: 'normal',
+        width: 75,
+      },
+      {
+        id: 'balance',
+        Header: formatMessage({ id: 'balance' }),
+        Cell: ({ cell }) => {
+          const account = cell.row.original;
+          const { balance = null } = account;
+
+          return balance ? (
+            <span>
+              <Money amount={balance.amount} currency={balance.currency_code} />
+            </span>
+          ) : (
+            <span class="placeholder">--</span>
+          );
+        },
+        width: 150,
+      },
+      {
+        id: 'actions',
+        Header: '',
+        Cell: ({ cell }) => (
+          <Popover
+            content={actionMenuList(cell.row.original)}
             position={Position.RIGHT_TOP}
-            hoverOpenDelay={500}>
-              { row.name }
-          </Tooltip>) : row.name;
+          >
+            <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+          </Popover>
+        ),
+        className: 'actions',
+        width: 50,
       },
-      className: 'account_name',
-      width: 300,
-    },
-    {
-      id: 'code',
-      Header: formatMessage({id:'code'}),
-      accessor: 'code',
-      className: 'code',
-      width: 100,
-    },
-    {
-      id: 'type',
-      Header: formatMessage({id:'type'}),
-      accessor: 'type.name',
-      className: 'type',
-      width: 120,
-    },
-    {
-      id: 'normal',
-      Header: formatMessage({id:'normal'}),
-      Cell: ({ cell }) => {
-        const account = cell.row.original;
-        const normal = account.type ? account.type.normal : '';
-        const arrowDirection = normal === 'credit' ? 'down' : 'up';
+    ],
+    [actionMenuList, formatMessage],
+  );
 
-        return (
-          <Tooltip
-            className={Classes.TOOLTIP_INDICATOR}
-            content={formatMessage({ id: normal })}
-            position={Position.RIGHT}
-            hoverOpenDelay={500}>
-            <Icon icon={`arrow-${arrowDirection}`} />
-          </Tooltip>
-        );
-      },
-      className: 'normal',
-      width: 75,
-    },
-    {
-      id: 'balance',
-      Header: formatMessage({id:'balance'}),
-      Cell: ({ cell }) => {
-        const account = cell.row.original;
-        const {balance = null} = account;
-
-        return (balance) ?
-          (<span>
-            <Money amount={balance.amount} currency={balance.currency_code} />
-            </span>) :
-          (<span class="placeholder">--</span>);
-      },
-      width: 150,
-    },
-    {
-      id: 'actions',
-      Header: '',
-      Cell: ({ cell }) => (
-        <Popover
-          content={actionMenuList(cell.row.original)}
-          position={Position.RIGHT_TOP}>
-          <Button icon={<Icon icon='more-h-16' iconSize={16} />} />
-        </Popover>
-      ),
-      className: 'actions',
+  const selectionColumn = useMemo(
+    () => ({
+      minWidth: 50,
       width: 50,
-    }
-  ], [actionMenuList,formatMessage]);
-
-  const selectionColumn = useMemo(() => ({
-    minWidth: 50,
-    width: 50,
-    maxWidth: 50,
-  }), [])
+      maxWidth: 50,
+    }),
+    [],
+  );
 
   const handleDatatableFetchData = useCallback((...params) => {
     onFetchData && onFetchData(...params);
   }, []);
 
-  const handleSelectedRowsChange = useCallback((selectedRows) => {
-    onSelectedRowsChange && onSelectedRowsChange(selectedRows.map(s => s.original));
-  }, [onSelectedRowsChange]);
+  const handleSelectedRowsChange = useCallback(
+    (selectedRows) => {
+      onSelectedRowsChange &&
+        onSelectedRowsChange(selectedRows.map((s) => s.original));
+    },
+    [onSelectedRowsChange],
+  );
 
   return (
     <LoadingIndicator loading={loading} mount={false}>
@@ -192,12 +235,14 @@ function AccountsDataTable({
         onFetchData={handleDatatableFetchData}
         manualSortBy={true}
         selectionColumn={selectionColumn}
-        expandable={true} 
+        expandable={true}
         treeGraph={true}
         sticky={true}
         onSelectedRowsChange={handleSelectedRowsChange}
         loading={accountsLoading && !initialMount}
-        spinnerProps={{size: 30}} />
+        spinnerProps={{ size: 30 }}
+        rowContextMenu={rowContextMenu}
+      />
     </LoadingIndicator>
   );
 }

client/src/containers/Expenses/ExpenseDataTable.js

@@ -98,29 +98,34 @@ function ExpenseDataTable({
   const actionMenuList = useCallback(
     (expense) => (
       <Menu>
-        <MenuItem text={<T id={'view_details'} />} />
+        <MenuItem
+          text={formatMessage({ id: 'view_details' })} />
         <MenuDivider />
         <If condition={expenses.published}>
           <MenuItem
-            text={<T id={'publish_expense'} />}
+            text={formatMessage({ id: 'publish_expense' })}
             onClick={handlePublishExpense(expense)}
           />
         </If>
 
         <MenuItem
-          text={<T id={'edit_expense'} />}
+          text={formatMessage({ id: 'edit_expense' })}
           onClick={handleEditExpense(expense)}
         />
         <MenuItem
-          text={<T id={'delete_expense'} />}
+          text={formatMessage({ id: 'delete_expense' })}
           intent={Intent.DANGER}
           onClick={handleDeleteExpense(expense)}
         />
       </Menu>
     ),
-    [handleEditExpense, handleDeleteExpense, handlePublishExpense],
+    [handleEditExpense, handleDeleteExpense, handlePublishExpense, formatMessage],
   );
 
+  const onRowContextMenu = useCallback((cell) => {
+    return actionMenuList(cell.row.original);
+  }, [actionMenuList]);
+
   const expenseAccountAccessor = (expense) => {
     if (expense.categories.length === 1) {
       return expense.categories[0].expense_account.name;
@@ -253,6 +258,7 @@ function ExpenseDataTable({
           sticky={true}
           loading={expensesLoading && !initialMount}
           onSelectedRowsChange={handleSelectedRowsChange}
+          rowContextMenu={onRowContextMenu}
         />
       </LoadingIndicator>
     </div>

client/src/containers/Items/ItemCategoriesTable.js

@@ -3,7 +3,9 @@ import {
   Button,
   Popover,
   Menu,
+  Intent,
   MenuItem,
+  MenuDivider,
   Position,
 } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
@@ -43,11 +45,13 @@ const ItemsCategoryList = ({
     (category) => (
       <Menu>
         <MenuItem
-          text={<T id={'edit_category'} />}
+          text={formatMessage({ id: 'edit_category' })}
           onClick={() => handelEditCategory(category)}
         />
+        <MenuDivider />
         <MenuItem
-          text={<T id={'delete_category'} />}
+          text={formatMessage({ id: 'delete_category' })}
+          intent={Intent.DANGER}
           onClick={() => handleDeleteCategory(category)}
         />
       </Menu>
@@ -120,6 +124,13 @@ const ItemsCategoryList = ({
     [],
   );
 
+  const handleRowContextMenu = useCallback(
+    (cell) => {
+      return actionMenuList(cell.row.original);
+    },
+    [actionMenuList],
+  );
+
   return (
     <LoadingIndicator mount={false}>
       <DataTable
@@ -133,6 +144,7 @@ const ItemsCategoryList = ({
         onSelectedRowsChange={handleSelectedRowsChange}
         treeGraph={true}
         spinnerProps={{ size: 30 }}
+        rowContextMenu={handleRowContextMenu}
       />
     </LoadingIndicator>
   );

client/src/containers/Items/ItemsDataTable.js

@@ -1,4 +1,4 @@
-import React, {useState, useEffect, useCallback, useMemo} from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import {
   Button,
   Popover,
@@ -6,7 +6,8 @@ import {
   MenuItem,
   MenuDivider,
   Position,
-} from '@blueprintjs/core'
+  Intent,
+} from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import DataTable from 'components/DataTable';
 import Icon from 'components/Icon';
@@ -14,7 +15,7 @@ import Money from 'components/Money';
 
 import LoadingIndicator from 'components/LoadingIndicator';
 import withItems from 'containers/Items/withItems';
-import {compose} from 'utils';
+import { compose } from 'utils';
 
 const ItemsDataTable = ({
   loading,
@@ -31,7 +32,7 @@ const ItemsDataTable = ({
 }) => {
   const { formatMessage } = useIntl();
   const [initialMount, setInitialMount] = useState(false);
-  
+
   useEffect(() => {
     if (!itemsTableLoading) {
       setInitialMount(true);
@@ -42,89 +43,118 @@ const ItemsDataTable = ({
     (item) => () => {
       onEditItem && onEditItem(item);
     },
-    [onEditItem]
+    [onEditItem],
   );
 
-
   // const handleDeleteItem = (item) => () => { onDeleteItem(item); };
-  const handleDeleteItem =useCallback((item)=>()=>{onDeleteItem(item)},[onDeleteItem])
-  const actionMenuList = useCallback((item) =>
-    (<Menu>
-      <MenuItem text={<T id={'view_details'}/>} />
-      <MenuDivider />
-      <MenuItem text={<T id={'edit_item'}/>} onClick={handleEditItem(item)} />
-      <MenuItem text={<T id={'delete_item'}/>} onClick={handleDeleteItem(item)} />
-    </Menu>), [handleEditItem, handleDeleteItem]);
- 
-  const columns = useMemo(() => [
-    
-    {
-      Header: formatMessage({ id:'item_name' }),
-      accessor: 'name',
-      className: "actions",
+  const handleDeleteItem = useCallback(
+    (item) => () => {
+      onDeleteItem(item);
     },
-    {
-      Header: formatMessage({ id:'sku' }),
-      accessor: 'sku',
-      className: "sku",
-    },
-    {
-      Header: formatMessage({ id:'category' }),
-      accessor: 'category.name',
-      className: 'category',
-    },
-    {
-      Header: formatMessage({ id: 'sell_price' }),
-      accessor: row => (<Money amount={row.sell_price} currency={'USD'} />),
-      className: 'sell-price',
-    },
-    {
-      Header: formatMessage({ id: '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='more-h-16' iconSize={16} />} />
-        </Popover>
-      ),
-      className: 'actions',
-      width: 50,
-    },
-  ], [actionMenuList,formatMessage]);
+    [onDeleteItem],
+  );
+  const actionMenuList = useCallback(
+    (item) => (
+      <Menu>
+        <MenuItem text={formatMessage({ id: 'view_details' })} />
+        <MenuDivider />
+        <MenuItem
+          text={formatMessage({ id: 'edit_item' })}
+          onClick={handleEditItem(item)}
+        />
+        <MenuItem
+          text={formatMessage({ id: 'delete_item' })}
+          onClick={handleDeleteItem(item)}
+          intent={Intent.DANGER}
+        />
+      </Menu>
+    ),
+    [handleEditItem, handleDeleteItem, formatMessage],
+  );
 
-  const selectionColumn = useMemo(() => ({
-    minWidth: 42,
-    width: 42,
-    maxWidth: 42,
-  }), []);
+  const handleRowContextMenu = useCallback((cell) => {
+    return actionMenuList(cell.row.original);
+  }, [actionMenuList]);
+
+  const columns = useMemo(
+    () => [
+      {
+        Header: formatMessage({ id: 'item_name' }),
+        accessor: 'name',
+        className: 'actions',
+      },
+      {
+        Header: formatMessage({ id: 'sku' }),
+        accessor: 'sku',
+        className: 'sku',
+      },
+      {
+        Header: formatMessage({ id: 'category' }),
+        accessor: 'category.name',
+        className: 'category',
+      },
+      {
+        Header: formatMessage({ id: 'sell_price' }),
+        accessor: (row) => <Money amount={row.sell_price} currency={'USD'} />,
+        className: 'sell-price',
+      },
+      {
+        Header: formatMessage({ id: '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="more-h-16" iconSize={16} />} />
+          </Popover>
+        ),
+        className: 'actions',
+        width: 50,
+      },
+    ],
+    [actionMenuList, formatMessage],
+  );
+
+  const selectionColumn = useMemo(
+    () => ({
+      minWidth: 42,
+      width: 42,
+      maxWidth: 42,
+    }),
+    [],
+  );
 
   const handleFetchData = useCallback((...args) => {
-    onFetchData && onFetchData(...args)
+    onFetchData && onFetchData(...args);
   }, []);
 
-  const handleSelectedRowsChange = useCallback((selectedRows) => {
-    onSelectedRowsChange && onSelectedRowsChange(selectedRows.map(s => s.original));
-  }, [onSelectedRowsChange]);
+  const handleSelectedRowsChange = useCallback(
+    (selectedRows) => {
+      onSelectedRowsChange &&
+        onSelectedRowsChange(selectedRows.map((s) => s.original));
+    },
+    [onSelectedRowsChange],
+  );
 
   return (
     <LoadingIndicator loading={loading} mount={false}>
@@ -135,22 +165,19 @@ const ItemsDataTable = ({
         onFetchData={handleFetchData}
         loading={itemsTableLoading && !initialMount}
         noInitialFetch={true}
-        expandable={true} 
+        expandable={true}
         treeGraph={true}
-        spinnerProps={{size: 30}}
-        onSelectedRowsChange={handleSelectedRowsChange} />
+        spinnerProps={{ size: 30 }}
+        onSelectedRowsChange={handleSelectedRowsChange}
+        rowContextMenu={handleRowContextMenu}
+      />
     </LoadingIndicator>
   );
 };
 
 export default compose(
-
   withItems(({ itemsCurrentPage, itemsTableLoading }) => ({
     itemsCurrentPage,
     itemsTableLoading,
   })),
 )(ItemsDataTable);
-
-
-
-