From 18d9c534131db212bf19ae640669d6c8373b5b03 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@live.com>
Date: Tue, 10 Nov 2020 13:06:11 +0200
Subject: [PATCH] fix: filtering accounts list.

---
 client/src/components/AccountsSelectList.js   | 36 ++++++++++++++++---
 .../DataTableCells/AccountsListFieldCell.js   | 21 ++++++++---
 .../containers/Expenses/ExpenseFormHeader.js  |  9 ++---
 .../src/containers/Expenses/ExpenseTable.js   |  9 +----
 client/src/containers/Items/ItemFormBody.js   |  2 ++
 .../PaymentMades/PaymentMadeFormHeader.js     |  8 ++---
 .../PaymentReceiveFormHeader.js               |  9 ++---
 7 files changed, 57 insertions(+), 37 deletions(-)

diff --git a/client/src/components/AccountsSelectList.js b/client/src/components/AccountsSelectList.js
index 68e079184..de1511753 100644
--- a/client/src/components/AccountsSelectList.js
+++ b/client/src/components/AccountsSelectList.js
@@ -2,6 +2,7 @@ import React, { useCallback, useState, useEffect, useMemo } from 'react';
 import { MenuItem, Button } from '@blueprintjs/core';
 import { Select } from '@blueprintjs/select';
 import { FormattedMessage as T } from 'react-intl';
