feat: Ability to hide/show financial statement header.

client/src/containers/FinancialStatements/Journal/Journal.js

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

client/src/containers/FinancialStatements/Journal/JournalActionsBar.js

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

client/src/containers/FinancialStatements/Journal/JournalHeader.js

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

client/src/containers/FinancialStatements/Journal/withJournal.js

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

client/src/containers/FinancialStatements/Journal/withJournalActions.js

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