15067: Assign key/value ids to hidden field so they're available on submit.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <ldipentima@veritasgenetics.com>

diff --git a/src/views-components/resource-properties-form/property-field-common.tsx b/src/views-components/resource-properties-form/property-field-common.tsx
index b431905d5fc013cbb3e24429497d6ba95d36c992..a0f5800f17e8952f4615890e24d91ae6f3351fae 100644 (file)
--- a/src/views-components/resource-properties-form/property-field-common.tsx
+++ b/src/views-components/resource-properties-form/property-field-common.tsx
@@ -32,19 +32,12 @@ export const handleBlur = ({ onBlur, value }: WrappedFieldInputProps) =>
     () =>
         onBlur(value);
 
-export const handleSelect = ({ onChange }: WrappedFieldInputProps) => {
-    return (item:PropFieldSuggestion) => {
-        onChange(item.label);
-    };
-};
-
 export const buildProps = ({ input, meta }: WrappedFieldProps) => {
     return {
         value: input.value,
         onChange: input.onChange,
         onBlur: handleBlur(input),
         items: ITEMS_PLACEHOLDER,
-        onSelect: handleSelect(input),
         renderSuggestion: (item:PropFieldSuggestion) => item.label,
         error: hasError(meta),
         helperText: getErrorMsg(meta),

diff --git a/src/views-components/resource-properties-form/property-key-field.tsx b/src/views-components/resource-properties-form/property-key-field.tsx
index e040d32f8963af98fd18b4f9b583c04f0cbafc91..67e27ce06fec1a743b426543b86e0713bf2dcc5c 100644 (file)
--- a/src/views-components/resource-properties-form/property-key-field.tsx
+++ b/src/views-components/resource-properties-form/property-key-field.tsx
@@ -3,27 +3,37 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { WrappedFieldProps, Field } from 'redux-form';
+import { change, WrappedFieldProps, WrappedFieldMetaProps, WrappedFieldInputProps, Field } from 'redux-form';
 import { memoize } from 'lodash';
 import { Autocomplete } from '~/components/autocomplete/autocomplete';
 import { Vocabulary } from '~/models/vocabulary';
-import { connectVocabulary, VocabularyProp, buildProps } from '~/views-components/resource-properties-form/property-field-common';
+import { connectVocabulary, VocabularyProp, buildProps, PropFieldSuggestion } from '~/views-components/resource-properties-form/property-field-common';
 import { TAG_KEY_VALIDATION } from '~/validators/validators';
+import { COLLECTION_TAG_FORM_NAME } from '~/store/collection-panel/collection-panel-action';
 
 export const PROPERTY_KEY_FIELD_NAME = 'key';
+export const PROPERTY_KEY_FIELD_ID = 'keyID';
 
 export const PropertyKeyField = connectVocabulary(
     ({ vocabulary }: VocabularyProp) =>
-        <Field
-            name={PROPERTY_KEY_FIELD_NAME}
-            component={PropertyKeyInput}
-            vocabulary={vocabulary}
-            validate={getValidation(vocabulary)} />);
+        <div>
+            <Field
+                name={PROPERTY_KEY_FIELD_NAME}
+                component={PropertyKeyInput}
+                vocabulary={vocabulary}
+                validate={getValidation(vocabulary)} />
+            <Field
+                name={PROPERTY_KEY_FIELD_ID}
+                type='hidden'
+                component='input' />
+        </div>
+);
 
 export const PropertyKeyInput = ({ vocabulary, ...props }: WrappedFieldProps & VocabularyProp) =>
     <Autocomplete
         label='Key'
         suggestions={getSuggestions(props.input.value, vocabulary)}
+        onSelect={handleSelect(props.input, props.meta)}
         {...buildProps(props)}
     />;
 
@@ -51,3 +61,12 @@ const getTagsList = ({ tags }: Vocabulary) => {
         : [];
     return ret;
 };
+
+const handleSelect = (
+    { onChange }: WrappedFieldInputProps,
+    { dispatch }: WrappedFieldMetaProps) => {
+        return (item:PropFieldSuggestion) => {
+            onChange(item.label);
+            dispatch(change(COLLECTION_TAG_FORM_NAME, PROPERTY_KEY_FIELD_ID, item.id));
+    };
+};

diff --git a/src/views-components/resource-properties-form/property-value-field.tsx b/src/views-components/resource-properties-form/property-value-field.tsx
index 5e1045663205c0c1f911cc5edce6c513c08ae72e..b93cb514da40dbd3ace3065078250e2451e73226 100644 (file)
--- a/src/views-components/resource-properties-form/property-value-field.tsx
+++ b/src/views-components/resource-properties-form/property-value-field.tsx
@@ -3,13 +3,14 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { WrappedFieldProps, Field, formValues } from 'redux-form';
+import { change, WrappedFieldProps, WrappedFieldMetaProps, WrappedFieldInputProps, Field, formValues } from 'redux-form';
 import { compose } from 'redux';
 import { Autocomplete } from '~/components/autocomplete/autocomplete';
 import { Vocabulary } from '~/models/vocabulary';
 import { PROPERTY_KEY_FIELD_NAME } from '~/views-components/resource-properties-form/property-key-field';
-import { VocabularyProp, connectVocabulary, buildProps } from '~/views-components/resource-properties-form/property-field-common';
+import { VocabularyProp, connectVocabulary, buildProps, PropFieldSuggestion } from '~/views-components/resource-properties-form/property-field-common';
 import { TAG_VALUE_VALIDATION } from '~/validators/validators';
+import { COLLECTION_TAG_FORM_NAME } from '~/store/collection-panel/collection-panel-action';
 
 interface PropertyKeyProp {
     propertyKey: string;
@@ -18,22 +19,31 @@ interface PropertyKeyProp {
 export type PropertyValueFieldProps = VocabularyProp & PropertyKeyProp;
 
 export const PROPERTY_VALUE_FIELD_NAME = 'value';
+export const PROPERTY_VALUE_FIELD_ID = 'valueID';
 
 export const PropertyValueField = compose(
     connectVocabulary,
     formValues({ propertyKey: PROPERTY_KEY_FIELD_NAME })
 )(
     (props: PropertyValueFieldProps) =>
-        <Field
-            name={PROPERTY_VALUE_FIELD_NAME}
-            component={PropertyValueInput}
-            validate={getValidation(props)}
-            {...props} />);
+        <div>
+            <Field
+                name={PROPERTY_VALUE_FIELD_NAME}
+                component={PropertyValueInput}
+                validate={getValidation(props)}
+                {...props} />
+            <Field
+                name={PROPERTY_VALUE_FIELD_ID}
+                type='hidden'
+                component='input' />
+        </div>
+);
 
 export const PropertyValueInput = ({ vocabulary, propertyKey, ...props }: WrappedFieldProps & PropertyValueFieldProps) =>
     <Autocomplete
         label='Value'
         suggestions={getSuggestions(props.input.value, propertyKey, vocabulary)}
+        onSelect={handleSelect(props.input, props.meta)}
         {...buildProps(props)}
     />;
 
@@ -71,3 +81,12 @@ const getTagValues = (tagKey: string, vocabulary: Vocabulary) => {
         : [];
     return ret;
 };
+
+const handleSelect = (
+    { onChange }: WrappedFieldInputProps,
+    { dispatch }: WrappedFieldMetaProps) => {
+        return (item:PropFieldSuggestion) => {
+            onChange(item.label);
+            dispatch(change(COLLECTION_TAG_FORM_NAME, PROPERTY_VALUE_FIELD_ID, item.id));
+    };
+};

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 6c2e025a0834f85d4c816f492ec717f6f0d164fb..db40e4a7e8718e609e7d13814bf9e6ac638a6946 100644 (file)
--- a/src/views-components/resource-properties-form/resource-properties-form.tsx
+++ b/src/views-components/resource-properties-form/resource-properties-form.tsx
@@ -5,14 +5,16 @@
 import * as React from 'react';
 import { InjectedFormProps } from 'redux-form';
 import { Grid, withStyles, WithStyles } from '@material-ui/core';
-import { PropertyKeyField, PROPERTY_KEY_FIELD_NAME } from './property-key-field';
-import { PropertyValueField, PROPERTY_VALUE_FIELD_NAME } from './property-value-field';
+import { PropertyKeyField, PROPERTY_KEY_FIELD_NAME, PROPERTY_KEY_FIELD_ID } from './property-key-field';
+import { PropertyValueField, PROPERTY_VALUE_FIELD_NAME, PROPERTY_VALUE_FIELD_ID } from './property-value-field';
 import { ProgressButton } from '~/components/progress-button/progress-button';
 import { GridClassKey } from '@material-ui/core/Grid';
 
 export interface ResourcePropertiesFormData {
     [PROPERTY_KEY_FIELD_NAME]: string;
+    [PROPERTY_KEY_FIELD_ID]: string;
     [PROPERTY_VALUE_FIELD_NAME]: string;
+    [PROPERTY_VALUE_FIELD_ID]: string;
 }
 
 export type ResourcePropertiesFormProps = InjectedFormProps<ResourcePropertiesFormData> & WithStyles<GridClassKey>;

diff --git a/src/views/collection-panel/collection-tag-form.tsx b/src/views/collection-panel/collection-tag-form.tsx
index fd4f0880a2abf9007d0a1e8d0db94704d20d16e2..768f4cb88bb2af900232160622e0304cfe2d0b06 100644 (file)
--- a/src/views/collection-panel/collection-tag-form.tsx
+++ b/src/views/collection-panel/collection-tag-form.tsx
@@ -12,6 +12,7 @@ const Form = withStyles(({ spacing }) => ({ container: { marginBottom: spacing.u
 export const CollectionTagForm = reduxForm<ResourcePropertiesFormData>({
     form: COLLECTION_TAG_FORM_NAME,
     onSubmit: (data, dispatch) => {
+        console.log('FORM SUBMIT: ', data);
         dispatch<any>(createCollectionTag(data));
         dispatch(reset(COLLECTION_TAG_FORM_NAME));
     }