[ARVADOS-WORKBENCH2] created: 1.3.0-130-gc4106363

Git user git at public.curoverse.com
Thu Dec 20 03:32:21 EST 2018


        at  c4106363643160b30bb924b72f5b6ad95e4ba2ae (commit)


commit c4106363643160b30bb924b72f5b6ad95e4ba2ae
Author: Janicki Artur <artur.janicki at contractors.roche.com>
Date:   Thu Dec 20 09:32:01 2018 +0100

    add properties to create project form
    
    Feature #14248_assigning_properties_to_projects_during_create
    
    Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki at contractors.roche.com>

diff --git a/src/models/group.ts b/src/models/group.ts
index e2d0367a..e13fbcbf 100644
--- a/src/models/group.ts
+++ b/src/models/group.ts
@@ -9,7 +9,7 @@ export interface GroupResource extends TrashableResource {
     name: string;
     groupClass: GroupClass | null;
     description: string;
-    properties: string;
+    properties: any;
     writeableBy: string[];
 }
 
diff --git a/src/store/projects/project-create-actions.ts b/src/store/projects/project-create-actions.ts
index d226048b..d87046e2 100644
--- a/src/store/projects/project-create-actions.ts
+++ b/src/store/projects/project-create-actions.ts
@@ -3,21 +3,24 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import { Dispatch } from "redux";
-import { reset, startSubmit, stopSubmit, initialize, FormErrors } from 'redux-form';
+import { reset, startSubmit, stopSubmit, initialize, FormErrors, formValueSelector, change, arrayPush } from 'redux-form';
 import { RootState } from '~/store/store';
 import { dialogActions } from "~/store/dialog/dialog-actions";
 import { getCommonResourceServiceError, CommonResourceServiceError } from '~/services/common-service/common-resource-service';
 import { ProjectResource } from '~/models/project';
 import { ServiceRepository } from '~/services/services';
 import { matchProjectRoute, matchRunProcessRoute } from '~/routes/routes';
+import { ResourcePropertiesFormData } from '~/views-components/resource-properties-form/resource-properties-form';
 
 export interface ProjectCreateFormDialogData {
     ownerUuid: string;
     name: string;
     description: string;
+    properties: any;
 }
 
 export const PROJECT_CREATE_FORM_NAME = 'projectCreateFormName';
+export const PROJECT_CREATE_PROPERTIES_FORM_NAME = 'projectCreatePropertiesFormName';
 
 export const isProjectOrRunProcessRoute = ({ router }: RootState) => {
     const pathname = router.location ? router.location.pathname : '';
@@ -63,3 +66,15 @@ export const createProject = (project: Partial<ProjectResource>) =>
             return undefined;
         }
     };
+
+export const addPropertyToCreateProjectForm = (data: ResourcePropertiesFormData) =>
+    (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
+        console.log('addPropertyToCreateProjectForm: ', data);
+        dispatch(change(PROJECT_CREATE_FORM_NAME, 'properties',  data));
+        // dispatch(arrayPush(PROJECT_CREATE_FORM_NAME, 'properties', data));
+    };
+
+export const removePropertyFromCreateProjectForm = (key: string) =>
+    (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
+        console.log('removePropertyFromCreateProjectForm: ', key);
+    };
\ No newline at end of file
diff --git a/src/views-components/dialog-create/dialog-project-create.tsx b/src/views-components/dialog-create/dialog-project-create.tsx
index 3075d96e..481957d1 100644
--- a/src/views-components/dialog-create/dialog-project-create.tsx
+++ b/src/views-components/dialog-create/dialog-project-create.tsx
@@ -8,10 +8,12 @@ import { WithDialogProps } from '~/store/dialog/with-dialog';
 import { ProjectCreateFormDialogData } from '~/store/projects/project-create-actions';
 import { FormDialog } from '~/components/form-dialog/form-dialog';
 import { ProjectNameField, ProjectDescriptionField } from '~/views-components/form-fields/project-form-fields';
+import { CreateProjectPropertiesForm } from '~/views-components/project-properties/create-project-properties-form';
+import { CreateProjectPropertiesList } from '~/views-components/project-properties/create-project-properties-list';
 
-type DialogCollectionProps = WithDialogProps<{}> & InjectedFormProps<ProjectCreateFormDialogData>;
+type DialogProjectProps = WithDialogProps<{}> & InjectedFormProps<ProjectCreateFormDialogData>;
 
-export const DialogProjectCreate = (props: DialogCollectionProps) =>
+export const DialogProjectCreate = (props: DialogProjectProps) =>
     <FormDialog
         dialogTitle='New project'
         formFields={ProjectAddFields}
@@ -19,7 +21,9 @@ export const DialogProjectCreate = (props: DialogCollectionProps) =>
         {...props}
     />;
 
-const ProjectAddFields = () => <span>
+const ProjectAddFields = (props: any) => <span>
     <ProjectNameField />
     <ProjectDescriptionField />
+    <CreateProjectPropertiesForm />
+    <CreateProjectPropertiesList />
 </span>;
