QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-16 12:50:38 +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

21
client/src/common/numberFormatsOptions.js
View File

@@ -1,18 +1,19 @@
export const moneyFormat = [
{ id: 'total', text: 'Total rows' },
{ id: 'always', text: 'Always' },
{ id: 'none', text: 'None' },
{ key: 'total', text: 'Total rows' },
{ key: 'always', text: 'Always' },
{ key: 'none', text: 'None' },
];
export const negativeFormat = [
{ id: 'parentheses', text: 'Parentheses ($1000)' },
{ id: 'mines', text: 'Minus -$1000' },
{ key: 'parentheses', text: '($1000)' },
{ key: 'mines', text: '-$1000' },
];
export const decimalPlaces = [
{ text: '1 Decimals', label: '$0.1', id: 1 },
{ text: '2 Decimals', label: '$0.01', id: 2 },
{ text: '3 Decimals', label: '$0.001', id: 3 },
{ text: '4 Decimals', label: '$0.0001', id: 4 },
{ text: '5 Decimals', label: '$0.00001', id: 5 },
{ text: '$1', key: 0 },
{ text: '$0.1', key: 1 },
{ text: '$0.01', key: 2 },
{ text: '$0.001', key: 3 },
{ text: '$0.0001', key: 4 },
{ text: '$0.00001', key: 5 },
];

6
client/src/components/FinancialSheet.js
View File

@@ -1,9 +1,11 @@
import React, { useMemo, useCallback } from 'react';
import moment from 'moment';
import classnames from 'classnames';
import { LoadingIndicator, MODIFIER } from 'components';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { If } from 'components';
import { If, LoadingIndicator, MODIFIER } from 'components';
import 'style/pages/FinancialStatements/FinancialSheet.scss';
export default function FinancialSheet({
companyName,

139
client/src/components/NumberFormatDropdown/NumberFormatFields.js Normal file
View File

@@ -0,0 +1,139 @@
import React from 'react';
import { FastField, ErrorMessage } from 'formik';
import { FormGroup, Checkbox, Switch } from '@blueprintjs/core';
import { CLASSES } from 'common/classes';
import { ListSelect } from 'components';
import { FormattedMessage as T } from 'react-intl';
import { inputIntent } from 'utils';
import {
moneyFormat,
negativeFormat,
decimalPlaces,
} from 'common/numberFormatsOptions';
import classNames from 'classnames';
/**
* Number Formats Fields.
*/
export default function NumberFormatFields({}) {
return (
<div className={'number-format-dropdown__content'}>
{/*------------ Negative formats -----------*/}
<FastField name={'negativeFormat'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'negative_format'} />}
helperText={<ErrorMessage name="negativeFormat" />}
intent={inputIntent({ error, touched })}
className={classNames(CLASSES.FILL)}
>
<ListSelect
items={negativeFormat}
onItemSelect={(format) => {
form.setFieldValue('negativeFormat', format.key);
}}
filterable={false}
selectedItem={value}
selectedItemProp={'key'}
textProp={'text'}
popoverProps={{ minimal: true, captureDismiss: true }}
/>
</FormGroup>
)}
</FastField>
{/*------------ Decimal places -----------*/}
<FastField name={'precision'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'decimal_places'} />}
helperText={<ErrorMessage name="format_money" />}
intent={inputIntent({ error, touched })}
className={classNames(CLASSES.FILL)}
>
<ListSelect
items={decimalPlaces}
onItemSelect={(format) => {
form.setFieldValue('precision', format.key);
}}
filterable={false}
selectedItem={value}
selectedItemProp={'key'}
textProp={'text'}
popoverProps={{ minimal: true, captureDismiss: true }}
/>
</FormGroup>
)}
</FastField>
{/*------------ Money formats -----------*/}
<FastField name={'formatMoney'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'money_format'} />}
helperText={<ErrorMessage name="formatMoney" />}
intent={inputIntent({ error, touched })}
className={classNames(CLASSES.FILL)}
>
<ListSelect
items={moneyFormat}
onItemSelect={(format) => {
form.setFieldValue('formatMoney', format.key);
}}
filterable={false}
selectedItem={value}
selectedItemProp={'key'}
textProp={'text'}
popoverProps={{ minimal: true, captureDismiss: true }}
/>
</FormGroup>
)}
</FastField>
<div className="toggles-fields">
{/*------------ show zero -----------*/}
<FastField name={'showZero'} type={'checkbox'}>
{({ field }) => (
<FormGroup inline={true}>
<Switch
inline={true}
small={true}
label={<T id={'show_zero'} />}
name={'showZero'}
{...field}
/>
</FormGroup>
)}
</FastField>
{/*------------ show negative in red-----------*/}
<FastField name={'showInRed'} type={'checkbox'}>
{({ field }) => (
<FormGroup inline={true}>
<Switch
inline={true}
label={<T id={'show_negative_in_red'} />}
name={'showInRed'}
{...field}
/>
</FormGroup>
)}
</FastField>
{/*------------ Divide on 1000 -----------*/}
<FastField name={'divideOn1000'} type={'checkbox'}>
{({ field }) => (
<FormGroup inline={true}>
<Switch
inline={true}
label={<T id={'divide_on_1000'} />}
name={'divideOn1000'}
{...field}
/>
</FormGroup>
)}
</FastField>
</div>
</div>
);
}

