feat: Financial statements enhancement.

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js

@@ -29,6 +29,7 @@ function GeneralLedgerActionsBar({
 
   // #withGeneralLedgerActions
   toggleGeneralLedgerSheetFilter,
+  refreshGeneralLedgerSheet
 }) {
   const filterDropdown = FilterDropdown({
     fields: [],
@@ -41,6 +42,10 @@ function GeneralLedgerActionsBar({
     toggleGeneralLedgerSheetFilter();
   };
 
+  const handleRecalcReport = () => {
+    refreshGeneralLedgerSheet(true);
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -52,6 +57,16 @@ function GeneralLedgerActionsBar({
 
         <NavbarDivider />
 
+        <Button
+          className={classNames(
+            Classes.MINIMAL,
+            'button--gray-highlight',
+          )}
+          text={'Re-calc Report'}
+          onClick={handleRecalcReport}
+          icon={<Icon icon="refresh-16" iconSize={16} />}
+        />
+
         <If condition={generalLedgerSheetFilter}>
           <Button
             className={Classes.MINIMAL}
@@ -69,7 +84,6 @@ function GeneralLedgerActionsBar({
             onClick={handleFilterClick}
           />
         </If>
-        <NavbarDivider />
 
         <Popover
           content={filterDropdown}
@@ -82,6 +96,8 @@ function GeneralLedgerActionsBar({
             icon={<Icon icon="filter-16" iconSize={16} /> } />
         </Popover>
 
+        <NavbarDivider />
+
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon='print-16' iconSize={16} />}

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js

@@ -1,6 +1,6 @@
-import React, { useCallback } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { Button, FormGroup, Classes } from '@blueprintjs/core';
-import { Row, Col } from 'react-grid-system';
+import { Row, Col, Visible } from 'react-grid-system';
 import moment from 'moment';
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
@@ -13,9 +13,12 @@ import withAccounts from 'containers/Accounts/withAccounts';
 import classNames from 'classnames';
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
 import RadiosAccountingBasis from '../RadiosAccountingBasis';
-import { compose } from 'utils';
 
 import withGeneralLedger from './withGeneralLedger';
+import withGeneralLedgerActions from './withGeneralLedgerActions';
+
+import { compose } from 'utils';
+
 
 function GeneralLedgerHeader({
   onSubmitFilter,
@@ -24,8 +27,12 @@ function GeneralLedgerHeader({
   // #withAccounts
   accounts,
 
+  // #withGeneralLedgerActions
+  refreshGeneralLedgerSheet,
+
   // #withGeneralLedger
   generalLedgerSheetFilter,
+  generalLedgerSheetRefresh
 }) {
   const formik = useFormik({
     enableReinitialize: true,
@@ -44,13 +51,8 @@ function GeneralLedgerHeader({
     },
   });
 
-  // handle submit filter submit button.
-  const handleSubmitClick = useCallback(() => {
-    formik.submitForm();
-  }, []);
-
   const onAccountSelected = useCallback((selectedAccounts) => {
-    console.log(selectedAccounts);
+    
   }, []);
 
   const handleAccountingBasisChange = useCallback(
@@ -59,13 +61,23 @@ function GeneralLedgerHeader({
     },
     [formik],
   );
+  
+  // handle submit filter submit button.
+  useEffect(() => {
+    if (generalLedgerSheetRefresh) {
+      formik.submitForm();
+      refreshGeneralLedgerSheet(false);
+    }
+  }, [formik, generalLedgerSheetRefresh])
 
   return (
     <FinancialStatementHeader show={generalLedgerSheetFilter}>
-      <FinancialStatementDateRange formik={formik} />
-
       <Row>
-        <Col sm={3}>
+        <FinancialStatementDateRange formik={formik} />
+
+        <Visible xl><Col width={'100%'} /></Visible>
+
+        <Col width={260}>
           <FormGroup
             label={<T id={'specific_accounts'} />}
             className={classNames('form-group--select-list', Classes.FILL)}
@@ -77,23 +89,13 @@ function GeneralLedgerHeader({
           </FormGroup>
         </Col>
 
-        <Col sm={3}>
+        <Col width={260}>
           <RadiosAccountingBasis
             onChange={handleAccountingBasisChange}
             selectedValue={formik.values.basis}
           />
         </Col>
 
-        <Col sm={3}>
-          <Button
-            type="submit"
-            onClick={handleSubmitClick}
-            disabled={formik.isSubmitting}
-            className={'button--submit-filter mt2'}
-          >
-            <T id={'calculate_report'} />
-          </Button>
-        </Col>
       </Row>
     </FinancialStatementHeader>
   );
@@ -103,7 +105,9 @@ export default compose(
   withAccounts(({ accounts }) => ({
     accounts,
   })),
-  withGeneralLedger(({ generalLedgerSheetFilter }) => ({
+  withGeneralLedger(({ generalLedgerSheetFilter, generalLedgerSheetRefresh }) => ({
     generalLedgerSheetFilter,
+    generalLedgerSheetRefresh,
   })),
+  withGeneralLedgerActions,
 )(GeneralLedgerHeader);

client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedger.js

@@ -1,11 +1,10 @@
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import {
   getFinancialSheet,
   getFinancialSheetQuery,
   getFinancialSheetTableRows,
 } from 'store/financialStatement/financialStatements.selectors';
 
-
 export default (mapState) => {
   const mapStateToProps = (state, props) => {
     const { generalLedgerIndex } = props;
@@ -23,8 +22,11 @@ export default (mapState) => {
         state.financialStatements.generalLedger.sheets,
         generalLedgerIndex,
       ),
-      generalLedgerSheetLoading: state.financialStatements.generalLedger.loading,
+      generalLedgerSheetLoading:
+        state.financialStatements.generalLedger.loading,
       generalLedgerSheetFilter: state.financialStatements.generalLedger.filter,
+      generalLedgerSheetRefresh:
+        state.financialStatements.generalLedger.refresh,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedgerActions.js

@@ -1,11 +1,13 @@
 import {connect} from 'react-redux';
 import {
   fetchGeneralLedger,
+  refreshGeneralLedgerSheet,
 } from 'store/financialStatement/financialStatements.actions';
 
 const mapDispatchToProps = (dispatch) => ({
   fetchGeneralLedger: (query = {}) => dispatch(fetchGeneralLedger({ query })),
   toggleGeneralLedgerSheetFilter: () => dispatch({ type: 'GENERAL_LEDGER_FILTER_TOGGLE' }),
+  refreshGeneralLedgerSheet: (refresh) => dispatch(refreshGeneralLedgerSheet(refresh)),
 });
 
 export default connect(null, mapDispatchToProps);