//
// SPDX-License-Identifier: AGPL-3.0
-import * as React from 'react';
-import { reduxForm, reset, InjectedFormProps } from 'redux-form';
+import React from 'react';
+import { reduxForm, InjectedFormProps, reset } from 'redux-form';
import { compose, Dispatch } from 'redux';
import { Paper, StyleRulesCallback, withStyles, WithStyles, Button, Grid, IconButton, CircularProgress } from '@material-ui/core';
-import { SearchView } from '~/store/search-bar/search-bar-reducer';
-import { SEARCH_BAR_ADVANCE_FORM_NAME, SearchBarAdvanceFormData } from '~/store/search-bar/search-bar-actions';
-import { ArvadosTheme } from '~/common/custom-theme';
-import { CloseIcon } from '~/components/icon/icon';
-import {
- SearchBarTypeField, SearchBarClusterField, SearchBarProjectField, SearchBarTrashField,
- SearchBarDataFromField, SearchBarDataToField, SearchBarKeyField, SearchBarValueField,
- SearchBarSaveSearchField, SearchBarQuerySearchField
-} from '~/views-components/form-fields/search-bar-form-fields';
+import {
+ SEARCH_BAR_ADVANCED_FORM_NAME, SEARCH_BAR_ADVANCED_FORM_PICKER_ID,
+ searchAdvancedData,
+ setSearchValueFromAdvancedData
+} from 'store/search-bar/search-bar-actions';
+import { ArvadosTheme } from 'common/custom-theme';
+import { CloseIcon } from 'components/icon/icon';
+import { SearchBarAdvancedFormData } from 'models/search-bar';
+import {
+ SearchBarTypeField, SearchBarClusterField, SearchBarProjectField, SearchBarTrashField,
+ SearchBarDateFromField, SearchBarDateToField, SearchBarPropertiesField,
+ SearchBarSaveSearchField, SearchBarQuerySearchField, SearchBarPastVersionsField
+} from 'views-components/form-fields/search-bar-form-fields';
+import { treePickerActions } from "store/tree-picker/tree-picker-actions";
-type CssRules = 'form' | 'container' | 'closeIcon' | 'label' | 'buttonWrapper' | 'button' | 'circularProgress' | 'searchView';
+type CssRules = 'container' | 'closeIcon' | 'label' | 'buttonWrapper'
+ | 'button' | 'circularProgress' | 'searchView' | 'selectGrid';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
- form: {
-
- },
container: {
- padding: theme.spacing.unit * 3,
- borderBottom: `1px solid ${theme.palette.grey["200"]}`
- },
+ padding: theme.spacing.unit * 2,
+ borderBottom: `1px solid ${theme.palette.grey["200"]}`,
+ position: 'relative',
+ },
closeIcon: {
position: 'absolute',
top: '12px',
alignSelf: 'center'
},
buttonWrapper: {
- paddingTop: '14px',
+ marginRight: '14px',
+ marginTop: '14px',
position: 'relative',
},
button: {
},
circularProgress: {
position: 'absolute',
- top: -9,
+ top: 0,
bottom: 0,
left: 0,
right: 0,
},
searchView: {
color: theme.palette.common.black,
- borderRadius: `0 0 ${theme.spacing.unit / 4}px ${theme.spacing.unit / 4}px`
+ borderRadius: `0 0 ${theme.spacing.unit / 2}px ${theme.spacing.unit / 2}px`
+ },
+ selectGrid: {
+ marginBottom: theme.spacing.unit * 2
}
});
-interface SearchBarAdvancedViewDataProps {
+// ToDo: maybe we should remove invalid and prostine
+interface SearchBarAdvancedViewFormDataProps {
submitting: boolean;
invalid: boolean;
pristine: boolean;
}
-interface SearchBarAdvancedViewActionProps {
- setView: (currentView: string) => void;
+// ToDo: maybe we should remove tags
+export interface SearchBarAdvancedViewDataProps {
+ tags: any;
+ saveQuery: boolean;
+}
+
+export interface SearchBarAdvancedViewActionProps {
+ closeAdvanceView: () => void;
}
-type SearchBarAdvancedViewProps = SearchBarAdvancedViewActionProps & SearchBarAdvancedViewDataProps
+type SearchBarAdvancedViewProps = SearchBarAdvancedViewActionProps & SearchBarAdvancedViewDataProps;
+
+type SearchBarAdvancedViewFormProps = SearchBarAdvancedViewProps & SearchBarAdvancedViewFormDataProps
& InjectedFormProps & WithStyles<CssRules>;
-export const SearchBarAdvancedView = compose(
- reduxForm<SearchBarAdvanceFormData, SearchBarAdvancedViewActionProps>({
- form: SEARCH_BAR_ADVANCE_FORM_NAME,
- onSubmit: (data: SearchBarAdvanceFormData, dispatch: Dispatch) => {
- dispatch(reset(SEARCH_BAR_ADVANCE_FORM_NAME));
+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<SearchBarAdvancedFormData, SearchBarAdvancedViewProps>({
+ form: SEARCH_BAR_ADVANCED_FORM_NAME,
+ validate,
+ onSubmit: (data: SearchBarAdvancedFormData, dispatch: Dispatch) => {
+ dispatch<any>(searchAdvancedData(data));
+ dispatch(reset(SEARCH_BAR_ADVANCED_FORM_NAME));
+ dispatch(treePickerActions.DEACTIVATE_TREE_PICKER_NODE({ pickerId: SEARCH_BAR_ADVANCED_FORM_PICKER_ID }));
+ },
+ onChange: (data: SearchBarAdvancedFormData, dispatch: Dispatch, props: any, prevData: SearchBarAdvancedFormData) => {
+ dispatch<any>(setSearchValueFromAdvancedData(data, prevData));
+ },
}),
withStyles(styles))(
- ({ classes, setView, handleSubmit, invalid, submitting, pristine }: SearchBarAdvancedViewProps) =>
+ ({ classes, closeAdvanceView, handleSubmit, submitting, invalid, pristine, tags, saveQuery }: SearchBarAdvancedViewFormProps) =>
<Paper className={classes.searchView}>
- <form onSubmit={handleSubmit} className={classes.form}>
+ <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}>
+ <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}>
+ <Grid item container xs={12} className={classes.selectGrid}>
<Grid item xs={2} className={classes.label}>Cluster</Grid>
<Grid item xs={5}>
<SearchBarClusterField />
</Grid>
<Grid item container xs={12}>
<Grid item xs={2} className={classes.label}>Project</Grid>
- <Grid item xs={5}>
+ <Grid item xs={10}>
<SearchBarProjectField />
</Grid>
</Grid>
<Grid item xs={5}>
<SearchBarTrashField />
</Grid>
+ <Grid item xs={5}>
+ <SearchBarPastVersionsField />
+ </Grid>
</Grid>
- <IconButton onClick={() => setView(SearchView.BASIC)} className={classes.closeIcon}>
+ <IconButton onClick={closeAdvanceView} className={classes.closeIcon}>
<CloseIcon />
</IconButton>
</Grid>
- <Grid container item xs={12} className={classes.container}>
- <Grid item xs={2} className={classes.label}>Data modified</Grid>
- <Grid item xs={3}>
- <SearchBarDataFromField />
+ <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={3}>
- <SearchBarDataToField />
+ <Grid item xs={4}>
+ <SearchBarDateToField />
</Grid>
</Grid>
<Grid container item xs={12} className={classes.container}>
- <Grid container item xs={12}>
- <Grid item xs={2} className={classes.label}>Properties</Grid>
- <Grid item xs={4}>
- <SearchBarKeyField />
- </Grid>
- <Grid item xs={4}>
- <SearchBarValueField />
- </Grid>
- <Grid container item xs={2} justify='flex-end' alignItems="center">
- <Button className={classes.button}
- color="primary"
- size='small'
- variant="contained">
- Add
- </Button>
- </Grid>
- </Grid>
- <Grid container item xs={12} justify="flex-start" alignItems="center">
+ <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 />
+ {saveQuery && <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">
</Grid>
</Grid>
</form>
- </Paper>);
+ </Paper>
+ );
projects / arvados-workbench2.git / blobdiff