35
client/src/components/NumberFormatDropdown/NumberFormatFooter.js Normal file
View File

@@ -0,0 +1,35 @@
import React from 'react';
import { useFormikContext } from 'formik';
import { Button, Classes, Intent } from '@blueprintjs/core';
import classNames from 'classnames';
import { FormattedMessage as T } from 'react-intl';
/**
* Number format footer.
*/
export default function NumberFormatFooter({
// #ownProps
onCancelClick,
submitDisabled
}) {
return (
<div className={classNames('number-format-dropdown__footer')}>
<Button
className={classNames('mr1', Classes.POPOVER_DISMISS)}
onClick={onCancelClick}
small={true}
>
<T id={'cancel'} />
</Button>
<Button
intent={Intent.PRIMARY}
disabled={submitDisabled}
small={true}
type="submit"
>
<T id={'run'} />
</Button>
</div>
);
}

0
client/src/components/NumberFormats/NumberFormats.schema.js → client/src/components/NumberFormatDropdown/NumberFormats.schema.js
View File

45
client/src/components/NumberFormatDropdown/index.js Normal file
View File

@@ -0,0 +1,45 @@
import React, { useCallback } from 'react';
import { Formik, Form } from 'formik';
import 'style/pages/FinancialStatements/NumberFormatDropdown.scss';
import NumberFormatFields from './NumberFormatFields';
import NumberFormatFooter from './NumberFormatFooter';
/**
* Number format form popover content.
*/
export default function NumberFormatDropdown({
numberFormat = {},
onSubmit,
submitDisabled = false,
}) {
const initialValues = {
formatMoney: 'total',
showZero: false,
showInRed: false,
divideOn1000: false,
negativeFormat: 'mines',
precision: 2,
...numberFormat
};
// Handle cancel button click.
const handleCancelClick = useCallback(() => {}, []);
// Handle form submit.
const handleFormSubmit = (values, { setSubmitting }) => {
setSubmitting(true);
onSubmit(values);
};
return (
<div className={'number-format-dropdown'}>
<Formik initialValues={initialValues} onSubmit={handleFormSubmit}>
<Form>
<NumberFormatFields onCancelClick={handleCancelClick} />
<NumberFormatFooter submitDisabled={submitDisabled} />
</Form>
</Formik>
</div>
);
}

169
client/src/components/NumberFormats/NumberFormatFields.js
View File

