From cfc5eebd666412870df195559adedeefe4178248 Mon Sep 17 00:00:00 2001 From: Janicki Artur Date: Mon, 15 Oct 2018 20:42:41 +0200 Subject: [PATCH] init form properties and project tree Feature #13827 Arvados-DCO-1.1-Signed-off-by: Janicki Artur --- src/index.tsx | 2 + src/models/search-bar.ts | 10 +- src/store/search-bar/search-bar-actions.ts | 22 +++- .../form-fields/search-bar-form-fields.tsx | 17 ++- .../search-bar-advanced-properties-view.tsx | 106 ++++++++++++++++++ .../search-bar/search-bar-advanced-view.tsx | 26 +---- 6 files changed, 155 insertions(+), 28 deletions(-) create mode 100644 src/views-components/search-bar/search-bar-advanced-properties-view.tsx diff --git a/src/index.tsx b/src/index.tsx index 62557f61..c8dba0d2 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -46,6 +46,7 @@ import { setBuildInfo } from '~/store/app-info/app-info-actions'; import { getBuildInfo } from '~/common/app-info'; import { DragDropContextProvider } from 'react-dnd'; import HTML5Backend from 'react-dnd-html5-backend'; +import { initAdvanceFormProjectsTree } from '~/store/search-bar/search-bar-actions'; console.log(`Starting arvados [${getBuildInfo()}]`); @@ -114,6 +115,7 @@ const initListener = (history: History, store: RootStore, services: ServiceRepos initWebSocket(config, services.authService, store); await store.dispatch(loadWorkbench()); addRouteChangeHandlers(history, store); + store.dispatch(initAdvanceFormProjectsTree()); } }; }; diff --git a/src/models/search-bar.ts b/src/models/search-bar.ts index 9fadc2af..c118fd57 100644 --- a/src/models/search-bar.ts +++ b/src/models/search-bar.ts @@ -4,15 +4,21 @@ import { ResourceKind } from '~/models/resource'; -export interface SearchBarAdvanceFormData { +export type SearchBarAdvanceFormData = { type?: ResourceKind; cluster?: ClusterObjectType; - project?: string; + projectUuid?: string; inTrash: boolean; dateFrom: string; dateTo: string; saveQuery: boolean; searchQuery: string; + properties: PropertyValues[]; +} & PropertyValues; + +export interface PropertyValues { + propertyKey: string; + propertyValue: string; } export enum ClusterObjectType { diff --git a/src/store/search-bar/search-bar-actions.ts b/src/store/search-bar/search-bar-actions.ts index f7527852..da688935 100644 --- a/src/store/search-bar/search-bar-actions.ts +++ b/src/store/search-bar/search-bar-actions.ts @@ -5,12 +5,14 @@ import { unionize, ofType, UnionOf } from "~/common/unionize"; import { GroupContentsResource, GroupContentsResourcePrefix } from '~/services/groups-service/groups-service'; import { Dispatch } from 'redux'; +import { change, arrayPush } from 'redux-form'; import { RootState } from '~/store/store'; +import { initUserProject } from '~/store/tree-picker/tree-picker-actions'; 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'; +import { SearchBarAdvanceFormData, PropertyValues } from '~/models/search-bar'; export const searchBarActions = unionize({ SET_CURRENT_VIEW: ofType(), @@ -25,6 +27,8 @@ export type SearchBarActions = UnionOf; export const SEARCH_BAR_ADVANCE_FORM_NAME = 'searchBarAdvanceFormName'; +export const SEARCH_BAR_ADVANCE_FORM_PICKER_ID = 'searchBarAdvanceFormPickerId'; + export const goToView = (currentView: string) => searchBarActions.SET_CURRENT_VIEW(currentView); export const saveRecentQuery = (query: string) => @@ -69,7 +73,6 @@ export const closeSearchView = () => } }; - export const searchData = (searchValue: string) => async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => { dispatch(searchBarActions.SET_SEARCH_VALUE(searchValue)); @@ -94,3 +97,18 @@ const getFilters = (filterName: string, searchValue: string): string => { .addEqual('groupClass', GroupClass.PROJECT, GroupContentsResourcePrefix.PROJECT) .getFilters(); }; + +export const initAdvanceFormProjectsTree = () => + async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => { + dispatch(initUserProject(SEARCH_BAR_ADVANCE_FORM_PICKER_ID)); + }; + +export const changeAdvanceFormProperty = (property: string, value: PropertyValues[] | string = '') => + async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => { + dispatch(change(SEARCH_BAR_ADVANCE_FORM_NAME, property, value)); + }; + +export const updateAdvanceFormProperties = (propertyValues: PropertyValues) => + async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => { + dispatch(arrayPush(SEARCH_BAR_ADVANCE_FORM_NAME, 'properties', propertyValues)); + }; \ No newline at end of file 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 4a7c4b11..4159775b 100644 --- a/src/views-components/form-fields/search-bar-form-fields.tsx +++ b/src/views-components/form-fields/search-bar-form-fields.tsx @@ -3,12 +3,14 @@ // SPDX-License-Identifier: AGPL-3.0 import * as React from "react"; -import { Field } from 'redux-form'; +import { Field, WrappedFieldProps } from 'redux-form'; import { TextField, DateTextField } 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'; +import { HomeTreePicker } from '~/views-components/projects-tree-picker/home-tree-picker'; +import { SEARCH_BAR_ADVANCE_FORM_PICKER_ID } from '~/store/search-bar/search-bar-actions'; export const SearchBarTypeField = () => ]} />; export const SearchBarProjectField = () => -
Box
; + ; + +const ProjectsPicker = (props: WrappedFieldProps) => +
+ +
; export const SearchBarTrashField = () => export const SearchBarKeyField = () => ; export const SearchBarValueField = () => ; diff --git a/src/views-components/search-bar/search-bar-advanced-properties-view.tsx b/src/views-components/search-bar/search-bar-advanced-properties-view.tsx new file mode 100644 index 00000000..5e2acb75 --- /dev/null +++ b/src/views-components/search-bar/search-bar-advanced-properties-view.tsx @@ -0,0 +1,106 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import * as React from 'react'; +import { Dispatch } from 'redux'; +import { connect } from 'react-redux'; +import { InjectedFormProps, formValueSelector } from 'redux-form'; +import { Grid, withStyles, StyleRulesCallback, WithStyles, Button } from '@material-ui/core'; +import { RootState } from '~/store/store'; +import { + SEARCH_BAR_ADVANCE_FORM_NAME, + changeAdvanceFormProperty, + updateAdvanceFormProperties +} from '~/store/search-bar/search-bar-actions'; +import { PropertyValues } from '~/models/search-bar'; +import { ArvadosTheme } from '~/common/custom-theme'; +import { SearchBarKeyField, SearchBarValueField } from '~/views-components/form-fields/search-bar-form-fields'; +import { Chips } from '~/components/chips/chips'; + +type CssRules = 'root' | 'label' | 'button'; + +const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ + root: { + + }, + label: { + color: theme.palette.grey["500"], + fontSize: '0.8125rem', + alignSelf: 'center' + }, + button: { + boxShadow: 'none' + } +}); + +interface SearchBarAdvancedPropertiesViewDataProps { + submitting: boolean; + invalid: boolean; + pristine: boolean; + propertyValues: PropertyValues; + fields: PropertyValues[]; +} + +interface SearchBarAdvancedPropertiesViewActionProps { + setProps: () => void; + addProp: (propertyValues: PropertyValues) => void; + getAllFields: (propertyValues: PropertyValues[]) => PropertyValues[] | []; +} + +type SearchBarAdvancedPropertiesViewProps = SearchBarAdvancedPropertiesViewDataProps + & SearchBarAdvancedPropertiesViewActionProps + & InjectedFormProps & WithStyles; + +const selector = formValueSelector(SEARCH_BAR_ADVANCE_FORM_NAME); +const mapStateToProps = (state: RootState) => { + return { + propertyValues: selector(state, 'propertyKey', 'propertyValue') + }; +}; + +const mapDispatchToProps = (dispatch: Dispatch) => ({ + setProps: (propertyValues: PropertyValues[]) => { + dispatch(changeAdvanceFormProperty('properties', propertyValues)); + }, + addProp: (propertyValues: PropertyValues) => { + dispatch(updateAdvanceFormProperties(propertyValues)); + dispatch(changeAdvanceFormProperty('propertyKey')); + dispatch(changeAdvanceFormProperty('propertyValue')); + }, + getAllFields: (fields: any) => { + return fields.getAll() || []; + } +}); + +export const SearchBarAdvancedPropertiesView = + connect(mapStateToProps, mapDispatchToProps) + + (withStyles(styles)( + ({ classes, fields, propertyValues, setProps, addProp, getAllFields }: SearchBarAdvancedPropertiesViewProps) => + + Properties + + + + + + + + + + + + `${field.propertyKey}: ${field.propertyValue}`} /> + + + ) +); \ 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 4d9bd97b..4ffcbccd 100644 --- a/src/views-components/search-bar/search-bar-advanced-view.tsx +++ b/src/views-components/search-bar/search-bar-advanced-view.tsx @@ -3,7 +3,7 @@ // SPDX-License-Identifier: AGPL-3.0 import * as React from 'react'; -import { reduxForm, reset, InjectedFormProps } from 'redux-form'; +import { reduxForm, reset, InjectedFormProps, FieldArray } 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'; @@ -11,9 +11,10 @@ import { SEARCH_BAR_ADVANCE_FORM_NAME, saveQuery } from '~/store/search-bar/sear import { ArvadosTheme } from '~/common/custom-theme'; import { CloseIcon } from '~/components/icon/icon'; import { SearchBarAdvanceFormData } from '~/models/search-bar'; +import { SearchBarAdvancedPropertiesView } from './search-bar-advanced-properties-view'; import { SearchBarTypeField, SearchBarClusterField, SearchBarProjectField, SearchBarTrashField, - SearchBarDataFromField, SearchBarDataToField, SearchBarKeyField, SearchBarValueField, + SearchBarDataFromField, SearchBarDataToField, SearchBarSaveSearchField, SearchBarQuerySearchField } from '~/views-components/form-fields/search-bar-form-fields'; @@ -78,12 +79,13 @@ export const SearchBarAdvancedView = compose( reduxForm({ form: SEARCH_BAR_ADVANCE_FORM_NAME, onSubmit: (data: SearchBarAdvanceFormData, dispatch: Dispatch) => { + console.log('data: ', data); dispatch(saveQuery(data)); dispatch(reset(SEARCH_BAR_ADVANCE_FORM_NAME)); } }), withStyles(styles))( - ({ classes, setView, handleSubmit, invalid, submitting, pristine }: SearchBarAdvancedViewProps) => + ({ classes, setView, handleSubmit, submitting }: SearchBarAdvancedViewProps) =>
@@ -126,23 +128,7 @@ export const SearchBarAdvancedView = compose( - - Properties - - - - - - - - - - + -- 2.30.2