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

BIG-3: refactoring financial reports filtering.

Browse Source
This commit is contained in:
elforjani13
2021-09-25 21:17:17 +02:00
parent 010b660318
commit cd5116dbcb
30 changed files with 188 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
View File

@@ -31,7 +31,7 @@ function BalanceSheet({
toDate: moment().endOf('year').format('YYYY-MM-DD'),
basis: 'cash',
displayColumnsType: 'total',
accountsFilter: 'without-zero-balance',
filterByOption: 'without-zero-balance',
});
// Handle re-fetch balance sheet after filter change.

4
src/containers/FinancialStatements/BalanceSheet/utils.js
View File

@@ -5,7 +5,7 @@ import moment from 'moment';
export const getBalanceSheetHeaderDefaultValues = () => {
return {
basic: 'cash',
accountsFilter: 'without-zero-balance',
filterByOption: 'without-zero-balance',
displayColumnsType: 'total',
fromDate: moment().toDate(),
toDate: moment().toDate(),
@@ -20,6 +20,6 @@ export const getBalanceSheetHeaderValidationSchema = () =>
.min(Yup.ref('fromDate'))
.required()
.label(intl.get('toDate')),
accountsFilter: Yup.string(),
filterByOption: Yup.string(),
displayColumnsType: Yup.string(),
});

1
src/containers/FinancialStatements/CashFlowStatement/CashFlowStatement.js
View File

@@ -34,6 +34,7 @@ function CashFlowStatement({
toDate: moment().endOf('year').format('YYYY-MM-DD'),
basis: 'cash',
displayColumnsType: 'total',
filterByOption: 'with-transactions',
});
// Handle refetch cash flow after filter change.

2
src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementGeneralPanel.js
View File

@@ -13,7 +13,7 @@ export default function CashFlowStatementHeaderGeneralPanel() {
<div>
<FinancialStatementDateRange />
<SelectDisplayColumnsBy />
<FinancialStatementsFilter initialSelectedItem={'all-accounts'} />
<FinancialStatementsFilter initialSelectedItem={'with-transactions'} />
<RadiosAccountingBasis key={'basis'} />
</div>
);

1
src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummary.js
View File

