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; } } } - -