feat: Ability to hide/show financial statement header.

client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js

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

client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js

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

client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLoss.js

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

client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLossActions.js

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