[ARVADOS-WORKBENCH2] updated: 1.2.0-575-g8156d2b
Git user
git at public.curoverse.com
Thu Oct 11 02:26:51 EDT 2018
Summary of changes:
src/store/search-bar/search-bar-actions.ts | 11 ++
.../form-fields/search-bar-form-fields.tsx | 78 ++++++++++
.../search-bar/search-bar-advanced-view.tsx | 160 +++++++++++++++++++--
.../search-bar/search-bar-view.tsx | 12 +-
src/views/collection-panel/collection-tag-form.tsx | 12 +-
5 files changed, 249 insertions(+), 24 deletions(-)
create mode 100644 src/views-components/form-fields/search-bar-form-fields.tsx
via 8156d2b941dfcf8773cd733a4e9994740e77f56a (commit)
from 120778e99f8fffc6792f3ac38a7d70d36506462f (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit 8156d2b941dfcf8773cd733a4e9994740e77f56a
Author: Janicki Artur <artur.janicki at contractors.roche.com>
Date: Thu Oct 11 08:26:39 2018 +0200
init all fields, create form fields file, modify collection tag form
Feature #13827
Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki at contractors.roche.com>
diff --git a/src/store/search-bar/search-bar-actions.ts b/src/store/search-bar/search-bar-actions.ts
index 2d171e0..717b982 100644
--- a/src/store/search-bar/search-bar-actions.ts
+++ b/src/store/search-bar/search-bar-actions.ts
@@ -21,6 +21,17 @@ export const searchBarActions = unionize({
export type SearchBarActions = UnionOf<typeof searchBarActions>;
+export interface SearchBarAdvanceFormData {
+ type?: GroupContentsResource;
+ cluster?: string;
+ project?: string;
+ dataFrom: string;
+ dataTo: string;
+ searchQuery: string;
+}
+
+export const SEARCH_BAR_ADVANCE_FORM_NAME = 'searchBarAdvanceFormName';
+
export const goToView = (currentView: string) => searchBarActions.SET_CURRENT_VIEW(currentView);
export const searchData = (searchValue: string) =>
diff --git a/src/views-components/form-fields/search-bar-form-fields.tsx b/src/views-components/form-fields/search-bar-form-fields.tsx
new file mode 100644
index 0000000..2691132
--- /dev/null
+++ b/src/views-components/form-fields/search-bar-form-fields.tsx
@@ -0,0 +1,78 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from "react";
+import { Field } from "redux-form";
+import { TextField } from "~/components/text-field/text-field";
+import { Checkbox, FormControlLabel } from '@material-ui/core';
+
+export const SearchBarTypeField = () =>
+ <Field
+ name='type'
+ component={TextField}
+ label="Type"/>;
+
+export const SearchBarClusterField = () =>
+ <Field
+ name='cluster'
+ component={TextField}
+ label="Cluster name" />;
+
+export const SearchBarProjectField = () =>
+ <Field
+ name='project'
+ component={TextField}
+ label="Project name" />;
+
+export const SearchBarTrashField = () =>
+ <FormControlLabel
+ control={
+ <Checkbox
+ checked={false}
+ value="true"
+ color="primary"
+ />
+ }
+ label="In trash" />;
+
+export const SearchBarDataFromField = () =>
+ <Field
+ name='dataFrom'
+ component={TextField}
+ label="From" />;
+
+export const SearchBarDataToField = () =>
+ <Field
+ name='dataTo'
+ component={TextField}
+ label="To" />;
+
+export const SearchBarKeyField = () =>
+ <Field
+ name='key'
+ component={TextField}
+ label="Key" />;
+
+export const SearchBarValueField = () =>
+ <Field
+ name='value'
+ component={TextField}
+ label="Value" />;
+
+export const SearchBarSaveSearchField = () =>
+ <FormControlLabel
+ control={
+ <Checkbox
+ checked={false}
+ value="true"
+ color="primary"
+ />
+ }
+ label="Save search query" />;
+
+export const SearchBarQuerySearchField = () =>
+ <Field
+ name='searchQuery'
+ component={TextField}
+ label="Search query name" />;
\ No newline at end of file
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 6758a90..8e20b99 100644
--- a/src/views-components/search-bar/search-bar-advanced-view.tsx
+++ b/src/views-components/search-bar/search-bar-advanced-view.tsx
@@ -3,29 +3,159 @@
// 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 { RecentQueriesItem } 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';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
- list: {
- padding: 0
+ 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'
}
});
-interface SearchBarAdvancedViewProps {
+interface SearchBarAdvancedViewDataProps {
+ submitting: boolean;
+ invalid: boolean;
+ pristine: boolean;
+}
+
+interface SearchBarAdvancedViewActionProps {
setView: (currentView: string) => void;
}
-export const SearchBarAdvancedView = withStyles(styles)(
- ({ classes, setView }: SearchBarAdvancedViewProps & WithStyles<CssRules>) =>
- <Paper>
- <List component="nav" className={classes.list}>
- <RecentQueriesItem 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) => {
+ console.log('data: ', data);
+ dispatch(reset(SEARCH_BAR_ADVANCE_FORM_NAME));
+ }
+ }),
+ withStyles(styles))(
+ ({ classes, setView, handleSubmit, invalid, submitting, pristine }: SearchBarAdvancedViewProps) =>
+ <Paper>
+ <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>);
\ No newline at end of file
diff --git a/src/views-components/search-bar/search-bar-view.tsx b/src/views-components/search-bar/search-bar-view.tsx
index f26cb7e..7c87bd3 100644
--- a/src/views-components/search-bar/search-bar-view.tsx
+++ b/src/views-components/search-bar/search-bar-view.tsx
@@ -22,7 +22,7 @@ import { SearchBarAdvancedView } from '~/views-components/search-bar/search-bar-
import { SearchBarAutocompleteView, SearchBarAutocompleteViewDataProps } from '~/views-components/search-bar/search-bar-autocomplete-view';
import { ArvadosTheme } from '~/common/custom-theme';
-type CssRules = 'container' | 'input' | 'searchBar';
+type CssRules = 'container' | 'input' | 'searchBar' | 'view';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => {
return {
@@ -37,6 +37,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => {
},
searchBar: {
height: '30px'
+ },
+ view: {
+ position: 'absolute',
+ width: '100%'
}
};
};
@@ -117,9 +121,11 @@ export const SearchBarView = withStyles(styles)(
</Tooltip>
</InputAdornment>
} />
- {open && this.getView(currentView)}
</form>
- </Paper >
+ <div className={classes.view}>
+ {open && this.getView(currentView)}
+ </div>
+ </Paper>
</ClickAwayListener>;
}
diff --git a/src/views/collection-panel/collection-tag-form.tsx b/src/views/collection-panel/collection-tag-form.tsx
index 75099f2..9aa8812 100644
--- a/src/views/collection-panel/collection-tag-form.tsx
+++ b/src/views/collection-panel/collection-tag-form.tsx
@@ -72,21 +72,21 @@ export const CollectionTagForm = compose(
const { classes, submitting, pristine, invalid, handleSubmit } = this.props;
return (
<form onSubmit={handleSubmit} className={classes.root}>
- <Typography component='div' className={classes.keyField}>
+ <div className={classes.keyField}>
<Field name="key"
disabled={submitting}
component={TextField}
validate={TAG_KEY_VALIDATION}
label="Key" />
- </Typography>
- <Typography component='div' className={classes.valueField}>
+ </div>
+ <div className={classes.valueField}>
<Field name="value"
disabled={submitting}
component={TextField}
validate={TAG_VALUE_VALIDATION}
label="Value" />
- </Typography>
- <Typography component='div' className={classes.buttonWrapper}>
+ </div>
+ <div className={classes.buttonWrapper}>
<Button type="submit" className={classes.saveButton}
color="primary"
size='small'
@@ -95,7 +95,7 @@ export const CollectionTagForm = compose(
ADD
</Button>
{submitting && <CircularProgress size={20} className={classes.circularProgress} />}
- </Typography>
+ </div>
</form>
);
}
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list