From a3d250cdc8ea56db22e83964c6b2c526549c3168 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Tue, 1 Feb 2022 00:29:50 +0200
Subject: [PATCH] fix(Balance & P/L Sheet): fix comparison panel.

---
 .../BalanceSheetHeaderComparisonPanal.js      | 69 ++++++++++++++-----
 .../FinancialStatements/BalanceSheet/utils.js | 14 ++++
 .../ProfitLossSheetHeaderComparisonPanel.js   | 56 ++++++++++++---
 .../ProfitLossSheet/utils.js                  | 14 ++++
 4 files changed, 124 insertions(+), 29 deletions(-)

diff --git a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderComparisonPanal.js b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderComparisonPanal.js
index 979b7b0a1..16a1485db 100644
--- a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderComparisonPanal.js
+++ b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderComparisonPanal.js
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { FastField, Field } from 'formik';
 import { FormGroup, Checkbox } from '@blueprintjs/core';
 import styled from 'styled-components';
@@ -6,6 +7,10 @@ import styled from 'styled-components';
 import { FormattedMessage as T } from 'components';
 
 import { Row, Col, FieldHint } from '../../../components';
+import {
+  handlePreviousYearCheckBoxChange,
+  handlePreviousPeriodCheckBoxChange,
+} from './utils';
 
 /**
  * Balance sheet header - Comparison panal.
@@ -14,42 +19,55 @@ export default function BalanceSheetHeaderComparisonPanal() {
   return (
     <BalanceSheetComparisonWrap>
       {/**----------- Previous Year -----------*/}
