export const goToView = (currentView: string) => searchBarActions.SET_CURRENT_VIEW(currentView);
-export const searchData = (searchValue: string) =>
+export const saveRecentQuery = (query: string) =>
+ (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
+ services.searchQueriesService.saveRecentQuery(query);
+ };
+
+export const loadRecentQueries = () =>
+ (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
+ const recentSearchQueries = services.searchQueriesService.getRecentQueries();
+ return recentSearchQueries || [];
- };
++ };
++
++export const searchData = (searchValue: string) =>
+ async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
+ dispatch(searchBarActions.SET_SEARCH_VALUE(searchValue));
+ dispatch(searchBarActions.SET_SEARCH_RESULTS([]));
+ if (searchValue) {
+ const filters = getFilters('name', searchValue);
+ const { items } = await services.groupsService.contents('', {
- filters,
++ filters,
+ limit: 5,
+ recursive: true
+ });
+ dispatch(searchBarActions.SET_SEARCH_RESULTS(items));
+ }
+ };
+
-
+ const getFilters = (filterName: string, searchValue: string): string => {
+ return new FilterBuilder()
+ .addIsA("uuid", [ResourceKind.PROJECT, ResourceKind.COLLECTION, ResourceKind.PROCESS])
+ .addILike(filterName, searchValue, GroupContentsResourcePrefix.COLLECTION)
+ .addILike(filterName, searchValue, GroupContentsResourcePrefix.PROCESS)
+ .addILike(filterName, searchValue, GroupContentsResourcePrefix.PROJECT)
+ .addEqual('groupClass', GroupClass.PROJECT, GroupContentsResourcePrefix.PROJECT)
+ .getFilters();
-};
++};
import * as React from 'react';
import { Paper, StyleRulesCallback, withStyles, WithStyles, List, Button } from '@material-ui/core';
import { SearchView } from '~/store/search-bar/search-bar-reducer';
- import { RenderRecentQueries } from '~/views-components/search-bar/search-bar-view';
+ import { RecentQueriesItem } from '~/views-components/search-bar/search-bar-view';
-type CssRules = 'list';
+type CssRules = 'list' | 'searchView';
const styles: StyleRulesCallback<CssRules> = theme => {
return {
export const SearchBarAdvancedView = withStyles(styles)(
({ classes, setView }: SearchBarAdvancedViewProps & WithStyles<CssRules>) =>
- <Paper>
+ <Paper className={classes.searchView}>
<List component="nav" className={classes.list}>
- <RenderRecentQueries text='ADVANCED VIEW' />
+ <RecentQueriesItem text='ADVANCED VIEW' />
</List>
<Button onClick={() => setView(SearchView.BASIC)}>Back</Button>
</Paper>
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { Paper, StyleRulesCallback, withStyles, WithStyles, List, ListItem, ListItemText } from '@material-ui/core';
-import { ArvadosTheme } from '~/common/custom-theme';
+import { Paper, StyleRulesCallback, withStyles, WithStyles, List } from '@material-ui/core';
- import { RenderRecentQueries } from '~/views-components/search-bar/search-bar-view';
+ import { RecentQueriesItem } from '~/views-components/search-bar/search-bar-view';
+ import { GroupContentsResource } from '~/services/groups-service/groups-service';
+ import Highlighter from "react-highlight-words";
-type CssRules = 'list';
+type CssRules = 'list' | 'searchView';
-const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
- list: {
- padding: 0
- }
-});
+const styles: StyleRulesCallback<CssRules> = theme => {
+ return {
+ list: {
- padding: '0px'
++ padding: 0
+ },
+ searchView: {
+ borderRadius: `0 0 ${theme.spacing.unit / 4}px ${theme.spacing.unit / 4}px`
+ }
+ };
+};
- interface SearchBarAutocompleteViewProps {
+ export interface SearchBarAutocompleteViewDataProps {
+ searchResults?: GroupContentsResource[];
+ searchValue?: string;
}
+ type SearchBarAutocompleteViewProps = SearchBarAutocompleteViewDataProps & WithStyles<CssRules>;
+
export const SearchBarAutocompleteView = withStyles(styles)(
- ({ classes }: SearchBarAutocompleteViewProps & WithStyles<CssRules>) =>
- ({ classes, searchResults, searchValue }: SearchBarAutocompleteViewProps ) =>
- <Paper>
- {searchResults && <List component="nav" className={classes.list}>
++ ({ classes, searchResults, searchValue }: SearchBarAutocompleteViewProps) =>
+ <Paper className={classes.searchView}>
- <List component="nav" className={classes.list}>
- <RenderRecentQueries text='AUTOCOMPLETE VIEW' />
- </List>
++ {searchResults && <List component="nav" className={classes.list}>
+ {searchResults.map((item: GroupContentsResource) => {
+ return <RecentQueriesItem key={item.uuid} text={getFormattedText(item.name, searchValue)} />;
+ })}
+ </List>}
</Paper>
- );
+ );
+
+ const getFormattedText = (textToHighlight: string, searchString = '') => {
+ return <Highlighter searchWords={[searchString]} autoEscape={true} textToHighlight={textToHighlight} />;
+ };
</List>
<div className={classes.searchQueryList}>Recent search queries</div>
<List component="nav" className={classes.list}>
- {recentQueries().map((query, index) => <RenderRecentQueries key={query + index} text={query} />)}
- <RecentQueriesItem text="cos" />
- <RecentQueriesItem text="testtest" />
++ {recentQueries().map((query, index) => <RecentQueriesItem key={query + index} text={query} />)}
</List>
<div className={classes.advanced} onClick={() => setView(SearchView.ADVANCED)}>Advanced search</div>
</Paper>
import { SearchView } from '~/store/search-bar/search-bar-reducer';
import { SearchBarBasicView } from '~/views-components/search-bar/search-bar-basic-view';
import { SearchBarAdvancedView } from '~/views-components/search-bar/search-bar-advanced-view';
- import { SearchBarAutocompleteView } from '~/views-components/search-bar/search-bar-autocomplete-view';
+ import { SearchBarAutocompleteView, SearchBarAutocompleteViewDataProps } from '~/views-components/search-bar/search-bar-autocomplete-view';
+ import { ArvadosTheme } from '~/common/custom-theme';
-type CssRules = 'container' | 'input' | 'searchBar';
+type CssRules = 'container' | 'containerSearchViewOpened' | 'input' | 'searchBar';
- const styles: StyleRulesCallback<CssRules> = theme => {
+ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => {
return {
container: {
position: 'relative',
case SearchView.ADVANCED:
return <SearchBarAdvancedView setView={this.props.onSetView} />;
case SearchView.AUTOCOMPLETE:
- return <SearchBarAutocompleteView />;
+ return <SearchBarAutocompleteView
+ searchResults={this.props.searchResults}
+ searchValue={this.props.searchValue} />;
default:
- return <SearchBarBasicView setView={this.props.onSetView} />;
+ return <SearchBarBasicView setView={this.props.onSetView} recentQueries={this.props.loadQueries} />;
}
}
import { connect } from 'react-redux';
import { RootState } from '~/store/store';
import { Dispatch } from 'redux';
- import { goToView, searchBarActions } from '~/store/search-bar/search-bar-actions';
+ import { goToView, searchData, searchBarActions } from '~/store/search-bar/search-bar-actions';
import { SearchBarView } from '~/views-components/search-bar/search-bar-view';
+import { saveRecentQuery, loadRecentQueries } from '~/store/search-bar/search-bar-actions';
const mapStateToProps = ({ searchBar }: RootState) => {
return {
};
const mapDispatchToProps = (dispatch: Dispatch) => ({
+ onSearch: (valueSearch: string) => dispatch<any>(searchData(valueSearch)),
onSetView: (currentView: string) => dispatch(goToView(currentView)),
openView: () => dispatch<any>(searchBarActions.OPEN_SEARCH_VIEW()),
- closeView: () => dispatch<any>(searchBarActions.CLOSE_SEARCH_VIEW())
+ closeView: () => dispatch<any>(searchBarActions.CLOSE_SEARCH_VIEW()),
+ saveQuery: (query: string) => dispatch<any>(saveRecentQuery(query)),
+ loadQueries: () => dispatch<any>(loadRecentQueries())
});
export const SearchBar = connect(mapStateToProps, mapDispatchToProps)(SearchBarView);
projects / arvados-workbench2.git / commitdiff