fix(webapp): filter by customers, vendors and items in reports do not work

packages/webapp/src/components/Contacts/ContactsMultiSelect.tsx

@@ -1,43 +1,78 @@
 // @ts-nocheck
 import React, { useCallback } from 'react';
-import { MenuItem } from '@blueprintjs/core';
-import { MultiSelect } from '../MultiSelectTaggable';
+import * as R from 'ramda';
+import { FMultiSelect } from '../Forms';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Contacts multi-select component.
  */
-export function ContactsMultiSelect({ ...multiSelectProps }) {
-  // 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;
-      }
-    },
-    [],
-  );
+export function ContactsMultiSelect({ allowCreate, ...multiSelectProps }) {
+  // Maybe inject new item props to select component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
 
   return (
-    <MultiSelect
-      itemRenderer={(contact, { selected, active, handleClick }) => (
-        <MenuItem
-          active={active}
-          icon={selected ? 'tick' : 'blank'}
-          text={contact.display_name}
-          key={contact.id}
-          onClick={handleClick}
-        />
-      )}
+    <FMultiSelect
+      valueAccessor={'id'}
+      textAccessor={'display_name'}
+      tagAccessor={'display_name'}
       popoverProps={{ minimal: true }}
       fill={true}
-      itemPredicate={filterContactsPredicater}
-      tagRenderer={(item) => item.display_name}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
       {...multiSelectProps}
     />
   );
 }
+
+/**
+ * Customers multi-select component.
+ */
+function CustomersMultiSelectRoot({
+  // #withDrawerAction
+  openDrawer,
+  closeDrawer,
+  ...props
+}) {
+  const handleCreateItemClick = () => {
+    openDrawer(DRAWERS.QUICK_CREATE_CUSTOMER);
+  };
+  return (
+    <ContactsMultiSelect
+      onCreateItemSelect={handleCreateItemClick}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Vendors multi-select component.
+ */
+function VendorsMultiSelectRoot({
+  // #withDrawerAction
+  openDrawer,
+  closeDrawer,
+  ...props
+}) {
+  const handleCreateItemClick = () => {
+    openDrawer(DRAWERS.QUICK_WRITE_VENDOR);
+  };
+  return (
+    <ContactsMultiSelect
+      onCreateItemSelect={handleCreateItemClick}
+      {...props}
+    />
+  );
+}
+
+export const CustomersMultiSelect = R.compose(withDrawerActions)(
+  CustomersMultiSelectRoot,
+);
+
+export const VendorsMultiSelect = R.compose(withDrawerActions)(
+  VendorsMultiSelectRoot,
+);