@@ -1,169 +0,0 @@
import React from 'react';
import { Form, FastField, ErrorMessage, useFormikContext } from 'formik';
import {
Button,
Classes,
FormGroup,
InputGroup,
Intent,
Checkbox,
} from '@blueprintjs/core';
import { CLASSES } from 'common/classes';
import { Row, Col, ListSelect } from 'components';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { inputIntent } from 'utils';
import {
moneyFormat,
negativeFormat,
decimalPlaces,
} from 'common/numberFormatsOptions';
import classNames from 'classnames';
/**
* Number Formats Fields.
*/
export default function NumberFormatFields({
// #ownProps
onCancelClick,
}) {
const { isSubmitting } = useFormikContext();
return (
<Form>
<div className={'number-format__content'}>
{/*------------ Money formats -----------*/}
<FastField name={'format_money'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'money_format'} />}
helperText={<ErrorMessage name="format_money" />}
intent={inputIntent({ error, touched })}
className={classNames(CLASSES.FILL)}
>
<ListSelect
items={moneyFormat}
onItemSelect={(format) => {
form.setFieldValue('format_money', format.name);
}}
filterable={false}
selectedItem={value}
selectedItemProp={'id'}
textProp={'text'}
popoverProps={{ minimal: true, captureDismiss: true }}
/>
</FormGroup>
)}
</FastField>
{/*------------ Negative formats -----------*/}
<FastField name={'negative_format'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'negative_format'} />}
helperText={<ErrorMessage name="negative_format" />}
intent={inputIntent({ error, touched })}
className={classNames(CLASSES.FILL)}
>
<ListSelect
items={negativeFormat}
onItemSelect={(format) => {
form.setFieldValue('negative_format', format.name);
}}
filterable={false}
selectedItem={value}
selectedItemProp={'id'}
textProp={'text'}
popoverProps={{ minimal: true, captureDismiss: true }}
/>
</FormGroup>
)}
</FastField>
{/*------------ Decimal places -----------*/}
<FastField name={'precision'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'decimal_places'} />}
helperText={<ErrorMessage name="format_money" />}
intent={inputIntent({ error, touched })}
className={classNames(CLASSES.FILL)}
>
<ListSelect
items={decimalPlaces}
onItemSelect={(format) => {
form.setFieldValue('precision', format.key);
}}
filterable={false}
selectedItem={value}
selectedItemProp={'id'}
labelProp={'label'}
textProp={'text'}
popoverProps={{ minimal: true, captureDismiss: true }}
/>
</FormGroup>
)}
</FastField>
{/*------------ show zero -----------*/}
<FastField name={'show_zero'} type={'checkbox'}>
{({ field }) => (
<FormGroup inline={true}>
<Checkbox
inline={true}
label={<T id={'show_zero'} />}
name={'show_zero'}
{...field}
/>
</FormGroup>
)}
</FastField>
{/*------------ show negative in red-----------*/}
<FastField name={'show_in_red'} type={'checkbox'}>
{({ field }) => (
<FormGroup inline={true}>
<Checkbox
inline={true}
label={<T id={'show_negative_in_red'} />}
name={'show_in_red'}
{...field}
/>
</FormGroup>
)}
</FastField>
{/*------------ Divide on 1000 -----------*/}
<FastField name={'divide_on_1000'} type={'checkbox'}>
{({ field }) => (
<FormGroup inline={true}>
<Checkbox
inline={true}
label={<T id={'divide_on_1000'} />}
name={'divide_on_1000'}
{...field}
/>
</FormGroup>
)}
</FastField>
</div>
<div
className={classNames('number-format__footer', Classes.POPOVER_DISMISS)}
>
<Button
className={'mr1'}
onClick={onCancelClick}
small={true}
style={{ minWidth: '75px' }}
>
<T id={'cancel'} />
</Button>
<Button
intent={Intent.PRIMARY}
disabled={isSubmitting}
small={true}
style={{ minWidth: '75px' }}
type="submit"
>
<T id={'run'} />
</Button>
</div>
</Form>
);
}

42
client/src/components/NumberFormats/index.js
View File

@@ -1,42 +0,0 @@
import React, { useState, useCallback, useMemo } from 'react';
import { Classes } from '@blueprintjs/core';
import { Formik } from 'formik';
import classNames from 'classnames';
import NumberFormatFields from './NumberFormatFields';
import { compose } from 'utils';
/**
* Number format form popover content.
*/
function NumberFormats() {
const initialValues = useMemo(
() => ({
format_money: '',
show_zero: '',
show_in_red: '',
divide_on_1000: '',
negative_format: '',
precision: '',
}),
[],
);
// Handle cancel button click.
const handleCancelClick = useCallback(() => {}, []);
// Handle form submit.
const handleFormSubmit = (values, { setSubmitting }) => {
setSubmitting(true);
const form = { ...values };
};
return (
<div className={'number-format'}>
<Formik initialValues={initialValues} onSubmit={handleFormSubmit}>
<NumberFormatFields onCancelClick={handleCancelClick} />
</Formik>
</div>
);
}
export default NumberFormats;

