diff --git a/src/components/Branches/BranchMultiSelect.js b/src/components/Branches/BranchMultiSelect.js index 787f52eb7..fca8b168c 100644 --- a/src/components/Branches/BranchMultiSelect.js +++ b/src/components/Branches/BranchMultiSelect.js @@ -1,4 +1,5 @@ import React from 'react'; +import intl from 'react-intl-universal'; import { MenuItem } from '@blueprintjs/core'; import { FMultiSelect } from '../Forms'; @@ -32,15 +33,13 @@ const branchItemRenderer = ( { handleClick, modifiers, query }, { isSelected }, ) => { - // const text = `${branch.name}.${isSelected ? 'selected' : 'not-selected'}`; - return ( @@ -61,5 +60,13 @@ const branchSelectProps = { * @returns */ export function BranchMultiSelect({ branches, ...rest }) { - return ; + return ( + + ); } diff --git a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.js b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.js index dfc0ea698..6b93d6c04 100644 --- a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.js +++ b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.js @@ -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() { } + label={intl.get('branches_multi_select.label')} className={Classes.FILL} > - + @@ -32,3 +29,9 @@ function BalanceSheetHeaderDimensionsPanel() { } export default BalanceSheetHeaderDimensionsPanel; + +const BalanceMulitSelectRoot = styled.div` + .bp3-tag-input { + height: auto; + } +`; diff --git a/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementDimensionsPanel.js b/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementDimensionsPanel.js new file mode 100644 index 000000000..14b59aee3 --- /dev/null +++ b/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementDimensionsPanel.js @@ -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 ( + + + + + + + + ); +} diff --git a/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementHeader.js b/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementHeader.js index d4fa3adeb..561234f7c 100644 --- a/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementHeader.js +++ b/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementHeader.js @@ -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={} panel={} /> + } + panel={} + />