feat: universal Search.

client/src/common/universalSearchOptions.js

@@ -0,0 +1,12 @@
+import intl from 'react-intl-universal';
+
+export default [
+  {
+    name: 'Type1',
+    placeholder: 'Id tempor anim culpa esse id laboris.',
+  },
+  {
+    name: 'Type2',
+    placeholder: 'Laborum aliqua eiusmod voluptate aliqua',
+  },
+];

client/src/components/UniversalSearch.js

@@ -0,0 +1,50 @@
+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/index.js

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

client/src/containers/GeneralSearch/Search.js

@@ -1,40 +1,63 @@
 import React from 'react';
-import { Omnibar } from '@blueprintjs/select';
-import { MenuItem } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
+import { Intent, Spinner } from '@blueprintjs/core';
+import {
+  UniversalSearch,
+  ListSelect,
+  If,
+  FormattedMessage as T,
+} from 'components';
+import { defaultTo } from 'lodash';
+import intl from 'react-intl-universal';
+import { useAccounts } from 'hooks/query';
+import UniversalSearchOptions from 'common/universalSearchOptions';
+
 import { compose } from 'utils';
+
 import withSearch from 'containers/GeneralSearch/withSearch';
 
-function Search({
-  resultSearch,
-  globalSearchShow,
-  openGlobalSearch,
-  closeGlobalSearch,
-}) {
-  const items = [];
+function Search({ globalSearchShow }) {
+  const [query, setQuery] = React.useState();
+  const [labelState, setLabelState] = React.useState();
 
-  const renderSearch = (search, { handleClick }) => (
-    <MenuItem
-      key={search.year}
-      text={search.title}
-      label={search.title}
-      onClick={handleClick}
-    />
+  const { data: accounts, isFetching: isAccountsFetching } = useAccounts({
+    search_keyword: query,
+  });
+
+  const handleClick = (placeholder) => {
+    setLabelState(placeholder);
+  };
+
+  const MenuSelectType = (
+    <div style={{ display: 'flex' }}>
+      <If condition={isAccountsFetching}>
+        <Spinner tagName="div" intent={Intent.NONE} size={20} value={null} />
+      </If>
+      <ListSelect
+        items={UniversalSearchOptions}
+        onItemSelect={(holder) => handleClick(holder)}
+        filterable={false}
+        selectedItem={labelState?.name}
+        selectedItemProp={'name'}
+        textProp={'name'}
+        defaultText={intl.get('type')}
+        popoverProps={{ minimal: false, captureDismiss: true }}
+        buttonProps={{
+          minimal: true,
+        }}
+      />
+    </div>
   );
 
   return (
-    <div>
-      <Omnibar
-        className={'navbar-omnibar'}
-        isOpen={globalSearchShow}
-        noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
-        onClose={() => closeGlobalSearch(false)}
-        resetOnSelect={true}
-        itemRenderer={renderSearch}
-        items={items}
-        // onItemSelect={onItemsSelect()}
-      />
-    </div>
+    <UniversalSearch
+      results={accounts}
+      isOpen={globalSearchShow}
+      onQueryChange={(q) => setQuery(q)}
+      inputProps={{
+        rightElement: MenuSelectType,
+        placeholder: `${defaultTo(labelState?.placeholder, '')}`,
+      }}
+    />
   );
 }
 

client/src/store/search/search.reducer.js

@@ -2,8 +2,6 @@ import t from 'store/types';
 import { createReducer } from '@reduxjs/toolkit';
 
 const initialState = {
-  searches: {},
-  searchTitle: 'Title',
   isOpen: false,
 };
 
@@ -14,5 +12,5 @@ export default createReducer(initialState, {
 
   [t.CLOSE_SEARCH]: (state, action) => {
     state.isOpen = false;
-  }
-});
+  },
+});

client/src/store/search/search.type.js

@@ -1,5 +1,5 @@
 export default {
-  SEARCH_SUCCESS:'SEARCH_SUCCESS',
+  SEARCH_TYPE: 'SEARCH_TYPE',
   OPEN_SEARCH: 'OPEN_SEARCH',
   CLOSE_SEARCH: 'CLOSE_SEARCH',
 };

client/src/style/pages/Dashboard/Dashboard.scss

@@ -123,12 +123,12 @@ $dashboard-views-bar-height: 44px;
 
     a {
       margin: auto 0;
-       /*!rtl:ignore*/
+      /*!rtl:ignore*/
       direction: ltr;
     }
   }
 
-  &__organization-name{
+  &__organization-name {
     font-size: 14px;
     font-weight: 400;
     color: #818ca9;
@@ -140,7 +140,7 @@ $dashboard-views-bar-height: 44px;
   &__actions-bar {
     border-bottom: 2px solid #e1e2e8;
 
-    .bp3-navbar-divider{
+    .bp3-navbar-divider {
       border-left-color: rgb(199, 214, 219);
     }
 
@@ -216,23 +216,23 @@ $dashboard-views-bar-height: 44px;
         }
       }
 
-      .bp3-control.bp3-switch{
+      .bp3-control.bp3-switch {
         margin-bottom: 0;
         margin-left: 8px;
         color: #3d3b53;
 
-        .bp3-control-indicator{
+        .bp3-control-indicator {
           height: 16px;
           min-width: 1.8em;
         }
 
-        .bp3-control-indicator::before{
+        .bp3-control-indicator::before {
           box-shadow: 0 0 0;
         }
-        input ~ .bp3-control-indicator{
+        input ~ .bp3-control-indicator {
           background: rgba(167, 182, 194, 0.55);
         }
-        input:checked ~ .bp3-control-indicator{
+        input:checked ~ .bp3-control-indicator {
           background: #0069ff;
         }
       }
@@ -257,7 +257,6 @@ $dashboard-views-bar-height: 44px;
       margin: 0;
     }
     h3 {
-      
     }
 
     .button--view-edit {
@@ -322,19 +321,19 @@ $dashboard-views-bar-height: 44px;
     }
   }
 
-  &__page{
+  &__page {
     display: flex;
     flex-direction: column;
     flex: 1 0 0;
   }
 
-  &__fallback-loading{
+  &__fallback-loading {
     display: flex;
     flex-direction: column;
     height: 100%;
     background-color: #fbfbfb;
 
-    .bp3-spinner{
+    .bp3-spinner {
       margin: auto;
     }
   }
@@ -508,16 +507,16 @@ $dashboard-views-bar-height: 44px;
   height: $dashboard-views-bar-height;
   padding: 0 20px;
 
-  .bp3-navbar-group{
+  .bp3-navbar-group {
     height: $dashboard-views-bar-height;
   }
 
-  .bp3-tab[aria-selected="true"]{
+  .bp3-tab[aria-selected='true'] {
     box-shadow: inset 0 -2px 0 #0052cc;
   }
 }
 
-.navbar-omnibar {
+.navbar--omnibar {
   -webkit-filter: blur(0);
   filter: blur(0);
   opacity: 1;
@@ -528,7 +527,11 @@ $dashboard-views-bar-height: 44px;
   box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 4px 8px rgba(16, 22, 26, 0.2),
     0 18px 46px 6px rgba(16, 22, 26, 0.2);
   background-color: #fff;
-  width: 500px;
+  width: 600px;
+
+  .bp3-input {
+    padding-left: 40px !important;
+  }
 }
 
 .menu--logged-user-dropdown {
@@ -539,5 +542,3 @@ $dashboard-views-bar-height: 44px;
     }
   }
 }
-
-