feat(cashflow & journal sheet): add branch multi select.

This commit is contained in:
elforjani13
2022-02-16 19:28:03 +02:00
parent e9933031ae
commit c7f6b70d14
8 changed files with 104 additions and 22 deletions

View File

@@ -1,6 +1,8 @@
import React from 'react';
import styled from 'styled-components';
import intl from 'react-intl-universal';
import { FormGroup, Classes } from '@blueprintjs/core';
import { BranchMultiSelect, FieldHint, Row, Col } from 'components';
import { BranchMultiSelect, Row, Col } from 'components';
import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
import { useBranches } from 'hooks/query';
@@ -16,15 +18,10 @@ function BalanceSheetHeaderDimensionsPanel() {
<Row>
<Col xs={4}>
<FormGroup
label={'Branches'}
labelInfo={<FieldHint />}
label={intl.get('branches_multi_select.label')}
className={Classes.FILL}
>
<BranchMultiSelect
name={'branchesIds'}
branches={branches}
popoverProps={{ minimal: true }}
/>
<BranchMultiSelect name={'branchesIds'} branches={branches} />
</FormGroup>
</Col>
</Row>
@@ -32,3 +29,9 @@ function BalanceSheetHeaderDimensionsPanel() {
}
export default BalanceSheetHeaderDimensionsPanel;
const BalanceMulitSelectRoot = styled.div`
.bp3-tag-input {
height: auto;
}
`;

View File

@@ -0,0 +1,28 @@
import React from 'react';
import intl from 'react-intl-universal';
import { FormGroup, Classes } from '@blueprintjs/core';
import { BranchMultiSelect, Row, Col } from 'components';
import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
import { useBranches } from 'hooks/query';
/**
* Cash flow statement dismension panel.
* @returns
*/
export default function CashFlowStatementDimensionsPanel() {
// Fetches the branches list.
const { isLoading: isBranchesLoading, data: branches } = useBranches();
return (
<Row>
<Col xs={4}>
<FormGroup
label={intl.get('branches_multi_select.label')}
className={Classes.FILL}
>
<BranchMultiSelect name={'branchesIds'} branches={branches} />
</FormGroup>
</Col>
</Row>
);
}

View File

@@ -14,6 +14,7 @@ import withCashFlowStatementActions from './withCashFlowStatementActions';
import { getDefaultCashFlowSheetQuery } from './utils';
import { compose, transformToForm } from 'utils';
import CashFlowStatementDimensionsPanel from './CashFlowStatementDimensionsPanel';
/**
* Cash flow statement header.
@@ -33,18 +34,19 @@ function CashFlowStatementHeader({
const defaultValues = getDefaultCashFlowSheetQuery();
// Initial form values.
const initialValues = transformToForm({
...pageFilter,
fromDate: moment(pageFilter.fromDate).toDate(),
toDate: moment(pageFilter.toDate).toDate(),
}, defaultValues);
const initialValues = transformToForm(
{
...pageFilter,
fromDate: moment(pageFilter.fromDate).toDate(),
toDate: moment(pageFilter.toDate).toDate(),
},
defaultValues,
);
// Validation schema.
const validationSchema = Yup.object().shape({
dateRange: Yup.string().optional(),
fromDate: Yup.date()
.required()
.label(intl.get('fromDate')),
fromDate: Yup.date().required().label(intl.get('fromDate')),
toDate: Yup.date()
.min(Yup.ref('fromDate'))
.required()
@@ -81,6 +83,11 @@ function CashFlowStatementHeader({
title={<T id={'general'} />}
panel={<CashFlowStatementGeneralPanel />}
/>
<Tab
id="dimensions"
title={<T id={'dimensions'} />}
panel={<CashFlowStatementDimensionsPanel />}
/>
</Tabs>
<div class="financial-header-drawer__footer">

View File

@@ -10,5 +10,6 @@ export const getDefaultCashFlowSheetQuery = () => {
basis: 'cash',
displayColumnsType: 'total',
filterByOption: 'with-transactions',
branchesIds: [],
};
};

View File

@@ -12,6 +12,7 @@ import withJournal from './withJournal';
import withJournalActions from './withJournalActions';
import { compose } from 'utils';
import JournalSheetHeaderDimension from './JournalSheetHeaderDimensions';
/**
* Journal sheet header.
@@ -71,6 +72,11 @@ function JournalHeader({
title={<T id={'general'} />}
panel={<JournalSheetHeaderGeneral />}
/>
<Tab
id="dimensions"
title={<T id={'dimensions'} />}
panel={<JournalSheetHeaderDimension />}
/>
</Tabs>
<div class="financial-header-drawer__footer">

View File

@@ -0,0 +1,29 @@
import React from 'react';
import styled from 'styled-components';
import intl from 'react-intl-universal';
import { FormGroup, Classes } from '@blueprintjs/core';
import { BranchMultiSelect, Row, Col } from 'components';
import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
import { useBranches } from 'hooks/query';
/**
* Journal sheet header dismension panel.
* @returns
*/
export default function JournalSheetHeaderDimensions() {
// Fetches the branches list.
const { isLoading: isBranchesLoading, data: branches } = useBranches();
return (
<Row>
<Col xs={4}>
<FormGroup
label={intl.get('branches_multi_select.label')}
className={Classes.FILL}
>
<BranchMultiSelect name={'branchesIds'} branches={branches} />
</FormGroup>
</Col>
</Row>
);
}

View File

@@ -8,5 +8,6 @@ export const getDefaultJournalQuery = () => {
fromDate: moment().startOf('year').format('YYYY-MM-DD'),
toDate: moment().endOf('year').format('YYYY-MM-DD'),
basis: 'accural',
}
}
branchesIds: [],
};
};