[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