From f5127724c5ca39a59a08ba20f843e530b0650be9 Mon Sep 17 00:00:00 2001 From: Janicki Artur Date: Fri, 12 Oct 2018 12:58:39 +0200 Subject: [PATCH] add native select field, data text field and search bar model Feature #13827 Arvados-DCO-1.1-Signed-off-by: Janicki Artur --- src/components/select-field/select-field.tsx | 58 +++++++++++++++++++ src/components/text-field/text-field.tsx | 20 ++++++- src/models/search-bar.ts | 22 +++++++ src/store/search-bar/search-bar-actions.ts | 12 +--- .../form-fields/search-bar-form-fields.tsx | 38 +++++++----- .../search-bar/search-bar-advanced-view.tsx | 31 +++++----- .../search-bar/search-bar-view.tsx | 2 +- .../search-bar/search-bar.tsx | 2 +- 8 files changed, 142 insertions(+), 43 deletions(-) create mode 100644 src/components/select-field/select-field.tsx create mode 100644 src/models/search-bar.ts diff --git a/src/components/select-field/select-field.tsx b/src/components/select-field/select-field.tsx new file mode 100644 index 0000000000..dda58c0830 --- /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 = (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 & { items: any[] }) => + + + + ); \ 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 4d8c012f9e..1bf51973d4 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; + +export const DataTextField = withStyles(styles) + ((props: DataTextFieldProps) => + + ); \ 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 0000000000..9fadc2af4a --- /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 59770cc608..40528d215e 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(), @@ -22,17 +23,6 @@ export const searchBarActions = unionize({ export type SearchBarActions = UnionOf; -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 210affcfdc..a6126ca56f 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 = () => ; + component={NativeSelectField} + items={[ + { key: '', value: 'Any'}, + { key: ResourceKind.COLLECTION, value: 'Collection'}, + { key: ResourceKind.PROJECT, value: 'Project' }, + { key: ResourceKind.PROCESS, value: 'Process' } + ]}/>; export const SearchBarClusterField = () => ; + component={NativeSelectField} + items={[ + { key: '', value: 'Any' }, + { key: ClusterObjectType.INDIANAPOLIS, value: 'Indianapolis' }, + { key: ClusterObjectType.KAISERAUGST, value: 'Kaiseraugst' }, + { key: ClusterObjectType.PENZBERG, value: 'Penzberg' } + ]} />; export const SearchBarProjectField = () => - ; +
Box
; export const SearchBarTrashField = () => export const SearchBarDataFromField = () => ; + name='dateFrom' + component={DataTextField} />; export const SearchBarDataToField = () => ; + name='dateTo' + component={DataTextField} />; export const SearchBarKeyField = () => = (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 = (theme: ArvadosTheme) => ({ alignSelf: 'center' }, buttonWrapper: { + paddingRight: '14px', paddingTop: '14px', position: 'relative', }, @@ -54,6 +54,9 @@ const styles: StyleRulesCallback = (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) => -
+ - + Type - + Cluster @@ -113,17 +116,17 @@ export const SearchBarAdvancedView = compose( - + Data modified - + - + - + Properties @@ -140,7 +143,7 @@ export const SearchBarAdvancedView = compose( - + diff --git a/src/views-components/search-bar/search-bar-view.tsx b/src/views-components/search-bar/search-bar-view.tsx index 59fe4104fc..d096771217 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 8dcaaf842d..0ebee777a6 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 { -- 2.30.2