--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+export const KEY_CODE_UP = 38;
+export const KEY_CODE_DOWN = 40;
+export const KEY_CODE_ESC = 27;
+export const KEY_ENTER = 13;
import { SearchBarAdvanceFormData } from '~/models/search-bar';
export class SearchService {
- private recentQueries: string[] = this.getRecentQueries();
+ private recentQueries = this.getRecentQueries();
private savedQueries: SearchBarAdvanceFormData[] = this.getSavedQueries();
saveRecentQuery(query: string) {
if (this.recentQueries.length >= MAX_NUMBER_OF_RECENT_QUERIES) {
this.recentQueries.shift();
- this.recentQueries.push(query);
- } else {
- this.recentQueries.push(query);
}
+ this.recentQueries.push(query);
localStorage.setItem('recentQueries', JSON.stringify(this.recentQueries));
}
- getRecentQueries() {
- return JSON.parse(localStorage.getItem('recentQueries') || '[]') as string[];
+ getRecentQueries(): string[] {
+ return JSON.parse(localStorage.getItem('recentQueries') || '[]');
}
saveQuery(data: SearchBarAdvanceFormData) {
}
}
-const MAX_NUMBER_OF_RECENT_QUERIES = 5;
\ No newline at end of file
+const MAX_NUMBER_OF_RECENT_QUERIES = 5;
SET_SEARCH_RESULTS: ofType<GroupContentsResource[]>(),
SET_SEARCH_VALUE: ofType<string>(),
SET_SAVED_QUERIES: ofType<SearchBarAdvanceFormData[]>(),
- UPDATE_SAVED_QUERY: ofType<SearchBarAdvanceFormData[]>()
+ SET_RECENT_QUERIES: ofType<string[]>(),
+ UPDATE_SAVED_QUERY: ofType<SearchBarAdvanceFormData[]>(),
+ SET_SELECTED_ITEM: ofType<string>(),
+ MOVE_UP: ofType<{}>(),
+ MOVE_DOWN: ofType<{}>(),
+ SELECT_FIRST_ITEM: ofType<{}>()
});
export type SearchBarActions = UnionOf<typeof searchBarActions>;
export const loadRecentQueries = () =>
(dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
- const recentSearchQueries = services.searchService.getRecentQueries();
- return recentSearchQueries || [];
+ const recentQueries = services.searchService.getRecentQueries();
+ dispatch(searchBarActions.SET_RECENT_QUERIES(recentQueries));
+ return recentQueries;
};
export const searchData = (searchValue: string) =>
- async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
+ async (dispatch: Dispatch, getState: () => RootState) => {
const currentView = getState().searchBar.currentView;
dispatch(searchBarActions.SET_SEARCH_VALUE(searchValue));
- dispatch(searchBarActions.SET_SEARCH_RESULTS([]));
- dispatch<any>(searchGroups(searchValue, 5, {}));
- if (currentView === SearchView.BASIC) {
- dispatch(searchBarActions.CLOSE_SEARCH_VIEW());
- dispatch(navigateToSearchResults);
+ if (searchValue.length > 0) {
+ dispatch<any>(searchGroups(searchValue, 5, {}));
+ if (currentView === SearchView.BASIC) {
+ dispatch(searchBarActions.CLOSE_SEARCH_VIEW());
+ dispatch(navigateToSearchResults);
+ }
}
-
};
export const searchAdvanceData = (data: SearchBarAdvanceFormData) =>
- async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
- const searchValue = getState().searchBar.searchValue;
+ async (dispatch: Dispatch) => {
dispatch<any>(saveQuery(data));
- dispatch<any>(searchGroups(searchValue, 100, data));
dispatch(searchBarActions.SET_CURRENT_VIEW(SearchView.BASIC));
dispatch(searchBarActions.CLOSE_SEARCH_VIEW());
dispatch(navigateToSearchResults);
};
-// Todo: create ids for particular searchQuery
const saveQuery = (data: SearchBarAdvanceFormData) =>
(dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
- const savedSearchQueries = services.searchService.getSavedQueries();
- const filteredQuery = savedSearchQueries.find(query => query.searchQuery === data.searchQuery);
+ const savedQueries = services.searchService.getSavedQueries();
if (data.saveQuery && data.searchQuery) {
+ const filteredQuery = savedQueries.find(query => query.searchQuery === data.searchQuery);
if (filteredQuery) {
services.searchService.editSavedQueries(data);
- dispatch(searchBarActions.UPDATE_SAVED_QUERY(savedSearchQueries));
- dispatch(snackbarActions.OPEN_SNACKBAR({ message: 'Query has been sucessfully updated', hideDuration: 2000, kind: SnackbarKind.SUCCESS }));
+ dispatch(searchBarActions.UPDATE_SAVED_QUERY(savedQueries));
+ dispatch(snackbarActions.OPEN_SNACKBAR({ message: 'Query has been successfully updated', hideDuration: 2000, kind: SnackbarKind.SUCCESS }));
} else {
services.searchService.saveQuery(data);
- dispatch(searchBarActions.SET_SAVED_QUERIES(savedSearchQueries));
- dispatch(snackbarActions.OPEN_SNACKBAR({ message: 'Query has been sucessfully saved', hideDuration: 2000, kind: SnackbarKind.SUCCESS }));
+ dispatch(searchBarActions.SET_SAVED_QUERIES(savedQueries));
+ dispatch(snackbarActions.OPEN_SNACKBAR({ message: 'Query has been successfully saved', hideDuration: 2000, kind: SnackbarKind.SUCCESS }));
}
}
};
};
export const editSavedQuery = (data: SearchBarAdvanceFormData) =>
- (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
+ (dispatch: Dispatch<any>) => {
dispatch(searchBarActions.SET_CURRENT_VIEW(SearchView.ADVANCED));
dispatch(searchBarActions.SET_SEARCH_VALUE(data.searchQuery));
dispatch<any>(initialize(SEARCH_BAR_ADVANCE_FORM_NAME, data));
export const openSearchView = () =>
(dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
- dispatch(searchBarActions.OPEN_SEARCH_VIEW());
const savedSearchQueries = services.searchService.getSavedQueries();
dispatch(searchBarActions.SET_SAVED_QUERIES(savedSearchQueries));
+ dispatch(loadRecentQueries());
+ dispatch(searchBarActions.OPEN_SEARCH_VIEW());
+ dispatch(searchBarActions.SELECT_FIRST_ITEM());
};
export const closeSearchView = () =>
- (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
- const isOpen = getState().searchBar.open;
- if (isOpen) {
- dispatch(searchBarActions.CLOSE_SEARCH_VIEW());
- dispatch(searchBarActions.SET_CURRENT_VIEW(SearchView.BASIC));
- }
+ (dispatch: Dispatch<any>) => {
+ dispatch(searchBarActions.SET_SELECTED_ITEM(''));
+ dispatch(searchBarActions.CLOSE_SEARCH_VIEW());
};
export const closeAdvanceView = () =>
- (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
+ (dispatch: Dispatch<any>) => {
dispatch(searchBarActions.SET_SEARCH_VALUE(''));
dispatch(searchBarActions.SET_CURRENT_VIEW(SearchView.BASIC));
};
export const navigateToItem = (uuid: string) =>
- (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
+ (dispatch: Dispatch<any>) => {
+ dispatch(searchBarActions.SET_SELECTED_ITEM(''));
dispatch(searchBarActions.CLOSE_SEARCH_VIEW());
dispatch(navigateTo(uuid));
};
export const changeData = (searchValue: string) =>
- (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
+ (dispatch: Dispatch, getState: () => RootState) => {
dispatch(searchBarActions.SET_SEARCH_VALUE(searchValue));
const currentView = getState().searchBar.currentView;
const searchValuePresent = searchValue.length > 0;
if (currentView === SearchView.ADVANCED) {
} else if (searchValuePresent) {
- dispatch<any>(goToView(SearchView.AUTOCOMPLETE));
+ dispatch(searchBarActions.SET_CURRENT_VIEW(SearchView.AUTOCOMPLETE));
+ dispatch(searchBarActions.SET_SELECTED_ITEM(searchValue));
debounceStartSearch(dispatch);
} else {
- dispatch<any>(goToView(SearchView.BASIC));
- dispatch(searchBarActions.SET_SEARCH_VALUE(searchValue));
+ dispatch(searchBarActions.SET_CURRENT_VIEW(SearchView.BASIC));
dispatch(searchBarActions.SET_SEARCH_RESULTS([]));
+ dispatch(searchBarActions.SELECT_FIRST_ITEM());
}
};
export const submitData = (event: React.FormEvent<HTMLFormElement>) =>
- (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
+ (dispatch: Dispatch, getState: () => RootState) => {
event.preventDefault();
const searchValue = getState().searchBar.searchValue;
dispatch<any>(saveRecentQuery(searchValue));
- dispatch<any>(searchDataOnEnter(searchValue));
dispatch<any>(loadRecentQueries());
- };
-
-const searchDataOnEnter = (searchValue: string) =>
- (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
dispatch(searchBarActions.CLOSE_SEARCH_VIEW());
dispatch(searchBarActions.SET_SEARCH_VALUE(searchValue));
dispatch(searchBarActions.SET_SEARCH_RESULTS([]));
- dispatch<any>(searchGroups(searchValue, 100, {}));
dispatch(navigateToSearchResults);
};
const debounceStartSearch = debounce((dispatch: Dispatch) => dispatch<any>(startSearch()), DEFAULT_SEARCH_DEBOUNCE);
const startSearch = () =>
- (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
+ (dispatch: Dispatch, getState: () => RootState) => {
const searchValue = getState().searchBar.searchValue;
dispatch<any>(searchData(searchValue));
};
};
export const initAdvanceFormProjectsTree = () =>
- (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
+ (dispatch: Dispatch) => {
dispatch<any>(initUserProject(SEARCH_BAR_ADVANCE_FORM_PICKER_ID));
};
export const changeAdvanceFormProperty = (property: string, value: PropertyValues[] | string = '') =>
- (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
+ (dispatch: Dispatch) => {
dispatch(change(SEARCH_BAR_ADVANCE_FORM_NAME, property, value));
};
export const updateAdvanceFormProperties = (propertyValues: PropertyValues) =>
- (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
+ (dispatch: Dispatch) => {
dispatch(arrayPush(SEARCH_BAR_ADVANCE_FORM_NAME, 'properties', propertyValues));
- };
\ No newline at end of file
+ };
+
+export const moveUp = () =>
+ (dispatch: Dispatch) => {
+ dispatch(searchBarActions.MOVE_UP());
+ };
+
+export const moveDown = () =>
+ (dispatch: Dispatch) => {
+ dispatch(searchBarActions.MOVE_DOWN());
+ };
import { GroupContentsResource } from '~/services/groups-service/groups-service';
import { SearchBarAdvanceFormData } from '~/models/search-bar';
+type SearchResult = GroupContentsResource;
+export type SearchBarSelectedItem = {
+ id: string,
+ query: string
+};
+
interface SearchBar {
currentView: string;
open: boolean;
- searchResults: GroupContentsResource[];
+ searchResults: SearchResult[];
searchValue: string;
savedQueries: SearchBarAdvanceFormData[];
+ recentQueries: string[];
+ selectedItem: SearchBarSelectedItem;
}
export enum SearchView {
open: false,
searchResults: [],
searchValue: '',
- savedQueries: []
+ savedQueries: [],
+ recentQueries: [],
+ selectedItem: {
+ id: '',
+ query: ''
+ }
+};
+
+const makeSelectedItem = (id: string, query?: string): SearchBarSelectedItem => ({ id, query: query ? query : id });
+
+const makeQueryList = (recentQueries: string[], savedQueries: SearchBarAdvanceFormData[]) => {
+ const recentIds = recentQueries.map((q, idx) => makeSelectedItem(`RQ-${idx}-${q}`, q));
+ const savedIds = savedQueries.map((q, idx) => makeSelectedItem(`SQ-${idx}-${q.searchQuery}`, q.searchQuery));
+ return recentIds.concat(savedIds);
};
export const searchBarReducer = (state = initialState, action: SearchBarActions): SearchBar =>
searchBarActions.match(action, {
- SET_CURRENT_VIEW: currentView => ({ ...state, currentView }),
+ SET_CURRENT_VIEW: currentView => ({
+ ...state,
+ currentView,
+ open: true
+ }),
OPEN_SEARCH_VIEW: () => ({ ...state, open: true }),
CLOSE_SEARCH_VIEW: () => ({ ...state, open: false }),
- SET_SEARCH_RESULTS: (searchResults) => ({ ...state, searchResults }),
- SET_SEARCH_VALUE: (searchValue) => ({ ...state, searchValue }),
+ SET_SEARCH_RESULTS: searchResults => ({
+ ...state,
+ searchResults,
+ selectedItem: makeSelectedItem(searchResults.length > 0
+ ? searchResults.findIndex(r => r.uuid === state.selectedItem.id) >= 0
+ ? state.selectedItem.id
+ : state.searchValue
+ : state.searchValue
+ )
+ }),
+ SET_SEARCH_VALUE: searchValue => ({
+ ...state,
+ searchValue
+ }),
SET_SAVED_QUERIES: savedQueries => ({ ...state, savedQueries }),
+ SET_RECENT_QUERIES: recentQueries => ({ ...state, recentQueries }),
UPDATE_SAVED_QUERY: searchQuery => ({ ...state, savedQueries: searchQuery }),
+ SET_SELECTED_ITEM: item => ({ ...state, selectedItem: makeSelectedItem(item) }),
+ MOVE_UP: () => {
+ let selectedItem = state.selectedItem;
+ if (state.currentView === SearchView.AUTOCOMPLETE) {
+ const idx = state.searchResults.findIndex(r => r.uuid === selectedItem.id);
+ if (idx > 0) {
+ selectedItem = makeSelectedItem(state.searchResults[idx - 1].uuid);
+ } else {
+ selectedItem = makeSelectedItem(state.searchValue);
+ }
+ } else if (state.currentView === SearchView.BASIC) {
+ const items = makeQueryList(state.recentQueries, state.savedQueries);
+
+ const idx = items.findIndex(i => i.id === selectedItem.id);
+ if (idx > 0) {
+ selectedItem = items[idx - 1];
+ }
+ }
+ return {
+ ...state,
+ selectedItem
+ };
+ },
+ MOVE_DOWN: () => {
+ let selectedItem = state.selectedItem;
+ if (state.currentView === SearchView.AUTOCOMPLETE) {
+ const idx = state.searchResults.findIndex(r => r.uuid === selectedItem.id);
+ if (idx >= 0 && idx < state.searchResults.length - 1) {
+ selectedItem = makeSelectedItem(state.searchResults[idx + 1].uuid);
+ } else if (idx < 0 && state.searchResults.length > 0) {
+ selectedItem = makeSelectedItem(state.searchResults[0].uuid);
+ }
+ } else if (state.currentView === SearchView.BASIC) {
+ const items = makeQueryList(state.recentQueries, state.savedQueries);
+
+ const idx = items.findIndex(i => i.id === selectedItem.id);
+ if (idx >= 0 && idx < items.length - 1) {
+ selectedItem = items[idx + 1];
+ }
+
+ if (idx < 0 && items.length > 0) {
+ selectedItem = items[0];
+ }
+ }
+ return {
+ ...state,
+ selectedItem
+ };
+ },
+ SELECT_FIRST_ITEM: () => {
+ let selectedItem = state.selectedItem;
+ if (state.currentView === SearchView.AUTOCOMPLETE) {
+ selectedItem = makeSelectedItem(state.searchValue);
+ } else if (state.currentView === SearchView.BASIC) {
+ const items = makeQueryList(state.recentQueries, state.savedQueries);
+ if (items.length > 0) {
+ selectedItem = items[0];
+ }
+ }
+ return {
+ ...state,
+ selectedItem
+ };
+ },
default: () => state
- });
\ No newline at end of file
+ });
const dataExplorer = getDataExplorer(state.dataExplorer, this.getId());
const searchValue = state.searchBar.searchValue;
try {
- const response = await this.services.groupsService.contents(userUuid, getParams(dataExplorer, searchValue));
+ const response = await this.services.groupsService.contents('', getParams(dataExplorer, searchValue));
api.dispatch(updateResources(response.items));
api.dispatch(setItems(response));
} catch {
snackbarActions.OPEN_SNACKBAR({
message: 'Could not fetch workflows.',
kind: SnackbarKind.ERROR
- });
\ No newline at end of file
+ });
import { Paper, StyleRulesCallback, withStyles, WithStyles, List, ListItem, ListItemText } from '@material-ui/core';
import { GroupContentsResource } from '~/services/groups-service/groups-service';
import Highlighter from "react-highlight-words";
+import { SearchBarSelectedItem } from "~/store/search-bar/search-bar-reducer";
type CssRules = 'searchView' | 'list' | 'listItem';
listItem: {
paddingLeft: theme.spacing.unit,
paddingRight: theme.spacing.unit * 2,
- },
-
+ }
};
};
export interface SearchBarAutocompleteViewDataProps {
- searchResults?: GroupContentsResource[];
+ searchResults: GroupContentsResource[];
searchValue?: string;
+ selectedItem: SearchBarSelectedItem;
}
export interface SearchBarAutocompleteViewActionProps {
type SearchBarAutocompleteViewProps = SearchBarAutocompleteViewDataProps & SearchBarAutocompleteViewActionProps & WithStyles<CssRules>;
export const SearchBarAutocompleteView = withStyles(styles)(
- ({ classes, searchResults, searchValue, navigateTo }: SearchBarAutocompleteViewProps) =>
- <Paper className={classes.searchView}>
- {searchResults && <List component="nav" className={classes.list}>
+ ({ classes, searchResults, searchValue, navigateTo, selectedItem }: SearchBarAutocompleteViewProps) => {
+ console.log(searchValue, selectedItem);
+ return <Paper className={classes.searchView}>
+ <List component="nav" className={classes.list}>
+ <ListItem button className={classes.listItem} selected={!selectedItem || searchValue === selectedItem.id}>
+ <ListItemText secondary={searchValue}/>
+ </ListItem>
{searchResults.map((item: GroupContentsResource) =>
- <ListItem button key={item.uuid} className={classes.listItem}>
- <ListItemText secondary={getFormattedText(item.name, searchValue)} onClick={() => navigateTo(item.uuid)} />
+ <ListItem button key={item.uuid} className={classes.listItem} selected={item.uuid === selectedItem.id}>
+ <ListItemText secondary={getFormattedText(item.name, searchValue)}
+ onClick={() => navigateTo(item.uuid)}/>
</ListItem>
)}
- </List>}
- </Paper>
-);
+ </List>
+ </Paper>;
+ });
const getFormattedText = (textToHighlight: string, searchString = '') => {
return <Highlighter searchWords={[searchString]} autoEscape={true} textToHighlight={textToHighlight} />;
-};
\ No newline at end of file
+};
import { SearchView } from '~/store/search-bar/search-bar-reducer';
import {
SearchBarRecentQueries,
- SearchBarRecentQueriesActionProps
+ SearchBarRecentQueriesActionProps
} from '~/views-components/search-bar/search-bar-recent-queries';
import {
SearchBarSavedQueries,
},
label: {
fontSize: '0.875rem',
- padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit}px `,
+ padding: `${theme.spacing.unit}px ${theme.spacing.unit}px `,
color: theme.palette.grey["900"],
background: theme.palette.grey["200"]
}
type SearchBarBasicViewProps = SearchBarBasicViewDataProps & SearchBarBasicViewActionProps & WithStyles<CssRules>;
export const SearchBarBasicView = withStyles(styles)(
- ({ classes, onSetView, loadRecentQueries, deleteSavedQuery, savedQueries, onSearch, editSavedQuery }: SearchBarBasicViewProps) =>
+ ({ classes, onSetView, loadRecentQueries, deleteSavedQuery, savedQueries, onSearch, editSavedQuery, selectedItem }: SearchBarBasicViewProps) =>
<Paper className={classes.root}>
<div className={classes.label}>Recent search queries</div>
<SearchBarRecentQueries
onSearch={onSearch}
- loadRecentQueries={loadRecentQueries} />
+ loadRecentQueries={loadRecentQueries}
+ selectedItem={selectedItem} />
<div className={classes.label}>Saved search queries</div>
<SearchBarSavedQueries
onSearch={onSearch}
savedQueries={savedQueries}
editSavedQuery={editSavedQuery}
- deleteSavedQuery={deleteSavedQuery} />
+ deleteSavedQuery={deleteSavedQuery}
+ selectedItem={selectedItem} />
<div className={classes.advanced} onClick={() => onSetView(SearchView.ADVANCED)}>Advanced search</div>
</Paper>
-);
\ No newline at end of file
+);
import * as React from 'react';
import { withStyles, WithStyles, StyleRulesCallback, List, ListItem, ListItemText } from '@material-ui/core';
import { ArvadosTheme } from '~/common/custom-theme';
+import { SearchBarSelectedItem } from "~/store/search-bar/search-bar-reducer";
type CssRules = 'root' | 'listItem' | 'listItemText';
}
});
+export interface SearchBarRecentQueriesDataProps {
+ selectedItem: SearchBarSelectedItem;
+}
+
export interface SearchBarRecentQueriesActionProps {
onSearch: (searchValue: string) => void;
loadRecentQueries: () => string[];
}
-type SearchBarRecentQueriesProps = SearchBarRecentQueriesActionProps & WithStyles<CssRules>;
+type SearchBarRecentQueriesProps = SearchBarRecentQueriesDataProps & SearchBarRecentQueriesActionProps & WithStyles<CssRules>;
export const SearchBarRecentQueries = withStyles(styles)(
- ({ classes, onSearch, loadRecentQueries }: SearchBarRecentQueriesProps) =>
+ ({ classes, onSearch, loadRecentQueries, selectedItem }: SearchBarRecentQueriesProps) =>
<List component="nav" className={classes.root}>
{loadRecentQueries().map((query, index) =>
- <ListItem button key={index} className={classes.listItem}>
- <ListItemText disableTypography
- secondary={query}
- onClick={() => onSearch(query)}
+ <ListItem button key={index} className={classes.listItem} selected={`RQ-${index}-${query}` === selectedItem.id}>
+ <ListItemText disableTypography
+ secondary={query}
+ onClick={() => onSearch(query)}
className={classes.listItemText} />
</ListItem>
)}
- </List>);
\ No newline at end of file
+ </List>);
import { ArvadosTheme } from '~/common/custom-theme';
import { RemoveIcon, EditSavedQueryIcon } from '~/components/icon/icon';
import { SearchBarAdvanceFormData } from '~/models/search-bar';
+import { SearchBarSelectedItem } from "~/store/search-bar/search-bar-reducer";
type CssRules = 'root' | 'listItem' | 'listItemText' | 'button';
export interface SearchBarSavedQueriesDataProps {
savedQueries: SearchBarAdvanceFormData[];
+ selectedItem: SearchBarSelectedItem;
}
export interface SearchBarSavedQueriesActionProps {
editSavedQuery: (data: SearchBarAdvanceFormData, id: number) => void;
}
-type SearchBarSavedQueriesProps = SearchBarSavedQueriesDataProps
- & SearchBarSavedQueriesActionProps
+type SearchBarSavedQueriesProps = SearchBarSavedQueriesDataProps
+ & SearchBarSavedQueriesActionProps
& WithStyles<CssRules>;
export const SearchBarSavedQueries = withStyles(styles)(
- ({ classes, savedQueries, onSearch, editSavedQuery, deleteSavedQuery }: SearchBarSavedQueriesProps) =>
+ ({ classes, savedQueries, onSearch, editSavedQuery, deleteSavedQuery, selectedItem }: SearchBarSavedQueriesProps) =>
<List component="nav" className={classes.root}>
- {savedQueries.map((query, index) =>
- <ListItem button key={index} className={classes.listItem}>
- <ListItemText disableTypography
- secondary={query.searchQuery}
- onClick={() => onSearch(query.searchQuery)}
+ {savedQueries.map((query, index) =>
+ <ListItem button key={index} className={classes.listItem} selected={`SQ-${index}-${query.searchQuery}` === selectedItem.id}>
+ <ListItemText disableTypography
+ secondary={query.searchQuery}
+ onClick={() => onSearch(query.searchQuery)}
className={classes.listItemText} />
<ListItemSecondaryAction>
<Tooltip title="Edit">
</ListItemSecondaryAction>
</ListItem>
)}
- </List>);
\ No newline at end of file
+ </List>);
SearchBarAdvancedViewDataProps,
SearchBarAdvancedViewActionProps
} from '~/views-components/search-bar/search-bar-advanced-view';
+import { KEY_CODE_DOWN, KEY_CODE_ESC, KEY_CODE_UP, KEY_ENTER } from "~/common/codes";
type CssRules = 'container' | 'containerSearchViewOpened' | 'input' | 'view';
closeView: () => void;
openSearchView: () => void;
loadRecentQueries: () => string[];
+ moveUp: () => void;
+ moveDown: () => void;
}
type SearchBarViewProps = SearchBarDataProps & SearchBarActionProps & WithStyles<CssRules>;
+const handleKeyDown = (e: React.KeyboardEvent, props: SearchBarViewProps) => {
+ if (e.keyCode === KEY_CODE_DOWN) {
+ e.preventDefault();
+ if (!props.isPopoverOpen) {
+ props.openSearchView();
+ } else {
+ props.moveDown();
+ }
+ } else if (e.keyCode === KEY_CODE_UP) {
+ e.preventDefault();
+ props.moveUp();
+ } else if (e.keyCode === KEY_CODE_ESC) {
+ e.preventDefault();
+ props.closeView();
+ } else if (e.keyCode === KEY_ENTER) {
+ if (props.currentView === SearchView.BASIC) {
+ e.preventDefault();
+ props.onSearch(props.selectedItem.query);
+ } else if (props.currentView === SearchView.AUTOCOMPLETE) {
+ if (props.selectedItem.id !== props.searchValue) {
+ e.preventDefault();
+ props.navigateTo(props.selectedItem.id);
+ }
+ }
+ }
+};
+
export const SearchBarView = withStyles(styles)(
(props : SearchBarViewProps) => {
- const { classes, isPopoverOpen, closeView, searchValue, openSearchView, onChange, onSubmit } = props;
+ const { classes, isPopoverOpen } = props;
return (
- <ClickAwayListener onClickAway={closeView}>
+ <ClickAwayListener onClickAway={props.closeView}>
<Paper className={isPopoverOpen ? classes.containerSearchViewOpened : classes.container} >
- <form onSubmit={onSubmit}>
+ <form onSubmit={props.onSubmit}>
<Input
className={classes.input}
- onChange={onChange}
+ onChange={props.onChange}
placeholder="Search"
- value={searchValue}
+ value={props.searchValue}
fullWidth={true}
disableUnderline={true}
- onClick={openSearchView}
+ onClick={props.openSearchView}
+ onKeyDown={e => handleKeyDown(e, props)}
endAdornment={
<InputAdornment position="end">
<Tooltip title='Search'>
);
const getView = (props: SearchBarViewProps) => {
- const { onSetView, closeAdvanceView, loadRecentQueries, savedQueries, deleteSavedQuery, searchValue,
- searchResults, onSearch, navigateTo, editSavedQuery, tags, currentView } = props;
- switch (currentView) {
+ switch (props.currentView) {
case SearchView.AUTOCOMPLETE:
return <SearchBarAutocompleteView
- navigateTo={navigateTo}
- searchResults={searchResults}
- searchValue={searchValue} />;
+ navigateTo={props.navigateTo}
+ searchResults={props.searchResults}
+ searchValue={props.searchValue}
+ selectedItem={props.selectedItem} />;
case SearchView.ADVANCED:
return <SearchBarAdvancedView
- closeAdvanceView={closeAdvanceView}
- tags={tags} />;
+ closeAdvanceView={props.closeAdvanceView}
+ tags={props.tags} />;
default:
return <SearchBarBasicView
- onSetView={onSetView}
- onSearch={onSearch}
- loadRecentQueries={loadRecentQueries}
- savedQueries={savedQueries}
- deleteSavedQuery={deleteSavedQuery}
- editSavedQuery={editSavedQuery} />;
+ onSetView={props.onSetView}
+ onSearch={props.onSearch}
+ loadRecentQueries={props.loadRecentQueries}
+ savedQueries={props.savedQueries}
+ deleteSavedQuery={props.deleteSavedQuery}
+ editSavedQuery={props.editSavedQuery}
+ selectedItem={props.selectedItem} />;
}
};
navigateToItem,
editSavedQuery,
changeData,
- submitData
+ submitData, moveUp, moveDown
} from '~/store/search-bar/search-bar-actions';
import { SearchBarView, SearchBarActionProps, SearchBarDataProps } from '~/views-components/search-bar/search-bar-view';
import { SearchBarAdvanceFormData } from '~/models/search-bar';
currentView: searchBar.currentView,
isPopoverOpen: searchBar.open,
searchResults: searchBar.searchResults,
+ selectedItem: searchBar.selectedItem,
savedQueries: searchBar.savedQueries,
tags: form.searchBarAdvanceFormName
};
deleteSavedQuery: (id: number) => dispatch<any>(deleteSavedQuery(id)),
openSearchView: () => dispatch<any>(openSearchView()),
navigateTo: (uuid: string) => dispatch<any>(navigateToItem(uuid)),
- editSavedQuery: (data: SearchBarAdvanceFormData) => dispatch<any>(editSavedQuery(data))
+ editSavedQuery: (data: SearchBarAdvanceFormData) => dispatch<any>(editSavedQuery(data)),
+ moveUp: () => dispatch<any>(moveUp()),
+ moveDown: () => dispatch<any>(moveDown())
});
-export const SearchBar = connect(mapStateToProps, mapDispatchToProps)(SearchBarView);
\ No newline at end of file
+export const SearchBar = connect(mapStateToProps, mapDispatchToProps)(SearchBarView);
projects / arvados-workbench2.git / commitdiff