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

feat: Ability to hide/show financial statement header.

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2020-05-27 20:21:05 +02:00
parent 2e8ffa2aa9
commit c1659d191f
47 changed files with 914 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,6 +3,7 @@ import React, { useEffect, useCallback, useState } from 'react';
import { compose } from 'utils';
import { useQuery } from 'react-query';
import moment from 'moment';
import { useIntl } from 'react-intl';
import BalanceSheetHeader from './BalanceSheetHeader';
import BalanceSheetTable from './BalanceSheetTable';
@@ -10,13 +11,14 @@ import BalanceSheetTable from './BalanceSheetTable';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import BalanceSheetActionsBar from './BalanceSheetActionsBar';
import { FinancialStatement } from 'components';
import withDashboard from 'containers/Dashboard/withDashboard';
import withSettings from 'containers/Settings/withSettings';
import withBalanceSheetActions from './withBalanceSheetActions';
import withBalanceSheetDetail from './withBalanceSheetDetail';
import { useIntl } from 'react-intl';
function BalanceSheet({
// #withDashboard
@@ -27,6 +29,7 @@ function BalanceSheet({
// #withBalanceSheetDetail
balanceSheetLoading,
balanceSheetFilter,
// #withPreferences
organizationSettings,
@@ -75,10 +78,11 @@ function BalanceSheet({
<BalanceSheetActionsBar />
<DashboardPageContent>
<div class="financial-statement">
<FinancialStatement>
<BalanceSheetHeader
pageFilter={filter}
onSubmitFilter={handleFilterSubmit}
show={balanceSheetFilter}
/>
<div class="financial-statement__body">
@@ -89,7 +93,7 @@ function BalanceSheet({
onFetchData={handleFetchData}
/>
</div>
</div>
</FinancialStatement>
</DashboardPageContent>
</DashboardInsider>
);
@@ -98,8 +102,9 @@ function BalanceSheet({
export default compose(
withDashboard,
withBalanceSheetActions,
withBalanceSheetDetail(({ balanceSheetLoading }) => ({
withBalanceSheetDetail(({ balanceSheetLoading, balanceSheetFilter }) => ({
balanceSheetLoading,
balanceSheetFilter,
})),
withSettings,
)(BalanceSheet);

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

@@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import {
NavbarGroup,
Button,
@@ -9,54 +9,89 @@ import {
Position,
} from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
import Icon from 'components/Icon';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
import FilterDropdown from 'components/FilterDropdown';
import classNames from 'classnames';
import Icon from 'components/Icon';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import FilterDropdown from 'components/FilterDropdown';
import { If } from 'components';
import { compose } from 'utils';
import withBalanceSheetDetail from './withBalanceSheetDetail';
import withBalanceSheetActions from './withBalanceSheetActions';
export default function JournalActionsBar() {
function BalanceSheetActionsBar({
balanceSheetFilter,
toggleBalanceSheetFilter,
}) {
const filterDropdown = FilterDropdown({
fields: [],
onFilterChange: (filterConditions) => {
},
onFilterChange: (filterConditions) => {},
});
const handleFilterToggleClick = () => {
toggleBalanceSheetFilter();
};
return (
<DashboardActionsBar>
<NavbarGroup>
<Button
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon='cog' />}
text={<T id={'customize_report'}/>}
icon={<Icon icon="cog" />}
text={<T id={'customize_report'} />}
/>
<NavbarDivider />
<If condition={balanceSheetFilter}>
<Button
className={Classes.MINIMAL}
text={<T id={'hide_filter'} />}
onClick={handleFilterToggleClick}
icon={<Icon icon="arrow-to-top" />}
/>
</If>
<If condition={!balanceSheetFilter}>
<Button
className={Classes.MINIMAL}
text={<T id={'show_filter'} />}
onClick={handleFilterToggleClick}
icon={<Icon icon="arrow-to-bottom" />}
/>
</If>
<NavbarDivider />
<Popover
content={filterDropdown}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}>
position={Position.BOTTOM_LEFT}
>
<Button
className={classNames(Classes.MINIMAL, 'button--filter')}
text={<T id={'filter'}/>}
icon={ <Icon icon="filter" /> } />
text={<T id={'filter'} />}
icon={<Icon icon="filter" />}
/>
</Popover>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}
text={<T id={'print'}/>}
icon={<Icon icon="file-export" />}
text={<T id={'print'} />}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}
text={<T id={'export'}/>}
icon={<Icon icon="file-export" />}
text={<T id={'export'} />}
/>
</NavbarGroup>
</DashboardActionsBar>
)
}
);
}
export default compose(
withBalanceSheetDetail(({ balanceSheetFilter }) => ({ balanceSheetFilter })),
withBalanceSheetActions,
)(BalanceSheetActionsBar);

3
client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
View File

@@ -21,6 +21,7 @@ import RadiosAccountingBasis from '../RadiosAccountingBasis';
export default function BalanceSheetHeader({
onSubmitFilter,
pageFilter,
show
}) {
const { formatMessage } = useIntl();
@@ -70,7 +71,7 @@ export default function BalanceSheetHeader({
}, [formik]);
return (
<FinancialStatementHeader>
<FinancialStatementHeader show={show}>
<FinancialStatementDateRange formik={formik} />
<Row>

1
client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetActions.js
View File

@@ -5,6 +5,7 @@ import {
const mapDispatchToProps = (dispatch) => ({
fetchBalanceSheet: (query = {}) => dispatch(fetchBalanceSheet({ query })),
toggleBalanceSheetFilter: () => dispatch({ type: 'BALANCE_SHEET_FILTER_TOGGLE' }),
});
export default connect(null, mapDispatchToProps);

1
client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetDetail.js
View File

@@ -16,6 +16,7 @@ export default (mapState) => {
balanceSheetColumns: getFinancialSheetColumns(state.financialStatements.balanceSheet.sheets, balanceSheetIndex),
balanceSheetQuery: getFinancialSheetQuery(state.financialStatements.balanceSheet.sheets, balanceSheetIndex),
balanceSheetLoading: state.financialStatements.balanceSheet.loading,
balanceSheetFilter: state.financialStatements.balanceSheet.filter,
};
return mapState ? mapState(mapped, state, props) : mapped;
};

13
client/src/containers/FinancialStatements/FinancialStatementHeader.js
View File

@@ -1,9 +1,14 @@
import React from 'react';
import classNames from 'classnames';
export default function FinancialStatementHeader({ children }) {
export default function FinancialStatementHeader({ show, children }) {
return (
<div class="financial-statement__header">
{ children }
<div
className={classNames('financial-statement__header', {
'is-hidden': !show,
})}
>
{children}
</div>
);
}
}

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

@@ -80,7 +80,7 @@ function GeneralLedger({
pageFilter={filter}
onSubmitFilter={handleFilterSubmit} />
<div class="financial-statement__table">
<div class="financial-statement__body">
<GeneralLedgerTable
companyName={organizationSettings.name}
generalLedgerQuery={filter}

46
client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js
View File

@@ -11,13 +11,25 @@ import {
import { FormattedMessage as T } from 'react-intl';
import Icon from 'components/Icon';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
import { If } from 'components';
import classNames from 'classnames';
import FilterDropdown from 'components/FilterDropdown';
import withGeneralLedger from './withGeneralLedger';
import withGeneralLedgerActions from './withGeneralLedgerActions';
import { compose } from 'utils';
/**
* General ledger actions bar.
*/
export default function GeneralLedgerActionsBar() {
function GeneralLedgerActionsBar({
// #withGeneralLedger
generalLedgerSheetFilter,
// #withGeneralLedgerActions
toggleGeneralLedgerSheetFilter,
}) {
const filterDropdown = FilterDropdown({
fields: [],
onFilterChange: (filterConditions) => {
@@ -25,6 +37,10 @@ export default function GeneralLedgerActionsBar() {
},
});
const handleFilterClick = () => {
toggleGeneralLedgerSheetFilter();
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -33,6 +49,27 @@ export default function GeneralLedgerActionsBar() {
icon={<Icon icon='cog' />}
text={<T id={'customize_report'}/>}
/>
<NavbarDivider />
<If condition={generalLedgerSheetFilter}>
<Button
className={Classes.MINIMAL}
text={<T id={'hide_filter'} />}
icon={<Icon icon="arrow-to-top" />}
onClick={handleFilterClick}
/>
</If>
<If condition={!generalLedgerSheetFilter}>
<Button
className={Classes.MINIMAL}
text={<T id={'show_filter'} />}
icon={<Icon icon="arrow-to-bottom" />}
onClick={handleFilterClick}
/>
</If>
<NavbarDivider />
<Popover
@@ -59,4 +96,9 @@ export default function GeneralLedgerActionsBar() {
</NavbarGroup>
</DashboardActionsBar>
);
}
}
export default compose(
withGeneralLedger(({ generalLedgerSheetFilter }) => ({ generalLedgerSheetFilter })),
withGeneralLedgerActions,
)(GeneralLedgerActionsBar);

15
client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js
View File

@@ -18,13 +18,19 @@ import FinancialStatementDateRange from 'containers/FinancialStatements/Financia
import RadiosAccountingBasis from '../RadiosAccountingBasis';
import {compose} from 'utils';
import withGeneralLedger from './withGeneralLedger';
function GeneralLedgerHeader({
onSubmitFilter,
pageFilter,
accounts,
}) {
// #withAccounts
accounts,
// #withGeneralLedger
generalLedgerSheetFilter,
}) {
const formik = useFormik({
enableReinitialize: true,
initialValues: {
@@ -56,7 +62,7 @@ function GeneralLedgerHeader({
}, [formik]);
return (
<FinancialStatementHeader>
<FinancialStatementHeader show={generalLedgerSheetFilter}>
<FinancialStatementDateRange formik={formik} />
<Row>
@@ -91,5 +97,6 @@ function GeneralLedgerHeader({
}
export default compose(
AccountsConnect
AccountsConnect,
withGeneralLedger(({ generalLedgerSheetFilter }) => ({ generalLedgerSheetFilter })),
)(GeneralLedgerHeader);

1
client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedger.js
View File

@@ -24,6 +24,7 @@ export default (mapState) => {
generalLedgerIndex,
),
generalLedgerSheetLoading: state.financialStatements.generalLedger.loading,
generalLedgerSheetFilter: state.financialStatements.generalLedger.filter,
};
return mapState ? mapState(mapped, state, props) : mapped;
};

1
client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedgerActions.js
View File

@@ -5,6 +5,7 @@ import {
const mapDispatchToProps = (dispatch) => ({
fetchGeneralLedger: (query = {}) => dispatch(fetchGeneralLedger({ query })),
toggleGeneralLedgerSheetFilter: () => dispatch({ type: 'GENERAL_LEDGER_FILTER_TOGGLE' }),
});
export default connect(null, mapDispatchToProps);

2
client/src/containers/FinancialStatements/Journal/Journal.js
View File

@@ -79,7 +79,7 @@ function Journal({
onSubmitFilter={handleFilterSubmit}
/>
<div class="financial-statement__table">
<div class="financial-statement__body">
<JournalTable
companyName={organizationSettings.name}
journalQuery={filter}

74
client/src/containers/FinancialStatements/Journal/JournalActionsBar.js
View File

@@ -10,50 +10,90 @@ import {
} from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
import Icon from 'components/Icon';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import FilterDropdown from 'components/FilterDropdown';
import classNames from 'classnames';
export default function JournalActionsBar() {
import { If } from 'components';
import withJournalActions from './withJournalActions';
import withJournal from './withJournal';
import { compose } from 'utils';
function JournalActionsBar({
// #withJournal
journalSheetFilter,
// #withJournalActions
toggleJournalSheetFilter,
}) {
const filterDropdown = FilterDropdown({
fields: [],
onFilterChange: (filterConditions) => {
},
onFilterChange: (filterConditions) => {},
});
const handleFilterToggleClick = () => {
toggleJournalSheetFilter();
};
return (
<DashboardActionsBar>
<NavbarGroup>
<Button
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon='cog' />}
text={<T id={'customize_report'}/>}
icon={<Icon icon="cog" />}
text={<T id={'customize_report'} />}
/>
<NavbarDivider />
<If condition={journalSheetFilter}>
<Button
className={Classes.MINIMAL}
text={<T id={'hide_filter'} />}
icon={<Icon icon="arrow-to-top" />}
onClick={handleFilterToggleClick}
/>
</If>
<If condition={!journalSheetFilter}>
<Button
className={Classes.MINIMAL}
text={<T id={'show_filter'} />}
icon={<Icon icon="arrow-to-bottom" />}
onClick={handleFilterToggleClick}
/>
</If>
<NavbarDivider />
<Popover
content={filterDropdown}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}>
position={Position.BOTTOM_LEFT}
>
<Button
className={classNames(Classes.MINIMAL, 'button--filter')}
text={<T id={'filter'}/>}
icon={ <Icon icon="filter" /> } />
text={<T id={'filter'} />}
icon={<Icon icon="filter" />}
/>
</Popover>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}
text={<T id={'print'}/>}
icon={<Icon icon="file-export" />}
text={<T id={'print'} />}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}
text={<T id={'export'}/>}
icon={<Icon icon="file-export" />}
text={<T id={'export'} />}
/>
</NavbarGroup>
</DashboardActionsBar>
)
}
);
}
export default compose(
withJournal(({ journalSheetFilter }) => ({ journalSheetFilter })),
withJournalActions,
)(JournalActionsBar);

19
client/src/containers/FinancialStatements/Journal/JournalHeader.js
View File

@@ -11,12 +11,19 @@ import * as Yup from 'yup';
import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
import withJournal from './withJournal';
import { compose } from 'utils';
export default function JournalHeader({
/**
* Journal sheet header.
*/
function JournalHeader({
pageFilter,
onSubmitFilter,
// #withJournal
journalSheetFilter,
}) {
const formik = useFormik({
enableReinitialize: true,
initialValues: {
@@ -39,7 +46,7 @@ export default function JournalHeader({
}, [formik]);
return (
<FinancialStatementHeader>
<FinancialStatementHeader show={journalSheetFilter}>
<FinancialStatementDateRange formik={formik} />
<Row>
@@ -55,4 +62,8 @@ export default function JournalHeader({
</FinancialStatementHeader>
);
}
}
export default compose(
withJournal(({ journalSheetFilter }) => ({ journalSheetFilter })),
)(JournalHeader);

1
client/src/containers/FinancialStatements/Journal/withJournal.js
View File

@@ -24,6 +24,7 @@ export default (mapState) => {
journalIndex,
),
journalSheetLoading: state.financialStatements.journal.loading,
journalSheetFilter: state.financialStatements.journal.filter,
};
return mapState ? mapState(mapped, state, props) : mapped;
};

1
client/src/containers/FinancialStatements/Journal/withJournalActions.js
View File

@@ -5,6 +5,7 @@ import {
export const mapDispatchToProps = (dispatch) => ({
requestFetchJournalSheet: (query) => dispatch(fetchJournalSheet({ query })),
toggleJournalSheetFilter: () => dispatch({ type: 'JOURNAL_FILTER_TOGGLE' }),
});
export default connect(null, mapDispatchToProps);

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

@@ -1,45 +1,75 @@
import React from 'react';
import {
NavbarGroup,
Button,
Classes,
NavbarDivider,
} from '@blueprintjs/core';
import { NavbarGroup, Button, Classes, NavbarDivider } from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
import Icon from 'components/Icon';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
import classNames from 'classnames';
// import FilterDropdown from 'components/FilterDropdown';
export default function ProfitLossActionsBar() {
// const filterDropdown = FilterDropdown({
// fields: [],
// onFilterChange: (filterConditions) => {
// },
// });
import Icon from 'components/Icon';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import { If } from 'components';
import withProfitLossActions from './withProfitLossActions';
import withProfitLoss from './withProfitLoss';
import { compose } from 'utils';
function ProfitLossActionsBar({
// #withProfitLoss
profitLossSheetFilter,
// #withProfitLossActions
toggleProfitLossSheetFilter,
}) {
const handleFilterClick = () => {
toggleProfitLossSheetFilter();
};
return (
<DashboardActionsBar>
<NavbarGroup>
<Button
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon='cog' />}
text={<T id={'customize_report'}/>}
icon={<Icon icon="cog" />}
text={<T id={'customize_report'} />}
/>
<NavbarDivider />
<If condition={profitLossSheetFilter}>
<Button
className={Classes.MINIMAL}
text={<T id={'hide_filter'} />}
icon={<Icon icon="arrow-to-top" />}
onClick={handleFilterClick}
/>
</If>
<If condition={!profitLossSheetFilter}>
<Button
className={Classes.MINIMAL}
text={<T id={'show_filter'} />}
icon={<Icon icon="arrow-to-bottom" />}
onClick={handleFilterClick}
/>
</If>
<NavbarDivider />
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}
text={<T id={'print'}/>}
icon={<Icon icon="file-export" />}
text={<T id={'print'} />}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}
text={<T id={'export'}/>}
icon={<Icon icon="file-export" />}
text={<T id={'export'} />}
/>
</NavbarGroup>
</DashboardActionsBar>
);
}
}
export default compose(
withProfitLoss(({ profitLossSheetFilter }) => ({ profitLossSheetFilter })),
withProfitLossActions,
)(ProfitLossActionsBar);

58
client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js
View File

@@ -1,8 +1,6 @@
import React, { useCallback } from 'react';
import { Row, Col } from 'react-grid-system';
import {
Button,
} from '@blueprintjs/core';
import { Button } from '@blueprintjs/core';
import moment from 'moment';
import { useFormik } from 'formik';
import { FormattedMessage as T, useIntl } from 'react-intl';
@@ -12,10 +10,17 @@ import FinancialStatementHeader from 'containers/FinancialStatements/FinancialSt
import SelectsListColumnsBy from '../SelectDisplayColumnsBy';
import RadiosAccountingBasis from '../RadiosAccountingBasis';
import withProfitLoss from './withProfitLoss';
export default function JournalHeader({
import { compose } from 'utils';
function ProfitLossHeader({
pageFilter,
onSubmitFilter,
// #withProfitLoss
profitLossSheetFilter,
}) {
const { formatMessage } = useIntl();
const formik = useFormik({
@@ -23,11 +28,16 @@ export default function JournalHeader({
initialValues: {
...pageFilter,
from_date: moment(pageFilter.from_date).toDate(),
to_date: moment(pageFilter.to_date).toDate()
to_date: moment(pageFilter.to_date).toDate(),
},
validationSchema: Yup.object().shape({
from_date: Yup.date().required().label(formatMessage({id:'from_date'})),
to_date: Yup.date().min(Yup.ref('from_date')).required().label(formatMessage({id:'to_date'})),
from_date: Yup.date()
.required()
.label(formatMessage({ id: 'from_date' })),
to_date: Yup.date()
.min(Yup.ref('from_date'))
.required()
.label(formatMessage({ id: 'to_date' })),
}),
onSubmit: (values, actions) => {
onSubmitFilter(values);
@@ -36,21 +46,27 @@ export default function JournalHeader({
});
// Handle item select of `display columns by` field.
const handleItemSelectDisplayColumns = useCallback((item) => {
formik.setFieldValue('display_columns_type', item.type);
formik.setFieldValue('display_columns_by', item.by);
}, [formik]);
const handleItemSelectDisplayColumns = useCallback(
(item) => {
formik.setFieldValue('display_columns_type', item.type);
formik.setFieldValue('display_columns_by', item.by);
},
[formik],
);
const handleSubmitClick = useCallback(() => {
formik.submitForm();
}, [formik]);
const handleAccountingBasisChange = useCallback((value) => {
formik.setFieldValue('basis', value);
}, [formik]);
const handleAccountingBasisChange = useCallback(
(value) => {
formik.setFieldValue('basis', value);
},
[formik],
);
return (
<FinancialStatementHeader>
<FinancialStatementHeader show={profitLossSheetFilter}>
<FinancialStatementDateRange formik={formik} />
<Row>
@@ -61,18 +77,24 @@ export default function JournalHeader({
<Col sm={3}>
<RadiosAccountingBasis
selectedValue={formik.values.basis}
onChange={handleAccountingBasisChange} />
onChange={handleAccountingBasisChange}
/>
</Col>
<Col sm={3}>
<Button
type="submit"
onClick={handleSubmitClick}
className={'button--submit-filter mt2'}>
className={'button--submit-filter mt2'}
>
<T id={'run_report'} />
</Button>
</Col>
</Row>
</FinancialStatementHeader>
);
}
}
export default compose(
withProfitLoss(({ profitLossSheetFilter }) => ({ profitLossSheetFilter })),
)(ProfitLossHeader);

1
client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLoss.js
View File

@@ -19,6 +19,7 @@ export default (mapState) => {
profitLossTableRows: getFinancialSheetTableRows(state.financialStatements.profitLoss.sheets, profitLossIndex),
profitLossSheetLoading: state.financialStatements.profitLoss.loading,
profitLossSheetFilter: state.financialStatements.profitLoss.filter,
};
return mapState ? mapState(mapped, state, props) : mapped;
};

1
client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLossActions.js
View File

@@ -5,6 +5,7 @@ import {
export const mapDispatchToProps = (dispatch) => ({
fetchProfitLossSheet: (query = {}) => dispatch(fetchProfitLossSheet({ query })),
toggleProfitLossSheetFilter: () => dispatch({ type: 'PROFIT_LOSS_FILTER_TOGGLE' }),
});
export default connect(null, mapDispatchToProps);

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

@@ -1,46 +1,77 @@
import React from 'react';
import {
NavbarGroup,
Button,
Classes,
NavbarDivider,
} from '@blueprintjs/core';
import { NavbarGroup, Button, Classes, NavbarDivider } from '@blueprintjs/core';
import Icon from 'components/Icon';
import { FormattedMessage as T } from 'react-intl';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import classNames from 'classnames';
// import FilterDropdown from 'components/FilterDropdown';
export default function GeneralLedgerActionsBar() {
// const filterDropdown = FilterDropdown({
// fields: [],
// onFilterChange: (filterConditions) => {
// },
// });
import { If } from 'components';
import withTrialBalance from './withTrialBalance';
import withTrialBalanceActions from './withTrialBalanceActions';
import { compose } from 'utils';
function TrialBalanceActionsBar({
// #withTrialBalance
trialBalanceSheetFilter,
// #withTrialBalanceActions
toggleTrialBalanceFilter,
}) {
const handleFilterToggleClick = () => {
toggleTrialBalanceFilter();
};
return (
<DashboardActionsBar>
<NavbarGroup>
<Button
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon='cog' />}
text={<T id={'customize_report'}/>}
icon={<Icon icon="cog" />}
text={<T id={'customize_report'} />}
/>
<NavbarDivider />
<If condition={trialBalanceSheetFilter}>
<Button
className={Classes.MINIMAL}
text={<T id={'hide_filter'} />}
icon={<Icon icon="arrow-to-top" />}
onClick={handleFilterToggleClick}
/>
</If>
<If condition={!trialBalanceSheetFilter}>
<Button
className={Classes.MINIMAL}
text={<T id={'show_filter'} />}
icon={<Icon icon="arrow-to-bottom" />}
onClick={handleFilterToggleClick}
/>
</If>
<NavbarDivider />
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}
text={<T id={'print'}/>}
icon={<Icon icon="file-export" />}
text={<T id={'print'} />}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}
text={<T id={'export'}/>}
icon={<Icon icon="file-export" />}
text={<T id={'export'} />}
/>
</NavbarGroup>
</DashboardActionsBar>
);
}
}
export default compose(
withTrialBalance(({ trialBalanceSheetFilter }) => ({ trialBalanceSheetFilter })),
withTrialBalanceActions
)(TrialBalanceActionsBar);

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

@@ -16,6 +16,7 @@ import withTrialBalanceActions from './withTrialBalanceActions';
import withTrialBalance from './withTrialBalance';
import withSettings from 'containers/Settings/withSettings';
function TrialBalanceSheet({
// #withDashboard
changePageTitle,

16
client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
View File

@@ -8,11 +8,17 @@ import { Button } from "@blueprintjs/core";
import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
import withTrialBalance from './withTrialBalance';
import { compose } from 'utils';
export default function TrialBalanceSheetHeader({
function TrialBalanceSheetHeader({
pageFilter,
onSubmitFilter,
// #withTrialBalance
trialBalanceSheetFilter,
}) {
const { formatMessage } = useIntl();
const formik = useFormik({
@@ -37,7 +43,7 @@ export default function TrialBalanceSheetHeader({
}, [formik]);
return (
<FinancialStatementHeader>
<FinancialStatementHeader show={trialBalanceSheetFilter}>
<FinancialStatementDateRange formik={formik} />
<Row>
@@ -53,4 +59,8 @@ export default function TrialBalanceSheetHeader({
</Row>
</FinancialStatementHeader>
);
}
}
export default compose(
withTrialBalance(({ trialBalanceSheetFilter }) => ({ trialBalanceSheetFilter })),
)(TrialBalanceSheetHeader);

1
client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalance.js
View File

@@ -18,6 +18,7 @@ export default (mapState) => {
trialBalanceIndex
),
trialBalanceSheetLoading: state.financialStatements.trialBalance.loading,
trialBalanceSheetFilter: state.financialStatements.trialBalance.filter,
};
return mapState ? mapState(mapped, state, props) : mapped;
};

1
client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalanceActions.js
View File

@@ -5,6 +5,7 @@ import {
export const mapDispatchToProps = (dispatch) => ({
fetchTrialBalanceSheet: (query = {}) => dispatch(fetchTrialBalanceSheet({ query })),
toggleTrialBalanceFilter: () => dispatch({ type: 'TRIAL_BALANCE_FILTER_TOGGLE' }),
});
export default connect(null, mapDispatchToProps);