feat: Ability to hide/show financial statement header.

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js

@@ -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);

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js

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

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js

@@ -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);

client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalance.js

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

client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalanceActions.js

@@ -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);