+type SearchBarAdvancedViewProps = SearchBarAdvancedViewActionProps & SearchBarAdvancedViewDataProps;
+
+type SearchBarAdvancedViewFormProps = SearchBarAdvancedViewProps & SearchBarAdvancedViewFormDataProps
+ & InjectedFormProps & WithStyles<CssRules>;
+
+const validate = (values: any) => {
+ const errors: any = {};
+
+ 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, SearchBarAdvancedViewProps>({
+ form: SEARCH_BAR_ADVANCE_FORM_NAME,
+ validate,
+ onSubmit: (data: SearchBarAdvanceFormData, dispatch: Dispatch) => {
+ dispatch<any>(searchAdvanceData(data));
+ dispatch(reset(SEARCH_BAR_ADVANCE_FORM_NAME));
+ }
+ }),
+ withStyles(styles))(
+ ({ classes, closeAdvanceView, handleSubmit, submitting, invalid, pristine, tags }: SearchBarAdvancedViewFormProps) =>
+ <Paper className={classes.searchView}>
+ <form onSubmit={handleSubmit}>
+ <Grid container direction="column" justify="flex-start" alignItems="flex-start">
+ <Grid item xs={12} container className={classes.container}>
+ <Grid item container xs={12} className={classes.selectGrid}>
+ <Grid item xs={2} className={classes.label}>Type</Grid>
+ <Grid item xs={5}>
+ <SearchBarTypeField />
+ </Grid>
+ </Grid>
+ <Grid item container xs={12} className={classes.selectGrid}>
+ <Grid item xs={2} className={classes.label}>Cluster</Grid>
+ <Grid item xs={5}>
+ <SearchBarClusterField />
+ </Grid>
+ </Grid>
+ <Grid item container xs={12}>
+ <Grid item xs={2} className={classes.label}>Project</Grid>
+ <Grid item xs={5}>
+ <SearchBarProjectField />
+ </Grid>
+ </Grid>
+ <Grid item container xs={12}>
+ <Grid item xs={2} className={classes.label} />
+ <Grid item xs={5}>
+ <SearchBarTrashField />
+ </Grid>
+ </Grid>
+ <IconButton onClick={closeAdvanceView} className={classes.closeIcon}>
+ <CloseIcon />
+ </IconButton>
+ </Grid>
+ <Grid container item xs={12} className={classes.container} spacing={16}>
+ <Grid item xs={2} className={classes.label}>Date modified</Grid>
+ <Grid item xs={4}>
+ <SearchBarDateFromField />
+ </Grid>
+ <Grid item xs={4}>
+ <SearchBarDateToField />
+ </Grid>
+ </Grid>
+ <Grid container item xs={12} className={classes.container}>
+ <SearchBarPropertiesField />
+ <Grid container item xs={12} justify="flex-start" alignItems="center" spacing={16}>
+ <Grid item xs={2} className={classes.label} />
+ <Grid item xs={4}>
+ <SearchBarSaveSearchField />
+ </Grid>
+ <Grid item xs={4}>
+ <SearchBarQuerySearchField />
+ </Grid>
+ </Grid>
+ <Grid container item xs={12} justify='flex-end'>
+ <div className={classes.buttonWrapper}>
+ <Button type="submit" className={classes.button}
+ // ToDo: create easier condition
+ // Question: do we need this 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">
+ Search
+ </Button>
+ {submitting && <CircularProgress size={20} className={classes.circularProgress} />}
+ </div>
+ </Grid>
+ </Grid>
+ </Grid>
+ </form>
+ </Paper>
+ );