From c01fa8519812ae14b1626dcfa8e10e638ad3399f Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Wed, 16 Feb 2022 19:35:35 +0200
Subject: [PATCH] feat(trial balance sheet): branch multi select.

---
 .../TrialBalanceSheetHeader.js                | 16 +++++++++--
 .../TrialBalanceSheetHeaderDimensionsPanel.js | 28 +++++++++++++++++++
 2 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderDimensionsPanel.js

diff --git a/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js b/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
index 77e993c85..3e898fbf3 100644
--- a/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
+++ b/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
@@ -8,6 +8,7 @@ import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import TrialBalanceSheetHeaderGeneralPanel from './TrialBalanceSheetHeaderGeneralPanel';
+import TrialBalanceSheetHeaderDimensionsPanel from './TrialBalanceSheetHeaderDimensionsPanel';
 
 import withTrialBalance from './withTrialBalance';
 import withTrialBalanceActions from './withTrialBalanceActions';
@@ -41,6 +42,7 @@ function TrialBalanceSheetHeader({
   const defaultValues = {
     fromDate: moment().toDate(),
     toDate: moment().toDate(),
+    branchesIds: [],
   };
 
   // Initial values.
@@ -49,6 +51,7 @@ function TrialBalanceSheetHeader({
       ...pageFilter,
       fromDate: moment(pageFilter.fromDate).toDate(),
       toDate: moment(pageFilter.toDate).toDate(),
+      branchesIds: [],
     },
     defaultValues,
   );
@@ -59,10 +62,14 @@ function TrialBalanceSheetHeader({
     toggleFilterDrawer(false);
   };
   // Handle drawer close action.
-  const handleDrawerClose = () => { toggleFilterDrawer(false); };
+  const handleDrawerClose = () => {
+    toggleFilterDrawer(false);
+  };
 
   // Handle cancel button click.
-  const handleCancelClick = () => { toggleFilterDrawer(false); };
+  const handleCancelClick = () => {
+    toggleFilterDrawer(false);
+  };
 
   return (
     <FinancialStatementHeader
@@ -81,6 +88,11 @@ function TrialBalanceSheetHeader({
               title={<T id={'general'} />}
               panel={<TrialBalanceSheetHeaderGeneralPanel />}
             />
+            <Tab
+              id="dimensions"
+              title={<T id={'dimensions'} />}
+              panel={<TrialBalanceSheetHeaderDimensionsPanel />}
+            />
           </Tabs>
 
           <div class="financial-header-drawer__footer">
diff --git a/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderDimensionsPanel.js b/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderDimensionsPanel.js
new file mode 100644
index 000000000..5f0e18c76
--- /dev/null
+++ b/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderDimensionsPanel.js
@@ -0,0 +1,28 @@
+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 { useBranches } from 'hooks/query';
+
+/**
+ * trial balance sheet header dismension panel.
+ * @returns
+ */
+export default function TrialBalanceSheetHeaderDimensionsPanel() {
+  // 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>
+  );
+}