From 953d37b20f360a3c700976a0a35edae3a1b0111a Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Wed, 16 Feb 2022 16:25:58 +0200
Subject: [PATCH] feat(balance): add FMultiSelect.

---
 .../FMultiSelect/BranchesMultiSelect.js       | 66 +++++++++++++++++++
 src/components/FMultiSelect/index.js          |  1 +
 src/components/index.js                       |  1 +
 .../BalanceSheet/BalanceSheetHeader.js        |  7 ++
 .../BalanceSheetHeaderDimensionsPanel.js      | 31 +++++++++
 5 files changed, 106 insertions(+)
 create mode 100644 src/components/FMultiSelect/BranchesMultiSelect.js
 create mode 100644 src/components/FMultiSelect/index.js
 create mode 100644 src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.js

diff --git a/src/components/FMultiSelect/BranchesMultiSelect.js b/src/components/FMultiSelect/BranchesMultiSelect.js
new file mode 100644
index 000000000..60110e399
--- /dev/null
+++ b/src/components/FMultiSelect/BranchesMultiSelect.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import { MenuItem } from '@blueprintjs/core';
+import { MultiSelect as FMultiSelect } from 'blueprint-formik';
+
+/**
+ *
+ * @param {*} query
+ * @param {*} branch
+ * @param {*} _index
+ * @param {*} exactMatch
+ * @returns
+ */
+const branchItemPredicate = (query, branch, _index, exactMatch) => {
+  const normalizedTitle = branch.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${branch.name}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+/**
+ *
+ * @param {*} branch
+ * @param {*} param1
+ * @returns
+ */
+const branchItemRenderer = (
+  branch,
+  { handleClick, modifiers, query },
+  { isSelected },
+) => {
+  const text = `${branch.name}.${isSelected ? 'selected' : 'not-selected'}`;
+
+  return (
+    <MenuItem
+      active={modifiers.active}
+      disabled={modifiers.disabled}
+      icon={modifiers.selected ? 'tick' : 'blank'}
+      label={branch.name.toString()}
+      key={branch.id}
+      onClick={handleClick}
+      text={text}
+    />
+  );
+};
+
+const branchSelectProps = {
+  itemPredicate: branchItemPredicate,
+  itemRenderer: branchItemRenderer,
+  valueAccessor: 'id',
+  labelAccessor: 'name',
+  tagRenderer: 'name',
+};
+
+export function BranchesMultiSelect({ branches, ...rest }) {
+  return (
+    <FMultiSelect
+      items={branches}
+      {...branchSelectProps}
+      {...rest}
+    />
+  );
+}
diff --git a/src/components/FMultiSelect/index.js b/src/components/FMultiSelect/index.js
new file mode 100644
index 000000000..e7edbee10
--- /dev/null
+++ b/src/components/FMultiSelect/index.js
@@ -0,0 +1 @@
+export * from './BranchesMultiSelect';
diff --git a/src/components/index.js b/src/components/index.js
index 29023a1b1..5ebdd5c83 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -101,6 +101,7 @@ export * from './FeatureGuard';
 export * from './ExchangeRate';
 export * from './Branches';
 export * from './Warehouses';
+export * from './FMultiSelect'
 
 const Hint = FieldHint;
 
diff --git a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
index c576adceb..f92c7917f 100644
--- a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
+++ b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
@@ -9,6 +9,7 @@ import withBalanceSheetActions from './withBalanceSheetActions';
 
 import BalanceSheetHeaderGeneralPanal from './BalanceSheetHeaderGeneralPanal';
 import BalanceSheetHeaderComparisonPanal from './BalanceSheetHeaderComparisonPanal';
+import BalanceSheetHeaderDimensionsPanel from './BalanceSheetHeaderDimensionsPanel';
 import FinancialStatementHeader from '../../FinancialStatements/FinancialStatementHeader';
 
 import { compose, transformToForm } from 'utils';
@@ -40,6 +41,7 @@ function BalanceSheetHeader({
       ...pageFilter,
       fromDate: moment(pageFilter.fromDate).toDate(),
       toDate: moment(pageFilter.toDate).toDate(),
+      branches_id: [],
     },
     defaultValues,
   );
@@ -85,6 +87,11 @@ function BalanceSheetHeader({
               title={<T id={'balance_sheet.comparisons'} />}
               panel={<BalanceSheetHeaderComparisonPanal />}
             />
+            <Tab
+              id="dimensions"
+              title={<T id={'dimensions'} />}
+              panel={<BalanceSheetHeaderDimensionsPanel />}
+            />
           </Tabs>
 
           <div class="financial-header-drawer__footer">
diff --git a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.js b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.js
new file mode 100644
index 000000000..32bb0d96c
--- /dev/null
+++ b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Button } from '@blueprintjs/core';
+import { BranchesMultiSelect } from 'components';
+
+import { useBranches } from 'hooks/query';
+
+function BalanceSheetHeaderDimensionsPanel() {
+  // Fetches the branches list.
+  const {
+    isLoading: isBranchesLoading,
+    isFetching: isBranchesFetching,
+    data: branches,
+  } = useBranches();
+  return (
+    <div>
+      <BranchesMultiSelect
+        name={'branches_id'}
+        branches={branches}
+        input={BranchMulitSelectButton}
+        // onItemSelect={}
+        popoverProps={{ minimal: true }}
+      />
+    </div>
+  );
+}
+
+export default BalanceSheetHeaderDimensionsPanel;
+
+function BranchMulitSelectButton() {
+  return <Button text={'Button'} minimal={true} />;
+}