+import { isEmpty } from 'lodash';
 
 export default function AccountsSelectList({
   accounts,
@@ -10,11 +11,36 @@ export default function AccountsSelectList({
   defaultSelectText = 'Select account',
   onAccountSelected,
   disabled = false,
+  filterByRootTypes = [],
+  filterByTypes = [],
+  filterByNormal
 }) {
+  // Filters accounts based on filter props.
+  const filteredAccounts = useMemo(() => {
+    let filteredAccounts = [...accounts];
+
+    if (!isEmpty(filterByRootTypes)) {
+      filteredAccounts = filteredAccounts.filter(
+        (account) => filterByRootTypes.indexOf(account.type.root_type) !== -1,
+      );
+    }
+    if (!isEmpty(filterByTypes)) {
+      filteredAccounts = filteredAccounts.filter(
+        (account) => filterByTypes.indexOf(account.type.key) !== -1,
+      );
+    }
+    if (!isEmpty(filterByNormal)) {
+      filteredAccounts = filteredAccounts.filter(
+        (account) => filterByTypes.indexOf(account.type.normal) === filterByNormal,
+      );
+    }
+    return filteredAccounts;
+  }, [accounts, filterByRootTypes, filterByTypes, filterByNormal]);
+
   // Find initial account object to set it as default account in initial render.
   const initialAccount = useMemo(
-    () => accounts.find((a) => a.id === initialAccountId),
-    [initialAccountId],
+    () => filteredAccounts.find((a) => a.id === initialAccountId),
+    [initialAccountId, filteredAccounts],
   );
 
   const [selectedAccount, setSelectedAccount] = useState(
@@ -24,11 +50,11 @@ export default function AccountsSelectList({
   useEffect(() => {
     if (typeof selectedAccountId !== 'undefined') {
       const account = selectedAccountId
-        ? accounts.find((a) => a.id === selectedAccountId)
+        ? filteredAccounts.find((a) => a.id === selectedAccountId)
         : null;
       setSelectedAccount(account);
     }
-  }, [selectedAccountId, accounts, setSelectedAccount]);
+  }, [selectedAccountId, filteredAccounts, setSelectedAccount]);
 
   // Account item of select accounts field.
   const accountItem = useCallback((item, { handleClick, modifiers, query }) => {
@@ -69,7 +95,7 @@ export default function AccountsSelectList({
 
   return (
     <Select
-      items={accounts}
+      items={filteredAccounts}
       noResults={<MenuItem disabled={true} text={<T id={'no_accounts'} />} />}
       itemRenderer={accountItem}
       itemPredicate={filterAccountsPredicater}
diff --git a/client/src/components/DataTableCells/AccountsListFieldCell.js b/client/src/components/DataTableCells/AccountsListFieldCell.js
index 30c1f5d6a..4757d6e01 100644
--- a/client/src/components/DataTableCells/AccountsListFieldCell.js
+++ b/client/src/components/DataTableCells/AccountsListFieldCell.js
@@ -5,10 +5,20 @@ import { FormGroup, Classes, Intent } from '@blueprintjs/core';
 
 // Account cell renderer.
 const AccountCellRenderer = ({
-  column: { id, accountsDataProp },
+  column: {
+    id,
+    accountsDataProp,
+    filterAccountsByRootType,
+    filterAccountsByTypes,
+  },
   row: { index, original },
   cell: { value: initialValue },
-  payload: { accounts: defaultAccounts, updateData, errors, ...restProps },
+  payload: {
+    accounts: defaultAccounts,
+    updateData,
+    errors,
+    ...restPayloadProps
+  },
 }) => {
   const handleAccountSelected = useCallback(
     (account) => {
@@ -19,9 +29,10 @@ const AccountCellRenderer = ({
   const error = errors?.[index]?.[id];
 
   const accounts = useMemo(
-    () => restProps[accountsDataProp] || defaultAccounts,
-    [restProps, defaultAccounts, accountsDataProp],
+    () => restPayloadProps[accountsDataProp] || defaultAccounts,
+    [restPayloadProps, defaultAccounts, accountsDataProp],
   );
+
   return (
     <FormGroup
       intent={error ? Intent.DANGER : null}
@@ -35,6 +46,8 @@ const AccountCellRenderer = ({
         accounts={accounts}
         onAccountSelected={handleAccountSelected}
         selectedAccountId={initialValue}
+        filterByRootTypes={filterAccountsByRootType}
+        filterByTypes={filterAccountsByTypes}
       />
     </FormGroup>
   );
diff --git a/client/src/containers/Expenses/ExpenseFormHeader.js b/client/src/containers/Expenses/ExpenseFormHeader.js
index e9b525dee..31bcbda4b 100644
--- a/client/src/containers/Expenses/ExpenseFormHeader.js
+++ b/client/src/containers/Expenses/ExpenseFormHeader.js
@@ -63,12 +63,6 @@ function ExpenseFormHeader({
     [setFieldValue, selectedItems],
   );
 
-  // Filter payment accounts.
-  const paymentAccounts = useMemo(
-    () => accountsList.filter((a) => a?.type?.key === 'current_asset'),
-    [accountsList],
-  );
-
   // handle change customer
   const onChangeCustomer = useCallback(
     (filedName) => {
@@ -126,10 +120,11 @@ function ExpenseFormHeader({
             }
           >
             <AccountsSelectList
-              accounts={paymentAccounts}
+              accounts={accountsList}
               onAccountSelected={onChangeAccount}
               defaultSelectText={<T id={'select_payment_account'} />}
               selectedAccountId={values.payment_account_id}
+              filterByTypes={['current_asset']}
             />
           </FormGroup>
         </Col>
diff --git a/client/src/containers/Expenses/ExpenseTable.js b/client/src/containers/Expenses/ExpenseTable.js
index 213f45602..f5f63ac37 100644
--- a/client/src/containers/Expenses/ExpenseTable.js
+++ b/client/src/containers/Expenses/ExpenseTable.js
@@ -127,7 +127,7 @@ function ExpenseTable({
         disableSortBy: true,
         disableResizing: true,
         width: 250,
-        accountsDataProp: 'expenseAccounts',
+        filterAccountsByRootType: ['expense'],
       },
       {
         Header: formatMessage({ id: 'amount_currency' }, { currency: 'USD' }),
@@ -220,12 +220,6 @@ function ExpenseTable({
     [rows],
   );
 
-  // Filter expense accounts.
-  const expenseAccounts = useMemo(
-    () => accountsList.filter((a) => a?.type?.root_type === 'expense'),
-    [accountsList],
-  );
-
   return (
     <div className={'dashboard__insider--expense-form__table'}>
       <DataTable
@@ -235,7 +229,6 @@ function ExpenseTable({
         sticky={true}
         payload={{
           accounts: accountsList,
-          expenseAccounts,
           errors: errors.categories || [],
           updateData: handleUpdateData,
           removeRow: handleRemoveRow,
diff --git a/client/src/containers/Items/ItemFormBody.js b/client/src/containers/Items/ItemFormBody.js
index 3bf6b1832..d1e5aa4a4 100644
--- a/client/src/containers/Items/ItemFormBody.js
+++ b/client/src/containers/Items/ItemFormBody.js
@@ -104,6 +104,7 @@ function ItemFormBody({
               defaultSelectText={<T id={'select_account'} />}
               selectedAccountId={values.sell_account_id}
               disabled={!values.sellable}
+              filterByTypes={['income']}
             />
           </FormGroup>
 
@@ -173,6 +174,7 @@ function ItemFormBody({
               defaultSelectText={<T id={'select_account'} />}
               selectedAccountId={values.cost_account_id}
               disabled={!values.purchasable}
+              filterByTypes={['cost_of_goods_sold']}
             />
           </FormGroup>
         </Col>
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentMadeFormHeader.js b/client/src/containers/Purchases/PaymentMades/PaymentMadeFormHeader.js
index 3172ffcd0..c7c2e26de 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentMadeFormHeader.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentMadeFormHeader.js
@@ -76,11 +76,6 @@ function PaymentMadeFormHeader({
     },
     [setFieldValue],
   );
-  // Filter Payment accounts.
-  const paymentAccounts = useMemo(
-    () => accountsList.filter((a) => a?.type?.key === 'current_asset'),
-    [accountsList],
-  );
 
   const handleReceiveFullAmountClick = () => {
     setFieldValue('full_amount', payableFullAmount);
@@ -208,11 +203,12 @@ function PaymentMadeFormHeader({
           }
           >
             <AccountsSelectList
-              accounts={paymentAccounts}
+              accounts={accountsList}
               labelInfo={<FieldRequiredHint />}
               onAccountSelected={onChangeSelect('payment_account_id')}
               defaultSelectText={<T id={'select_payment_account'} />}
               selectedAccountId={values.payment_account_id}
+              filterByTypes={['current_asset']}
             />
           </FormGroup>
 
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js
index f9c6189a4..23d985f73 100644
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js
@@ -64,12 +64,6 @@ function PaymentReceiveFormHeader({
     [setFieldValue],
   );
 
-  // Filter deposit accounts.
-  const depositAccounts = useMemo(
-    () => accountsList.filter((a) => a?.type?.key === 'current_asset'),
-    [accountsList],
-  );
-
   const triggerFullAmountChanged = (value) => {
     onFullAmountChanged && onFullAmountChanged(value);
   };
@@ -210,11 +204,12 @@ function PaymentReceiveFormHeader({
             }
           >
             <AccountsSelectList
-              accounts={depositAccounts}
+              accounts={accountsList}
               labelInfo={<FieldRequiredHint />}
               onAccountSelected={onChangeSelect('deposit_account_id')}
               defaultSelectText={<T id={'select_deposit_account'} />}
               selectedAccountId={values.deposit_account_id}
+              filterByTypes={['current_asset']}
             />
           </FormGroup>