QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-23 08:10:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Context menu on data-table.

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2020-06-21 19:23:12 +02:00
parent 15bcd55979
commit 53cc8ba057
9 changed files with 337 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
client/src/components/DataTable.js
View File

@@ -8,7 +8,7 @@ import {
useSortBy, useSortBy,
useFlexLayout, useFlexLayout,
} from 'react-table'; } from 'react-table';
import { Checkbox, Spinner } from '@blueprintjs/core'; import { Checkbox, Spinner, ContextMenu, Menu, MenuItem } from '@blueprintjs/core';
import classnames from 'classnames'; import classnames from 'classnames';
import { FixedSizeList } from 'react-window'; import { FixedSizeList } from 'react-window';
import { useSticky } from 'react-table-sticky'; import { useSticky } from 'react-table-sticky';
@@ -51,6 +51,7 @@ export default function DataTable({
pagesCount: controlledPageCount, pagesCount: controlledPageCount,
initialPageIndex, initialPageIndex,
initialPageSize, initialPageSize,
rowContextMenu
}) { }) {
const { const {
getTableProps, getTableProps,
@@ -192,6 +193,20 @@ export default function DataTable({
[expandable, expandToggleColumn], [expandable, expandToggleColumn],
); );
const handleRowContextMenu = (cell, row) => (e) => {
if (typeof rowContextMenu === 'function') {
e.preventDefault();
const tr = e.currentTarget.closest('.tr');
tr.classList.add('is-context-menu-active');
const DropdownEl = rowContextMenu(cell, row);
ContextMenu.show(DropdownEl, { left: e.clientX, top: e.clientY }, () => {
tr.classList.remove('is-context-menu-active');
});
}
};
// Renders table row. // Renders table row.
const RenderRow = useCallback( const RenderRow = useCallback(
({ style = {}, row }) => { ({ style = {}, row }) => {

16
client/src/containers/Accounting/ManualJournalsDataTable.js
View File

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

139
client/src/containers/Accounts/AccountsDataTable.js
View File

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

16
client/src/containers/Expenses/ExpenseDataTable.js
View File

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

16
client/src/containers/Items/ItemCategoriesTable.js
View File

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

99
client/src/containers/Items/ItemsDataTable.js
View File

@@ -1,4 +1,4 @@
import React, {useState, useEffect, useCallback, useMemo} from 'react'; import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { import {
Button, Button,
Popover, Popover,
@@ -6,7 +6,8 @@ import {
MenuItem, MenuItem,
MenuDivider, MenuDivider,
Position, Position,
} from '@blueprintjs/core' Intent,
} from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl'; import { FormattedMessage as T, useIntl } from 'react-intl';
import DataTable from 'components/DataTable'; import DataTable from 'components/DataTable';
import Icon from 'components/Icon'; import Icon from 'components/Icon';
@@ -14,7 +15,7 @@ import Money from 'components/Money';
import LoadingIndicator from 'components/LoadingIndicator'; import LoadingIndicator from 'components/LoadingIndicator';
import withItems from 'containers/Items/withItems'; import withItems from 'containers/Items/withItems';
import {compose} from 'utils'; import { compose } from 'utils';
const ItemsDataTable = ({ const ItemsDataTable = ({
loading, loading,
@@ -42,45 +43,64 @@ const ItemsDataTable = ({
(item) => () => { (item) => () => {
onEditItem && onEditItem(item); onEditItem && onEditItem(item);
}, },
[onEditItem] [onEditItem],
); );
// const handleDeleteItem = (item) => () => { onDeleteItem(item); }; // const handleDeleteItem = (item) => () => { onDeleteItem(item); };
const handleDeleteItem =useCallback((item)=>()=>{onDeleteItem(item)},[onDeleteItem]) const handleDeleteItem = useCallback(
const actionMenuList = useCallback((item) => (item) => () => {
(<Menu> onDeleteItem(item);
<MenuItem text={<T id={'view_details'}/>} /> },
[onDeleteItem],
);
const actionMenuList = useCallback(
(item) => (
<Menu>
<MenuItem text={formatMessage({ id: 'view_details' })} />
<MenuDivider /> <MenuDivider />
<MenuItem text={<T id={'edit_item'}/>} onClick={handleEditItem(item)} /> <MenuItem
<MenuItem text={<T id={'delete_item'}/>} onClick={handleDeleteItem(item)} /> text={formatMessage({ id: 'edit_item' })}
</Menu>), [handleEditItem, handleDeleteItem]); onClick={handleEditItem(item)}
/>
<MenuItem
text={formatMessage({ id: 'delete_item' })}
onClick={handleDeleteItem(item)}
intent={Intent.DANGER}
/>
</Menu>
),
[handleEditItem, handleDeleteItem, formatMessage],
);
const columns = useMemo(() => [ const handleRowContextMenu = useCallback((cell) => {
return actionMenuList(cell.row.original);
}, [actionMenuList]);
const columns = useMemo(
() => [
{ {
Header: formatMessage({ id:'item_name' }), Header: formatMessage({ id: 'item_name' }),
accessor: 'name', accessor: 'name',
className: "actions", className: 'actions',
}, },
{ {
Header: formatMessage({ id:'sku' }), Header: formatMessage({ id: 'sku' }),
accessor: 'sku', accessor: 'sku',
className: "sku", className: 'sku',
}, },
{ {
Header: formatMessage({ id:'category' }), Header: formatMessage({ id: 'category' }),
accessor: 'category.name', accessor: 'category.name',
className: 'category', className: 'category',
}, },
{ {
Header: formatMessage({ id: 'sell_price' }), Header: formatMessage({ id: 'sell_price' }),
accessor: row => (<Money amount={row.sell_price} currency={'USD'} />), accessor: (row) => <Money amount={row.sell_price} currency={'USD'} />,
className: 'sell-price', className: 'sell-price',
}, },
{ {
Header: formatMessage({ id: 'cost_price' }), Header: formatMessage({ id: 'cost_price' }),
accessor: row => (<Money amount={row.cost_price} currency={'USD'} />), accessor: (row) => <Money amount={row.cost_price} currency={'USD'} />,
className: 'cost-price', className: 'cost-price',
}, },
// { // {
@@ -103,28 +123,38 @@ const ItemsDataTable = ({
Cell: ({ cell }) => ( Cell: ({ cell }) => (
<Popover <Popover
content={actionMenuList(cell.row.original)} content={actionMenuList(cell.row.original)}
position={Position.RIGHT_BOTTOM}> position={Position.RIGHT_BOTTOM}
<Button icon={<Icon icon='more-h-16' iconSize={16} />} /> >
<Button icon={<Icon icon="more-h-16" iconSize={16} />} />
</Popover> </Popover>
), ),
className: 'actions', className: 'actions',
width: 50, width: 50,
}, },
], [actionMenuList,formatMessage]); ],
[actionMenuList, formatMessage],
);
const selectionColumn = useMemo(() => ({ const selectionColumn = useMemo(
() => ({
minWidth: 42, minWidth: 42,
width: 42, width: 42,
maxWidth: 42, maxWidth: 42,
}), []); }),
[],
);
const handleFetchData = useCallback((...args) => { const handleFetchData = useCallback((...args) => {
onFetchData && onFetchData(...args) onFetchData && onFetchData(...args);
}, []); }, []);
const handleSelectedRowsChange = useCallback((selectedRows) => { const handleSelectedRowsChange = useCallback(
onSelectedRowsChange && onSelectedRowsChange(selectedRows.map(s => s.original)); (selectedRows) => {
}, [onSelectedRowsChange]); onSelectedRowsChange &&
onSelectedRowsChange(selectedRows.map((s) => s.original));
},
[onSelectedRowsChange],
);
return ( return (
<LoadingIndicator loading={loading} mount={false}> <LoadingIndicator loading={loading} mount={false}>
@@ -137,20 +167,17 @@ const ItemsDataTable = ({
noInitialFetch={true} noInitialFetch={true}
expandable={true} expandable={true}
treeGraph={true} treeGraph={true}
spinnerProps={{size: 30}} spinnerProps={{ size: 30 }}
onSelectedRowsChange={handleSelectedRowsChange} /> onSelectedRowsChange={handleSelectedRowsChange}
rowContextMenu={handleRowContextMenu}
/>
</LoadingIndicator> </LoadingIndicator>
); );
}; };
export default compose( export default compose(
withItems(({ itemsCurrentPage, itemsTableLoading }) => ({ withItems(({ itemsCurrentPage, itemsTableLoading }) => ({
itemsCurrentPage, itemsCurrentPage,
itemsTableLoading, itemsTableLoading,
})), })),
)(ItemsDataTable); )(ItemsDataTable);

1
client/src/lang/en/index.js
View File

@@ -471,4 +471,5 @@ export default {
next: 'Next', next: 'Next',
previous: 'Previous', previous: 'Previous',
showing_current_page_to_total: 'Showing {currentPage} to {totalPages} of {total} entries', showing_current_page_to_total: 'Showing {currentPage} to {totalPages} of {total} entries',
new_child_account: 'New Child Account'
}; };

5
client/src/style/components/data-table.scss
View File

@@ -123,6 +123,10 @@
.tr:hover .td{ .tr:hover .td{
background: #fafafa; background: #fafafa;
} }
.tr.is-context-menu-active .td{
background: #F3FAFC;
}
.td.actions .#{$ns}-button{ .td.actions .#{$ns}-button{
background: #E6EFFB; background: #E6EFFB;
border: 0; border: 0;
@@ -267,4 +271,3 @@
} }
} }
} }

1
client/src/style/pages/financial-statements.scss
View File

@@ -43,7 +43,6 @@
} }
&__header.is-hidden + .financial-statement__body{ &__header.is-hidden + .financial-statement__body{
border-top: 20px solid #FDFDFD;
.financial-sheet{ .financial-sheet{
margin-top: 40px; margin-top: 40px;