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

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 (
     <MenuItem
       active={modifiers.active}
       disabled={modifiers.disabled}
       icon={isSelected ? 'tick' : 'blank'}
       text={branch.name.toString()}
-      label={branch.name.toString()}
+      label={branch.code.toString()}
       key={branch.id}
       onClick={handleClick}
     />
@@ -61,5 +60,13 @@ const branchSelectProps = {
  * @returns
  */
 export function BranchMultiSelect({ branches, ...rest }) {
-  return <FMultiSelect items={branches} {...branchSelectProps} {...rest} />;
+  return (
+    <FMultiSelect
+      items={branches}
+      placeholder={intl.get('branches_multi_select.placeholder')}
+      popoverProps={{ minimal: true }}
+      {...branchSelectProps}
+      {...rest}
+    />
+  );
 }

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() {
     <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;
+  }
+`;

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 (
+    <Row>
+      <Col xs={4}>
+        <FormGroup
+          label={intl.get('branches_multi_select.label')}
+          className={Classes.FILL}
+        >
+          <BranchMultiSelect name={'branchesIds'} branches={branches} />
+        </FormGroup>
+      </Col>
+    </Row>
+  );
+}

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={<T id={'general'} />}
               panel={<CashFlowStatementGeneralPanel />}
             />
+            <Tab
+              id="dimensions"
+              title={<T id={'dimensions'} />}
+              panel={<CashFlowStatementDimensionsPanel />}
+            />
           </Tabs>
 
           <div class="financial-header-drawer__footer">

src/containers/FinancialStatements/CashFlowStatement/utils.js

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

src/containers/FinancialStatements/Journal/JournalHeader.js

@@ -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">

src/containers/FinancialStatements/Journal/JournalSheetHeaderDimensions.js

@@ -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>
+  );
+}

src/containers/FinancialStatements/Journal/utils.js

@@ -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: [],
+  };
+};