diff --git a/src/views-components/project-properties/create-project-properties-form.tsx b/src/views-components/project-properties/create-project-properties-form.tsx
new file mode 100644
index 00000000..385afff7
--- /dev/null
+++ b/src/views-components/project-properties/create-project-properties-form.tsx
@@ -0,0 +1,54 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { reduxForm, reset, InjectedFormProps } from 'redux-form';
+import { PROJECT_CREATE_PROPERTIES_FORM_NAME, addPropertyToCreateProjectForm } from '~/store/projects/project-create-actions';
+import { ResourcePropertiesFormData } from '~/views-components/resource-properties-form/resource-properties-form';
+import { StyleRulesCallback, WithStyles, withStyles, Grid } from '@material-ui/core';
+import { ArvadosTheme } from '~/common/custom-theme';
+import { PropertyKeyField } from '~/views-components/resource-properties-form/property-key-field';
+import { PropertyValueField } from '~/views-components/resource-properties-form/property-value-field';
+import { Button } from '~/views-components/resource-properties-form/resource-properties-form';
+
+type CssRules = 'root';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    root: {
+        paddingTop: theme.spacing.unit,
+        margin: 0
+    }
+});
+
+type CreateProjectPropertiesFormProps = InjectedFormProps<ResourcePropertiesFormData> & WithStyles<CssRules>;
+
+const Form = withStyles(styles)(
+    ({ handleSubmit, submitting, invalid, classes }: CreateProjectPropertiesFormProps) =>
+        <Grid container spacing={16} className={classes.root}>
+            <Grid item xs={5}>
+                <PropertyKeyField />
+            </Grid>
+            <Grid item xs={5}>
+                <PropertyValueField />
+            </Grid>
+            <Grid item xs={2}>
+                <Button
+                    disabled={invalid}
+                    loading={submitting}
+                    color='primary'
+                    variant='contained'
+                    onClick={handleSubmit}>
+                    Add
+                </Button>
+            </Grid>
+        </Grid>
+);
+
+export const CreateProjectPropertiesForm = reduxForm<ResourcePropertiesFormData>({
+    form: PROJECT_CREATE_PROPERTIES_FORM_NAME,
+    onSubmit: (data, dispatch) => {
+        dispatch(addPropertyToCreateProjectForm(data));
+        dispatch(reset(PROJECT_CREATE_PROPERTIES_FORM_NAME));
+    }
+})(Form);
\ No newline at end of file
diff --git a/src/views-components/project-properties/create-project-properties-list.tsx b/src/views-components/project-properties/create-project-properties-list.tsx
new file mode 100644
index 00000000..942de8a8
--- /dev/null
+++ b/src/views-components/project-properties/create-project-properties-list.tsx
@@ -0,0 +1,55 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { formValueSelector } from 'redux-form';
+import { withStyles, StyleRulesCallback, WithStyles, Chip } from '@material-ui/core';
+import { RootState } from '~/store/store';
+import { removePropertyFromCreateProjectForm, PROJECT_CREATE_FORM_NAME } from '~/store/projects/project-create-actions';
+import { ArvadosTheme } from '~/common/custom-theme';
+
+type CssRules = 'tag';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    tag: {
+        marginRight: theme.spacing.unit,
+        marginBottom: theme.spacing.unit
+    }
+});
+
+interface CreateProjectPropertiesListDataProps {
+    properties: any;
+}
+
+interface CreateProjectPropertiesListActionProps {
+    handleDelete: (key: string) => void;
+}
+
+const selector = formValueSelector(PROJECT_CREATE_FORM_NAME);
+const mapStateToProps = (state: RootState): CreateProjectPropertiesListDataProps => {
+    const properties = selector(state, 'properties');
+    return { properties };
+};
+
+const mapDispatchToProps = (dispatch: Dispatch): CreateProjectPropertiesListActionProps => ({
+    handleDelete: (key: string) => dispatch<any>(removePropertyFromCreateProjectForm(key))
+});
+
+type CreateProjectPropertiesListProps = CreateProjectPropertiesListDataProps & 
+    CreateProjectPropertiesListActionProps & WithStyles<CssRules>;
+
+export const CreateProjectPropertiesList = connect(mapStateToProps, mapDispatchToProps)(
+    withStyles(styles)(
+        ({ classes, handleDelete, properties }: CreateProjectPropertiesListProps) =>
+            <div>
+                { properties &&
+                    Object.keys(properties).map(k => {
+                        return <Chip key={k} className={classes.tag}
+                            onDelete={() => handleDelete(k)}
+                            label={`${k}: ${properties[k]}`} />;
+                })}
+            </div>
+        ));
\ No newline at end of file
diff --git a/src/views-components/resource-properties-form/resource-properties-form.tsx b/src/views-components/resource-properties-form/resource-properties-form.tsx
index a62b3d15..6c2e025a 100644
--- a/src/views-components/resource-properties-form/resource-properties-form.tsx
+++ b/src/views-components/resource-properties-form/resource-properties-form.tsx
@@ -39,6 +39,6 @@ export const ResourcePropertiesForm = ({ handleSubmit, submitting, invalid, clas
         </Grid>
     </form>;
 
-const Button = withStyles(theme => ({
+export const Button = withStyles(theme => ({
     root: { marginTop: theme.spacing.unit }
 }))(ProgressButton);

-----------------------------------------------------------------------


hooks/post-receive
-- 




More information about the arvados-commits mailing list