feat: Financial statements enhancement.

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

@@ -19,11 +19,16 @@ function ProfitLossActionsBar({
 
   // #withProfitLossActions
   toggleProfitLossSheetFilter,
+  refreshProfitLossSheet,
 }) {
   const handleFilterClick = () => {
     toggleProfitLossSheetFilter();
   };
 
+  const handleRecalcReport = () => {
+    refreshProfitLossSheet(true);
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -34,6 +39,16 @@ function ProfitLossActionsBar({
         />
         <NavbarDivider />
 
+        <Button
+          className={classNames(
+            Classes.MINIMAL,
+            'button--gray-highlight',
+          )}
+          text={'Re-calc Report'}
+          onClick={handleRecalcReport}
+          icon={<Icon icon="refresh-16" iconSize={16} />}
+        />
+
         <If condition={profitLossSheetFilter}>
           <Button
             className={Classes.MINIMAL}

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

@@ -24,9 +24,6 @@ function ProfitLossSheet({
   // #withProfitLossActions
   fetchProfitLossSheet,
 
-  // #withProfitLoss
-  profitLossSheetLoading,
-
   // #withPreferences
   organizationSettings,
 }) {
@@ -35,6 +32,7 @@ function ProfitLossSheet({
     from_date: moment().startOf('year').format('YYYY-MM-DD'),
     to_date: moment().endOf('year').format('YYYY-MM-DD'),
   });
+  const [refresh, setRefresh] = useState(true);
 
   // Change page title of the dashboard.
   useEffect(() => {
@@ -54,14 +52,21 @@ function ProfitLossSheet({
       to_date: moment(filter.to_date).format('YYYY-MM-DD'),
     };
     setFilter(_filter);
-    fetchHook.refetch({ force: true });
+    setRefresh(true);
   }, []);
 
   // Handle fetch data of profit/loss sheet table.
   const handleFetchData = useCallback(() => {
-    fetchHook.refetch({ force: true });
+    setRefresh(true);
   }, []);
 
+  useEffect(() => {
+    if (refresh) {
+      fetchHook.refetch({ force: true });
+      setRefresh(false);
+    }
+  }, [refresh, fetchHook]);
+
   return (
     <DashboardInsider>
       <ProfitLossActionsBar />
@@ -76,8 +81,7 @@ function ProfitLossSheet({
             <ProfitLossSheetTable
               companyName={organizationSettings.name}
               profitLossQuery={filter}
-              onFetchData={handleFetchData}
-              loading={profitLossSheetLoading} />
+              onFetchData={handleFetchData} />
           </div> 
         </div>
       </DashboardPageContent>
@@ -88,8 +92,5 @@ function ProfitLossSheet({
 export default compose(
   withDashboardActions,
   withProfitLossActions,
-  withProfitLoss(({ profitLossSheetLoading }) => ({
-    profitLossSheetLoading,
-  })),
   withSettings,
 )(ProfitLossSheet);

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

@@ -1,5 +1,5 @@
-import React, { useCallback } from 'react';
-import { Row, Col } from 'react-grid-system';
+import React, { useCallback, useEffect } from 'react';
+import { Row, Col, Visible } from 'react-grid-system';
 import { Button } from '@blueprintjs/core';
 import moment from 'moment';
 import { useFormik } from 'formik';
@@ -11,6 +11,7 @@ import SelectsListColumnsBy from '../SelectDisplayColumnsBy';
 import RadiosAccountingBasis from '../RadiosAccountingBasis';
 
 import withProfitLoss from './withProfitLoss';
+import withProfitLossActions from './withProfitLossActions';
 
 import { compose } from 'utils';
 
@@ -21,6 +22,10 @@ function ProfitLossHeader({
 
   // #withProfitLoss
   profitLossSheetFilter,
+  profitLossSheetRefresh,
+
+  // #withProfitLossActions
+  refreshProfitLossSheet,
 }) {
   const { formatMessage } = useIntl();
   const formik = useFormik({
@@ -54,10 +59,6 @@ function ProfitLossHeader({
     [formik],
   );
 
-  const handleSubmitClick = useCallback(() => {
-    formik.submitForm();
-  }, [formik]);
-
   const handleAccountingBasisChange = useCallback(
     (value) => {
       formik.setFieldValue('basis', value);
@@ -65,36 +66,41 @@ function ProfitLossHeader({
     [formik],
   );
 
+  useEffect(() => {
+    if (profitLossSheetRefresh) {
+      formik.submitForm();
+      refreshProfitLossSheet(false);
+    }
+  }, [profitLossSheetRefresh]);
+
   return (
     <FinancialStatementHeader show={profitLossSheetFilter}>
-      <FinancialStatementDateRange formik={formik} />
-
       <Row>
-        <Col sm={3}>
+        <FinancialStatementDateRange formik={formik} />
+        <Visible xl><Col width={'100%'} /></Visible>
+
+        <Col width={260}>
           <SelectsListColumnsBy onItemSelect={handleItemSelectDisplayColumns} />
         </Col>
 
-        <Col sm={3}>
+        <Col width={260}>
           <RadiosAccountingBasis
             selectedValue={formik.values.basis}
             onChange={handleAccountingBasisChange}
           />
         </Col>
-
-        <Col sm={3}>
-          <Button
-            type="submit"
-            onClick={handleSubmitClick}
-            className={'button--submit-filter mt2'}
-          >
-            <T id={'run_report'} />
-          </Button>
-        </Col>
       </Row>
     </FinancialStatementHeader>
   );
 }
 
 export default compose(
-  withProfitLoss(({ profitLossSheetFilter }) => ({ profitLossSheetFilter })),
+  withProfitLoss(({
+    profitLossSheetFilter,
+    profitLossSheetRefresh,
+  }) => ({
+    profitLossSheetFilter,
+    profitLossSheetRefresh,
+  })),
+  withProfitLossActions,
 )(ProfitLossHeader);

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

@@ -15,9 +15,9 @@ function ProfitLossSheetTable({
   profitLossTableRows,
   profitLossQuery,
   profitLossColumns,
+  profitLossSheetLoading,
 
   // #ownProps
-  loading,
   onFetchData,
   companyName,
 }) {
@@ -31,7 +31,7 @@ function ProfitLossSheetTable({
         className: 'name',
       },
       {
-        Header: formatMessage({ id: 'acc_code' }),
+        Header: formatMessage({ id: 'account_code' }),
         accessor: 'code',
         className: 'account_code',
       },
@@ -102,7 +102,7 @@ function ProfitLossSheetTable({
       fromDate={profitLossQuery.from_date}
       toDate={profitLossQuery.to_date}
       name="profit-loss-sheet"
-      loading={loading}
+      loading={profitLossSheetLoading}
       basis={profitLossQuery.basis}
     >
       <DataTable
@@ -110,6 +110,7 @@ function ProfitLossSheetTable({
         columns={columns}
         data={profitLossTableRows}
         onFetchData={handleFetchData}
+        noInitialFetch={true}
         expanded={expandedRows}
         rowClassNames={rowClassNames}
         expandable={true}
@@ -132,10 +133,11 @@ const withProfitLossTable = connect(mapStateToProps);
 export default compose(
   withProfitLossTable,
   withProfitLossDetail(
-    ({ profitLossQuery, profitLossColumns, profitLossTableRows }) => ({
+    ({ profitLossQuery, profitLossColumns, profitLossTableRows, profitLossSheetLoading }) => ({
       profitLossColumns,
       profitLossQuery,
       profitLossTableRows,
+      profitLossSheetLoading,
     }),
   ),
 )(ProfitLossSheetTable);

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

@@ -20,6 +20,7 @@ export default (mapState) => {
 
       profitLossSheetLoading: state.financialStatements.profitLoss.loading,
       profitLossSheetFilter: state.financialStatements.profitLoss.filter,
+      profitLossSheetRefresh: state.financialStatements.profitLoss.refresh,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

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

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