feat: universal search.

client/src/components/Dashboard/Dashboard.js

@@ -7,7 +7,7 @@ import Sidebar from 'components/Sidebar/Sidebar';
 import DashboardContent from 'components/Dashboard/DashboardContent';
 import DialogsContainer from 'components/DialogsContainer';
 import PreferencesPage from 'components/Preferences/PreferencesPage';
-import Search from 'containers/GeneralSearch/Search';
+import DashboardUniversalSearch from 'containers/UniversalSearch/DashboardUniversalSearch';
 import DashboardSplitPane from 'components/Dashboard/DashboardSplitePane';
 import GlobalHotkeys from './GlobalHotkeys';
 import DashboardProvider from './DashboardProvider';
@@ -35,7 +35,7 @@ export default function Dashboard() {
         </Route>
       </Switch>
 
-      <Search />
+      <DashboardUniversalSearch />
       <DialogsContainer />
       <GlobalHotkeys />
       <DrawersContainer />

client/src/components/Dashboard/DashboardActionViewsList.js

@@ -8,6 +8,7 @@ import {
   Popover,
   PopoverInteractionKind,
   Position,
+  Divider,
 } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
 import { Icon } from 'components';
@@ -17,6 +18,8 @@ import { Icon } from 'components';
  */
 export default function DashboardActionViewsList({
   resourceName,
+  allMenuItem,
+  allMenuItemText,
   views,
   onChange,
 }) {
@@ -28,9 +31,28 @@ export default function DashboardActionViewsList({
     <MenuItem onClick={() => handleClickViewItem(view)} text={view.name} />
   ));
 
+  const handleAllTabClick = () => {
+    handleClickViewItem(null);
+  };
+
+  const content = (
+    <Menu>
+      {allMenuItem && (
+        <>
+          <MenuItem
+            onClick={handleAllTabClick}
+            text={allMenuItemText || 'All'}
+          />
+          <Divider />
+        </>
+      )}
+      {viewsMenuItems}
+    </Menu>
+  );
+
   return (
     <Popover
-      content={<Menu>{viewsMenuItems}</Menu>}
+      content={content}
       minimal={true}
       interactionKind={PopoverInteractionKind.CLICK}
       position={Position.BOTTOM_LEFT}

client/src/components/Dashboard/DashboardContentRoute.js

@@ -27,6 +27,7 @@ export default function DashboardContentRoute() {
               hint={route.hint}
               sidebarExpand={route.sidebarExpand}
               pageType={route.pageType}
+              defaultSearchResource={route.defaultSearchResource}
             />
           </Route>
         ))}

client/src/components/Dashboard/DashboardPage.js

@@ -1,10 +1,13 @@
 import React, { useEffect, Suspense } from 'react';
-import { isUndefined } from 'lodash';
+// import { isUndefined } from 'lodash';
 import { CLASSES } from 'common/classes';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import { compose } from 'utils';
 import { Spinner } from '@blueprintjs/core';
 
+// import withUniversalSearch from '../../containers/UniversalSearch/withUniversalSearch';
+import withUniversalSearchActions from '../../containers/UniversalSearch/withUniversalSearchActions';
+
 /**
  * Dashboard pages wrapper.
  */
@@ -16,12 +19,17 @@ function DashboardPage({
   Component,
   name,
   hint,
+  defaultSearchResource,
 
   // #withDashboardActions
   changePageTitle,
   setDashboardBackLink,
   changePageHint,
-  toggleSidebarExpand
+  toggleSidebarExpand,
+
+  // #withUniversalSearch
+  setResourceTypeUniversalSearch,
+  resetResourceTypeUniversalSearch,
 }) {
   // Hydrate the given page title.
   useEffect(() => {
@@ -38,7 +46,7 @@ function DashboardPage({
 
     return () => {
       hint && changePageHint('');
-    }
+    };
   }, [hint, changePageHint]);
 
   // Hydrate the dashboard back link status.
@@ -53,7 +61,7 @@ function DashboardPage({
   useEffect(() => {
     const className = `page-${name}`;
     name && document.body.classList.add(className);
-    
+
     return () => {
       name && document.body.classList.remove(className);
     };
@@ -61,15 +69,30 @@ function DashboardPage({
 
   useEffect(() => {
     toggleSidebarExpand(sidebarExpand);
-  }, [toggleSidebarExpand, sidebarExpand])
+  }, [toggleSidebarExpand, sidebarExpand]);
+
+  useEffect(() => {
+    if (defaultSearchResource) {
+      setResourceTypeUniversalSearch(defaultSearchResource);
+    }
+    return () => {
+      resetResourceTypeUniversalSearch();
+    };
+  }, [
+    defaultSearchResource,
+    resetResourceTypeUniversalSearch,
+    setResourceTypeUniversalSearch,
+  ]);
 
   return (
     <div className={CLASSES.DASHBOARD_PAGE}>
-      <Suspense fallback={
-        <div class="dashboard__fallback-loading">
-          <Spinner size={40} value={null} />
-        </div>
-      }>
+      <Suspense
+        fallback={
+          <div class="dashboard__fallback-loading">
+            <Spinner size={40} value={null} />
+          </div>
+        }
+      >
         <Component />
       </Suspense>
     </div>
@@ -78,4 +101,6 @@ function DashboardPage({
 
 export default compose(
   withDashboardActions,
+  // withUniversalSearch,
+  withUniversalSearchActions,
 )(DashboardPage);

client/src/components/Dashboard/DashboardTopbar.js

@@ -16,7 +16,7 @@ import DashboardBreadcrumbs from 'components/Dashboard/DashboardBreadcrumbs';
 import DashboardBackLink from 'components/Dashboard/DashboardBackLink';
 import { Icon, Hint, If } from 'components';
 
-import withUniversalSearch from 'containers/UniversalSearch/withUniversalSearch';
+import withUniversalSearchActions from 'containers/UniversalSearch/withUniversalSearchActions';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withDashboard from 'containers/Dashboard/withDashboard';
 import withSettings from 'containers/Settings/withSettings';
@@ -155,7 +155,7 @@ function DashboardTopbar({
 }
 
 export default compose(
-  withUniversalSearch,
+  withUniversalSearchActions,
   withDashboard(({ pageTitle, pageHint, editViewId, sidebarExpended }) => ({
     pageTitle,
     editViewId,

client/src/components/UniversalSearch.js

@@ -1,50 +0,0 @@
-import React from 'react';
-
-import { Omnibar } from '@blueprintjs/select';
-import { MenuItem, Spinner } from '@blueprintjs/core';
-import { FormattedMessage as T, Icon, ListSelect } from 'components';
-
-import withSearch from 'containers/GeneralSearch/withSearch';
-
-import { compose } from 'utils';
-
-function UniversalSearch({
-  results,
-  onClose,
-
-  // withSearch
-  globalSearchShow,
-  closeGlobalSearch,
-  ...props
-}) {
-  const SearchRenderer = (
-    { name, code, amount },
-    { handleClick, modifiers, query },
-  ) => {
-    return (
-      <MenuItem
-        text={`${name} - ${code}`}
-        label={amount}
-        onClick={handleClick}
-      />
-    );
-  };
-
-  const handleClose = () => {
-    closeGlobalSearch(false);
-  };
-
-  return (
-    <Omnibar
-      className={'navbar--omnibar'}
-      items={results}
-      itemRenderer={SearchRenderer}
-      noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
-      resetOnSelect={true}
-      onClose={handleClose}
-      {...props}
-    />
-  );
-}
-
-export default compose(withSearch)(UniversalSearch);

client/src/components/UniversalSearch/UniversalSearch.js

@@ -0,0 +1,227 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import classNames from 'classnames';
+import { isUndefined } from 'lodash';
+import {
+  Overlay,
+  InputGroup,
+  Tag,
+  MenuItem,
+  Spinner,
+  Intent,
+} from '@blueprintjs/core';
+import { QueryList } from '@blueprintjs/select';
+import { CLASSES } from 'common/classes';
+
+import { Icon, If, ListSelect, FormattedMessage as T } from 'components';
+import {
+  UniversalSearchProvider,
+  useUniversalSearchContext,
+} from './UniversalSearchProvider';
+import { filterItemsByResourceType } from './utils';
+import { RESOURCES_TYPES } from '../../common/resourcesTypes';
+
+/**
+ * Universal search input action.
+ */
+function UniversalSearchInputRightElements({ onSearchTypeChange }) {
+  const { isLoading, searchType, defaultSearchResource, searchTypeOptions } =
+    useUniversalSearchContext();
+
+  // Handle search type option change.
+  const handleSearchTypeChange = (option) => {
+    onSearchTypeChange && onSearchTypeChange(option);
+  };
+
+  return (
+    <div className={CLASSES.UNIVERSAL_SEARCH_INPUT_RIGHT_ELEMENTS}>
+      <If condition={isLoading}>
+        <Spinner tagName="div" intent={Intent.NONE} size={18} value={null} />
+      </If>
+
+      <ListSelect
+        items={searchTypeOptions}
+        onItemSelect={handleSearchTypeChange}
+        filterable={false}
+        initialSelectedItem={defaultSearchResource}
+        selectedItem={searchType}
+        selectedItemProp={'key'}
+        textProp={'label'}
+        // defaultText={intl.get('type')}
+        popoverProps={{
+          minimal: true,
+          captureDismiss: true,
+          className: CLASSES.UNIVERSAL_SEARCH_TYPE_SELECT_OVERLAY,
+        }}
+        buttonProps={{
+          minimal: true,
+          className: CLASSES.UNIVERSAL_SEARCH_TYPE_SELECT_BTN,
+        }}
+      />
+    </div>
+  );
+}
+
+/**
+ * Universal search query list.
+ */
+function UniversalSearchQueryList(props) {
+  const { isOpen, isLoading, onSearchTypeChange, searchType, ...restProps } =
+    props;
+
+  return (
+    <QueryList
+      {...restProps}
+      initialContent={null}
+      renderer={(listProps) => (
+        <UniversalSearchBar
+          isOpen={isOpen}
+          onSearchTypeChange={onSearchTypeChange}
+          {...listProps}
+        />
+      )}
+      noResults={
+        !isLoading ? (
+          <MenuItem disabled={true} text={<T id={'no_results'} />} />
+        ) : (
+          <MenuItem
+            disabled={true}
+            text={<T id={'universal_search.loading'} />}
+          />
+        )
+      }
+    />
+  );
+}
+
+/**
+ * Universal query search actions.
+ */
+function UniversalQuerySearchActions() {
+  return (
+    <div className={classNames(CLASSES.UNIVERSAL_SEARCH_ACTIONS)}>
+      <div className={classNames(CLASSES.UNIVERSAL_SEARCH_ACTION_SELECT)}>
+        <Tag>ENTER</Tag>
+        <span class={'text'}>{intl.get('universal_search.enter_text')}</span>
+      </div>
+
+      <div className={classNames(CLASSES.UNIVERSAL_SEARCH_ACTION_CLOSE)}>
+        <Tag>ESC</Tag>{' '}
+        <span class={'text'}>{intl.get('universal_search.close_text')}</span>
+      </div>
+
+      <div className={classNames(CLASSES.UNIVERSAL_SEARCH_ACTION_ARROWS)}>
+        <Tag>
+          <Icon icon={'arrow-up-24'} iconSize={16} />
+        </Tag>
+        <Tag>
+          <Icon icon={'arrow-down-24'} iconSize={16} />
+        </Tag>
+        <span class="text">{intl.get('universal_seach.navigate_text')}</span>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Universal search input bar with items list.
+ */
+function UniversalSearchBar({ isOpen, onSearchTypeChange, ...listProps }) {
+  const { handleKeyDown, handleKeyUp } = listProps;
+  const handlers = isOpen
+    ? { onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }
+    : {};
+
+  return (
+    <div
+      className={classNames(
+        CLASSES.UNIVERSAL_SEARCH_OMNIBAR,
+        listProps.className,
+      )}
+      {...handlers}
+    >
+      <InputGroup
+        autoFocus={true}
+        large={true}
+        leftIcon={<Icon icon={'universal-search'} iconSize={20} />}
+        placeholder={intl.get('universal_search.placeholder')}
+        onChange={listProps.handleQueryChange}
+        value={listProps.query}
+        rightElement={
+          <UniversalSearchInputRightElements
+            onSearchTypeChange={onSearchTypeChange}
+          />
+        }
+      />
+      {listProps.itemList}
+    </div>
+  );
+}
+
+/**
+ * Universal search.
+ */
+export function UniversalSearch({
+  defaultSearchResource,
+  searchResource,
+
+  overlayProps,
+  isOpen,
+  isLoading,
+  onSearchTypeChange,
+  items,
+  searchTypeOptions,
+  ...queryListProps
+}) {
+  // Search type state.
+  const [searchType, setSearchType] = React.useState(
+    defaultSearchResource || RESOURCES_TYPES.CUSTOMER,
+  );
+  // Handle search resource type controlled mode.
+  React.useEffect(() => {
+    if (
+      !isUndefined(searchResource) &&
+      searchResource !== defaultSearchResource
+    ) {
+      setSearchType(searchResource);
+    }
+  }, [searchResource, defaultSearchResource]);
+
+  // Handle search type change.
+  const handleSearchTypeChange = (searchTypeResource) => {
+    setSearchType(searchTypeResource.key);
+    onSearchTypeChange && onSearchTypeChange(searchTypeResource);
+  };
+  // Filters query list items based on the given search type.
+  const filteredItems = filterItemsByResourceType(items, searchType);
+
+  return (
+    <Overlay
+      hasBackdrop={true}
+      isOpen={isOpen}
+      className={classNames(CLASSES.UNIVERSAL_SEARCH_OVERLAY)}
+      {...overlayProps}
+    >
+      <UniversalSearchProvider
+        isLoading={isLoading}
+        searchType={searchType}
+        defaultSearchResource={defaultSearchResource}
+        searchTypeOptions={searchTypeOptions}
+      >
+        <div className={classNames(CLASSES.UNIVERSAL_SEARCH)}>
+          <UniversalSearchQueryList
+            isOpen={isOpen}
+            isLoading={isLoading}
+            searchType={searchType}
+            onSearchTypeChange={handleSearchTypeChange}
+            {...queryListProps}
+            items={filteredItems}
+          />
+          <div className={classNames(CLASSES.UNIVERSAL_SEARCH_FOOTER)}>
+            <UniversalQuerySearchActions />
+          </div>
+        </div>
+      </UniversalSearchProvider>
+    </Overlay>
+  );
+}

client/src/components/UniversalSearch/UniversalSearchProvider.js

@@ -0,0 +1,29 @@
+import React, { createContext } from 'react';
+
+const UniversalSearchContext = createContext();
+
+/**
+ * Universal search data provider.
+ */
+function UniversalSearchProvider({
+  isLoading,
+  defaultSearchResource,
+  searchType,
+  searchTypeOptions,
+  ...props
+}) {
+  // Provider payload.
+  const provider = {
+    isLoading,
+    searchType,
+    defaultSearchResource,
+    searchTypeOptions,
+  };
+
+  return <UniversalSearchContext.Provider value={provider} {...props} />;
+}
+
+const useUniversalSearchContext = () =>
+  React.useContext(UniversalSearchContext);
+
+export { UniversalSearchProvider, useUniversalSearchContext };

client/src/components/UniversalSearch/utils.js

@@ -0,0 +1,4 @@
+
+export const filterItemsByResourceType = (items, type) => {
+    return items.filter((item) => item._type === type);
+}

client/src/components/index.js

@@ -58,7 +58,6 @@ import AccountsSuggestField from './AccountsSuggestField';
 import MaterialProgressBar from './MaterialProgressBar';
 import { MoneyFieldCell } from './DataTableCells';
 import Card from './Card';
-import UniversalSearch from './UniversalSearch';
 
 import { ItemsMultiSelect } from './Items';
 
@@ -139,5 +138,4 @@ export {
   MoneyFieldCell,
   ItemsMultiSelect,
   Card,
-  UniversalSearch,
 };