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

feat: financial report numbers format dropdown.

Browse Source
This commit is contained in:
a.bouhuolia
2021-01-18 20:08:08 +02:00
parent 10ab8f4711
commit 1fb523b5ff
36 changed files with 550 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
View File

@@ -6,6 +6,8 @@ import moment from 'moment';
import { useIntl } from 'react-intl';
import { queryCache } from 'react-query';
import 'style/pages/FinancialStatements/BalanceSheet.scss';
import BalanceSheetHeader from './BalanceSheetHeader';
import BalanceSheetTable from './BalanceSheetTable';
@@ -21,8 +23,9 @@ import withBalanceSheetDetail from './withBalanceSheetDetail';
import { transformFilterFormToQuery } from 'containers/FinancialStatements/common';
import 'style/pages/FinancialStatements/BalanceSheet.scss';
/**
* Balance sheet.
*/
function BalanceSheet({
// #withDashboardActions
changePageTitle,
@@ -47,10 +50,11 @@ function BalanceSheet({
displayColumnsType: 'total',
accountsFilter: 'all-accounts',
});
// Fetches the balance sheet.
const fetchHook = useQuery(['balance-sheet', filter], (key, query) =>
fetchBalanceSheet({ ...transformFilterFormToQuery(query) }),
fetchBalanceSheet({
...transformFilterFormToQuery(query),
}),
);
useEffect(() => {
@@ -76,23 +80,30 @@ function BalanceSheet({
}, [setDashboardBackLink]);
// Handle re-fetch balance sheet after filter change.
const handleFilterSubmit = useCallback(
(filter) => {
const _filter = {
...filter,
fromDate: moment(filter.fromDate).format('YYYY-MM-DD'),
toDate: moment(filter.toDate).format('YYYY-MM-DD'),
};
setFilter({ ..._filter });
refreshBalanceSheet(true);
},
[setFilter, refreshBalanceSheet],
);
const handleFilterSubmit = (filter) => {
const _filter = {
...filter,
fromDate: moment(filter.fromDate).format('YYYY-MM-DD'),
toDate: moment(filter.toDate).format('YYYY-MM-DD'),
};
setFilter({ ..._filter });
refreshBalanceSheet(true);
};
const handleNumberFormatSubmit = (values) => {
setFilter({
...filter,
numberFormat: values,
});
refreshBalanceSheet(true);
};
return (
<DashboardInsider>
<BalanceSheetActionsBar />
<BalanceSheetActionsBar
numberFormat={filter.numberFormat}
onNumberFormatSubmit={handleNumberFormatSubmit}
/>
<DashboardPageContent>
<FinancialStatement>
<BalanceSheetHeader

50
client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js
View File

@@ -13,19 +13,25 @@ import classNames from 'classnames';
import Icon from 'components/Icon';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import NumberFormats from 'components/NumberFormats';
import NumberFormatDropdown from 'components/NumberFormatDropdown';
import { compose } from 'utils';
import { compose, saveInvoke } from 'utils';
import withBalanceSheetDetail from './withBalanceSheetDetail';
import withBalanceSheetActions from './withBalanceSheetActions';
import { safeInvoke } from '@blueprintjs/core/lib/esm/common/utils';
function BalanceSheetActionsBar({
// #withBalanceSheetDetail
balanceSheetFilter,
balanceSheetLoading,
// #withBalanceSheetActions
toggleBalanceSheetFilter,
refreshBalanceSheet,
// #ownProps
numberFormat,
onNumberFormatSubmit,
}) {
const handleFilterToggleClick = () => {
toggleBalanceSheetFilter();
@@ -36,6 +42,10 @@ function BalanceSheetActionsBar({
refreshBalanceSheet(true);
};
const handleNumberFormatSubmit = (values) => {
safeInvoke(onNumberFormatSubmit, values);
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -63,18 +73,13 @@ function BalanceSheetActionsBar({
<NavbarDivider />
<Popover
// content={}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
className={classNames(Classes.MINIMAL, 'button--filter')}
text={<T id={'filter'} />}
icon={<Icon icon="filter-16" iconSize={16} />}
/>
</Popover>
<Popover
content={<NumberFormats />}
content={
<NumberFormatDropdown
numberFormat={numberFormat}
onSubmit={handleNumberFormatSubmit}
submitDisabled={balanceSheetLoading}
/>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
@@ -82,6 +87,18 @@ function BalanceSheetActionsBar({
<Button
className={classNames(Classes.MINIMAL, 'button--filter')}
text={<T id={'format'} />}
icon={<Icon icon="numbers" width={23} height={16} />}
/>
</Popover>
<Popover
// content={}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
className={classNames(Classes.MINIMAL, 'button--filter')}
text={<T id={'filter'} />}
icon={<Icon icon="filter-16" iconSize={16} />}
/>
</Popover>
@@ -104,6 +121,9 @@ function BalanceSheetActionsBar({
}
export default compose(
withBalanceSheetDetail(({ balanceSheetFilter }) => ({ balanceSheetFilter })),
withBalanceSheetDetail(({ balanceSheetFilter, balanceSheetLoading }) => ({
balanceSheetFilter,
balanceSheetLoading,
})),
withBalanceSheetActions,
)(BalanceSheetActionsBar);

12
client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js
View File

@@ -2,8 +2,6 @@ import React, { useMemo, useCallback } from 'react';
import { useIntl } from 'react-intl';
import classNames from 'classnames';
import Money from 'components/Money';
import FinancialSheet from 'components/FinancialSheet';
import DataTable from 'components/DataTable';
@@ -16,12 +14,7 @@ function TotalCell({ cell }) {
const row = cell.row.original;
if (row.total) {
return (
<Money
amount={row.total.formatted_amount}
currency={row.total.currency_code}
/>
);
return row.total.formatted_amount;
}
return '';
}
@@ -32,9 +25,8 @@ const TotalPeriodCell = (index) => ({ cell }) => {
if (original.total_periods && original.total_periods[index]) {
const amount = original.total_periods[index].formatted_amount;
const currencyCode = original.total_periods[index].currency_code;
return <Money amount={amount} currency={currencyCode} />;
return amount;
}
return '';
};