Commit 373a9910 authored by Maxym Borodenko's avatar Maxym Borodenko

Merge branch '747-home-page-search-doesn-t-work-via-enter' into 'master'

Fix: Home page search doesn't work via ENTER

Closes #747

See merge request genesys-pgr/genesys-ui!727
parents b56e48c6 8a6c71da
...@@ -493,8 +493,45 @@ class WelcomePage extends React.Component<IWelcomeProps, any> { ...@@ -493,8 +493,45 @@ class WelcomePage extends React.Component<IWelcomeProps, any> {
this.setState({loaded: true}); this.setState({loaded: true});
} }
private onSubmitSearch = async (e) => {
const { query } = this.state;
const { applyDatasetsFilters, applySubsetsFilters, applyDescriptorListsFilters, applyAccessionsFilters, t, navigateTo } = this.props;
// const { navigateTo, t } = this.props;
e.preventDefault();
if (query && query.length > 0) {
switch (this.state.scope) {
case t('public.p.welcome.search.scope.datasets'):
await navigateTo('/datasets');
applyDatasetsFilters({ _text: query });
break;
case t('public.p.welcome.search.scope.subsets'):
await navigateTo('/subsets');
applySubsetsFilters({ _text: query });
break;
case t('public.p.welcome.search.scope.descriptors'):
await navigateTo('/descriptorlists');
applyDescriptorListsFilters({ _text: query });
break;
default:
// await navigateTo('/a');
applyAccessionsFilters({ _text: query });
}
} else {
this.setState({
...this.state,
queryPlaceholder: t(`public.p.welcome.search.suggestion${Math.floor(Math.random() * SEARCH_SUGGESTIONS_COUNT)}`),
});
}
};
private handleKeyPres = (event: React.KeyboardEvent<HTMLDivElement>) => {
if (event.key === 'Enter') {
this.onSubmitSearch(event);
}
};
public render() { public render() {
const { classes, t, serverInfo, lastNews, navigateTo } = this.props; const { classes, t, serverInfo, lastNews } = this.props;
const { loaded } = this.state; const { loaded } = this.state;
const Stats = ({children}) => ( const Stats = ({children}) => (
...@@ -510,38 +547,6 @@ class WelcomePage extends React.Component<IWelcomeProps, any> { ...@@ -510,38 +547,6 @@ class WelcomePage extends React.Component<IWelcomeProps, any> {
}); });
}; };
const onSubmitSearch = async (e) => {
const { query } = this.state;
const { applyDatasetsFilters, applySubsetsFilters, applyDescriptorListsFilters, applyAccessionsFilters } = this.props;
// const { navigateTo, t } = this.props;
e.preventDefault();
if (query && query.length > 0) {
switch (this.state.scope) {
case t('public.p.welcome.search.scope.datasets'):
await navigateTo('/datasets');
applyDatasetsFilters({ _text: query });
break;
case t('public.p.welcome.search.scope.subsets'):
await navigateTo('/subsets');
applySubsetsFilters({ _text: query });
break;
case t('public.p.welcome.search.scope.descriptors'):
await navigateTo('/descriptorlists');
applyDescriptorListsFilters({ _text: query });
break;
default:
// await navigateTo('/a');
applyAccessionsFilters({ _text: query });
}
} else {
this.setState({
...this.state,
queryPlaceholder: t(`public.p.welcome.search.suggestion${Math.floor(Math.random() * SEARCH_SUGGESTIONS_COUNT)}`),
});
}
};
return ( return (
<PageLayout classes={ {root: classes.root } } withFooter> <PageLayout classes={ {root: classes.root } } withFooter>
<ScrollToTopOnMount/> <ScrollToTopOnMount/>
...@@ -566,7 +571,7 @@ class WelcomePage extends React.Component<IWelcomeProps, any> { ...@@ -566,7 +571,7 @@ class WelcomePage extends React.Component<IWelcomeProps, any> {
</div> </div>
<Grid item xs={ 12 }> <Grid item xs={ 12 }>
<div className={ classes.searchBox }> <div className={ classes.searchBox }>
<form onSubmit={ onSubmitSearch }> <form onSubmit={ this.onSubmitSearch }>
<div className={ classes.searchWrapper }> <div className={ classes.searchWrapper }>
<div className={ classes.inputBorder }> <div className={ classes.inputBorder }>
<Select <Select
...@@ -606,17 +611,21 @@ class WelcomePage extends React.Component<IWelcomeProps, any> { ...@@ -606,17 +611,21 @@ class WelcomePage extends React.Component<IWelcomeProps, any> {
{ t('public.p.welcome.search.scope.descriptors') } { t('public.p.welcome.search.scope.descriptors') }
</MenuItem> </MenuItem>
</Select> </Select>
<Input type="text" onChange={ searchQueryChange } className={ classes.searchField } <Input
disableUnderline type="text"
placeholder={ t(this.state.queryPlaceholder) } onChange={ searchQueryChange }
endAdornment={ className={ classes.searchField }
<InputAdornment disableTypography position="end" className={ classes.searchButton }> disableUnderline
<Button type="button" onClick={ onSubmitSearch }> placeholder={ t(this.state.queryPlaceholder) }
<SearchIcon className={ classes.searchIcon }/> onKeyPress={ this.handleKeyPres }
<span className="search">{ t('common:action.search') }</span> endAdornment={
</Button> <InputAdornment disableTypography position="end" className={ classes.searchButton }>
</InputAdornment> <Button type="button" onClick={ this.onSubmitSearch }>
} <SearchIcon className={ classes.searchIcon }/>
<span className="search">{ t('common:action.search') }</span>
</Button>
</InputAdornment>
}
/> />
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment