[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