feat: Financial statements enhancement.

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

@@ -27,6 +27,7 @@ function JournalActionsBar({
 
   // #withJournalActions
   toggleJournalSheetFilter,
+  refreshJournalSheet,
 }) {
   const filterDropdown = FilterDropdown({
     fields: [],
@@ -37,6 +38,10 @@ function JournalActionsBar({
     toggleJournalSheetFilter();
   };
 
+  const handleRecalcReport = () => {
+    refreshJournalSheet(true);
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -47,6 +52,13 @@ function JournalActionsBar({
         />
         <NavbarDivider />
 
+        <Button
+          className={classNames(Classes.MINIMAL, 'button--gray-highlight')}
+          text={'Re-calc Report'}
+          onClick={handleRecalcReport}
+          icon={<Icon icon="refresh-16" iconSize={16} />}
+        />
+
         <If condition={journalSheetFilter}>
           <Button
             className={Classes.MINIMAL}
@@ -64,7 +76,6 @@ function JournalActionsBar({
             onClick={handleFilterToggleClick}
           />
         </If>
-        <NavbarDivider />
 
         <Popover
           content={filterDropdown}
@@ -78,9 +89,11 @@ function JournalActionsBar({
           />
         </Popover>
 
+        <NavbarDivider />
+
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='print-16' iconSize={16} />}
+          icon={<Icon icon="print-16" iconSize={16} />}
           text={<T id={'print'} />}
         />
         <Button

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

@@ -1,8 +1,6 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } 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 } from 'react-intl';
@@ -12,24 +10,30 @@ import FinancialStatementDateRange from 'containers/FinancialStatements/Financia
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 
 import withJournal from './withJournal';
+import withJournalActions from './withJournalActions';
+
 import { compose } from 'utils';
 
 /**
- * Journal sheet header. 
+ * Journal sheet header.
  */
 function JournalHeader({
   pageFilter,
   onSubmitFilter,
 
+  // #withJournalActions
+  refreshJournalSheet,
+
   // #withJournal
   journalSheetFilter,
+  journalSheetRefresh,
 }) {
   const formik = useFormik({
     enableReinitialize: true,
     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(),
@@ -41,29 +45,29 @@ function JournalHeader({
     },
   });
 
-  const handleSubmitClick = useCallback(() => {
-    formik.submitForm();
-  }, [formik]);
+  useEffect(() => {
+    if (journalSheetRefresh) {
+      formik.submitForm();
+      refreshJournalSheet(false);
+    }
+  }, [formik, journalSheetRefresh]);
 
   return (
     <FinancialStatementHeader show={journalSheetFilter}>
-      <FinancialStatementDateRange formik={formik} />
-
       <Row>
-        <Col sm={3}>
-          <Button
-            type="submit"
-            onClick={handleSubmitClick}
-            className={'button--submit-filter'}>
-            <T id={'run_report'} />
-          </Button>
-        </Col>
+        <FinancialStatementDateRange formik={formik} />
       </Row>
-
     </FinancialStatementHeader>
   );
 }
 
 export default compose(
-  withJournal(({ journalSheetFilter }) => ({ journalSheetFilter })),
-)(JournalHeader);
+  withJournal(({
+    journalSheetFilter,
+    journalSheetRefresh
+  }) => ({
+    journalSheetFilter,
+    journalSheetRefresh,
+  })),
+  withJournalActions,
+)(JournalHeader);

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

@@ -25,6 +25,7 @@ export default (mapState) => {
       ),
       journalSheetLoading: state.financialStatements.journal.loading,
       journalSheetFilter: state.financialStatements.journal.filter,
+      journalSheetRefresh: state.financialStatements.journal.refresh,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

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

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