[ARVADOS-WORKBENCH2] updated: 1.2.0-545-gecd6a0d
Git user
git at public.curoverse.com
Fri Oct 5 08:29:13 EDT 2018
Summary of changes:
.../search-bar/search-bar-advanced-view.tsx | 32 ++++++++
.../search-bar/search-bar-autocomplete-view.tsx | 29 +++++++
.../search-bar/search-bar-basic-view.tsx | 55 +++++++++++++
src/components/search-bar/search-bar.tsx | 90 +++++++---------------
4 files changed, 144 insertions(+), 62 deletions(-)
create mode 100644 src/components/search-bar/search-bar-advanced-view.tsx
create mode 100644 src/components/search-bar/search-bar-autocomplete-view.tsx
create mode 100644 src/components/search-bar/search-bar-basic-view.tsx
via ecd6a0dd67715292ce1f7dfce81ba1345f3ecbd3 (commit)
from 5b44e10c627fa07287d1700c554ee1231ca7733b (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit ecd6a0dd67715292ce1f7dfce81ba1345f3ecbd3
Author: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
Date: Fri Oct 5 14:28:59 2018 +0200
extracted-search-views-into-separete-components
Feature #14275
Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
diff --git a/src/components/search-bar/search-bar-advanced-view.tsx b/src/components/search-bar/search-bar-advanced-view.tsx
new file mode 100644
index 0000000..e9bd743
--- /dev/null
+++ b/src/components/search-bar/search-bar-advanced-view.tsx
@@ -0,0 +1,32 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { Paper, StyleRulesCallback, withStyles, WithStyles, List, Button } from '@material-ui/core';
+import { SearchView } from '~/store/structured-search/structured-search-reducer';
+import { renderRecentQueries } from '~/components/search-bar/search-bar';
+
+type CssRules = 'list';
+
+const styles: StyleRulesCallback<CssRules> = theme => {
+ return {
+ list: {
+ padding: '0px'
+ }
+ };
+};
+
+interface SearchBarAdvancedViewProps {
+ setView: (currentView: string) => void;
+}
+
+export const SearchBarAdvancedView = withStyles(styles)(
+ ({ classes, setView }: SearchBarAdvancedViewProps & WithStyles<CssRules>) =>
+ <Paper>
+ <List component="nav" className={classes.list}>
+ {renderRecentQueries('ADVANCED VIEW')}
+ </List>
+ <Button onClick={() => setView(SearchView.BASIC)}>Back</Button>
+ </Paper>
+);
\ No newline at end of file
diff --git a/src/components/search-bar/search-bar-autocomplete-view.tsx b/src/components/search-bar/search-bar-autocomplete-view.tsx
new file mode 100644
index 0000000..5aadd0a
--- /dev/null
+++ b/src/components/search-bar/search-bar-autocomplete-view.tsx
@@ -0,0 +1,29 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { Paper, StyleRulesCallback, withStyles, WithStyles, List, Button } from '@material-ui/core';
+import { renderRecentQueries } from '~/components/search-bar/search-bar';
+
+type CssRules = 'list';
+
+const styles: StyleRulesCallback<CssRules> = theme => {
+ return {
+ list: {
+ padding: '0px'
+ }
+ };
+};
+
+interface SearchBarAutocompleteViewProps {
+}
+
+export const SearchBarAutocompleteView = withStyles(styles)(
+ ({ classes }: SearchBarAutocompleteViewProps & WithStyles<CssRules>) =>
+ <Paper>
+ <List component="nav" className={classes.list}>
+ {renderRecentQueries('AUTOCOMPLETE VIEW')}
+ </List>
+ </Paper>
+);
\ No newline at end of file
diff --git a/src/components/search-bar/search-bar-basic-view.tsx b/src/components/search-bar/search-bar-basic-view.tsx
new file mode 100644
index 0000000..ac630b5
--- /dev/null
+++ b/src/components/search-bar/search-bar-basic-view.tsx
@@ -0,0 +1,55 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { Paper, StyleRulesCallback, withStyles, WithStyles, List } from '@material-ui/core';
+import { SearchView } from '~/store/structured-search/structured-search-reducer';
+import { renderRecentQueries, renderSavedQueries } from '~/components/search-bar/search-bar';
+
+type CssRules = 'advanced' | 'searchQueryList' | 'list' | 'searchView';
+
+const styles: StyleRulesCallback<CssRules> = theme => {
+ return {
+ advanced: {
+ display: 'flex',
+ justifyContent: 'flex-end',
+ paddingRight: theme.spacing.unit * 2,
+ paddingBottom: theme.spacing.unit,
+ fontSize: '14px',
+ cursor: 'pointer'
+ },
+ searchQueryList: {
+ padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit}px `,
+ background: '#f2f2f2',
+ fontSize: '14px'
+ },
+ list: {
+ padding: '0px'
+ },
+ searchView: {
+ color: theme.palette.common.black
+ }
+ };
+};
+
+interface SearchBarBasicViewProps {
+ setView: (currentView: string) => void;
+}
+
+export const SearchBarBasicView = withStyles(styles)(
+ ({ classes, setView }: SearchBarBasicViewProps & WithStyles<CssRules>) =>
+ <Paper className={classes.searchView}>
+ <div className={classes.searchQueryList}>Saved search queries</div>
+ <List component="nav" className={classes.list}>
+ {renderSavedQueries('Test')}
+ {renderSavedQueries('Demo')}
+ </List>
+ <div className={classes.searchQueryList}>Recent search queries</div>
+ <List component="nav" className={classes.list}>
+ {renderRecentQueries('cos')}
+ {renderRecentQueries('testtest')}
+ </List>
+ <div className={classes.advanced} onClick={() => setView(SearchView.ADVANCED)}>Advanced search</div>
+ </Paper>
+);
\ No newline at end of file
diff --git a/src/components/search-bar/search-bar.tsx b/src/components/search-bar/search-bar.tsx
index 2036a66..faa7b53 100644
--- a/src/components/search-bar/search-bar.tsx
+++ b/src/components/search-bar/search-bar.tsx
@@ -11,7 +11,7 @@ import {
WithStyles,
Tooltip,
InputAdornment, Input,
- List, ListItem, ListItemText, ListItemSecondaryAction, Button
+ ListItem, ListItemText, ListItemSecondaryAction
} from '@material-ui/core';
import SearchIcon from '@material-ui/icons/Search';
import { RemoveIcon } from '~/components/icon/icon';
@@ -20,8 +20,11 @@ import { RootState } from '~/store/store';
import { Dispatch } from 'redux';
import { goToView } from '~/store/structured-search/structured-search-actions';
import { SearchView } from '~/store/structured-search/structured-search-reducer';
+import { SearchBarBasicView } from '~/components/search-bar/search-bar-basic-view';
+import { SearchBarAdvancedView } from '~/components/search-bar/search-bar-advanced-view';
+import { SearchBarAutocompleteView } from '~/components/search-bar/search-bar-autocomplete-view';
-type CssRules = 'container' | 'input' | 'advanced' | 'searchQueryList' | 'list' | 'searchView' | 'searchBar';
+type CssRules = 'container' | 'input' | 'searchBar';
const styles: StyleRulesCallback<CssRules> = theme => {
return {
@@ -34,25 +37,6 @@ const styles: StyleRulesCallback<CssRules> = theme => {
border: 'none',
padding: `0px ${theme.spacing.unit}px`
},
- advanced: {
- display: 'flex',
- justifyContent: 'flex-end',
- paddingRight: theme.spacing.unit * 2,
- paddingBottom: theme.spacing.unit,
- fontSize: '14px',
- cursor: 'pointer'
- },
- searchQueryList: {
- padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit}px `,
- background: '#f2f2f2',
- fontSize: '14px'
- },
- list: {
- padding: '0px'
- },
- searchView: {
- color: theme.palette.common.black
- },
searchBar: {
height: '30px'
}
@@ -77,6 +61,26 @@ interface SearchBarState {
isSearchViewOpen: boolean;
}
+export const renderRecentQueries = (text: string) => {
+ return <ListItem button>
+ <ListItemText secondary={text} />
+ </ListItem>;
+};
+
+
+export const renderSavedQueries = (text: string) => {
+ return <ListItem button>
+ <ListItemText secondary={text} />
+ <ListItemSecondaryAction>
+ <Tooltip title="Remove">
+ <IconButton aria-label="Remove">
+ <RemoveIcon />
+ </IconButton>
+ </Tooltip>
+ </ListItemSecondaryAction>
+ </ListItem>;
+};
+
const mapStateToProps = ({ structuredSearch }: RootState) => {
return {
currentView: structuredSearch.currentView
@@ -147,54 +151,16 @@ export const SearchBar = connect(mapStateToProps, mapDispatchToProps)(withStyles
getView = (currentView: string) => {
switch (currentView) {
case SearchView.BASIC:
- return <Paper className={this.props.classes.searchView}>
- <div className={this.props.classes.searchQueryList}>Saved search queries</div>
- <List component="nav" className={this.props.classes.list}>
- {this.renderSavedQueries('Test')}
- {this.renderSavedQueries('Demo')}
- </List>
- <div className={this.props.classes.searchQueryList}>Recent search queries</div>
- <List component="nav" className={this.props.classes.list}>
- {this.renderRecentQueries('cos')}
- {this.renderRecentQueries('testtest')}
- </List>
- <div className={this.props.classes.advanced} onClick={() => this.props.onSetView(SearchView.ADVANCED)}>Advanced search</div>
- </Paper>;
+ return <SearchBarBasicView setView={this.props.onSetView} />;
case SearchView.ADVANCED:
- return <Paper>
- <List component="nav" className={this.props.classes.list}>
- {this.renderRecentQueries('ADVANCED VIEW')}
- </List>
- <Button onClick={() => this.props.onSetView(SearchView.BASIC)}>Back</Button>
- </Paper>;
+ return <SearchBarAdvancedView setView={this.props.onSetView} />;
case SearchView.AUTOCOMPLETE:
- return <Paper>
- <List component="nav" className={this.props.classes.list}>
- {this.renderRecentQueries('AUTOCOMPLETE VIEW')}
- </List>
- </Paper>;
+ return <SearchBarAutocompleteView />;
default:
return '';
}
}
- renderRecentQueries = (text: string) =>
- <ListItem button>
- <ListItemText secondary={text} />
- </ListItem>
-
- renderSavedQueries = (text: string) =>
- <ListItem button>
- <ListItemText secondary={text} />
- <ListItemSecondaryAction>
- <Tooltip title="Remove">
- <IconButton aria-label="Remove">
- <RemoveIcon />
- </IconButton>
- </Tooltip>
- </ListItemSecondaryAction>
- </ListItem>
-
handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
clearTimeout(this.timeout);
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list