@@ -29,6 +29,7 @@ function CustomersBalanceSummary({
}) {
const [filter, setFilter] = useState({
asDate: moment().endOf('day').format('YYYY-MM-DD'),
filterByOption: 'with-transactions',
});
// Handle re-fetch customers balance summary after filter change.

4
src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanelContent.js
View File

@@ -5,7 +5,7 @@ import { Classes, FormGroup, Position, Checkbox } from '@blueprintjs/core';
import { ContactsMultiSelect, FormattedMessage as T } from 'components';
import classNames from 'classnames';
import { Row, Col, FieldHint } from 'components';
import { filterCustomersOptions } from '../common';
import { filterCustomersOptions } from '../constants';
import {
momentFormatter,
@@ -71,7 +71,7 @@ export default function CustomersBalanceSummaryGeneralPanelContent() {
<FinancialStatementsFilter
items={filterCustomersOptions}
label={<T id={'customers.label_filter_customers'} />}
initialSelectedItem={'all-customers'}
initialSelectedItem={'with-transactions'}
/>
<Row>

1
src/containers/FinancialStatements/CustomersTransactions/CustomersTransactions.js
View File

@@ -30,6 +30,7 @@ function CustomersTransactions({
const [filter, setFilter] = useState({
fromDate: moment().startOf('year').format('YYYY-MM-DD'),
toDate: moment().endOf('year').format('YYYY-MM-DD'),
filterByOption: 'with-transactions',
});
const handleFilterSubmit = (filter) => {

4
src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanel.js
View File

@@ -10,7 +10,7 @@ import {
ContactsMultiSelect,
FormattedMessage as T,
} from '../../../components';
import { filterCustomersOptions } from '../common';
import { filterCustomersOptions } from '../constants';
import {
CustomersTransactionsGeneralPanelProvider,
@@ -40,7 +40,7 @@ function CustomersTransactionsHeaderGeneralPanelContent() {
<FinancialStatementsFilter
items={filterCustomersOptions}
label={<T id={'customers.label_filter_customers'} />}
initialSelectedItem={'all-customers'}
initialSelectedItem={'with-transactions'}
/>
<Row>
<Col xs={5}>

3
src/containers/FinancialStatements/FinancialStatementDateRange.js
View File

@@ -6,7 +6,8 @@ import { Row, Col, Hint } from 'components';
import { momentFormatter, parseDateRangeQuery } from 'utils';
import { DateInput } from '@blueprintjs/datetime';
import intl from 'react-intl-universal';
import { dateRangeOptions } from 'containers/FinancialStatements/common';
import { dateRangeOptions } from './constants';
/**
* Financial statement - Date range select.

6
src/containers/FinancialStatements/FinancialStatementsFilter.js
View File

@@ -12,7 +12,7 @@ import { FastField } from 'formik';
import { CLASSES } from 'common/classes';
import { Col, Row, ListSelect, MODIFIER } from 'components';
import { filterAccountsOptions } from './common';
import { filterAccountsOptions } from './constants';
export default function FinancialStatementsFilter({
@@ -45,7 +45,7 @@ export default function FinancialStatementsFilter({
return (
<Row>
<Col xs={4}>
<FastField name={'accountsFilter'}>
<FastField name={'filterByOption'}>
{({ form: { setFieldValue }, field: { value } }) => (
<FormGroup
label={label}
@@ -61,7 +61,7 @@ export default function FinancialStatementsFilter({
selectedItemProp={'key'}
textProp={'name'}
onItemSelect={(item) => {
setFieldValue('accountsFilter', item.key);
setFieldValue('filterByOption', item.key);
}}
className={classNames(CLASSES.SELECT_LIST_FILL_POPOVER)}
{...restProps}

2
src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js
View File

@@ -34,7 +34,7 @@ function GeneralLedger({
fromDate: moment().startOf('year').format('YYYY-MM-DD'),
toDate: moment().endOf('year').format('YYYY-MM-DD'),
basis: 'accural',
accountsFilter: 'with-transactions',
filterByOption: 'with-transactions',
});
// Handle financial statement filter change.

2
src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js
View File

@@ -35,7 +35,7 @@ function GLHeaderGeneralPaneContent() {
<FinancialStatementDateRange />
<FinancialStatementsFilter
items={filterAccountsOptions}
initialSelectedItem={'all-accounts'}
initialSelectedItem={'with-transactions'}
/>
<Row>
<Col xs={4}>

2
src/containers/FinancialStatements/InventoryValuation/InventoryValuation.js
View File

@@ -27,6 +27,7 @@ function InventoryValuation({
}) {
const [filter, setFilter] = useState({
asDate: moment().endOf('day').format('YYYY-MM-DD'),
filterByOption: 'with-transactions',
});
// Handle filter form submit.
@@ -54,7 +55,6 @@ function InventoryValuation({
[toggleInventoryValuationFilterDrawer],
);
return (
<InventoryValuationProvider query={filter}>
<InventoryValuationActionsBar

6
src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderGeneralPanel.js
View File

@@ -11,7 +11,7 @@ import {
Col,
FieldHint,
} from '../../../components';
import { filterInventoryValuationOptions } from '../common';
import { filterInventoryValuationOptions } from '../constants';
import {
momentFormatter,
@@ -45,7 +45,7 @@ function InventoryValuationHeaderGeneralPanelContent() {
return (
<div>
<Row>
<Col xs={5}>
<Col xs={4}>
<FastField name={'asDate'}>
{({ form, field: { value }, meta: { error } }) => (
<FormGroup
@@ -76,7 +76,7 @@ function InventoryValuationHeaderGeneralPanelContent() {
/>
<Row>
<Col xs={5}>
<Col xs={4}>
<Field name={'itemsIds'}>
{({ form: { setFieldValue } }) => (
<FormGroup

7
src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js
View File

@@ -14,10 +14,7 @@ import withCurrentOrganization from '../../Organization/withCurrentOrganization'
import 'style/pages/FinancialStatements/ProfitLossSheet.scss';
import { ProfitLossSheetProvider } from './ProfitLossProvider';
import {
ProfitLossSheetLoadingBar,
ProfitLossSheetAlerts
} from './components';
import { ProfitLossSheetLoadingBar, ProfitLossSheetAlerts } from './components';
/**
* Profit/Loss financial statement sheet.
@@ -34,7 +31,7 @@ function ProfitLossSheet({
fromDate: moment().startOf('year').format('YYYY-MM-DD'),
toDate: moment().endOf('year').format('YYYY-MM-DD'),
displayColumnsType: 'total',
accountsFilter: 'all-accounts',
filterByOption: 'with-transactions',
});
// Handle submit filter.

8
src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js
View File

@@ -25,18 +25,14 @@ function ProfitLossHeader({
// #withProfitLossActions
toggleProfitLossFilterDrawer: toggleFilterDrawer,
}) {
// Validation schema.
const validationSchema = Yup.object().shape({
fromDate: Yup.date()
.required()
.label(intl.get('from_date')),
fromDate: Yup.date().required().label(intl.get('from_date')),
toDate: Yup.date()
.min(Yup.ref('fromDate'))
.required()
.label(intl.get('to_date')),
accountsFilter: Yup.string(),
filterByOption: Yup.string(),
displayColumnsType: Yup.string(),
});

2
src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderGeneralPane.js
View File

@@ -13,7 +13,7 @@ export default function ProfitLossSheetHeaderGeneralPane({}) {
<div>
<FinancialStatementDateRange />
<SelectDisplayColumnsBy />
<FinancialStatementsFilter initialSelectedItem={'all-accounts'} />
<FinancialStatementsFilter initialSelectedItem={'with-transactions'} />
<RadiosAccountingBasis key={'basis'} />
</div>
);

1
src/containers/FinancialStatements/PurchasesByItems/PurchasesByItems.js
View File

@@ -27,6 +27,7 @@ function PurchasesByItems({
const [filter, setFilter] = useState({
fromDate: moment().startOf('year').format('YYYY-MM-DD'),
toDate: moment().endOf('year').format('YYYY-MM-DD'),
filterByOption: 'with-transactions',
});
// Handle filter form submit.

4
src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsGeneralPanel.js
View File

@@ -10,7 +10,7 @@ import {
import classNames from 'classnames';
import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
import FinancialStatementsFilter from '../FinancialStatementsFilter';
import { filterItemsOptions } from '../common';
import { filterItemsOptions } from '../constants';
import {
PurchasesByItemsGeneralPanelProvider,
@@ -40,7 +40,7 @@ function PurchasesByItemsGeneralPanelContent() {
<FinancialStatementsFilter
items={filterItemsOptions}
label={<T id={'items.label_filter_items'} />}
initialSelectedItem={'all-items'}
initialSelectedItem={'with-transactions'}
/>
<Row>

2
src/containers/FinancialStatements/SalesByItems/SalesByItems.js
View File

@@ -1,7 +1,6 @@
import React, { useEffect, useState, useCallback } from 'react';
import moment from 'moment';
import 'style/pages/FinancialStatements/SalesAndPurchasesSheet.scss';
import { SalesByItemProvider } from './SalesByItemProvider';
@@ -30,6 +29,7 @@ function SalesByItems({
const [filter, setFilter] = useState({
fromDate: moment().startOf('year').format('YYYY-MM-DD'),
toDate: moment().endOf('year').format('YYYY-MM-DD'),
filterByOption: 'with-transactions',
});
// Handle filter form submit.

4
src/containers/FinancialStatements/SalesByItems/SalesByItemsHeaderGeneralPanel.js
View File

@@ -2,7 +2,7 @@ import React from 'react';
import { FormGroup, Classes } from '@blueprintjs/core';
import { Field } from 'formik';
import classNames from 'classnames';
import { filterItemsOptions } from '../common';
import { filterItemsOptions } from '../constants';
import { Row, Col, ItemsMultiSelect, FormattedMessage as T } from 'components';
import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
@@ -36,7 +36,7 @@ function SalesByItemsHeaderGeneralPanelContent() {
<FinancialStatementsFilter
items={filterItemsOptions}
label={<T id={'items.label_filter_items'} />}
initialSelectedItem={'all-items'}
initialSelectedItem={'with-transactions'}
/>
<Row>

2
src/containers/FinancialStatements/SelectDisplayColumnsBy.js
View File

@@ -3,7 +3,7 @@ import { FormGroup } from '@blueprintjs/core';
import { FastField } from 'formik';
import { FormattedMessage as T } from 'components';
import { Row, Col, ListSelect } from 'components';
import { displayColumnsByOptions } from 'containers/FinancialStatements/common';
import { displayColumnsByOptions } from './constants';
/**
* Financial statement - Display columns by and type select.

2
src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js
View File

@@ -33,7 +33,7 @@ function TrialBalanceSheet({
fromDate: moment().startOf('year').format('YYYY-MM-DD'),
toDate: moment().endOf('year').format('YYYY-MM-DD'),
basis: 'accural',
accountsFilter: 'all-accounts',
filterByOption: 'with-transactions',
});
// Handle filter form submit.

2
src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderGeneralPanel.js
View File

@@ -12,7 +12,7 @@ export default function TrialBalanceSheetHeaderGeneralPanel({
return (
<div>
<FinancialStatementDateRange />
<FinancialStatementsFilter initialSelectedItem={'all-accounts'} />
<FinancialStatementsFilter initialSelectedItem={'with-transactions'} />
<RadiosAccountingBasis />
</div>
);

1
src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummary.js
View File

@@ -30,6 +30,7 @@ function VendorsBalanceSummary({
}) {
const [filter, setFilter] = useState({
asDate: moment().endOf('day').format('YYYY-MM-DD'),
filterByOption: 'with-transactions',
});
// Handle refetch vendors balance summary.

4
src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneralContent.js
View File

@@ -11,7 +11,7 @@ import {
FieldHint,
FormattedMessage as T,
} from '../../../components';
import { filterVendorsOptions } from '../common';
import { filterVendorsOptions } from '../constants';
import {
momentFormatter,
@@ -77,7 +77,7 @@ export default function VendorsBalanceSummaryHeaderGeneralContent() {
<FinancialStatementsFilter
items={filterVendorsOptions}
label={<T id={'vendors.label_filter_vendors'} />}
initialSelectedItem={'all-vendors'}
initialSelectedItem={'with-transactions'}
/>
<Row>

1
src/containers/FinancialStatements/VendorsTransactions/VendorsTransactions.js
View File

@@ -31,6 +31,7 @@ function VendorsTransactions({
const [filter, setFilter] = useState({
fromDate: moment().startOf('year').format('YYYY-MM-DD'),
toDate: moment().endOf('year').format('YYYY-MM-DD'),
filterByOption: 'with-transactions',
});
const handleFilterSubmit = (filter) => {

2
src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeaderGeneralPanel.js
View File

@@ -12,7 +12,7 @@ import {
ContactsMultiSelect,
FormattedMessage as T,
} from '../../../components';
import { filterVendorsOptions } from '../common';
import { filterVendorsOptions } from '../constants';
import {
VendorsTransactionsGeneralPanelProvider,

150
src/containers/FinancialStatements/common.js
View File

@@ -1,145 +1,7 @@
import * as R from 'ramda';
import intl from 'react-intl-universal';
import { displayColumnsByOptions } from './constants';
import { transfromToSnakeCase, flatten } from 'utils';
export const displayColumnsByOptions = [
{ key: 'total', name: intl.get('total'), type: 'total', by: '' },
{
key: 'year',
name: intl.get('date_year'),
type: 'date_periods',
by: 'year',
},
{
key: 'month',
name: intl.get('date_month'),
type: 'date_periods',
by: 'month',
},
{
key: 'week',
name: intl.get('date_week'),
type: 'date_periods',
by: 'month',
},
{
key: 'day',
name: intl.get('date_day'),
type: 'date_periods',
by: 'day',
},
{
key: 'quarter',
name: intl.get('date_quarter'),
type: 'date_periods',
by: 'quarter',
},
];
export const dateRangeOptions = [
{ value: 'today', label: intl.get('today') },
{ value: 'this_week', label: intl.get('this_week') },
{ value: 'this_month', label: intl.get('this_month') },
{ value: 'this_quarter', label: intl.get('this_quarter') },
{ value: 'this_year', label: intl.get('this_year') },
{ value: 'custom', label: intl.get('custom_range') },
];
export const filterAccountsOptions = [
{
key: 'all-accounts',
name: intl.get('all_accounts'),
hint: intl.get('all_accounts_including_with_zero_balance'),
},
{
key: 'without-zero-balance',
name: intl.get('accounts_without_zero_balance'),
hint: intl.get('include_accounts_and_exclude_zero_balance'),
},
{
key: 'with-transactions',
name: intl.get('accounts_with_transactions'),
hint: intl.get(
'include_accounts_once_has_transactions_on_given_date_period',
),
},
];
export const filterItemsOptions = [
{
key: 'all-items',
name: intl.get('all_items'),
hint: intl.get('items.option_all_items.hint'),
},
{
key: 'with-transactions',
name: intl.get('items.option_with_transactions'),
hint: intl.get('items.option_with_transactions.hint'),
},
{
key: 'with-only-active',
name: intl.get('items.option.only_active'),
},
];
export const filterCustomersOptions = [
{
key: 'all-customers',
name: intl.get('all_customers'),
hint: intl.get('customers.option_all_customers.hint'),
},
{
key: 'without-zero-balance',
name: intl.get('customers.option_without_zero_balance'),
hint: intl.get('customers.option_without_zero_balance.hint'),
},
{
key: 'with-transactions',
name: intl.get('customers.option_with_transactions'),
hint: intl.get('customers.option_with_transactions.hint'),
},
];
export const filterVendorsOptions = [
{
key: 'all-vendors',
name: intl.get('all_vendors'),
hint: intl.get('vendors.option_all_vendors.hint'),
},
{
key: 'without-zero-balance',
name: intl.get('vendors.option_without_zero_balance'),
hint: intl.get('vendors.option_without_zero_balance.hint'),
},
{
key: 'with-transactions',
name: intl.get('vendors.option_with_transactions'),
hint: intl.get('vendors.option_with_transactions.hint'),
},
];
export const filterInventoryValuationOptions = [
{
key: 'all-items',
name: intl.get('all_items'),
hint: intl.get('items.option_all_items.hint'),
},
{
key: 'with-transactions',
name: intl.get('items.option_with_transactions'),
hint: intl.get('items.option_with_transactions.hint'),
},
{
key: 'without-zero-balance',
name: intl.get('items.option_without_zero_balance'),
hint: intl.get('items.option_without_zero_balance.hint'),
},
{
key: 'with-only-active',
name: intl.get('items.option.only_active'),
},
]
/**
* Associate display columns by and type properties to query object.
*/
@@ -160,14 +22,14 @@ export const transformDisplayColumnsType = (form) => {
const setNoneZeroTransactions = (form) => {
return {
...form,
noneZero: form.accountsFilter === 'without-zero-balance',
noneTransactions: form.accountsFilter === 'with-transactions',
onlyActive: form.accountsFilter === 'with-only-active',
noneZero: form.filterByOption === 'without-zero-balance',
noneTransactions: form.filterByOption === 'with-transactions',
onlyActive: form.filterByOption === 'with-only-active',
};
};
// filterByOption
export const transformAccountsFilter = (form) => {
return R.compose(R.omit(['accountsFilter']), setNoneZeroTransactions)(form);
return R.compose(R.omit(['filterByOption']), setNoneZeroTransactions)(form);
};
/**

141
src/containers/FinancialStatements/constants.js Normal file
View File

@@ -0,0 +1,141 @@
import intl from 'react-intl-universal';
export const displayColumnsByOptions = [
{ key: 'total', name: intl.get('total'), type: 'total', by: '' },
{
key: 'year',
name: intl.get('date_year'),
type: 'date_periods',
by: 'year',
},
{
key: 'month',
name: intl.get('date_month'),
type: 'date_periods',
by: 'month',
},
{
key: 'week',
name: intl.get('date_week'),
type: 'date_periods',
by: 'month',
},
{
key: 'day',
name: intl.get('date_day'),
type: 'date_periods',
by: 'day',
},
{
key: 'quarter',
name: intl.get('date_quarter'),
type: 'date_periods',
by: 'quarter',
},
];
export const dateRangeOptions = [
{ value: 'today', label: intl.get('today') },
{ value: 'this_week', label: intl.get('this_week') },
{ value: 'this_month', label: intl.get('this_month') },
{ value: 'this_quarter', label: intl.get('this_quarter') },
{ value: 'this_year', label: intl.get('this_year') },
{ value: 'custom', label: intl.get('custom_range') },
];
export const filterAccountsOptions = [
{
key: 'all-accounts',
name: intl.get('all_accounts'),
hint: intl.get('all_accounts_including_with_zero_balance'),
},
{
key: 'without-zero-balance',
name: intl.get('accounts_without_zero_balance'),
hint: intl.get('include_accounts_and_exclude_zero_balance'),
},
{
key: 'with-transactions',
name: intl.get('accounts_with_transactions'),
hint: intl.get(
'include_accounts_once_has_transactions_on_given_date_period',
),
},
];
export const filterItemsOptions = [
{
key: 'all-items',
name: intl.get('all_items'),
hint: intl.get('items.option_all_items.hint'),
},
{
key: 'with-transactions',
name: intl.get('items.option_with_transactions'),
hint: intl.get('items.option_with_transactions.hint'),
},
{
key: 'with-only-active',
name: intl.get('items.option.only_active'),
},
];
export const filterCustomersOptions = [
{
key: 'all-customers',
name: intl.get('all_customers'),
hint: intl.get('customers.option_all_customers.hint'),
},
{
key: 'without-zero-balance',
name: intl.get('customers.option_without_zero_balance'),
hint: intl.get('customers.option_without_zero_balance.hint'),
},
{
key: 'with-transactions',
name: intl.get('customers.option_with_transactions'),
hint: intl.get('customers.option_with_transactions.hint'),
},
];
export const filterVendorsOptions = [
{
key: 'all-vendors',
name: intl.get('all_vendors'),
hint: intl.get('vendors.option_all_vendors.hint'),
},
{
key: 'without-zero-balance',
name: intl.get('vendors.option_without_zero_balance'),
hint: intl.get('vendors.option_without_zero_balance.hint'),
},
{
key: 'with-transactions',
name: intl.get('vendors.option_with_transactions'),
hint: intl.get('vendors.option_with_transactions.hint'),
},
];
export const filterInventoryValuationOptions = [
{
key: 'all-items',
name: intl.get('all_items'),
hint: intl.get('items.option_all_items.hint'),
},
{
key: 'with-transactions',
name: intl.get('items.option_with_transactions'),
hint: intl.get('items.option_with_transactions.hint'),
},
{
key: 'without-zero-balance',
name: intl.get('items.option_without_zero_balance'),
hint: intl.get('items.option_without_zero_balance.hint'),
},
{
key: 'with-only-active',
name: intl.get('items.option.only_active'),
},
]