Merge branch 'develop' into fix-spelling-a-char

packages/webapp/src/components/Branches/BranchSelect.tsx

@@ -5,59 +5,20 @@ import { MenuItem, Button } from '@blueprintjs/core';
 import { FSelect } from '../Forms';
 
 /**
- *
- * @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.code}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
-  }
-};
-
-/**
- *
- * @param {*} film
- * @param {*} param1
- * @returns
- */
-const branchItemRenderer = (branch, { handleClick, modifiers, query }) => {
-  const text = `${branch.name}`;
-
-  return (
-    <MenuItem
-      active={modifiers.active}
-      disabled={modifiers.disabled}
-      label={branch.code}
-      key={branch.id}
-      onClick={handleClick}
-      text={text}
-    />
-  );
-};
-
-const branchSelectProps = {
-  itemPredicate: branchItemPredicate,
-  itemRenderer: branchItemRenderer,
-  valueAccessor: 'id',
-  labelAccessor: 'name',
-};
-
-/**
- *
+ * Branch select field.
  * @param {*} param0
- * @returns
+ * @returns {JSX.Element}
  */
 export function BranchSelect({ branches, ...rest }) {
-  return <FSelect {...branchSelectProps} {...rest} items={branches} />;
+  return (
+    <FSelect
+      valueAccessor={'id'}
+      textAccessor={'name'}
+      labelAccessor={'code'}
+      {...rest}
+      items={branches}
+    />
+  );
 }
 
 /**

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,
+);

packages/webapp/src/components/Dashboard/DashboardTopbar/DashboardTopbar.tsx

@@ -53,7 +53,7 @@ function DashboardTopbar({
   };
 
   return (
-    <div class="dashboard__topbar">
+    <div class="dashboard__topbar" data-testId={'dashboard-topbar'}>
       <div class="dashboard__topbar-left">
         <div class="dashboard__topbar-sidebar-toggle">
           <Tooltip

packages/webapp/src/components/Forms/Select.tsx

@@ -16,7 +16,7 @@ export function FSelect({ ...props }) {
       />
     );
   };
-  return <Select input={input} {...props} fill={true} />;
+  return <Select input={input} fill={true} {...props} />;
 }
 
 const SelectButton = styled(Button)`

packages/webapp/src/components/Items/ItemsMultiSelect.tsx

@@ -1,49 +1,48 @@
 // @ts-nocheck
-import React, { useCallback } from 'react';
-import { MenuItem } from '@blueprintjs/core';
-import { MultiSelect } from '@/components';
+import React from 'react';
+import * as R from 'ramda';
+import { FMultiSelect } from '@/components/Forms';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
 
 /**
  * Items multi-select.
  */
-export function ItemsMultiSelect({ ...multiSelectProps }) {
-  // Filters accounts items.
-  const filterItemsPredicater = useCallback(
-    (query, item, _index, exactMatch) => {
-      const normalizedTitle = item.name.toLowerCase();
-      const normalizedQuery = query.toLowerCase();
+function ItemsMultiSelectRoot({
+  // #withDialogAction
+  openDialog,
+  closeDialog,
 
-      if (exactMatch) {
-        return normalizedTitle === normalizedQuery;
-      } else {
-        return `${normalizedTitle} ${item.code}`.indexOf(normalizedQuery) >= 0;
-      }
-    },
-    [],
-  );
+  // #props
+  allowCreate,
+  ...multiSelectProps
+}) {
+  // Maybe inject new item props to select component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
+
+  // Handles the create item click.
+  const handleCreateItemClick = () => {
+    openDialog(DialogsName.AccountForm);
+  };
 
   return (
-    <MultiSelect
-      itemRenderer={(item, { selected, handleClick, active }) => (
-        <MenuItem
-          active={active}
-          icon={selected ? 'tick' : 'blank'}
-          text={item.name}
-          label={item.code}
-          key={item.id}
-          onClick={handleClick}
-        />
-      )}
-      popoverProps={{ minimal: true, usePortal: false, targetTagName: 'div ' }}
+    <FMultiSelect
+      valueAccessor={'id'}
+      textAccessor={'name'}
+      labelAccessor={'code'}
+      tagAccessor={'name'}
       fill={true}
-      itemPredicate={filterItemsPredicater}
-      tagRenderer={(item) => item.name}
+      popoverProps={{ minimal: true }}
       resetOnSelect={true}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
+      onCreateItemSelect={handleCreateItemClick}
       {...multiSelectProps}
     />
   );
 }
 
-ItemsMultiSelect.defaultProps = {
-  initialSelectedItems: [],
-};
+export const ItemsMultiSelect =
+  R.compose(withDialogActions)(ItemsMultiSelectRoot);

packages/webapp/src/components/PageForm/FormTopbarSelectInputs.tsx

@@ -0,0 +1,27 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Button } from '@blueprintjs/core';
+import { Icon } from '@/components';
+
+export function FormWarehouseSelectButton({ text }) {
+  return (
+    <Button
+      text={intl.get('page_form.warehouse_button.label', { text })}
+      minimal={true}
+      small={true}
+      icon={<Icon icon={'warehouse-16'} iconSize={16} />}
+    />
+  );
+}
+
+export function FormBranchSelectButton({ text }) {
+  return (
+    <Button
+      text={intl.get('page_form.branch_button.label', { text })}
+      minimal={true}
+      small={true}
+      icon={<Icon icon={'branch-16'} iconSize={16} />}
+    />
+  );
+}

packages/webapp/src/components/PageForm/index.ts

@@ -1,3 +1,4 @@
 // @ts-nocheck
 export * from './FormTopbar';
+export * from './FormTopbarSelectInputs';
 export * from './PageFormBigNumber';

packages/webapp/src/components/Warehouses/WarehouseSelect.tsx

@@ -18,4 +18,4 @@ export function WarehouseSelect({ warehouses, ...rest }) {
       items={warehouses}
     />
   );
-}
+}