X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/cfc5eebd666412870df195559adedeefe4178248..17963753e57340121942857300c41c7852275c4b:/src/views-components/search-bar/search-bar-advanced-properties-view.tsx

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
index 5e2acb7584..eb049b7625 100644
--- a/src/views-components/search-bar/search-bar-advanced-properties-view.tsx
+++ b/src/views-components/search-bar/search-bar-advanced-properties-view.tsx
@@ -3,27 +3,27 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { Dispatch } from 'redux';
+import { Dispatch, compose } 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 
+import {
+    SEARCH_BAR_ADVANCED_FORM_NAME,
+    changeAdvancedFormProperty,
+    resetAdvancedFormProperty
 } from '~/store/search-bar/search-bar-actions';
-import { PropertyValues } from '~/models/search-bar';
+import { PropertyValue } 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';
+import { formatPropertyValue } from "~/common/formatters";
+import { Vocabulary } from '~/models/vocabulary';
+import { connectVocabulary } from '../resource-properties-form/property-field-common';
 
-type CssRules = 'root' | 'label' | 'button';
+type CssRules = 'label' | 'button';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
-    root: {
-
-    },
     label: {
         color: theme.palette.grey["500"],
         fontSize: '0.8125rem',
@@ -38,46 +38,52 @@ interface SearchBarAdvancedPropertiesViewDataProps {
     submitting: boolean;
     invalid: boolean;
     pristine: boolean;
-    propertyValues: PropertyValues;
-    fields: PropertyValues[];
+    propertyValues: PropertyValue;
+    fields: PropertyValue[];
+    vocabulary: Vocabulary;
 }
 
 interface SearchBarAdvancedPropertiesViewActionProps {
     setProps: () => void;
-    addProp: (propertyValues: PropertyValues) => void;
-    getAllFields: (propertyValues: PropertyValues[]) => PropertyValues[] | [];
+    setProp: (propertyValues: PropertyValue, properties: PropertyValue[]) => void;
+    getAllFields: (propertyValues: PropertyValue[]) => PropertyValue[] | [];
 }
 
-type SearchBarAdvancedPropertiesViewProps = SearchBarAdvancedPropertiesViewDataProps 
-    & SearchBarAdvancedPropertiesViewActionProps 
+type SearchBarAdvancedPropertiesViewProps = SearchBarAdvancedPropertiesViewDataProps
+    & SearchBarAdvancedPropertiesViewActionProps
     & InjectedFormProps & WithStyles<CssRules>;
 
-const selector = formValueSelector(SEARCH_BAR_ADVANCE_FORM_NAME);
+const selector = formValueSelector(SEARCH_BAR_ADVANCED_FORM_NAME);
 const mapStateToProps = (state: RootState) => {
     return {
-        propertyValues: selector(state, 'propertyKey', 'propertyValue')
+        propertyValues: selector(state, 'key', 'value', 'keyID', 'valueID')
     };
 };
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
-    setProps: (propertyValues: PropertyValues[]) => {
-        dispatch<any>(changeAdvanceFormProperty('properties', propertyValues));
+    setProps: (propertyValues: PropertyValue[]) => {
+        dispatch<any>(changeAdvancedFormProperty('properties', propertyValues));
     },
-    addProp: (propertyValues: PropertyValues) => {
-        dispatch<any>(updateAdvanceFormProperties(propertyValues));
-        dispatch<any>(changeAdvanceFormProperty('propertyKey'));
-        dispatch<any>(changeAdvanceFormProperty('propertyValue'));
+    setProp: (propertyValue: PropertyValue, properties: PropertyValue[]) => {
+        dispatch<any>(changeAdvancedFormProperty(
+            'properties',
+            [...properties.filter(e => e.keyID! !== propertyValue.keyID!), propertyValue]
+        ));
+        dispatch<any>(resetAdvancedFormProperty('key'));
+        dispatch<any>(resetAdvancedFormProperty('value'));
+        dispatch<any>(resetAdvancedFormProperty('keyID'));
+        dispatch<any>(resetAdvancedFormProperty('valueID'));
     },
     getAllFields: (fields: any) => {
         return fields.getAll() || [];
     }
 });
 
-export const SearchBarAdvancedPropertiesView = 
-    connect(mapStateToProps, mapDispatchToProps)
-
-    (withStyles(styles)(
-        ({ classes, fields, propertyValues, setProps, addProp, getAllFields }: SearchBarAdvancedPropertiesViewProps) =>
+export const SearchBarAdvancedPropertiesView = compose(
+    connectVocabulary,
+    connect(mapStateToProps, mapDispatchToProps))(
+    withStyles(styles)(
+        ({ classes, fields, propertyValues, setProps, setProp, getAllFields, vocabulary }: SearchBarAdvancedPropertiesViewProps) =>
             <Grid container item xs={12} spacing={16}>
                 <Grid item xs={2} className={classes.label}>Properties</Grid>
                 <Grid item xs={4}>
@@ -87,20 +93,21 @@ export const SearchBarAdvancedPropertiesView =
                     <SearchBarValueField />
                 </Grid>
                 <Grid container item xs={2} justify='flex-end' alignItems="center">
-                    <Button className={classes.button} onClick={() => addProp(propertyValues)}
+                    <Button className={classes.button} onClick={() => setProp(propertyValues, getAllFields(fields))}
                         color="primary"
                         size='small'
-                        variant="contained">
+                        variant="contained"
+                        disabled={!Boolean(propertyValues.key && propertyValues.value)}>
                         Add
                     </Button>
                 </Grid>
                 <Grid item xs={2} />
                 <Grid container item xs={10} spacing={8}>
-                    <Chips values={getAllFields(fields)} 
+                    <Chips values={getAllFields(fields)}
                         deletable
-                        onChange={setProps} 
-                        getLabel={(field: PropertyValues) => `${field.propertyKey}: ${field.propertyValue}`} />
+                        onChange={setProps}
+                        getLabel={(field: PropertyValue) => formatPropertyValue(field, vocabulary)} />
                 </Grid>
             </Grid>
     )
-);
\ No newline at end of file
+);