JSON Forms improvements.

ui/src/app/components/json-form.directive.js

@@ -82,6 +82,7 @@ function JsonForm($compile, $templateCache, $mdColorPicker) {
                     val = undefined;
                 }
                 selectOrSet(key, scope.model, val);
+                scope.formProps.model = scope.model;
             },
             onColorClick: function(event, key, val) {
                 scope.showColorPicker(event, val);

ui/src/app/components/react/json-form-rc-select.jsx

@@ -27,39 +27,90 @@ class ThingsboardRcSelect extends React.Component {
         this.onDeselect = this.onDeselect.bind(this);
         this.onBlur = this.onBlur.bind(this);
         this.onFocus = this.onFocus.bind(this);
-        let emptyValue = this.props.form.schema.type === 'array'? [] : null;
         this.state = {
-            currentValue: this.props.value || emptyValue,
+            currentValue: this.keyToCurrentValue(this.props.value, this.props.form.schema.type === 'array'),
             items: this.props.form.items,
             focused: false
         };
     }
 
+    keyToCurrentValue(key, isArray) {
+        var currentValue = isArray ? [] : null;
+        if (isArray) {
+            var keys = key;
+            if (keys) {
+                for (var i = 0; i < keys.length; i++) {
+                    currentValue.push({key: keys[i], label: this.labelFromKey(keys[i])});
+                }
+            }
+        } else {
+            currentValue = {key: key, label: this.labelFromKey(key)};
+        }
+        return currentValue;
+    }
+
+    labelFromKey(key) {
+        let label = key || '';
+        if (key) {
+            for (var i=0;i<this.props.form.items.length;i++) {
+                var item = this.props.form.items[i];
+                if (item.value === key) {
+                    label = item.label;
+                    break;
+                }
+            }
+        }
+        return label;
+    }
+
+    arrayValues(items) {
+        var v = [];
+        if (items) {
+            for (var i = 0; i < items.length; i++) {
+                v.push(items[i].key);
+            }
+        }
+        return v;
+    }
+
+    keyIndex(values, key) {
+        var index = -1;
+        if (values) {
+            for (var i = 0; i < values.length; i++) {
+                if (values[i].key === key) {
+                    index = i;
+                    break;
+                }
+            }
+        }
+        return index;
+    }
+
     onSelect(value, option) {
         if(this.props.form.schema.type === 'array') {
             let v = this.state.currentValue;
-            v.push(value);
+            v.push(this.keyToCurrentValue(value.key, false));
             this.setState({
                 currentValue: v
             });
-            this.props.onChangeValidate(v);
+            this.props.onChangeValidate(this.arrayValues(v));
         } else {
-            this.setState({currentValue: value});
-            this.props.onChangeValidate({target: {value: value}});
+            this.setState({currentValue: this.keyToCurrentValue(value.key, false)});
+            this.props.onChangeValidate({target: {value: value.key}});
         }
     }
 
     onDeselect(value, option) {
         if (this.props.form.schema.type === 'array') {
             let v = this.state.currentValue;
-            let index = v.indexOf(value);
+            let index = this.keyIndex(v, value.key);
             if (index > -1) {
                 v.splice(index, 1);
             }
             this.setState({
                 currentValue: v
             });
-            this.props.onChangeValidate(v);
+            this.props.onChangeValidate(this.arrayValues(v));
         }
     }
 
@@ -105,6 +156,7 @@ class ThingsboardRcSelect extends React.Component {
                     combobox={this.props.form.combobox}
                     disabled={this.props.form.readonly}
                     value={this.state.currentValue}
+                    labelInValue={true}
                     onSelect={this.onSelect}
                     onDeselect={this.onDeselect}
                     onFocus={this.onFocus}

ui/src/app/components/react/json-form-schema-form.jsx

@@ -63,11 +63,15 @@ class ThingsboardSchemaForm extends React.Component {
 
         this.onChange = this.onChange.bind(this);
         this.onColorClick = this.onColorClick.bind(this);
+        this.hasConditions = false;
     }
 
     onChange(key, val) {
         //console.log('SchemaForm.onChange', key, val);
         this.props.onModelChange(key, val);
+        if (this.hasConditions) {
+            this.forceUpdate();
+        }
     }
 
     onColorClick(event, key, val) {
@@ -81,8 +85,11 @@ class ThingsboardSchemaForm extends React.Component {
             console.log('Invalid field: \"' + form.key[0] + '\"!');
             return null;
         }
-        if(form.condition && eval(form.condition) === false) {
-            return null;
+        if(form.condition) {
+            this.hasConditions = true;
+            if (eval(form.condition) === false) {
+                return null;
+            }
         }
         return <Field model={model} form={form} key={index} onChange={onChange} onColorClick={onColorClick} mapper={mapper} builder={this.builder}/>
     }