X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/3a530766c12a5677e6b5f8c54cd3a61f8e6934b4..13a00ada6b087c99235ce59a4247d57970e30f15:/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 ef13547c74..c956ca03e4 100644
--- a/src/views-components/search-bar/search-bar-advanced-view.tsx
+++ b/src/views-components/search-bar/search-bar-advanced-view.tsx
@@ -3,30 +3,162 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { Paper, StyleRulesCallback, withStyles, WithStyles, List, Button } from '@material-ui/core';
+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 { RenderRecentQueries } from '~/views-components/search-bar/search-bar-view';
+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';
 
-type CssRules = 'list';
+type CssRules = 'form' | 'container' | 'closeIcon' | 'label' | 'buttonWrapper' | 'button' | 'circularProgress' | 'searchView';
 
-const styles: StyleRulesCallback<CssRules> = theme => {
-    return {
-        list: {
-            padding: '0px'
-        }
-    };
-};
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    form: {
+
+    },
+    container: {
+        padding: theme.spacing.unit * 3,
+        borderBottom: `1px solid ${theme.palette.grey["200"]}`
+    }, 
+    closeIcon: {
+        position: 'absolute',
+        top: '12px',
+        right: '12px'
+    },
+    label: {
+        color: theme.palette.grey["500"],
+        fontSize: '0.8125rem',
+        alignSelf: 'center'
+    },
+    buttonWrapper: {
+        paddingTop: '14px',
+        position: 'relative',
+    },
+    button: {
+        boxShadow: 'none'
+    },
+    circularProgress: {
+        position: 'absolute',
+        top: -9,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        margin: 'auto'
+    },
+    searchView: {
+        color: theme.palette.common.black,
+        borderRadius: `0 0 ${theme.spacing.unit / 4}px ${theme.spacing.unit / 4}px`
+    }
+});
+
+interface SearchBarAdvancedViewDataProps {
+    submitting: boolean;
+    invalid: boolean;
+    pristine: boolean;
+}
 
-interface SearchBarAdvancedViewProps {
+interface SearchBarAdvancedViewActionProps {
     setView: (currentView: string) => void;
 }
 
-export const SearchBarAdvancedView = withStyles(styles)(
-    ({ classes, setView }: SearchBarAdvancedViewProps & WithStyles<CssRules>) =>
-        <Paper>
-            <List component="nav" className={classes.list}>
-                <RenderRecentQueries text='ADVANCED VIEW' />
-            </List>
-            <Button onClick={() => setView(SearchView.BASIC)}>Back</Button>
-        </Paper>
-);
\ No newline at end of file
+type SearchBarAdvancedViewProps = SearchBarAdvancedViewActionProps & SearchBarAdvancedViewDataProps 
+    & 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));
+        }
+    }),
+    withStyles(styles))(
+        ({ classes, setView, handleSubmit, invalid, submitting, pristine }: SearchBarAdvancedViewProps) =>
+            <Paper className={classes.searchView}>
+                <form onSubmit={handleSubmit} className={classes.form}>
+                    <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 xs={2} className={classes.label}>Type</Grid>
+                                <Grid item xs={5}>
+                                    <SearchBarTypeField />
+                                </Grid>
+                            </Grid>
+                            <Grid item container xs={12}>
+                                <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={() => setView(SearchView.BASIC)} 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>
+                            <Grid item xs={3}>
+                                <SearchBarDataToField />
+                            </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">
+                                <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}
+                                        color="primary"
+                                        size='small'
+                                        variant="contained">
+                                        Search
+                                    </Button>
+                                    {submitting && <CircularProgress size={20} className={classes.circularProgress} />}
+                                </div>
+                            </Grid>
+                        </Grid>
+                    </Grid>
+                </form>
+            </Paper>);