return recentSearchQueries || [];
};
-export const saveQuery = (query: string) =>
+export const saveQuery = (data: SearchBarAdvanceFormData) =>
(dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
- services.searchService.saveQuery(query);
- dispatch(searchBarActions.SET_SAVED_QUERIES(services.searchService.getSavedQueries()));
+ if (data.saveQuery && data.searchQuery) {
+ services.searchService.saveQuery(data.searchQuery);
+ dispatch(searchBarActions.SET_SAVED_QUERIES(services.searchService.getSavedQueries()));
+ }
};
export const deleteSavedQuery = (id: number) =>
import { compose, Dispatch } from 'redux';
import { Paper, StyleRulesCallback, withStyles, WithStyles, Button, Grid, IconButton, CircularProgress } from '@material-ui/core';
import { SearchView } from '~/store/search-bar/search-bar-reducer';
-import { SEARCH_BAR_ADVANCE_FORM_NAME, SearchBarAdvanceFormData } from '~/store/search-bar/search-bar-actions';
+import { SEARCH_BAR_ADVANCE_FORM_NAME, SearchBarAdvanceFormData, saveQuery } from '~/store/search-bar/search-bar-actions';
import { ArvadosTheme } from '~/common/custom-theme';
import { CloseIcon } from '~/components/icon/icon';
import {
},
searchView: {
color: theme.palette.common.black,
- borderRadius: `0 0 ${theme.spacing.unit / 4}px ${theme.spacing.unit / 4}px`
+ borderRadius: `0 0 ${theme.spacing.unit / 2}px ${theme.spacing.unit / 2}px`
}
});
interface SearchBarAdvancedViewActionProps {
setView: (currentView: string) => void;
+ saveQuery: (data: SearchBarAdvanceFormData) => void;
}
type SearchBarAdvancedViewProps = SearchBarAdvancedViewActionProps & SearchBarAdvancedViewDataProps
reduxForm<SearchBarAdvanceFormData, SearchBarAdvancedViewActionProps>({
form: SEARCH_BAR_ADVANCE_FORM_NAME,
onSubmit: (data: SearchBarAdvanceFormData, dispatch: Dispatch) => {
+ dispatch<any>(saveQuery(data));
dispatch(reset(SEARCH_BAR_ADVANCE_FORM_NAME));
}
}),
padding: 0
},
searchView: {
- borderRadius: `0 0 ${theme.spacing.unit / 4}px ${theme.spacing.unit / 4}px`
+ borderRadius: `0 0 ${theme.spacing.unit / 2}px ${theme.spacing.unit / 2}px`
}
};
};
},
searchView: {
color: theme.palette.common.black,
- borderRadius: `0 0 ${theme.spacing.unit / 4}px ${theme.spacing.unit / 4}px`
+ borderRadius: `0 0 ${theme.spacing.unit / 2}px ${theme.spacing.unit / 2}px`
}
};
};
export const SearchBarBasicView = withStyles(styles)(
({ classes, setView, recentQueries, deleteSavedQuery, savedQueries }: SearchBarBasicViewProps & WithStyles<CssRules>) =>
<Paper className={classes.searchView}>
- <div className={classes.searchQueryList}>Saved search queries</div>
- <List component="nav" className={classes.list}>
- {savedQueries.map((query, index) => <RenderSavedQueries key={index} text={query} id={index} deleteSavedQuery={deleteSavedQuery}/>)}
- </List>
<div className={classes.searchQueryList}>Recent search queries</div>
<List component="nav" className={classes.list}>
{recentQueries().map((query, index) => <RecentQueriesItem key={index} text={query} />)}
</List>
+ <div className={classes.searchQueryList}>Saved search queries</div>
+ <List component="nav" className={classes.list}>
+ {savedQueries.map((query, index) => <RenderSavedQueries key={index} text={query} id={index} deleteSavedQuery={deleteSavedQuery} />)}
+ </List>
<div className={classes.advanced} onClick={() => setView(SearchView.ADVANCED)}>Advanced search</div>
</Paper>
);
\ No newline at end of file
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';
-type CssRules = 'container' | 'containerSearchViewOpened' | 'input' | 'searchBar' | 'view';
+type CssRules = 'container' | 'containerSearchViewOpened' | 'input' | 'view';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => {
return {
container: {
position: 'relative',
width: '100%',
- borderRadius: theme.spacing.unit / 4
+ borderRadius: theme.spacing.unit / 2
},
containerSearchViewOpened: {
position: 'relative',
width: '100%',
- borderRadius: `${theme.spacing.unit / 4}px ${theme.spacing.unit / 4}px 0 0`
+ borderRadius: `${theme.spacing.unit / 2}px ${theme.spacing.unit / 2}px 0 0`
},
input: {
border: 'none',
padding: `0px ${theme.spacing.unit}px`
},
- searchBar: {
- height: '30px'
- },
view: {
position: 'absolute',
width: '100%',
closeView: () => void;
saveRecentQuery: (query: string) => void;
loadRecentQueries: () => string[];
- saveQuery: (query: string) => void;
+ saveQuery: (data: SearchBarAdvanceFormData) => void;
deleteSavedQuery: (id: number) => void;
openSearchView: () => void;
}
const { classes, currentView, openSearchView, closeView, isPopoverOpen } = this.props;
return <ClickAwayListener onClickAway={() => closeView()}>
<Paper className={isPopoverOpen ? classes.containerSearchViewOpened : classes.container} >
- <form onSubmit={this.handleSubmit} className={classes.searchBar}>
+ <form onSubmit={this.handleSubmit}>
<Input
className={classes.input}
onChange={this.handleChange}
}
getView = (currentView: string) => {
- const { onSetView, loadRecentQueries, savedQueries, deleteSavedQuery, searchValue, searchResults } = this.props;
+ const { onSetView, loadRecentQueries, savedQueries, deleteSavedQuery, searchValue, searchResults, saveQuery } = this.props;
switch (currentView) {
case SearchView.BASIC:
return <SearchBarBasicView setView={onSetView} recentQueries={loadRecentQueries} savedQueries={savedQueries} deleteSavedQuery={deleteSavedQuery} />;
case SearchView.ADVANCED:
- return <SearchBarAdvancedView setView={onSetView} />;
+ return <SearchBarAdvancedView setView={onSetView} saveQuery={saveQuery}/>;
case SearchView.AUTOCOMPLETE:
return <SearchBarAutocompleteView
searchResults={searchResults}
event.preventDefault();
clearTimeout(this.timeout);
this.props.saveRecentQuery(this.state.value);
- this.props.saveQuery(this.state.value);
this.props.onSearch(this.state.value);
this.props.loadRecentQueries();
}
openSearchView
} from '~/store/search-bar/search-bar-actions';
import { SearchBarView } from '~/views-components/search-bar/search-bar-view';
+import { SearchBarAdvanceFormData } from '~/store/search-bar/search-bar-actions';
const mapStateToProps = ({ searchBar }: RootState) => {
return {
closeView: () => dispatch<any>(searchBarActions.CLOSE_SEARCH_VIEW()),
saveRecentQuery: (query: string) => dispatch<any>(saveRecentQuery(query)),
loadRecentQueries: () => dispatch<any>(loadRecentQueries()),
- saveQuery: (query: string) => dispatch<any>(saveQuery(query)),
+ saveQuery: (data: SearchBarAdvanceFormData) => dispatch<any>(saveQuery(data)),
deleteSavedQuery: (id: number) => dispatch<any>(deleteSavedQuery(id)),
openSearchView: () => dispatch<any>(openSearchView())
});