Merge branch 'master' into 14391-advanced-view-tags

[arvados-workbench2.git] / src / views-components / search-bar / search-bar-advanced-view.tsx

diff --git a/src/views-components/search-bar/search-bar-advanced-view.tsx b/src/views-components/search-bar/search-bar-advanced-view.tsx
index d96062ea9325b6bf4876bc4d5b51742c58c65ad5..c658c33bbca3f6c63856cc6e74ab2083e3dd982f 100644 (file)
--- a/src/views-components/search-bar/search-bar-advanced-view.tsx
+++ b/src/views-components/search-bar/search-bar-advanced-view.tsx
@@ -7,25 +7,24 @@ import { reduxForm, reset, InjectedFormProps } 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, saveQuery } from '~/store/search-bar/search-bar-actions';
+import { SEARCH_BAR_ADVANCE_FORM_NAME, saveQuery } 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,
+import { SearchBarAdvanceFormData } from '~/models/search-bar';
+import {
+    SearchBarTypeField, SearchBarClusterField, SearchBarProjectField, SearchBarTrashField,
+    SearchBarDateFromField, SearchBarDateToField, SearchBarPropertiesField,
     SearchBarSaveSearchField, SearchBarQuerySearchField
 } from '~/views-components/form-fields/search-bar-form-fields';
 
-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,
+        padding: theme.spacing.unit * 2,
         borderBottom: `1px solid ${theme.palette.grey["200"]}`
-    }, 
+    },
     closeIcon: {
         position: 'absolute',
         top: '12px',
@@ -37,6 +36,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         alignSelf: 'center'
     },
     buttonWrapper: {
+        paddingRight: '14px',
         paddingTop: '14px',
         position: 'relative',
     },
@@ -54,6 +54,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     searchView: {
         color: theme.palette.common.black,
         borderRadius: `0 0 ${theme.spacing.unit / 2}px ${theme.spacing.unit / 2}px`
+    },
+    selectGrid: {
+        marginBottom: theme.spacing.unit * 2
     }
 });
 
@@ -66,32 +69,46 @@ interface SearchBarAdvancedViewDataProps {
 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 (new Date(values.dateFrom).getTime() > new Date(values.dateTo).getTime()) {
+            errors.dateFrom = 'Invalid date';
+        }
+    }
+
+    return errors;
+};
+
 export const SearchBarAdvancedView = compose(
     reduxForm<SearchBarAdvanceFormData, SearchBarAdvancedViewActionProps>({
         form: SEARCH_BAR_ADVANCE_FORM_NAME,
+        validate,
         onSubmit: (data: SearchBarAdvanceFormData, dispatch: Dispatch) => {
             dispatch<any>(saveQuery(data));
             dispatch(reset(SEARCH_BAR_ADVANCE_FORM_NAME));
         }
     }),
     withStyles(styles))(
-        ({ classes, setView, handleSubmit, invalid, submitting, pristine }: SearchBarAdvancedViewProps) =>
+        ({ classes, setView, handleSubmit, submitting, invalid, pristine, tags }: SearchBarAdvancedViewProps) =>
             <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 />
@@ -113,34 +130,18 @@ export const SearchBarAdvancedView = compose(
                                 <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 />
@@ -152,6 +153,8 @@ export const SearchBarAdvancedView = compose(
                             <Grid container item xs={12} justify='flex-end'>
                                 <div className={classes.buttonWrapper}>
                                     <Button type="submit" className={classes.button}
+                                    // 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">
@@ -163,4 +166,5 @@ export const SearchBarAdvancedView = compose(
                         </Grid>
                     </Grid>
                 </form>
-            </Paper>);
+            </Paper>
+    );