ClickAwayListener
} from '@material-ui/core';
import SearchIcon from '@material-ui/icons/Search';
-import { RemoveIcon } from '~/components/icon/icon';
+import { RemoveIcon, EditSavedQueryIcon } from '~/components/icon/icon';
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, SearchBarAutocompleteViewDataProps } from '~/views-components/search-bar/search-bar-autocomplete-view';
import { ArvadosTheme } from '~/common/custom-theme';
-import { SearchBarAdvanceFormData } from '~/store/search-bar/search-bar-actions';
+import { SearchBarAdvanceFormData } from '~/models/search-bar';
type CssRules = 'container' | 'containerSearchViewOpened' | 'input' | 'view';
searchValue: string;
currentView: string;
isPopoverOpen: boolean;
- savedQueries: string[];
+ savedQueries: SearchBarAdvanceFormData[];
+ tags: any;
} & SearchBarAutocompleteViewDataProps;
interface SearchBarActionProps {
onSearch: (value: string) => any;
+ searchDataOnEnter: (value: string) => void;
debounce?: number;
onSetView: (currentView: string) => void;
closeView: () => void;
deleteSavedQuery: (id: number) => void;
openSearchView: () => void;
navigateTo: (uuid: string) => void;
+ editSavedQuery: (data: SearchBarAdvanceFormData, id: number) => void;
}
type SearchBarProps = SearchBarDataProps & SearchBarActionProps & WithStyles<CssRules>;
value: string;
}
-
-
interface RenderRecentQueriesProps {
- text: string | JSX.Element;
- onSearch: (searchValue: string | JSX.Element) => void;
+ text: string;
+ onSearch: (searchValue: string) => void;
}
export const RenderRecentQueries = (props: RenderRecentQueriesProps) => {
};
interface RenderSavedQueriesProps {
- text: string | JSX.Element;
+ text: string;
id: number;
deleteSavedQuery: (id: number) => void;
- onSearch: (searchValue: string | JSX.Element) => void;
+ onSearch: (searchValue: string) => void;
+ editSavedQuery: (data: SearchBarAdvanceFormData, id: number) => void;
+ data: SearchBarAdvanceFormData;
}
export const RenderSavedQueries = (props: RenderSavedQueriesProps) => {
return <ListItem button>
<ListItemText secondary={props.text} onClick={() => props.onSearch(props.text)} />
<ListItemSecondaryAction>
+ <Tooltip title="Edit">
+ <IconButton aria-label="Edit" onClick={() => props.editSavedQuery(props.data, props.id)}>
+ <EditSavedQueryIcon />
+ </IconButton>
+ </Tooltip>
<Tooltip title="Remove">
<IconButton aria-label="Remove" onClick={() => props.deleteSavedQuery(props.id)}>
<RemoveIcon />
}
getView = (currentView: string) => {
- const { onSetView, loadRecentQueries, savedQueries, deleteSavedQuery, searchValue, searchResults, saveQuery, onSearch, navigateTo } = this.props;
+ const { onSetView, loadRecentQueries, savedQueries, deleteSavedQuery, searchValue, searchResults, saveQuery, onSearch, navigateTo, editSavedQuery, tags } = this.props;
switch (currentView) {
case SearchView.BASIC:
- return <SearchBarBasicView setView={onSetView} recentQueries={loadRecentQueries} savedQueries={savedQueries} deleteSavedQuery={deleteSavedQuery} onSearch={onSearch} />;
+ return <SearchBarBasicView setView={onSetView} recentQueries={loadRecentQueries} savedQueries={savedQueries} deleteSavedQuery={deleteSavedQuery} onSearch={onSearch} editSavedQuery={editSavedQuery} />;
case SearchView.ADVANCED:
- return <SearchBarAdvancedView setView={onSetView} saveQuery={saveQuery} />;
+ return <SearchBarAdvancedView setView={onSetView} saveQuery={saveQuery} tags={tags} />;
case SearchView.AUTOCOMPLETE:
return <SearchBarAutocompleteView
navigateTo={navigateTo}
searchResults={searchResults}
searchValue={searchValue} />;
default:
- return <SearchBarBasicView setView={onSetView} recentQueries={loadRecentQueries} savedQueries={savedQueries} deleteSavedQuery={deleteSavedQuery} onSearch={onSearch} />;
+ return <SearchBarBasicView setView={onSetView} recentQueries={loadRecentQueries} savedQueries={savedQueries} deleteSavedQuery={deleteSavedQuery} onSearch={onSearch} editSavedQuery={editSavedQuery} />;
}
}
event.preventDefault();
clearTimeout(this.timeout);
this.props.saveRecentQuery(this.state.value);
- this.props.onSearch(this.state.value);
+ this.props.searchDataOnEnter(this.state.value);
this.props.loadRecentQueries();
}