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 SearchBarAdvancedViewDataProps {
+interface SearchBarAdvancedViewFormDataProps {
submitting: boolean;
invalid: boolean;
pristine: boolean;
}
-interface SearchBarAdvancedViewActionProps {
- setView: (currentView: string) => void;
+export interface SearchBarAdvancedViewDataProps {
+ tags: any;
+}
+
+export interface SearchBarAdvancedViewActionProps {
+ onSetView: (currentView: string) => void;
saveQuery: (data: SearchBarAdvanceFormData) => void;
}
-type SearchBarAdvancedViewProps = SearchBarAdvancedViewActionProps & SearchBarAdvancedViewDataProps
+type SearchBarAdvancedViewProps = SearchBarAdvancedViewActionProps & SearchBarAdvancedViewDataProps;
+
+type SearchBarAdvancedViewFormProps = SearchBarAdvancedViewProps & SearchBarAdvancedViewFormDataProps
& 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;
};
export const SearchBarAdvancedView = compose(
- reduxForm<SearchBarAdvanceFormData, SearchBarAdvancedViewActionProps>({
+ reduxForm<SearchBarAdvanceFormData, SearchBarAdvancedViewProps>({
form: SEARCH_BAR_ADVANCE_FORM_NAME,
validate,
onSubmit: (data: SearchBarAdvanceFormData, dispatch: Dispatch) => {
}
}),
withStyles(styles))(
- ({ classes, setView, handleSubmit, submitting, invalid, pristine }: SearchBarAdvancedViewProps) =>
+ ({ classes, onSetView, handleSubmit, submitting, invalid, pristine, tags }: SearchBarAdvancedViewFormProps) =>
<Paper className={classes.searchView}>
<form onSubmit={handleSubmit}>
<Grid container direction="column" justify="flex-start" alignItems="flex-start">
<SearchBarTrashField />
</Grid>
</Grid>
- <IconButton onClick={() => setView(SearchView.BASIC)} className={classes.closeIcon}>
+ <IconButton onClick={() => onSetView(SearchView.BASIC)} className={classes.closeIcon}>
<CloseIcon />
</IconButton>
</Grid>
<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>
);