Merge branch 'feature/comparisons' of https://github.com/bigcapitalhq/client into feature/comparisons

This commit is contained in:
a.bouhuolia
2022-02-01 16:59:51 +02:00
4 changed files with 124 additions and 29 deletions

View File

@@ -1,4 +1,5 @@
import React from 'react'; import React from 'react';
import { FastField, Field } from 'formik'; import { FastField, Field } from 'formik';
import { FormGroup, Checkbox } from '@blueprintjs/core'; import { FormGroup, Checkbox } from '@blueprintjs/core';
import styled from 'styled-components'; import styled from 'styled-components';
@@ -6,6 +7,10 @@ import styled from 'styled-components';
import { FormattedMessage as T } from 'components'; import { FormattedMessage as T } from 'components';
import { Row, Col, FieldHint } from '../../../components'; import { Row, Col, FieldHint } from '../../../components';
import {
handlePreviousYearCheckBoxChange,
handlePreviousPeriodCheckBoxChange,
} from './utils';
/** /**
* Balance sheet header - Comparison panal. * Balance sheet header - Comparison panal.
@@ -14,42 +19,55 @@ export default function BalanceSheetHeaderComparisonPanal() {
return ( return (
<BalanceSheetComparisonWrap> <BalanceSheetComparisonWrap>
{/**----------- Previous Year -----------*/} {/**----------- Previous Year -----------*/}
<FastField name={'previous_year'} type={'checkbox'}> <Field name={'previous_year'} type={'checkbox'}>
{({ field }) => ( {({ form, field }) => (
<FormGroup labelInfo={<FieldHint />}> <FormGroup labelInfo={<FieldHint />}>
<Checkbox <Checkbox
inline={true} inline={true}
small={true}
label={<T id={'balance_sheet.previous_year'} />} label={<T id={'balance_sheet.previous_year'} />}
{...field} {...field}
onChange={handlePreviousYearCheckBoxChange(form)}
/> />
</FormGroup> </FormGroup>
)} )}
</FastField> </Field>
<Row> <Row>
<Col xs={3}> <Col xs={3}>
<FastField name={'previous_year_amount_change'} type={'checkbox'}> <Field name={'previous_year_amount_change'} type={'checkbox'}>
{({ field }) => ( {({ form: { setFieldValue }, field }) => (
<FormGroup labelInfo={<FieldHint />}> <FormGroup labelInfo={<FieldHint />}>
<Checkbox <Checkbox
inline={true} inline={true}
small={true} small={true}
label={<T id={'balance_sheet.total_change'} />} label={<T id={'balance_sheet.total_change'} />}
{...field} {...field}
onChange={({ currentTarget }) => {
setFieldValue('previous_year', currentTarget.checked);
setFieldValue(
'previous_year_amount_change',
currentTarget.checked,
);
}}
/> />
</FormGroup> </FormGroup>
)} )}
</FastField> </Field>
</Col> </Col>
<Col xs={3}> <Col xs={3}>
<FastField name={'previous_year_percentage_change'} type={'checkbox'}> <FastField name={'previous_year_percentage_change'} type={'checkbox'}>
{({ field }) => ( {({ form: { setFieldValue }, field }) => (
<FormGroup labelInfo={<FieldHint />}> <FormGroup labelInfo={<FieldHint />}>
<Checkbox <Checkbox
inline={true} inline={true}
small={true}
label={<T id={'balance_sheet.change'} />} label={<T id={'balance_sheet.change'} />}
{...field} {...field}
onChange={({ currentTarget }) => {
setFieldValue('previous_year', currentTarget.checked);
setFieldValue(
'previous_year_percentage_change',
currentTarget.checked,
);
}}
/> />
</FormGroup> </FormGroup>
)} )}
@@ -58,13 +76,14 @@ export default function BalanceSheetHeaderComparisonPanal() {
</Row> </Row>
{/*------------ Previous Period -----------*/} {/*------------ Previous Period -----------*/}
<FastField name={'previous_period'} type={'checkbox'}> <FastField name={'previous_period'} type={'checkbox'}>
{({ field }) => ( {({ form, field }) => (
<FormGroup labelInfo={<FieldHint />}> <FormGroup labelInfo={<FieldHint />}>
<Checkbox <Checkbox
inline={true} inline={true}
small={true} small={true}
label={<T id={'balance_sheet.previous_period'} />} label={<T id={'balance_sheet.previous_period'} />}
{...field} {...field}
onChange={handlePreviousPeriodCheckBoxChange(form)}
/> />
</FormGroup> </FormGroup>
)} )}
@@ -72,13 +91,20 @@ export default function BalanceSheetHeaderComparisonPanal() {
<Row> <Row>
<Col xs={3}> <Col xs={3}>
<FastField name={'previous_period_amount_change'} type={'checkbox'}> <FastField name={'previous_period_amount_change'} type={'checkbox'}>
{({ field }) => ( {({ form: { setFieldValue }, field }) => (
<FormGroup labelInfo={<FieldHint />}> <FormGroup labelInfo={<FieldHint />}>
<Checkbox <Checkbox
inline={true} inline={true}
small={true} small={true}
label={<T id={'balance_sheet.total_change'} />} label={<T id={'balance_sheet.total_change'} />}
{...field} {...field}
onChange={({ currentTarget }) => {
setFieldValue('previous_period', currentTarget.checked);
setFieldValue(
'previous_period_amount_change',
currentTarget.checked,
);
}}
/> />
</FormGroup> </FormGroup>
)} )}
@@ -89,22 +115,28 @@ export default function BalanceSheetHeaderComparisonPanal() {
name={'previous_period_percentage_change'} name={'previous_period_percentage_change'}
type={'checkbox'} type={'checkbox'}
> >
{({ field }) => ( {({ form: { setFieldValue }, field }) => (
<FormGroup labelInfo={<FieldHint />}> <FormGroup labelInfo={<FieldHint />}>
<Checkbox <Checkbox
inline={true} inline={true}
small={true}
label={<T id={'balance_sheet.change'} />} label={<T id={'balance_sheet.change'} />}
{...field} {...field}
onChange={({ currentTarget }) => {
setFieldValue('previous_period', currentTarget.checked);
setFieldValue(
'previous_period_percentage_change',
currentTarget.checked,
);
}}
/> />
</FormGroup> </FormGroup>
)} )}
</FastField> </FastField>
</Col> </Col>
</Row> </Row>
{/**----------- % of Column -----------*/} {/**----------- % of Column -----------*/}
<FastField name={'previous_period_percentage_change'} type={'checkbox'}> <FastField name={'percentage_of_column'} type={'checkbox'}>
{({ field }) => ( {({ field }) => (
<FormGroup labelInfo={<FieldHint />}> <FormGroup labelInfo={<FieldHint />}>
<Checkbox <Checkbox
@@ -118,7 +150,7 @@ export default function BalanceSheetHeaderComparisonPanal() {
</FastField> </FastField>
{/**----------- % of Row -----------*/} {/**----------- % of Row -----------*/}
<FastField name={'previous_period_percentage_change'} type={'checkbox'}> <FastField name={'percentage_of_row'} type={'checkbox'}>
{({ field }) => ( {({ field }) => (
<FormGroup labelInfo={<FieldHint />}> <FormGroup labelInfo={<FieldHint />}>
<Checkbox <Checkbox
@@ -138,12 +170,11 @@ const BalanceSheetComparisonWrap = styled.div`
.row { .row {
margin-left: 0.15rem; margin-left: 0.15rem;
.col { .col {
min-width: 150px; min-width: 150px !important;
max-width: 190px; max-width: 190px !important;
} }
} }
.bp3-form-group { .bp3-form-group {
margin-bottom: 3px; margin-bottom: 3px;
/* margin-bottom: 0; */
} }
`; `;

View File

@@ -362,3 +362,17 @@ const dynamicColumnMapper = R.curry((data, column) => {
export const dynamicColumns = (columns, data) => { export const dynamicColumns = (columns, data) => {
return R.map(dynamicColumnMapper(data), columns); 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);
});

View File

@@ -6,6 +6,10 @@ import styled from 'styled-components';
import { FormattedMessage as T } from 'components'; import { FormattedMessage as T } from 'components';
import { Row, Col, FieldHint } from '../../../components'; import { Row, Col, FieldHint } from '../../../components';
import {
handlePreviousYearCheckBoxChange,
handlePreviousPeriodCheckBoxChange,
} from './utils';
/** /**
* ProfitLoss sheet header -comparison panel. * ProfitLoss sheet header -comparison panel.
@@ -15,13 +19,14 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
<ProfitLossSheetComparisonWrap> <ProfitLossSheetComparisonWrap>
{/**----------- Previous Year -----------*/} {/**----------- Previous Year -----------*/}
<FastField name={'previous_year'} type={'checkbox'}> <FastField name={'previous_year'} type={'checkbox'}>
{({ field }) => ( {({ form, field }) => (
<FormGroup labelInfo={<FieldHint />}> <FormGroup labelInfo={<FieldHint />}>
<Checkbox <Checkbox
inline={true} inline={true}
small={true} small={true}
label={<T id={'profit_loss_sheet.previous_year'} />} label={<T id={'profit_loss_sheet.previous_year'} />}
{...field} {...field}
onChange={handlePreviousYearCheckBoxChange(form)}
/> />
</FormGroup> </FormGroup>
)} )}
@@ -29,13 +34,20 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
<Row> <Row>
<Col xs={3}> <Col xs={3}>
<FastField name={'previous_year_amount_change'} type={'checkbox'}> <FastField name={'previous_year_amount_change'} type={'checkbox'}>
{({ field }) => ( {({ form: { setFieldValue }, field }) => (
<FormGroup labelInfo={<FieldHint />}> <FormGroup labelInfo={<FieldHint />}>
<Checkbox <Checkbox
inline={true} inline={true}
small={true} small={true}
label={<T id={'profit_loss_sheet.total_change'} />} label={<T id={'profit_loss_sheet.total_change'} />}
{...field} {...field}
onChange={({ currentTarget }) => {
setFieldValue('previous_year', currentTarget.checked);
setFieldValue(
'previous_year_amount_change',
currentTarget.checked,
);
}}
/> />
</FormGroup> </FormGroup>
)} )}
@@ -43,13 +55,20 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
</Col> </Col>
<Col xs={3}> <Col xs={3}>
<FastField name={'previous_year_percentage_change'} type={'checkbox'}> <FastField name={'previous_year_percentage_change'} type={'checkbox'}>
{({ field }) => ( {({ form: { setFieldValue }, field }) => (
<FormGroup labelInfo={<FieldHint />}> <FormGroup labelInfo={<FieldHint />}>
<Checkbox <Checkbox
inline={true} inline={true}
small={true} small={true}
label={<T id={'profit_loss_sheet.perentage_change'} />} label={<T id={'profit_loss_sheet.perentage_change'} />}
{...field} {...field}
onChange={({ currentTarget }) => {
setFieldValue('previous_year', currentTarget.checked);
setFieldValue(
'previous_year_percentage_change',
currentTarget.checked,
);
}}
/> />
</FormGroup> </FormGroup>
)} )}
@@ -58,13 +77,14 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
</Row> </Row>
{/**----------- Previous Period (PP) -----------*/} {/**----------- Previous Period (PP) -----------*/}
<FastField name={'previous_period'} type={'checkbox'}> <FastField name={'previous_period'} type={'checkbox'}>
{({ field }) => ( {({ form, field }) => (
<FormGroup labelInfo={<FieldHint />}> <FormGroup labelInfo={<FieldHint />}>
<Checkbox <Checkbox
inline={true} inline={true}
small={true} small={true}
label={<T id={'profit_loss_sheet.previous_period'} />} label={<T id={'profit_loss_sheet.previous_period'} />}
{...field} {...field}
onChange={handlePreviousPeriodCheckBoxChange(form)}
/> />
</FormGroup> </FormGroup>
)} )}
@@ -72,27 +92,44 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
<Row> <Row>
<Col xs={3}> <Col xs={3}>
<FastField name={'previous_period_amount_change'} type={'checkbox'}> <FastField name={'previous_period_amount_change'} type={'checkbox'}>
{({ field }) => ( {({ form: { setFieldValue }, field }) => (
<FormGroup labelInfo={<FieldHint />}> <FormGroup labelInfo={<FieldHint />}>
<Checkbox <Checkbox
inline={true} inline={true}
small={true} small={true}
label={<T id={'profit_loss_sheet.total_change'} />} label={<T id={'profit_loss_sheet.total_change'} />}
{...field} {...field}
onChange={({ currentTarget }) => {
setFieldValue('previous_period', currentTarget.checked);
setFieldValue(
'previous_period_amount_change',
currentTarget.checked,
);
}}
/> />
</FormGroup> </FormGroup>
)} )}
</FastField> </FastField>
</Col> </Col>
<Col xs={3}> <Col xs={3}>
<FastField name={'previous_period_percentage_change'} type={'checkbox'}> <FastField
{({ field }) => ( name={'previous_period_percentage_change'}
type={'checkbox'}
>
{({ form: { setFieldValue }, field }) => (
<FormGroup labelInfo={<FieldHint />}> <FormGroup labelInfo={<FieldHint />}>
<Checkbox <Checkbox
inline={true} inline={true}
small={true} small={true}
label={<T id={'profit_loss_sheet.perentage_change'} />} label={<T id={'profit_loss_sheet.perentage_change'} />}
{...field} {...field}
onChange={({ currentTarget }) => {
setFieldValue('previous_period', currentTarget.checked);
setFieldValue(
'previous_period_percentage_change',
currentTarget.checked,
);
}}
/> />
</FormGroup> </FormGroup>
)} )}
@@ -159,12 +196,11 @@ const ProfitLossSheetComparisonWrap = styled.div`
.row { .row {
margin-left: 0.15rem; margin-left: 0.15rem;
.col { .col {
min-width: 150px; min-width: 150px !important;
max-width: 190px; max-width: 190px !important;
} }
} }
.bp3-form-group { .bp3-form-group {
margin-bottom: 3px; margin-bottom: 3px;
/* margin-bottom: 0; */
} }
`; `;

View File

@@ -379,3 +379,17 @@ const dynamicColumnMapper = R.curry((data, column) => {
export const dynamicColumns = (columns, data) => { export const dynamicColumns = (columns, data) => {
return R.map(dynamicColumnMapper(data), columns); 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);
});