Details
diff --git a/ui/src/app/components/json-form.directive.js b/ui/src/app/components/json-form.directive.js
index 5749271..b016f57 100644
--- a/ui/src/app/components/json-form.directive.js
+++ b/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);
diff --git a/ui/src/app/components/react/json-form-rc-select.jsx b/ui/src/app/components/react/json-form-rc-select.jsx
index ffa0331..83fa929 100644
--- a/ui/src/app/components/react/json-form-rc-select.jsx
+++ b/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}
diff --git a/ui/src/app/components/react/json-form-schema-form.jsx b/ui/src/app/components/react/json-form-schema-form.jsx
index e006eb9..09712f2 100644
--- a/ui/src/app/components/react/json-form-schema-form.jsx
+++ b/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}/>
}