src/views-components/project-properties/create-project-properties-form.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { reduxForm, reset, InjectedFormProps } from 'redux-form';
   7 import { PROJECT_CREATE_PROPERTIES_FORM_NAME, addPropertyToCreateProjectForm } from '~/store/projects/project-create-actions';
   8 import { ResourcePropertiesFormData } from '~/views-components/resource-properties-form/resource-properties-form';
   9 import { StyleRulesCallback, WithStyles, withStyles, Grid } from '@material-ui/core';
  10 import { ArvadosTheme } from '~/common/custom-theme';
  11 import { PropertyKeyField } from '~/views-components/resource-properties-form/property-key-field';
  12 import { PropertyValueField } from '~/views-components/resource-properties-form/property-value-field';
  13 import { Button } from '~/views-components/resource-properties-form/resource-properties-form';
  14
  15 type CssRules = 'root';
  16
  17 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  18     root: {
  19         paddingTop: theme.spacing.unit,
  20         margin: 0
  21     }
  22 });
  23
  24 type CreateProjectPropertiesFormProps = InjectedFormProps<ResourcePropertiesFormData> & WithStyles<CssRules>;
  25
  26 const Form = withStyles(styles)(
  27     ({ handleSubmit, submitting, invalid, classes }: CreateProjectPropertiesFormProps) =>
  28         <Grid container spacing={16} className={classes.root}>
  29             <Grid item xs={5}>
  30                 <PropertyKeyField />
  31             </Grid>
  32             <Grid item xs={5}>
  33                 <PropertyValueField />
  34             </Grid>
  35             <Grid item xs={2}>
  36                 <Button
  37                     disabled={invalid}
  38                     loading={submitting}
  39                     color='primary'
  40                     variant='contained'
  41                     onClick={handleSubmit}>
  42                     Add
  43                 </Button>
  44             </Grid>
  45         </Grid>
  46 );
  47
  48 export const CreateProjectPropertiesForm = reduxForm<ResourcePropertiesFormData>({
  49     form: PROJECT_CREATE_PROPERTIES_FORM_NAME,
  50     onSubmit: (data, dispatch) => {
  51         dispatch(addPropertyToCreateProjectForm(data));
  52         dispatch(reset(PROJECT_CREATE_PROPERTIES_FORM_NAME));
  53     }
  54 })(Form);