From 4a0bd842e9eabbdf6b893abfc896beb4bc11110a Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Tue, 3 Aug 2021 08:26:13 +0200
Subject: [PATCH] feat: add filter field to suggest select field.

---
 client/src/components/ContactsMultiSelect.js  | 26 +++++++--
 .../src/components/Items/ItemsMultiSelect.js  | 17 ++++++
 client/src/components/ItemsSuggestField.js    |  2 +-
 client/src/components/MultiSelect.js          | 53 +++++++++++++++----
 .../InventoryItemDetailsProvider.js           |  7 ++-
 .../InventoryValuationProvider.js             |  9 +++-
 .../PurchasesByItemsProvider.js               |  8 ++-
 .../SalesByItems/SalesByItemProvider.js       |  9 +++-
 .../Bills/BillsLanding/components.js          |  9 +---
 .../Invoices/InvoicesLanding/components.js    |  6 +--
 client/src/style/pages/Bills/List.scss        |  3 --
 client/src/style/pages/SaleInvoice/List.scss  |  6 ---
 12 files changed, 113 insertions(+), 42 deletions(-)

diff --git a/client/src/components/ContactsMultiSelect.js b/client/src/components/ContactsMultiSelect.js
index 75755ab9a..af9bccce8 100644
--- a/client/src/components/ContactsMultiSelect.js
+++ b/client/src/components/ContactsMultiSelect.js
@@ -17,11 +17,11 @@ export default function ContactsMultiSelect({
   contactsSelected = [],
   ...multiSelectProps
 }) {
-  const [localSelected, setLocalSelected] = useState([ ...contactsSelected]);
+  const [localSelected, setLocalSelected] = useState([...contactsSelected]);
 
   // Detarmines the given id is selected.
   const isItemSelected = useCallback(
-    (id) => localSelected.some(s => s === id),
+    (id) => localSelected.some((s) => s === id),
     [localSelected],
   );
 
@@ -45,15 +45,30 @@ export default function ContactsMultiSelect({
   const handleItemSelect = useCallback(
     ({ id }) => {
       const selected = isItemSelected(id)
-        ? localSelected.filter(s => s !== id)
+        ? localSelected.filter((s) => s !== id)
         : [...localSelected, id];
-      
-      setLocalSelected([ ...selected ]);
+
+      setLocalSelected([...selected]);
       safeInvoke(onContactSelect, selected);
     },
     [setLocalSelected, localSelected, isItemSelected, onContactSelect],
   );
 
+  // Filters accounts items.
+  const filterContactsPredicater = useCallback(
+    (query, contact, _index, exactMatch) => {
+      const normalizedTitle = contact.display_name.toLowerCase();
+      const normalizedQuery = query.toLowerCase();
+
+      if (exactMatch) {
+        return normalizedTitle === normalizedQuery;
+      } else {
+        return normalizedTitle.indexOf(normalizedQuery) >= 0;
+      }
+    },
+    [],
+  );
+
   return (
     <MultiSelect
       items={contacts}
@@ -62,6 +77,7 @@ export default function ContactsMultiSelect({
       popoverProps={{ minimal: true }}
       filterable={true}
       onItemSelect={handleItemSelect}
+      itemPredicate={filterContactsPredicater}
       {...multiSelectProps}
     >
       <Button
diff --git a/client/src/components/Items/ItemsMultiSelect.js b/client/src/components/Items/ItemsMultiSelect.js
index ba7e868bb..ea39b4f79 100644
--- a/client/src/components/Items/ItemsMultiSelect.js
+++ b/client/src/components/Items/ItemsMultiSelect.js
@@ -31,6 +31,7 @@ export function ItemsMultiSelect({
       <MenuItem
         icon={isItemSelected(item.id) ? 'tick' : 'blank'}
         text={item.name}
+        label={item.code}
         key={item.id}
         onClick={handleClick}
       />
@@ -54,6 +55,21 @@ export function ItemsMultiSelect({
     [setLocalSelected, localSelected, isItemSelected, onItemSelect],
   );
 
+  // Filters accounts items.
+  const filterItemsPredicater = useCallback(
+    (query, item, _index, exactMatch) => {
+      const normalizedTitle = item.name.toLowerCase();
+      const normalizedQuery = query.toLowerCase();
+
+      if (exactMatch) {
+        return normalizedTitle === normalizedQuery;
+      } else {
+        return `${normalizedTitle} ${item.code}`.indexOf(normalizedQuery) >= 0;
+      }
+    },
+    [],
+  );
+
   return (
     <MultiSelect
       items={items}
@@ -62,6 +78,7 @@ export function ItemsMultiSelect({
       popoverProps={{ minimal: true }}
       filterable={true}
       onItemSelect={handleItemSelect}
+      itemPredicate={filterItemsPredicater}
       {...multiSelectProps}
     >
       <Button
diff --git a/client/src/components/ItemsSuggestField.js b/client/src/components/ItemsSuggestField.js
index 0194b12ea..a7223bfe9 100644
--- a/client/src/components/ItemsSuggestField.js
+++ b/client/src/components/ItemsSuggestField.js
@@ -83,7 +83,7 @@ export default function ItemsSuggestField({
       if (exactMatch) {
         return normalizedTitle === normalizedQuery;
       } else {
-        return normalizedTitle.indexOf(normalizedQuery) >= 0;
+        return `${normalizedTitle} ${item.code}`.indexOf(normalizedQuery) >= 0;
       }
     },
     [],
diff --git a/client/src/components/MultiSelect.js b/client/src/components/MultiSelect.js
index e4ac441dd..063cca809 100644
--- a/client/src/components/MultiSelect.js
+++ b/client/src/components/MultiSelect.js
@@ -21,6 +21,9 @@ import {
   Popover,
   Position,
   Utils,
+  InputGroup,
+  Button,
+  refHandler,
 } from '@blueprintjs/core';
 import { QueryList } from '@blueprintjs/select';
 
@@ -61,6 +64,13 @@ import { QueryList } from '@blueprintjs/select';
 // }
 
 export default class MultiSelect extends React.Component {
+  inputElement = null;
+  handleInputRef = refHandler(
+    this,
+    'inputElement',
+    this.props.inputProps?.inputRef,
+  );
+
   static get displayName() {
     return `${DISPLAYNAME_PREFIX}.MultiSelect`;
   }
@@ -92,8 +102,7 @@ export default class MultiSelect extends React.Component {
 
   render() {
     // omit props specific to this component, spread the rest.
-    const { openOnKeyDown, popoverProps, tagInputProps, ...restProps } =
-      this.props;
+    const { openOnKeyDown, popoverProps, ...restProps } = this.props;
 
     return (
       <QueryList
@@ -106,20 +115,36 @@ export default class MultiSelect extends React.Component {
     );
   }
 
+  maybeRenderClearButton(query) {
+    return query.length > 0 ? (
+      <Button icon="cross" minimal={true} onClick={this.resetQuery} />
+    ) : undefined;
+  }
+
   renderQueryList(listProps) {
-    const { fill, tagInputProps = {}, popoverProps = {} } = this.props;
+    const { filterable, fill, inputProps = {}, popoverProps = {} } = this.props;
     const { handleKeyDown, handleKeyUp } = listProps;
 
     if (fill) {
       popoverProps.fill = true;
-      tagInputProps.fill = true;
     }
 
-    // add our own inputProps.className so that we can reference it in event handlers
-    const { inputProps = {} } = tagInputProps;
-    inputProps.className = classNames(
-      inputProps.className,
-      Classes.MULTISELECT_TAG_INPUT_INPUT,
+    // const handleInputRef = refHandler(
+    //   this,
+    //   'inputElement',
+    //   this.props.inputProps?.inputRef,
+    // );
+
+    const input = (
+      <InputGroup
+        leftIcon="search"
+        placeholder="Filter..."
+        rightElement={this.maybeRenderClearButton(listProps.query)}
+        {...inputProps}
+        inputRef={this.handleInputRef}
+        onChange={listProps.handleQueryChange}
+        value={listProps.query}
+      />
     );
 
     return (
@@ -147,6 +172,7 @@ export default class MultiSelect extends React.Component {
           {this.props.children}
         </div>
         <div onKeyDown={handleKeyDown} onKeyUp={handleKeyUp} ref={this.listRef}>
+          {filterable ? input : undefined}
           {listProps.itemList}
         </div>
       </Popover>
@@ -179,6 +205,15 @@ export default class MultiSelect extends React.Component {
       // scroll active item into view after popover transition completes and all dimensions are stable.
       this.queryList.scrollActiveItemIntoView();
     }
+    requestAnimationFrame(() => {
+      const { inputProps = {} } = this.props;
+      // autofocus is enabled by default
+      if (inputProps.autoFocus !== false) {
+        this.inputElement.focus();
+      }
+    });
     Utils.safeInvokeMember(this.props.popoverProps, 'onOpened', node);
   }
+
+  resetQuery = () => this.queryList && this.queryList.setQuery("", true);
 }
diff --git a/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsProvider.js b/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsProvider.js
index f46980dc1..3039c0338 100644
--- a/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsProvider.js
+++ b/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsProvider.js
@@ -27,7 +27,12 @@ function InventoryItemDetailsProvider({ filter, ...props }) {
     data: { items },
     isLoading: isItemsLoading,
     isFetching: isItemsFetching,
-  } = useItems({ page_size: 10000 });
+  } = useItems({
+    stringified_filter_roles: JSON.stringify([
+      { fieldKey: 'type', comparator: 'is', value: 'inventory', index: 1 },
+    ]),
+    page_size: 10000,
+  });
 
   const provider = {
     inventoryItemDetails,
diff --git a/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationProvider.js b/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationProvider.js
index 60f8006bb..af6677a0a 100644
--- a/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationProvider.js
+++ b/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationProvider.js
@@ -25,7 +25,12 @@ function InventoryValuationProvider({ query, ...props }) {
     data: { items },
     isLoading: isItemsLoading,
     isFetching: isItemsFetching,
-  } = useItems({ page_size: 10000 });
+  } = useItems({
+    stringified_filter_roles: JSON.stringify([
+      { fieldKey: 'type', comparator: 'is', value: 'inventory', index: 1 },
+    ]),
+    page_size: 10000,
+  });
 
   // Provider data.
   const provider = {
@@ -36,7 +41,7 @@ function InventoryValuationProvider({ query, ...props }) {
 
     items,
     isItemsFetching,
-    isItemsLoading
+    isItemsLoading,
   };
 
   return (
diff --git a/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsProvider.js b/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsProvider.js
index b49757a96..e2493e781 100644
--- a/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsProvider.js
+++ b/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsProvider.js
@@ -3,7 +3,6 @@ import FinancialReportPage from '../FinancialReportPage';
 import { usePurchasesByItems, useItems } from 'hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
-
 const PurchasesByItemsContext = createContext();
 
 function PurchasesByItemsProvider({ query, ...props }) {
@@ -27,7 +26,12 @@ function PurchasesByItemsProvider({ query, ...props }) {
     data: { items },
     isLoading: isItemsLoading,
     isFetching: isItemsFetching,
-  } = useItems({ page_size: 10000 });
+  } = useItems({
+    page_size: 10000,
+    stringified_filter_roles: JSON.stringify([
+      { fieldKey: 'type', comparator: 'is', value: 'inventory', index: 1 },
+    ]),
+  });
 
   const provider = {
     purchaseByItems,
diff --git a/client/src/containers/FinancialStatements/SalesByItems/SalesByItemProvider.js b/client/src/containers/FinancialStatements/SalesByItems/SalesByItemProvider.js
index 54bd0b174..8e3e79dcf 100644
--- a/client/src/containers/FinancialStatements/SalesByItems/SalesByItemProvider.js
+++ b/client/src/containers/FinancialStatements/SalesByItems/SalesByItemProvider.js
@@ -25,7 +25,12 @@ function SalesByItemProvider({ query, ...props }) {
     data: { items },
     isLoading: isItemsLoading,
     isFetching: isItemsFetching,
-  } = useItems({ page_size: 10000 });
+  } = useItems({
+    page_size: 10000,
+    stringified_filter_roles: JSON.stringify([
+      { fieldKey: 'type', comparator: 'is', value: 'inventory', index: 1 },
+    ]),
+  });
 
   const provider = {
     salesByItems,
@@ -35,7 +40,7 @@ function SalesByItemProvider({ query, ...props }) {
     items,
     isItemsLoading,
     isItemsFetching,
-    
+
     refetchSheet: refetch,
   };
   return (
diff --git a/client/src/containers/Purchases/Bills/BillsLanding/components.js b/client/src/containers/Purchases/Bills/BillsLanding/components.js
index de7271f8d..2c4845706 100644
--- a/client/src/containers/Purchases/Bills/BillsLanding/components.js
+++ b/client/src/containers/Purchases/Bills/BillsLanding/components.js
@@ -13,7 +13,7 @@ import {
 import intl from 'react-intl-universal';
 import { FormattedMessage as T } from 'components';
 import { Icon, If, Choose, Money } from 'components';
-import { safeCallback, isBlank, calculateStatus } from 'utils';
+import { formattedAmount, safeCallback, isBlank, calculateStatus } from 'utils';
 import moment from 'moment';
 
 /**
@@ -115,12 +115,7 @@ export function StatusAccessor(bill) {
           <If condition={bill.is_partially_paid}>
             <span className="partial-paid">
               {intl.get('day_partially_paid', {
-                due: (
-                  <Money
-                    amount={bill.due_amount}
-                    currency={bill.currency_code}
-                  />
-                ),
+                due: formattedAmount(bill.due_amount, bill.currency_code),
               })}
             </span>
             <ProgressBar
diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/components.js b/client/src/containers/Sales/Invoices/InvoicesLanding/components.js
index 395e50585..6dffefa4b 100644
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/components.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/components.js
@@ -16,7 +16,7 @@ import { FormattedMessage as T } from 'components';
 import moment from 'moment';
 import { Choose, If, Icon } from 'components';
 import { Money, AppToaster } from 'components';
-import { safeCallback, calculateStatus } from 'utils';
+import { formattedAmount, safeCallback, calculateStatus } from 'utils';
 
 export const statusAccessor = (row) => {
   return (
@@ -48,9 +48,7 @@ export const statusAccessor = (row) => {
           <If condition={row.is_partially_paid}>
             <span class="partial-paid">
               {intl.get('day_partially_paid', {
-                due: (
-                  <Money amount={row.due_amount} currency={row.currency_code} />
-                ),
+                due: formattedAmount(row.due_amount, row.currency_code),
               })}
             </span>
             <ProgressBar
diff --git a/client/src/style/pages/Bills/List.scss b/client/src/style/pages/Bills/List.scss
index ced4ceec0..38fb79e66 100644
--- a/client/src/style/pages/Bills/List.scss
+++ b/client/src/style/pages/Bills/List.scss
@@ -12,9 +12,6 @@
         }
       }
       .status.td {
-        .status-accessor {
-          padding: 4px 0;
-        }
         .overdue-status,
         .due-status {
           display: block;
diff --git a/client/src/style/pages/SaleInvoice/List.scss b/client/src/style/pages/SaleInvoice/List.scss
index 24e706b2f..68fcd4b6e 100644
--- a/client/src/style/pages/SaleInvoice/List.scss
+++ b/client/src/style/pages/SaleInvoice/List.scss
@@ -2,10 +2,7 @@
 
 .dashboard__insider--sales-invoices-list{
 
-
   .bigcapital-datatable{
-
-
     .tbody{
       .tr{
         min-height: 46px;
@@ -20,9 +17,6 @@
       }
       .status.td{
 
-        .status-accessor{
-          padding: 4px 0;
-        }
         .overdue-status,
         .due-status{
           display: block;