feat: Ability to hide/show financial statement header.

client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js

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

client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js

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

client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js

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

client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetActions.js

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

client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetDetail.js

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