projects
/
arvados-workbench2.git
/ blobdiff
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
editing saved queries
[arvados-workbench2.git]
/
src
/
views-components
/
search-bar
/
search-bar-basic-view.tsx
diff --git
a/src/views-components/search-bar/search-bar-basic-view.tsx
b/src/views-components/search-bar/search-bar-basic-view.tsx
index c2bca73e13a1df9faba331d0c2b2456c8a6aa3e2..8ad0f09579d032eed4debfa6e70e851238be3ab6 100644
(file)
--- a/
src/views-components/search-bar/search-bar-basic-view.tsx
+++ b/
src/views-components/search-bar/search-bar-basic-view.tsx
@@
-5,7
+5,8
@@
import * as React from 'react';
import { Paper, StyleRulesCallback, withStyles, WithStyles, List } from '@material-ui/core';
import { SearchView } from '~/store/search-bar/search-bar-reducer';
import * as React from 'react';
import { Paper, StyleRulesCallback, withStyles, WithStyles, List } from '@material-ui/core';
import { SearchView } from '~/store/search-bar/search-bar-reducer';
-import { RecentQueriesItem, RenderSavedQueries } from '~/views-components/search-bar/search-bar-view';
+import { RenderRecentQueries, RenderSavedQueries } from '~/views-components/search-bar/search-bar-view';
+import { SearchBarAdvanceFormData } from '~/models/search-bar';
type CssRules = 'advanced' | 'searchQueryList' | 'list' | 'searchView';
type CssRules = 'advanced' | 'searchQueryList' | 'list' | 'searchView';
@@
-17,7
+18,8
@@
const styles: StyleRulesCallback<CssRules> = theme => {
paddingRight: theme.spacing.unit * 2,
paddingBottom: theme.spacing.unit,
fontSize: '14px',
paddingRight: theme.spacing.unit * 2,
paddingBottom: theme.spacing.unit,
fontSize: '14px',
- cursor: 'pointer'
+ cursor: 'pointer',
+ color: theme.palette.primary.main
},
searchQueryList: {
padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit}px `,
},
searchQueryList: {
padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit}px `,
@@
-28,27
+30,31
@@
const styles: StyleRulesCallback<CssRules> = theme => {
padding: '0px'
},
searchView: {
padding: '0px'
},
searchView: {
- color: theme.palette.common.black
+ color: theme.palette.common.black,
+ borderRadius: `0 0 ${theme.spacing.unit / 2}px ${theme.spacing.unit / 2}px`
}
};
};
interface SearchBarBasicViewProps {
setView: (currentView: string) => void;
}
};
};
interface SearchBarBasicViewProps {
setView: (currentView: string) => void;
+ recentQueries: () => string[];
+ deleteSavedQuery: (id: number) => void;
+ savedQueries: SearchBarAdvanceFormData[];
+ onSearch: (searchValue: string) => void;
+ editSavedQuery: (data: SearchBarAdvanceFormData, id: number) => void;
}
export const SearchBarBasicView = withStyles(styles)(
}
export const SearchBarBasicView = withStyles(styles)(
- ({ classes, setView }: SearchBarBasicViewProps & WithStyles<CssRules>) =>
+ ({ classes, setView
, recentQueries, deleteSavedQuery, savedQueries, onSearch, editSavedQuery
}: SearchBarBasicViewProps & WithStyles<CssRules>) =>
<Paper className={classes.searchView}>
<Paper className={classes.searchView}>
- <div className={classes.searchQueryList}>
Saved
search queries</div>
+ <div className={classes.searchQueryList}>
Recent
search queries</div>
<List component="nav" className={classes.list}>
<List component="nav" className={classes.list}>
- <RenderSavedQueries text="Test" />
- <RenderSavedQueries text="Demo" />
+ {recentQueries().map((query, index) => <RenderRecentQueries key={index} text={query} onSearch={onSearch} />)}
</List>
</List>
- <div className={classes.searchQueryList}>
Recent
search queries</div>
+ <div className={classes.searchQueryList}>
Saved
search queries</div>
<List component="nav" className={classes.list}>
<List component="nav" className={classes.list}>
- <RecentQueriesItem text="cos" />
- <RecentQueriesItem text="testtest" />
+ {savedQueries.map((query, index) => <RenderSavedQueries key={index} text={query.searchQuery} id={index} deleteSavedQuery={deleteSavedQuery} onSearch={onSearch} data={query} editSavedQuery={editSavedQuery}/>)}
</List>
<div className={classes.advanced} onClick={() => setView(SearchView.ADVANCED)}>Advanced search</div>
</Paper>
</List>
<div className={classes.advanced} onClick={() => setView(SearchView.ADVANCED)}>Advanced search</div>
</Paper>