import { ArvadosTheme } from '~/common/custom-theme';
import { CloseIcon } from '~/components/icon/icon';
import { SearchBarAdvanceFormData } from '~/models/search-bar';
-import {
- SearchBarTypeField, SearchBarClusterField, SearchBarProjectField, SearchBarTrashField,
+import {
+ SearchBarTypeField, SearchBarClusterField, SearchBarProjectField, SearchBarTrashField,
SearchBarDateFromField, SearchBarDateToField, SearchBarPropertiesField,
SearchBarSaveSearchField, SearchBarQuerySearchField
} from '~/views-components/form-fields/search-bar-form-fields';
-type CssRules = 'container' | 'closeIcon' | 'label' | 'buttonWrapper'
+type CssRules = 'container' | 'closeIcon' | 'label' | 'buttonWrapper'
| 'button' | 'circularProgress' | 'searchView' | 'selectGrid';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
container: {
padding: theme.spacing.unit * 2,
borderBottom: `1px solid ${theme.palette.grey["200"]}`
- },
+ },
closeIcon: {
position: 'absolute',
top: '12px',
interface SearchBarAdvancedViewActionProps {
setView: (currentView: string) => void;
saveQuery: (data: SearchBarAdvanceFormData) => void;
+ tags: any;
}
-type SearchBarAdvancedViewProps = SearchBarAdvancedViewActionProps & SearchBarAdvancedViewDataProps
+type SearchBarAdvancedViewProps = SearchBarAdvancedViewActionProps & SearchBarAdvancedViewDataProps
& InjectedFormProps & WithStyles<CssRules>;
const validate = (values: any) => {
const errors: any = {};
- if (values.dateFrom && values.dateTo ) {
+ if (values.dateFrom && values.dateTo) {
if (new Date(values.dateFrom).getTime() > new Date(values.dateTo).getTime()) {
errors.dateFrom = 'Invalid date';
}
- }
+ }
return errors;
};
}
}),
withStyles(styles))(
- ({ classes, setView, handleSubmit, submitting, invalid, pristine }: SearchBarAdvancedViewProps) =>
+ ({ classes, setView, handleSubmit, submitting, invalid, pristine, tags }: SearchBarAdvancedViewProps) =>
<Paper className={classes.searchView}>
<form onSubmit={handleSubmit}>
<Grid container direction="column" justify="flex-start" alignItems="flex-start">
<Grid container item xs={12} justify='flex-end'>
<div className={classes.buttonWrapper}>
<Button type="submit" className={classes.button}
- disabled={invalid || submitting || pristine}
+ // ToDo: create easier condition
+ disabled={invalid || submitting || pristine || !!(tags && tags.values && ((tags.values.key) || (tags.values.value)) && !Object.keys(tags.values).find(el => el !== 'value' && el !== 'key'))}
color="primary"
size='small'
variant="contained">
</Grid>
</Grid>
</form>
- </Paper>
+ </Paper>
);
currentView: string;
isPopoverOpen: boolean;
savedQueries: SearchBarAdvanceFormData[];
+ tags: any;
} & SearchBarAutocompleteViewDataProps;
interface SearchBarActionProps {
}
getView = (currentView: string) => {
- const { onSetView, loadRecentQueries, savedQueries, deleteSavedQuery, searchValue, searchResults, saveQuery, onSearch, navigateTo, editSavedQuery } = 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} 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}
openSearchView,
closeSearchView,
navigateToItem,
- editSavedQuery
+ editSavedQuery,
+ searchDataOnEnter
} from '~/store/search-bar/search-bar-actions';
import { SearchBarView } from '~/views-components/search-bar/search-bar-view';
import { SearchBarAdvanceFormData } from '~/models/search-bar';
-import { searchDataOnEnter } from '../../store/search-bar/search-bar-actions';
-const mapStateToProps = ({ searchBar }: RootState) => {
+const mapStateToProps = ({ searchBar, form }: RootState) => {
return {
searchValue: searchBar.searchValue,
currentView: searchBar.currentView,
isPopoverOpen: searchBar.open,
searchResults: searchBar.searchResults,
- savedQueries: searchBar.savedQueries
+ savedQueries: searchBar.savedQueries,
+ tags: form.searchBarAdvanceFormName
};
};