12
client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js
View File

@@ -94,9 +94,19 @@ function ReceivableAgingSummarySheet({
[refreshARAgingSummary, toggleFilterARAgingSummary],
);
const handleNumberFormatSubmit = (numberFormat) => {
setQuery({
...query,
numberFormat
});
refreshARAgingSummary(true);
};
return (
<DashboardInsider>
<ARAgingSummaryActionsBar />
<ARAgingSummaryActionsBar
numberFormat={query.numberFormat}
onNumberFormatSubmit={handleNumberFormatSubmit}/>
<DashboardPageContent>
<FinancialStatement>

34
client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.js
View File

@@ -13,11 +13,13 @@ import classNames from 'classnames';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import Icon from 'components/Icon';
import NumberFormatDropdown from 'components/NumberFormatDropdown';
import withARAgingSummary from './withARAgingSummary';
import withARAgingSummaryActions from './withARAgingSummaryActions';
import { compose } from 'utils';
import { safeInvoke } from '@blueprintjs/core/lib/esm/common/utils';
/**
* AR Aging summary sheet - Actions bar.
@@ -25,10 +27,15 @@ import { compose } from 'utils';
function ARAgingSummaryActionsBar({
// #withReceivableAging
receivableAgingFilter,
ARAgingSummaryLoading,
// #withReceivableAgingActions
toggleFilterARAgingSummary,
refreshARAgingSummary,
// #ownProps
numberFormat,
onNumberFormatSubmit,
}) {
const handleFilterToggleClick = () => {
toggleFilterARAgingSummary();
@@ -37,6 +44,10 @@ function ARAgingSummaryActionsBar({
const handleRecalcReport = () => {
refreshARAgingSummary(true);
};
// Handle number format submit.
const handleNumberFormatSubmit = (numberFormat) => {
safeInvoke(onNumberFormatSubmit, numberFormat);
};
return (
<DashboardActionsBar>
@@ -64,6 +75,25 @@ function ARAgingSummaryActionsBar({
/>
<NavbarDivider />
<Popover
content={
<NumberFormatDropdown
numberFormat={numberFormat}
onSubmit={handleNumberFormatSubmit}
submitDisabled={ARAgingSummaryLoading}
/>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
className={classNames(Classes.MINIMAL, 'button--filter')}
text={<T id={'format'} />}
icon={<Icon icon="numbers" width={23} height={16} />}
/>
</Popover>
<Button
className={Classes.MINIMAL}
text={<T id={'filter'} />}
@@ -88,7 +118,7 @@ function ARAgingSummaryActionsBar({
export default compose(
withARAgingSummaryActions,
withARAgingSummary(({ receivableAgingSummaryFilter }) => ({
receivableAgingFilter: receivableAgingSummaryFilter,
withARAgingSummary(({ receivableAgingSummaryLoading }) => ({
ARAgingSummaryLoading: receivableAgingSummaryLoading,
})),
)(ARAgingSummaryActionsBar);

4
client/src/containers/FinancialStatements/ARAgingSummary/common.js
View File

@@ -1,5 +1,5 @@
import { mapKeys, snakeCase } from 'lodash';
import { transformToCamelCase, flatObject } from 'utils';
export const transfromFilterFormToQuery = (form) => {
return mapKeys(form, (v, k) => snakeCase(k));
return flatObject(transformToCamelCase(form));
};

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 '';
};

31
client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js
View File

@@ -13,19 +13,25 @@ import classNames from 'classnames';
import Icon from 'components/Icon';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import NumberFormatDropdown from 'components/NumberFormatDropdown';
import withProfitLossActions from './withProfitLossActions';
import withProfitLoss from './withProfitLoss';
import { compose } from 'utils';
import { compose, saveInvoke } from 'utils';
function ProfitLossActionsBar({
// #withProfitLoss
profitLossSheetFilter,
profitLossSheetLoading,
// #withProfitLossActions
toggleProfitLossSheetFilter,
refreshProfitLossSheet,
// #ownProps
numberFormat,
onNumberFormatSubmit,
}) {
const handleFilterClick = () => {
toggleProfitLossSheetFilter();
@@ -34,6 +40,10 @@ function ProfitLossActionsBar({
const handleRecalcReport = () => {
refreshProfitLossSheet(true);
};
// Handle number format submit.
const handleNumberFormatSubmit = (values) => {
saveInvoke(onNumberFormatSubmit, values);
};
return (
<DashboardActionsBar>
@@ -61,6 +71,25 @@ function ProfitLossActionsBar({
/>
<NavbarDivider />
<Popover
content={
<NumberFormatDropdown
numberFormat={numberFormat}
onSubmit={handleNumberFormatSubmit}
submitDisabled={profitLossSheetLoading}
/>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<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}

16
client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js
View File

@@ -77,18 +77,28 @@ function ProfitLossSheet({
{ manual: true });
// Handle submit filter.
const handleSubmitFilter = useCallback((filter) => {
const handleSubmitFilter = (filter) => {
const _filter = {
...filter,
fromDate: moment(filter.fromDate).format('YYYY-MM-DD'),
toDate: moment(filter.toDate).format('YYYY-MM-DD'),
};
setFilter(_filter);
}, [setFilter]);
};
// Handle number format submit.
const handleNumberFormatSubmit = (numberFormat) => {
setFilter({
...filter,
numberFormat,
});
};
return (
<DashboardInsider>
<ProfitLossActionsBar />
<ProfitLossActionsBar
numberFormat={filter.numberFormat}
onNumberFormatSubmit={handleNumberFormatSubmit}
/>
<DashboardPageContent>
<div class="financial-statement">

32
client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js
View File

@@ -32,18 +32,7 @@ function ProfitLossSheetTable({
? [
{
Header: formatMessage({ id: 'total' }),
Cell: ({ cell }) => {
const row = cell.row.original;
if (row.total) {
return (
<Money
amount={row.total.formatted_amount}
currency={row.total.currency_code}
/>
);
}
return '';
},
accessor: 'total.formatted_amount',
className: 'total',
width: 140,
},
@@ -53,13 +42,7 @@ function ProfitLossSheetTable({
? profitLossColumns.map((column, index) => ({
id: `date_period_${index}`,
Header: column,
accessor: (row) => {
if (row.total_periods && row.total_periods[index]) {
const amount = row.total_periods[index].formatted_amount;
return <Money amount={amount} currency={'USD'} />;
}
return '';
},
accessor: `total_periods[${index}].formatted_amount`,
width: getColumnWidth(
profitLossTableRows,
`total_periods.${index}.formatted_amount`,
@@ -69,7 +52,12 @@ function ProfitLossSheetTable({
}))
: []),
],
[profitLossQuery.display_columns_type, profitLossTableRows, profitLossColumns, formatMessage],
[
profitLossQuery.display_columns_type,
profitLossTableRows,
profitLossColumns,
formatMessage,
],
);
// Retrieve default expanded rows of balance sheet.
@@ -81,9 +69,7 @@ function ProfitLossSheetTable({
// Retrieve conditional datatable row classnames.
const rowClassNames = useCallback((row) => {
const { original } = row;
const rowTypes = Array.isArray(original.rowTypes)
? original.rowTypes
: [];
const rowTypes = Array.isArray(original.rowTypes) ? original.rowTypes : [];
return {
...rowTypes.reduce((acc, rowType) => {

34
client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js
View File

@@ -13,18 +13,24 @@ import { FormattedMessage as T } from 'react-intl';
import Icon from 'components/Icon';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import NumberFormatDropdown from 'components/NumberFormatDropdown';
import withTrialBalance from './withTrialBalance';
import withTrialBalanceActions from './withTrialBalanceActions';
import { compose } from 'utils';
import { compose, saveInvoke } from 'utils';
function TrialBalanceActionsBar({
// #withTrialBalance
trialBalanceSheetFilter,
trialBalanceSheetLoading,
// #withTrialBalanceActions
toggleTrialBalanceFilter,
refreshTrialBalance,
// #ownProps
numberFormat,
onNumberFormatSubmit
}) {
const handleFilterToggleClick = () => {
toggleTrialBalanceFilter();
@@ -34,6 +40,10 @@ function TrialBalanceActionsBar({
refreshTrialBalance(true);
};
// Handle number format submit.
const handleNumberFormatSubmit = (values) => {
saveInvoke(onNumberFormatSubmit, values);
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -60,6 +70,25 @@ function TrialBalanceActionsBar({
/>
<NavbarDivider />
<Popover
content={
<NumberFormatDropdown
numberFormat={numberFormat}
onSubmit={handleNumberFormatSubmit}
submitDisabled={trialBalanceSheetLoading}
/>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<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}
@@ -88,8 +117,9 @@ function TrialBalanceActionsBar({
}
export default compose(
withTrialBalance(({ trialBalanceSheetFilter }) => ({
withTrialBalance(({ trialBalanceSheetFilter, trialBalanceSheetLoading }) => ({
trialBalanceSheetFilter,
trialBalanceSheetLoading
})),
withTrialBalanceActions,
)(TrialBalanceActionsBar);

14
client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js
View File

@@ -92,9 +92,20 @@ function TrialBalanceSheet({
}
}, [trialBalanceSheetRefresh, refreshTrialBalance]);
const handleNumberFormatSubmit = (numberFormat) => {
setFilter({
...filter,
numberFormat,
});
refreshTrialBalance(false);
};
return (
<DashboardInsider>
<TrialBalanceActionsBar />
<TrialBalanceActionsBar
numberFormat={filter.numberFormat}
onNumberFormatSubmit={handleNumberFormatSubmit}
/>
<DashboardPageContent>
<div class="financial-statement">
@@ -102,7 +113,6 @@ function TrialBalanceSheet({
pageFilter={filter}
onSubmitFilter={handleFilterSubmit}
/>
<div class="financial-statement__body">
<TrialBalanceSheetTable companyName={organizationName} />
</div>

18
client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js
View File

@@ -31,11 +31,7 @@ function TrialBalanceSheetTable({
},
{
Header: formatMessage({ id: 'credit' }),
accessor: 'credit',
Cell: ({ cell }) => {
const { currency_code, credit } = cell.row.original;
return <Money amount={credit} currency={currency_code} />;
},
accessor: 'formatted_credit',
className: 'credit',
width: getColumnWidth(trialBalanceTableRows, `credit`, {
minWidth: 95,
@@ -43,20 +39,12 @@ function TrialBalanceSheetTable({
},
{
Header: formatMessage({ id: 'debit' }),
accessor: 'debit',
Cell: ({ cell }) => {
const { currency_code, debit } = cell.row.original;
return <Money amount={debit} currency={currency_code} />;
},
accessor: 'formatted_debit',
width: getColumnWidth(trialBalanceTableRows, `debit`, { minWidth: 95 }),
},
{
Header: formatMessage({ id: 'balance' }),
accessor: 'balance',
Cell: ({ cell }) => {
const { currency_code, balance } = cell.row.original;
return <Money amount={balance} currency={currency_code} />;
},
accessor: 'formatted_balance',
className: 'balance',
width: getColumnWidth(trialBalanceTableRows, `balance`, {
minWidth: 95,

6
client/src/containers/FinancialStatements/common.js
View File

@@ -1,4 +1,5 @@
import { mapKeys, omit, snakeCase } from 'lodash';
import { transformToCamelCase, flatObject } from 'utils';
import { formatMessage } from 'services/intl';
export const displayColumnsByOptions = [
@@ -52,10 +53,11 @@ export const transformDisplayColumnsType = (form) => {
};
export const transformFilterFormToQuery = (form) => {
return mapKeys({
const transformed = transformToCamelCase({
...omit(form, ['accountsFilter']),
...transformDisplayColumnsType(form),
noneZero: form.accountsFilter === 'without-zero-balance',
noneTransactions: form.accountsFilter === 'with-transactions',
}, (v, k) => snakeCase(k));
});
return flatObject(transformed);
};

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

@@ -960,9 +960,9 @@ export default {
select_adjustment_account: 'Select adjustment account',
qty: 'Quantity on hand',
money_format: 'Money format',
show_zero: 'Show zero',
show_negative_in_red: 'Show negative in red',
divide_on_1000: 'Divide on 1000',
show_zero: 'Show zero.',
show_negative_in_red: 'Show negative in red.',
divide_on_1000: 'Divide on 1000.',
negative_format: 'Negative format',
decimal_places: 'Decimal places',
run: 'Run',

8
client/src/static/json/icons.js
View File

@@ -354,4 +354,12 @@ export default {
path: ['M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'],
viewBox: '0 0 24 24',
},
'numbers': {
path: [
'M2.9377,11V5.26q0-.3633.0069-.9238T2.98,3.3a3.6334,3.6334,0,0,1-.35.3785q-.1677.1538-.3642.3076L1.16,4.9105.0535,3.5246,3.19,1.0046H5.08V11Z',
'M7.8655,11V9.5158l2.5058-2.5332q.7559-.77,1.2178-1.295a4.512,4.512,0,0,0,.6719-.9521,2.0537,2.0537,0,0,0,.21-.917,1.0375,1.0375,0,0,0-.3711-.875,1.455,1.455,0,0,0-.917-.2871,2.2924,2.2924,0,0,0-1.0712.2661A6.6756,6.6756,0,0,0,9,3.6789L7.8376,2.2926A10.771,10.771,0,0,1,8.7615,1.6a4.4132,4.4132,0,0,1,1.1264-.5323A4.931,4.931,0,0,1,11.3791.8644a3.9291,3.9291,0,0,1,1.7012.3433,2.6249,2.6249,0,0,1,1.1123.9521,2.5386,2.5386,0,0,1,.3926,1.4068A3.5845,3.5845,0,0,1,14.27,5.0788a5.32,5.32,0,0,1-.9307,1.3579q-.6166.6715-1.4981,1.498L10.595,9.1378v.07h4.27V11Z',
'M18.91,11.14a7.8841,7.8841,0,0,1-1.582-.14,7.3067,7.3067,0,0,1-1.3155-.4062v-1.82a5.5853,5.5853,0,0,0,1.3438.498,5.9318,5.9318,0,0,0,1.3164.16,2.5022,2.5022,0,0,0,1.5742-.3779,1.2582,1.2582,0,0,0,.4556-1.0216,1.105,1.105,0,0,0-.5459-1.0078,3.7194,3.7194,0,0,0-1.8477-.336h-.7422V5.0368h.7558a3.0031,3.0031,0,0,0,1.708-.378,1.167,1.167,0,0,0,.5322-.9941.93.93,0,0,0-.3779-.8052,1.7126,1.7126,0,0,0-1.0225-.2729,3.1339,3.1339,0,0,0-1.28.2451,6.4963,6.4963,0,0,0-.917.4829l-.9248-1.4277a6.0463,6.0463,0,0,1,1.3867-.7212A5.67,5.67,0,0,1,19.4149.8644a3.838,3.838,0,0,1,2.3945.6514,2.08,2.08,0,0,1,.84,1.729,2.2193,2.2193,0,0,1-.6231,1.6518,3.2277,3.2277,0,0,1-1.5332.84v.042a3.1845,3.1845,0,0,1,1.8272.7422,2.1271,2.1271,0,0,1,.623,1.624,2.8,2.8,0,0,1-.4267,1.5185A2.9013,2.9013,0,0,1,21.2,10.7415,5.6336,5.6336,0,0,1,18.91,11.14Z'
],
viewBox: '0 0 23 12',
}
};

2
client/src/store/financialStatement/financialStatements.mappers.js
View File

@@ -104,7 +104,7 @@ export const ARAgingSummaryTableRowsMapper = (sheet, total) => {
return [
...rows,
{
name: 'Total Aged Receivable',
name: '',
rowType: 'total',
current: sheet.total.current.formatted_amount,
...mapAging(sheet.total.aging),

3
client/src/style/App.scss
View File

@@ -26,12 +26,9 @@
@import 'components/Tooltip';
// Pages
@import 'pages/financial-statements';
@import 'pages/view-form';
@import 'pages/register-organizaton';
@import 'pages/number-format.scss';
// Views
@import 'views/filter-dropdown';

2
client/src/style/pages/Dashboard/Dashboard.scss
View File

@@ -136,7 +136,7 @@
}
.#{$ns}-button {
color: #32304a;
padding: 8px 12px;
padding: 8px 10px;
&:hover {
background: rgba(167, 182, 194, 0.12);

4
client/src/style/pages/FinancialStatements/ARAgingSummary.scss
View File

@@ -15,9 +15,11 @@
.tbody{
.tr .td{
border-bottom: 0;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
.tr:not(:first-child) .td{
border-top: 1px solid #E8E8E8;
border-top: 1px solid transparent;
}
.tr.row-type--total{
font-weight: 500;

2
client/src/style/pages/FinancialStatements/BalanceSheet.scss
View File

@@ -14,6 +14,8 @@
.tbody{
.tr .td{
border-bottom: 0;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
.tr.row_type--total-row .td{
border-top: 1px solid #BBB;

16
client/src/style/pages/financial-statements.scss → client/src/style/pages/FinancialStatements/FinancialSheet.scss
View File

@@ -1,7 +1,3 @@
// .form-group-display-columns-by{
// position: relative;
// }
.bigcapital-datatable{
@@ -20,15 +16,3 @@
}
}
}
.financial-statement--journal{
.financial-header-drawer{
.bp3-drawer{
max-height: 350px;
}
}
}

2
client/src/style/pages/FinancialStatements/Journal.scss
View File

@@ -28,4 +28,4 @@
max-height: 350px;
}
}
}
}

43
client/src/style/pages/FinancialStatements/NumberFormatDropdown.scss Normal file
View File

@@ -0,0 +1,43 @@
.number-format-dropdown{
width: 300px;
padding: 15px;
.bp3-form-group{
margin-bottom: 6px;
label.bp3-label{
font-size: 13px;
margin-bottom: 4px;
font-weight: 500;
}
.bp3-button{
min-height: 28px;
min-width: 28px;
}
}
.bp3-control.bp3-inline{
margin-bottom: 0;
margin-top: 0;
}
.toggles-fields{
margin-top: 14px;
}
&__footer{
text-align: right;
padding-top: 10px;
.bp3-button.bp3-small,
.bp3-button:not([class*="bp3-intent-"]):not(.bp3-minimal).bp3-small{
min-width: 65px;
height: 26px;
min-height: 26px;
}
}
.bp3-control .bp3-control-indicator{
height: 16px;
width: 16px;
}
}

2
client/src/style/pages/FinancialStatements/ProfitLossSheet.scss
View File

@@ -12,6 +12,8 @@
.tbody{
.tr .td{
border-bottom: 0;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
.tr.row_type--total{
font-weight: 500;

10
client/src/style/pages/FinancialStatements/TrialBalanceSheet.scss
View File

@@ -5,10 +5,18 @@
min-width: 720px;
.financial-sheet__table{
.thead,
.tbody{
.tr .td:not(:first-child),
.tr .th:not(:first-child) {
justify-content: flex-end;
}
}
.tbody{
.tr .td{
border-bottom: 0;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
.balance.td{
border-top-color: #000;

24
client/src/style/pages/number-format.scss
View File

@@ -1,24 +0,0 @@
.number-format {
width: 400px;
padding: 12px;
// width: 300px;
// padding: 10px;
&__content {
.bp3-form-group {
margin-bottom: 5px;
// margin-bottom: 0px;
.bp3-form-content {
.bp3-label {
margin-bottom: 3px;
}
.bp3-control {
margin: 5px 0px 0px;
}
}
}
}
&__footer {
display: flex;
justify-content: flex-end;
}
}

31
client/src/utils.js
View File

@@ -4,6 +4,8 @@ import { Intent } from '@blueprintjs/core';
import Currency from 'js-money/lib/currency';
import PProgress from 'p-progress';
import accounting from 'accounting';
import deepMapKeys from 'deep-map-keys';
export function removeEmptyFromObject(obj) {
obj = Object.assign({}, obj);
@@ -371,8 +373,6 @@ export function isBlank(value) {
return _.isEmpty(value) && !_.isNumber(value) || _.isNaN(value);
}
export const getColumnWidth = (
rows,
accessor,
@@ -389,7 +389,32 @@ export const getColumnWidth = (
return result;
};
export const toSafeNumber = (number) => {
return _.toNumber(_.defaultTo(number, 0));
};
export const transformToCamelCase = (object) => {
return deepMapKeys(object, (key) => _.snakeCase(key));
};
export function flatObject(obj) {
const flatObject = {};
const path = []; // current path
function dig(obj) {
if (obj !== Object(obj))
/*is primitive, end of path*/
return flatObject[path.join('.')] = obj; /*<- value*/
//no? so this is an object with keys. go deeper on each key down
for (let key in obj) {
path.push(key);
dig(obj[key]);
path.pop();
}
}
dig(obj);
return flatObject;
}