[ARVADOS-WORKBENCH2] created: 1.2.0-663-gcfc5eeb
Git user
git at public.curoverse.com
Mon Oct 15 14:43:31 EDT 2018
at cfc5eebd666412870df195559adedeefe4178248 (commit)
commit cfc5eebd666412870df195559adedeefe4178248
Author: Janicki Artur <artur.janicki at contractors.roche.com>
Date: Mon Oct 15 20:42:41 2018 +0200
init form properties and project tree
Feature #13827
Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki at contractors.roche.com>
diff --git a/src/index.tsx b/src/index.tsx
index 62557f6..c8dba0d 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 9fadc2a..c118fd5 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 f752785..da68893 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<string>(),
@@ -25,6 +27,8 @@ export type SearchBarActions = UnionOf<typeof searchBarActions>;
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<any>(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 4a7c4b1..4159775 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 = () =>
<Field
@@ -33,7 +35,14 @@ export const SearchBarClusterField = () =>
]} />;
export const SearchBarProjectField = () =>
- <div>Box</div>;
+ <Field
+ name='projectUuid'
+ component={ProjectsPicker} />;
+
+const ProjectsPicker = (props: WrappedFieldProps) =>
+ <div style={{ height: '100px', display: 'flex', flexDirection: 'column', overflow: 'overlay' }}>
+ <HomeTreePicker pickerId={SEARCH_BAR_ADVANCE_FORM_PICKER_ID} />
+ </div>;
export const SearchBarTrashField = () =>
<Field
@@ -53,13 +62,13 @@ export const SearchBarDataToField = () =>
export const SearchBarKeyField = () =>
<Field
- name='key'
+ name='propertyKey'
component={TextField}
label="Key" />;
export const SearchBarValueField = () =>
<Field
- name='value'
+ name='propertyValue'
component={TextField}
label="Value" />;
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 0000000..5e2acb7
--- /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<CssRules> = (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<CssRules>;
+
+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<any>(changeAdvanceFormProperty('properties', propertyValues));
+ },
+ addProp: (propertyValues: PropertyValues) => {
+ dispatch<any>(updateAdvanceFormProperties(propertyValues));
+ dispatch<any>(changeAdvanceFormProperty('propertyKey'));
+ dispatch<any>(changeAdvanceFormProperty('propertyValue'));
+ },
+ getAllFields: (fields: any) => {
+ return fields.getAll() || [];
+ }
+});
+
+export const SearchBarAdvancedPropertiesView =
+ connect(mapStateToProps, mapDispatchToProps)
+
+ (withStyles(styles)(
+ ({ classes, fields, propertyValues, setProps, addProp, getAllFields }: SearchBarAdvancedPropertiesViewProps) =>
+ <Grid container item xs={12} spacing={16}>
+ <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} onClick={() => addProp(propertyValues)}
+ color="primary"
+ size='small'
+ variant="contained">
+ Add
+ </Button>
+ </Grid>
+ <Grid item xs={2} />
+ <Grid container item xs={10} spacing={8}>
+ <Chips values={getAllFields(fields)}
+ deletable
+ onChange={setProps}
+ getLabel={(field: PropertyValues) => `${field.propertyKey}: ${field.propertyValue}`} />
+ </Grid>
+ </Grid>
+ )
+);
\ 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 4d9bd97..4ffcbcc 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<SearchBarAdvanceFormData, SearchBarAdvancedViewActionProps>({
form: SEARCH_BAR_ADVANCE_FORM_NAME,
onSubmit: (data: SearchBarAdvanceFormData, dispatch: Dispatch) => {
+ console.log('data: ', data);
dispatch<any>(saveQuery(data));
dispatch(reset(SEARCH_BAR_ADVANCE_FORM_NAME));
}
}),
withStyles(styles))(
- ({ classes, setView, handleSubmit, invalid, submitting, pristine }: SearchBarAdvancedViewProps) =>
+ ({ classes, setView, handleSubmit, submitting }: SearchBarAdvancedViewProps) =>
<Paper className={classes.searchView}>
<form onSubmit={handleSubmit}>
<Grid container direction="column" justify="flex-start" alignItems="flex-start">
@@ -126,23 +128,7 @@ export const SearchBarAdvancedView = compose(
</Grid>
</Grid>
<Grid container item xs={12} className={classes.container}>
- <Grid container item xs={12} spacing={16}>
- <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>
+ <FieldArray name="properties" component={SearchBarAdvancedPropertiesView} />
<Grid container item xs={12} justify="flex-start" alignItems="center" spacing={16}>
<Grid item xs={2} className={classes.label} />
<Grid item xs={4}>
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list