-      <FastField name={'previous_year'} type={'checkbox'}>
-        {({ field }) => (
+      <Field name={'previous_year'} type={'checkbox'}>
+        {({ form, field }) => (
           <FormGroup labelInfo={<FieldHint />}>
             <Checkbox
               inline={true}
-              small={true}
               label={<T id={'balance_sheet.previous_year'} />}
               {...field}
+              onChange={handlePreviousYearCheckBoxChange(form)}
             />
           </FormGroup>
         )}
-      </FastField>
+      </Field>
       <Row>
         <Col xs={3}>
-          <FastField name={'previous_year_amount_change'} type={'checkbox'}>
-            {({ field }) => (
+          <Field name={'previous_year_amount_change'} type={'checkbox'}>
+            {({ form: { setFieldValue }, field }) => (
               <FormGroup labelInfo={<FieldHint />}>
                 <Checkbox
                   inline={true}
                   small={true}
                   label={<T id={'balance_sheet.total_change'} />}
                   {...field}
+                  onChange={({ currentTarget }) => {
+                    setFieldValue('previous_year', currentTarget.checked);
+                    setFieldValue(
+                      'previous_year_amount_change',
+                      currentTarget.checked,
+                    );
+                  }}
                 />
               </FormGroup>
             )}
-          </FastField>
+          </Field>
         </Col>
         <Col xs={3}>
           <FastField name={'previous_year_percentage_change'} type={'checkbox'}>
-            {({ field }) => (
+            {({ form: { setFieldValue }, field }) => (
               <FormGroup labelInfo={<FieldHint />}>
                 <Checkbox
                   inline={true}
-                  small={true}
                   label={<T id={'balance_sheet.change'} />}
                   {...field}
+                  onChange={({ currentTarget }) => {
+                    setFieldValue('previous_year', currentTarget.checked);
+                    setFieldValue(
+                      'previous_year_percentage_change',
+                      currentTarget.checked,
+                    );
+                  }}
                 />
               </FormGroup>
             )}
@@ -58,13 +76,14 @@ export default function BalanceSheetHeaderComparisonPanal() {
       </Row>
       {/*------------ Previous Period -----------*/}
       <FastField name={'previous_period'} type={'checkbox'}>
-        {({ field }) => (
+        {({ form, field }) => (
           <FormGroup labelInfo={<FieldHint />}>
             <Checkbox
               inline={true}
               small={true}
               label={<T id={'balance_sheet.previous_period'} />}
               {...field}
+              onChange={handlePreviousPeriodCheckBoxChange(form)}
             />
           </FormGroup>
         )}
@@ -72,13 +91,20 @@ export default function BalanceSheetHeaderComparisonPanal() {
       <Row>
         <Col xs={3}>
           <FastField name={'previous_period_amount_change'} type={'checkbox'}>
-            {({ field }) => (
+            {({ form: { setFieldValue }, field }) => (
               <FormGroup labelInfo={<FieldHint />}>
                 <Checkbox
                   inline={true}
                   small={true}
                   label={<T id={'balance_sheet.total_change'} />}
                   {...field}
+                  onChange={({ currentTarget }) => {
+                    setFieldValue('previous_period', currentTarget.checked);
+                    setFieldValue(
+                      'previous_period_amount_change',
+                      currentTarget.checked,
+                    );
+                  }}
                 />
               </FormGroup>
             )}
@@ -89,22 +115,28 @@ export default function BalanceSheetHeaderComparisonPanal() {
             name={'previous_period_percentage_change'}
             type={'checkbox'}
           >
-            {({ field }) => (
+            {({ form: { setFieldValue }, field }) => (
               <FormGroup labelInfo={<FieldHint />}>
                 <Checkbox
                   inline={true}
-                  small={true}
                   label={<T id={'balance_sheet.change'} />}
                   {...field}
+                  onChange={({ currentTarget }) => {
+                    setFieldValue('previous_period', currentTarget.checked);
+                    setFieldValue(
+                      'previous_period_percentage_change',
+                      currentTarget.checked,
+                    );
+                  }}
                 />
               </FormGroup>
             )}
           </FastField>
         </Col>
       </Row>
-      
+
       {/**----------- % of Column -----------*/}
-      <FastField name={'previous_period_percentage_change'} type={'checkbox'}>
+      <FastField name={'percentage_of_column'} type={'checkbox'}>
         {({ field }) => (
           <FormGroup labelInfo={<FieldHint />}>
             <Checkbox
@@ -118,7 +150,7 @@ export default function BalanceSheetHeaderComparisonPanal() {
       </FastField>
 
       {/**----------- % of Row -----------*/}
-      <FastField name={'previous_period_percentage_change'} type={'checkbox'}>
+      <FastField name={'percentage_of_row'} type={'checkbox'}>
         {({ field }) => (
           <FormGroup labelInfo={<FieldHint />}>
             <Checkbox
@@ -138,12 +170,11 @@ const BalanceSheetComparisonWrap = styled.div`
   .row {
     margin-left: 0.15rem;
     .col {
-      min-width: 150px;
-      max-width: 190px;
+      min-width: 150px !important;
+      max-width: 190px !important;
     }
   }
   .bp3-form-group {
     margin-bottom: 3px;
-    /* margin-bottom: 0; */
   }
 `;
diff --git a/src/containers/FinancialStatements/BalanceSheet/utils.js b/src/containers/FinancialStatements/BalanceSheet/utils.js
index 1e7c1b99b..19afab84a 100644
--- a/src/containers/FinancialStatements/BalanceSheet/utils.js
+++ b/src/containers/FinancialStatements/BalanceSheet/utils.js
@@ -362,3 +362,17 @@ const dynamicColumnMapper = R.curry((data, column) => {
 export const dynamicColumns = (columns, data) => {
   return R.map(dynamicColumnMapper(data), columns);
 };
+
+export const handlePreviousYearCheckBoxChange = R.curry((form, event) => {
+  const isChecked = event.currentTarget.checked;
+  form.setFieldValue('previous_year', isChecked);
+  form.setFieldValue('previous_year_amount_change', isChecked);
+  form.setFieldValue('previous_year_percentage_change', isChecked);
+});
+
+export const handlePreviousPeriodCheckBoxChange = R.curry((form, event) => {
+  const isChecked = event.currentTarget.checked;
+  form.setFieldValue('previous_period', isChecked);
+  form.setFieldValue('previous_period_amount_change', isChecked);
+  form.setFieldValue('previous_period_amount_change', isChecked);
+});
diff --git a/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderComparisonPanel.js b/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderComparisonPanel.js
index b911cccc0..76f8a8fb7 100644
--- a/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderComparisonPanel.js
+++ b/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderComparisonPanel.js
@@ -6,6 +6,10 @@ import styled from 'styled-components';
 import { FormattedMessage as T } from 'components';
 
 import { Row, Col, FieldHint } from '../../../components';
+import {
+  handlePreviousYearCheckBoxChange,
+  handlePreviousPeriodCheckBoxChange,
+} from './utils';
 
 /**
  * ProfitLoss sheet header -comparison panel.
@@ -15,13 +19,14 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
     <ProfitLossSheetComparisonWrap>
       {/**----------- Previous Year -----------*/}
       <FastField name={'previous_year'} type={'checkbox'}>
-        {({ field }) => (
+        {({ form, field }) => (
           <FormGroup labelInfo={<FieldHint />}>
             <Checkbox
               inline={true}
               small={true}
               label={<T id={'profit_loss_sheet.previous_year'} />}
               {...field}
+              onChange={handlePreviousYearCheckBoxChange(form)}
             />
           </FormGroup>
         )}
@@ -29,13 +34,20 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
       <Row>
         <Col xs={3}>
           <FastField name={'previous_year_amount_change'} type={'checkbox'}>
-            {({ field }) => (
+            {({ form: { setFieldValue }, field }) => (
               <FormGroup labelInfo={<FieldHint />}>
                 <Checkbox
                   inline={true}
                   small={true}
                   label={<T id={'profit_loss_sheet.total_change'} />}
                   {...field}
+                  onChange={({ currentTarget }) => {
+                    setFieldValue('previous_year', currentTarget.checked);
+                    setFieldValue(
+                      'previous_year_amount_change',
+                      currentTarget.checked,
+                    );
+                  }}
                 />
               </FormGroup>
             )}
@@ -43,13 +55,20 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
         </Col>
         <Col xs={3}>
           <FastField name={'previous_year_percentage_change'} type={'checkbox'}>
-            {({ field }) => (
+            {({ form: { setFieldValue }, field }) => (
               <FormGroup labelInfo={<FieldHint />}>
                 <Checkbox
                   inline={true}
                   small={true}
                   label={<T id={'profit_loss_sheet.perentage_change'} />}
                   {...field}
+                  onChange={({ currentTarget }) => {
+                    setFieldValue('previous_year', currentTarget.checked);
+                    setFieldValue(
+                      'previous_year_percentage_change',
+                      currentTarget.checked,
+                    );
+                  }}
                 />
               </FormGroup>
             )}
@@ -58,13 +77,14 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
       </Row>
       {/**----------- Previous Period (PP) -----------*/}
       <FastField name={'previous_period'} type={'checkbox'}>
-        {({ field }) => (
+        {({ form, field }) => (
           <FormGroup labelInfo={<FieldHint />}>
             <Checkbox
               inline={true}
               small={true}
               label={<T id={'profit_loss_sheet.previous_period'} />}
               {...field}
+              onChange={handlePreviousPeriodCheckBoxChange(form)}
             />
           </FormGroup>
         )}
@@ -72,27 +92,44 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
       <Row>
         <Col xs={3}>
           <FastField name={'previous_period_amount_change'} type={'checkbox'}>
-            {({ field }) => (
+            {({ form: { setFieldValue }, field }) => (
               <FormGroup labelInfo={<FieldHint />}>
                 <Checkbox
                   inline={true}
                   small={true}
                   label={<T id={'profit_loss_sheet.total_change'} />}
                   {...field}
+                  onChange={({ currentTarget }) => {
+                    setFieldValue('previous_period', currentTarget.checked);
+                    setFieldValue(
+                      'previous_period_amount_change',
+                      currentTarget.checked,
+                    );
+                  }}
                 />
               </FormGroup>
             )}
           </FastField>
         </Col>
         <Col xs={3}>
-          <FastField name={'previous_period_percentage_change'} type={'checkbox'}>
-            {({ field }) => (
+          <FastField
+            name={'previous_period_percentage_change'}
+            type={'checkbox'}
+          >
+            {({ form: { setFieldValue }, field }) => (
               <FormGroup labelInfo={<FieldHint />}>
                 <Checkbox
                   inline={true}
                   small={true}
                   label={<T id={'profit_loss_sheet.perentage_change'} />}
                   {...field}
+                  onChange={({ currentTarget }) => {
+                    setFieldValue('previous_period', currentTarget.checked);
+                    setFieldValue(
+                      'previous_period_percentage_change',
+                      currentTarget.checked,
+                    );
+                  }}
                 />
               </FormGroup>
             )}
@@ -159,12 +196,11 @@ const ProfitLossSheetComparisonWrap = styled.div`
   .row {
     margin-left: 0.15rem;
     .col {
-      min-width: 150px;
-      max-width: 190px;
+      min-width: 150px !important;
+      max-width: 190px !important;
     }
   }
   .bp3-form-group {
     margin-bottom: 3px;
-    /* margin-bottom: 0; */
   }
 `;
diff --git a/src/containers/FinancialStatements/ProfitLossSheet/utils.js b/src/containers/FinancialStatements/ProfitLossSheet/utils.js
index aa9b223c6..d4826fbbd 100644
--- a/src/containers/FinancialStatements/ProfitLossSheet/utils.js
+++ b/src/containers/FinancialStatements/ProfitLossSheet/utils.js
@@ -379,3 +379,17 @@ const dynamicColumnMapper = R.curry((data, column) => {
 export const dynamicColumns = (columns, data) => {
   return R.map(dynamicColumnMapper(data), columns);
 };
+
+export const handlePreviousYearCheckBoxChange = R.curry((form, event) => {
+  const isChecked = event.currentTarget.checked;
+  form.setFieldValue('previous_year', isChecked);
+  form.setFieldValue('previous_year_amount_change', isChecked);
+  form.setFieldValue('previous_year_percentage_change', isChecked);
+});
+
+export const handlePreviousPeriodCheckBoxChange = R.curry((form, event) => {
+  const isChecked = event.currentTarget.checked;
+  form.setFieldValue('previous_period', isChecked);
+  form.setFieldValue('previous_period_amount_change', isChecked);
+  form.setFieldValue('previous_period_amount_change', isChecked);
+});