[ARVADOS-WORKBENCH2] created: 1.2.0-607-gf512772
Git user
git at public.curoverse.com
Fri Oct 12 06:59:01 EDT 2018
at f5127724c5ca39a59a08ba20f843e530b0650be9 (commit)
commit f5127724c5ca39a59a08ba20f843e530b0650be9
Author: Janicki Artur <artur.janicki at contractors.roche.com>
Date: Fri Oct 12 12:58:39 2018 +0200
add native select field, data text field and search bar model
Feature #13827
Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki at contractors.roche.com>
diff --git a/src/components/select-field/select-field.tsx b/src/components/select-field/select-field.tsx
new file mode 100644
index 0000000..dda58c0
--- /dev/null
+++ b/src/components/select-field/select-field.tsx
@@ -0,0 +1,58 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { WrappedFieldProps } from 'redux-form';
+import { ArvadosTheme } from '~/common/custom-theme';
+import { StyleRulesCallback, WithStyles, withStyles, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
+
+type CssRules = 'formControl' | 'selectWrapper' | 'select' | 'option';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+ formControl: {
+ width: '100%'
+ },
+ selectWrapper: {
+ backgroundColor: 'white',
+ '&:before': {
+ borderBottomColor: 'rgba(0, 0, 0, 0.42)'
+ },
+ '&:focus': {
+ outline: 'none'
+ }
+ },
+ select: {
+ fontSize: '0.875rem',
+ '&:focus': {
+ backgroundColor: 'rgba(0, 0, 0, 0.0)'
+ }
+ },
+ option: {
+ fontSize: '0.875rem',
+ backgroundColor: 'white',
+ height: '30px'
+ }
+});
+
+export const NativeSelectField = withStyles(styles)
+ ((props: WrappedFieldProps & WithStyles<CssRules> & { items: any[] }) =>
+ <FormControl className={props.classes.formControl}>
+ <Select className={props.classes.selectWrapper}
+ native
+ value={props.input.value}
+ onChange={props.input.onChange}
+ disabled={props.meta.submitting}
+ name={props.input.name}
+ inputProps={{
+ id: `id-${props.input.name}`,
+ className: props.classes.select
+ }}>
+ {props.items.map(item => (
+ <option key={item.key} value={item.key} className={props.classes.option}>
+ {item.value}
+ </option>
+ ))}
+ </Select>
+ </FormControl>
+ );
\ No newline at end of file
diff --git a/src/components/text-field/text-field.tsx b/src/components/text-field/text-field.tsx
index 4d8c012..1bf5197 100644
--- a/src/components/text-field/text-field.tsx
+++ b/src/components/text-field/text-field.tsx
@@ -55,4 +55,22 @@ export const RichEditorTextField = withStyles(styles)(
placeholder={this.props.label} />;
}
}
-);
\ No newline at end of file
+);
+
+type DataTextFieldProps = WrappedFieldProps & WithStyles<CssRules>;
+
+export const DataTextField = withStyles(styles)
+ ((props: DataTextFieldProps) =>
+ <MaterialTextField
+ disabled={props.meta.submitting}
+ error={props.meta.touched && !!props.meta.error}
+ type="date"
+ fullWidth={true}
+ name={props.input.name}
+ InputLabelProps={{
+ shrink: true
+ }}
+ onChange={props.input.onChange}
+ value={props.input.value}
+ />
+ );
\ No newline at end of file
diff --git a/src/models/search-bar.ts b/src/models/search-bar.ts
new file mode 100644
index 0000000..9fadc2a
--- /dev/null
+++ b/src/models/search-bar.ts
@@ -0,0 +1,22 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { ResourceKind } from '~/models/resource';
+
+export interface SearchBarAdvanceFormData {
+ type?: ResourceKind;
+ cluster?: ClusterObjectType;
+ project?: string;
+ inTrash: boolean;
+ dateFrom: string;
+ dateTo: string;
+ saveQuery: boolean;
+ searchQuery: string;
+}
+
+export enum ClusterObjectType {
+ INDIANAPOLIS = "indianapolis",
+ KAISERAUGST = "kaiseraugst",
+ PENZBERG = "penzberg"
+}
\ No newline at end of file
diff --git a/src/store/search-bar/search-bar-actions.ts b/src/store/search-bar/search-bar-actions.ts
index 59770cc..40528d2 100644
--- a/src/store/search-bar/search-bar-actions.ts
+++ b/src/store/search-bar/search-bar-actions.ts
@@ -10,6 +10,7 @@ import { ServiceRepository } from '~/services/services';
import { FilterBuilder } from "~/services/api/filter-builder";
import { ResourceKind } from '~/models/resource';
import { GroupClass } from '~/models/group';
+import { SearchBarAdvanceFormData } from '~/models/search-bar';
export const searchBarActions = unionize({
SET_CURRENT_VIEW: ofType<string>(),
@@ -22,17 +23,6 @@ export const searchBarActions = unionize({
export type SearchBarActions = UnionOf<typeof searchBarActions>;
-export interface SearchBarAdvanceFormData {
- type?: GroupContentsResource;
- cluster?: string;
- project?: string;
- inTrash: boolean;
- dataFrom: string;
- dataTo: string;
- saveQuery: boolean;
- searchQuery: string;
-}
-
export const SEARCH_BAR_ADVANCE_FORM_NAME = 'searchBarAdvanceFormName';
export const goToView = (currentView: string) => searchBarActions.SET_CURRENT_VIEW(currentView);
diff --git a/src/views-components/form-fields/search-bar-form-fields.tsx b/src/views-components/form-fields/search-bar-form-fields.tsx
index 210affc..a6126ca 100644
--- a/src/views-components/form-fields/search-bar-form-fields.tsx
+++ b/src/views-components/form-fields/search-bar-form-fields.tsx
@@ -4,26 +4,36 @@
import * as React from "react";
import { Field } from 'redux-form';
-import { TextField } from "~/components/text-field/text-field";
+import { TextField, DataTextField } from "~/components/text-field/text-field";
import { CheckboxField } from '~/components/checkbox-field/checkbox-field';
+import { NativeSelectField } from '~/components/select-field/select-field';
+import { ResourceKind } from '~/models/resource';
+import { ClusterObjectType } from '~/models/search-bar';
export const SearchBarTypeField = () =>
<Field
name='type'
- component={TextField}
- label="Type"/>;
+ component={NativeSelectField}
+ items={[
+ { key: '', value: 'Any'},
+ { key: ResourceKind.COLLECTION, value: 'Collection'},
+ { key: ResourceKind.PROJECT, value: 'Project' },
+ { key: ResourceKind.PROCESS, value: 'Process' }
+ ]}/>;
export const SearchBarClusterField = () =>
<Field
name='cluster'
- component={TextField}
- label="Cluster name" />;
+ component={NativeSelectField}
+ items={[
+ { key: '', value: 'Any' },
+ { key: ClusterObjectType.INDIANAPOLIS, value: 'Indianapolis' },
+ { key: ClusterObjectType.KAISERAUGST, value: 'Kaiseraugst' },
+ { key: ClusterObjectType.PENZBERG, value: 'Penzberg' }
+ ]} />;
export const SearchBarProjectField = () =>
- <Field
- name='project'
- component={TextField}
- label="Project name" />;
+ <div>Box</div>;
export const SearchBarTrashField = () =>
<Field
@@ -33,15 +43,13 @@ export const SearchBarTrashField = () =>
export const SearchBarDataFromField = () =>
<Field
- name='dataFrom'
- component={TextField}
- label="From" />;
+ name='dateFrom'
+ component={DataTextField} />;
export const SearchBarDataToField = () =>
<Field
- name='dataTo'
- component={TextField}
- label="To" />;
+ name='dateTo'
+ component={DataTextField} />;
export const SearchBarKeyField = () =>
<Field
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 d96062e..4d9bd97 100644
--- a/src/views-components/search-bar/search-bar-advanced-view.tsx
+++ b/src/views-components/search-bar/search-bar-advanced-view.tsx
@@ -7,23 +7,22 @@ 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 { SearchBarAdvanceFormData } from '~/models/search-bar';
import {
SearchBarTypeField, SearchBarClusterField, SearchBarProjectField, SearchBarTrashField,
SearchBarDataFromField, SearchBarDataToField, SearchBarKeyField, SearchBarValueField,
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: {
@@ -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
}
});
@@ -82,16 +85,16 @@ export const SearchBarAdvancedView = compose(
withStyles(styles))(
({ classes, setView, handleSubmit, invalid, submitting, pristine }: 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,17 +116,17 @@ export const SearchBarAdvancedView = compose(
<CloseIcon />
</IconButton>
</Grid>
- <Grid container item xs={12} className={classes.container}>
+ <Grid container item xs={12} className={classes.container} spacing={16}>
<Grid item xs={2} className={classes.label}>Data modified</Grid>
- <Grid item xs={3}>
+ <Grid item xs={4}>
<SearchBarDataFromField />
</Grid>
- <Grid item xs={3}>
+ <Grid item xs={4}>
<SearchBarDataToField />
</Grid>
</Grid>
<Grid container item xs={12} className={classes.container}>
- <Grid container item xs={12}>
+ <Grid container item xs={12} spacing={16}>
<Grid item xs={2} className={classes.label}>Properties</Grid>
<Grid item xs={4}>
<SearchBarKeyField />
@@ -140,7 +143,7 @@ export const SearchBarAdvancedView = compose(
</Button>
</Grid>
</Grid>
- <Grid container item xs={12} justify="flex-start" alignItems="center">
+ <Grid container item xs={12} justify="flex-start" alignItems="center" spacing={16}>
<Grid item xs={2} className={classes.label} />
<Grid item xs={4}>
<SearchBarSaveSearchField />
diff --git a/src/views-components/search-bar/search-bar-view.tsx b/src/views-components/search-bar/search-bar-view.tsx
index 59fe410..d096771 100644
--- a/src/views-components/search-bar/search-bar-view.tsx
+++ b/src/views-components/search-bar/search-bar-view.tsx
@@ -21,7 +21,7 @@ import { SearchBarBasicView } from '~/views-components/search-bar/search-bar-bas
import { SearchBarAdvancedView } from '~/views-components/search-bar/search-bar-advanced-view';
import { SearchBarAutocompleteView, SearchBarAutocompleteViewDataProps } from '~/views-components/search-bar/search-bar-autocomplete-view';
import { ArvadosTheme } from '~/common/custom-theme';
-import { SearchBarAdvanceFormData } from '~/store/search-bar/search-bar-actions';
+import { SearchBarAdvanceFormData } from '~/models/search-bar';
type CssRules = 'container' | 'containerSearchViewOpened' | 'input' | 'view';
diff --git a/src/views-components/search-bar/search-bar.tsx b/src/views-components/search-bar/search-bar.tsx
index 8dcaaf8..0ebee77 100644
--- a/src/views-components/search-bar/search-bar.tsx
+++ b/src/views-components/search-bar/search-bar.tsx
@@ -16,7 +16,7 @@ import {
openSearchView
} from '~/store/search-bar/search-bar-actions';
import { SearchBarView } from '~/views-components/search-bar/search-bar-view';
-import { SearchBarAdvanceFormData } from '~/store/search-bar/search-bar-actions';
+import { SearchBarAdvanceFormData } from '~/models/search-bar';
const mapStateToProps = ({ searchBar }: RootState) => {
return {
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list