diff --git a/client/src/common/universalSearchOptions.js b/client/src/common/universalSearchOptions.js
new file mode 100644
index 000000000..97c7ce50c
--- /dev/null
+++ b/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',
+ },
+];
diff --git a/client/src/components/UniversalSearch.js b/client/src/components/UniversalSearch.js
new file mode 100644
index 000000000..733a3f0f3
--- /dev/null
+++ b/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 (
+
+ );
+ };
+
+ const handleClose = () => {
+ closeGlobalSearch(false);
+ };
+
+ return (
+ } />}
+ resetOnSelect={true}
+ onClose={handleClose}
+ {...props}
+ />
+ );
+}
+
+export default compose(withSearch)(UniversalSearch);
diff --git a/client/src/components/index.js b/client/src/components/index.js
index ae78a3382..07b60ae95 100644
--- a/client/src/components/index.js
+++ b/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,
};
diff --git a/client/src/containers/GeneralSearch/Search.js b/client/src/containers/GeneralSearch/Search.js
index 6ab8af7b9..1c51b0e77 100644
--- a/client/src/containers/GeneralSearch/Search.js
+++ b/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 }) => (
-
+ const { data: accounts, isFetching: isAccountsFetching } = useAccounts({
+ search_keyword: query,
+ });
+
+ const handleClick = (placeholder) => {
+ setLabelState(placeholder);
+ };
+
+ const MenuSelectType = (
+
+
+
+
+ handleClick(holder)}
+ filterable={false}
+ selectedItem={labelState?.name}
+ selectedItemProp={'name'}
+ textProp={'name'}
+ defaultText={intl.get('type')}
+ popoverProps={{ minimal: false, captureDismiss: true }}
+ buttonProps={{
+ minimal: true,
+ }}
+ />
+
);
return (
-
- } />}
- onClose={() => closeGlobalSearch(false)}
- resetOnSelect={true}
- itemRenderer={renderSearch}
- items={items}
- // onItemSelect={onItemsSelect()}
- />
-
+ setQuery(q)}
+ inputProps={{
+ rightElement: MenuSelectType,
+ placeholder: `${defaultTo(labelState?.placeholder, '')}`,
+ }}
+ />
);
}
diff --git a/client/src/store/search/search.reducer.js b/client/src/store/search/search.reducer.js
index 4badabd3a..ed647f035 100644
--- a/client/src/store/search/search.reducer.js
+++ b/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;
- }
-});
\ No newline at end of file
+ },
+});
diff --git a/client/src/store/search/search.type.js b/client/src/store/search/search.type.js
index e9c47a60f..ff9a0af9f 100644
--- a/client/src/store/search/search.type.js
+++ b/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',
};
diff --git a/client/src/style/pages/Dashboard/Dashboard.scss b/client/src/style/pages/Dashboard/Dashboard.scss
index b77522353..bb550ce1f 100644
--- a/client/src/style/pages/Dashboard/Dashboard.scss
+++ b/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;
}
}
}
-
-