From 79099e1abc878a56c92ac9af2a296ede537c6a60 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Mon, 28 Mar 2022 15:46:37 +0200
Subject: [PATCH] BIG-280: optimize select.

---
 src/components/Accounts/AccountMultiSelect.js | 73 +++++++++++++++++++
 src/components/Accounts/index.js              |  1 +
 src/components/index.js                       |  1 +
 .../GeneralLedgerHeaderGeneralPane.js         | 12 +--
 .../GeneralLedger/common.js                   |  1 +
 5 files changed, 83 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Accounts/AccountMultiSelect.js
 create mode 100644 src/components/Accounts/index.js

diff --git a/src/components/Accounts/AccountMultiSelect.js b/src/components/Accounts/AccountMultiSelect.js
new file mode 100644
index 000000000..8e9d54882
--- /dev/null
+++ b/src/components/Accounts/AccountMultiSelect.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import styled from 'styled-components';
+import { MenuItem } from '@blueprintjs/core';
+import { FMultiSelect } from '../Forms';
+import classNames from 'classnames';
+import { Classes } from '@blueprintjs/popover2';
+
+/**
+ *
+ * @param {*} query
+ * @param {*} account
+ * @param {*} _index
+ * @param {*} exactMatch
+ * @returns
+ */
+const accountItemPredicate = (query, account, _index, exactMatch) => {
+  const normalizedTitle = account.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${account.code}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+/**
+ *
+ * @param {*} account
+ * @param {*} param1
+ * @returns
+ */
+const accountItemRenderer = (
+  account,
+  { handleClick, modifiers, query },
+  { isSelected },
+) => {
+  return (
+    <MenuItem
+      icon={isSelected ? 'tick' : 'blank'}
+      text={account.name}
+      label={account.code}
+      key={account.id}
+      onClick={handleClick}
+    />
+  );
+};
+
+const accountSelectProps = {
+  itemPredicate: accountItemPredicate,
+  itemRenderer: accountItemRenderer,
+  valueAccessor: (item) => item.id,
+  labelAccessor: (item) => item.code,
+  tagRenderer: (item) => item.name,
+};
+
+/**
+ * branches mulit select.
+ * @param {*} param0
+ * @returns {JSX.Element}
+ */
+export function AccountMultiSelect({ accounts, ...rest }) {
+  return (
+    <FMultiSelect
+      items={accounts}
+      popoverProps={{
+        minimal: true,
+      }}
+      {...accountSelectProps}
+      {...rest}
+    />
+  );
+}
diff --git a/src/components/Accounts/index.js b/src/components/Accounts/index.js
new file mode 100644
index 000000000..791394be9
--- /dev/null
+++ b/src/components/Accounts/index.js
@@ -0,0 +1 @@
+export * from './AccountMultiSelect';
diff --git a/src/components/index.js b/src/components/index.js
index 16e1003b6..c91a4f1a1 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -104,6 +104,7 @@ export * from './Warehouses';
 export * from './Currencies';
 export * from './FormTopbar'
 export * from './Paper';
+export * from './Accounts'
 
 const Hint = FieldHint;
 
diff --git a/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js
index 5aef980ec..3c196589c 100644
--- a/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js
+++ b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js
@@ -3,7 +3,8 @@ import { FormGroup, Classes } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';
 
-import { AccountsMultiSelect, Row, Col } from 'components';
+import { AccountMultiSelect, Row, Col } from 'components';
+import { FFormGroup } from '../../../components/Forms';
 
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
 import RadiosAccountingBasis from '../RadiosAccountingBasis';
@@ -44,12 +45,13 @@ function GLHeaderGeneralPaneContent() {
       </Row>
       <Row>
         <Col xs={4}>
-          <FormGroup
+          <FFormGroup
             label={<T id={'specific_accounts'} />}
-            className={classNames('form-group--select-list', Classes.FILL)}
+            name={'accounts'}
+            className={Classes.FILL}
           >
-            <AccountsMultiSelect items={accounts} />
-          </FormGroup>
+            <AccountMultiSelect name="accounts" accounts={accounts} />
+          </FFormGroup>
         </Col>
       </Row>
 
diff --git a/src/containers/FinancialStatements/GeneralLedger/common.js b/src/containers/FinancialStatements/GeneralLedger/common.js
index 8463342b1..5d97024c6 100644
--- a/src/containers/FinancialStatements/GeneralLedger/common.js
+++ b/src/containers/FinancialStatements/GeneralLedger/common.js
@@ -32,6 +32,7 @@ export const getDefaultGeneralLedgerQuery = () => {
     basis: 'accural',
     filterByOption: 'with-transactions',
     branchesIds: [],
+    accounts: [],
   };
 };