updating property from info panel if object

sumitarora · sumitarora · commit e59e79c1e976 · 2016-03-14T13:08:47.000-04:00
diff --git a/src/backend/backend.ts b/src/backend/backend.ts
@@ -55,13 +55,17 @@ window.addEventListener('message', function(event) {
       }
 
     } else if (event.data.message.message.actionType === 'UPDATE_PROPERTY') {
+
       const highlightStr = '[batarangle-id=\"' +
         event.data.message.message.property.id + '\"]';
-
       const dE = ng.probe(document.querySelector(highlightStr));
-      if (dE.componentInstance[event.data.message.message.property.key]
-          !== undefined) {
+      const propertyTree: Array<string> =
+        event.data.message.message.property.propertyTree.split(',');
+      const property = propertyTree.pop();
+      const value = propertyTree.reduce((previousValue, currentValue) =>
+        previousValue[currentValue], dE.componentInstance);
 
+      if (value !== undefined) {
         const type: string = event.data.message.message.property.type;
         let newValue: any;
 
@@ -75,8 +79,7 @@ window.addEventListener('message', function(event) {
           newValue = event.data.message.message.property.value;
         }
 
-        dE.componentInstance[event.data.message.message.property.key] =
-          newValue;
+        value[property] = newValue;
 
         const appRef = dE.inject(ng.coreTokens.ApplicationRef);
         appRef.tick();
diff --git a/src/frontend/components/component-info/component-info.html b/src/frontend/components/component-info/component-info.html
@@ -40,6 +40,7 @@ <h4 *ngIf="node && node.output && node.output.length > 0"
 <h4 *ngIf="node && node.state" class="m3 bold">State</h4>
 <div style="padding-left: 15px;">
     <bt-render-state *ngIf="node && node.state"
+        [propertyTree]="propertyTree"
         [id]="node.id"
         [state]="node.state"></bt-render-state>
 </div>
diff --git a/src/frontend/components/component-info/component-info.ts b/src/frontend/components/component-info/component-info.ts
@@ -15,6 +15,7 @@ import RenderState from '../render-state/render-state';
 export default class ComponentInfo {
   private node: any;
   private selectDependency: EventEmitter<string> = new EventEmitter<string>();
+  private propertyTree: string = '';
 
   constructor(
     @Inject(ElementRef) private elementRef: ElementRef
diff --git a/src/frontend/components/render-state/render-state.html b/src/frontend/components/render-state/render-state.html
@@ -6,12 +6,13 @@
     </span>
 
     <bt-state-values *ngIf="type(state[k]) !='object'"
+      [propertyTree]="propertyTree + ',' + k"
       [id]="id"
-      [key]="k"
       [value]="state[k]">
     </bt-state-values>
 
     <bt-render-state
+      [propertyTree]="propertyTree + ',' + k"
       [id]="id"
       [hidden]="expanded[k]"
       *ngIf="type(state[k]) =='object'" [state]="state[k]">
diff --git a/src/frontend/components/render-state/render-state.ts b/src/frontend/components/render-state/render-state.ts
@@ -1,14 +1,16 @@
-import {Component, EventEmitter} from 'angular2/core';
+import {Component, EventEmitter, Input} from 'angular2/core';
 import StateValues from '../state-values/state-values';
 
 @Component({
   selector: 'bt-render-state',
   templateUrl:
   '/src/frontend/components/render-state/render-state.html',
-  inputs: ['id', 'state'],
   directives: [RenderState, StateValues]
 })
 export default class RenderState {
+  @Input() id: string;
+  @Input() state: any;
+  @Input() propertyTree: string;
 
   private expanded = {};
 
diff --git a/src/frontend/components/state-values/state-values.html b/src/frontend/components/state-values/state-values.html
@@ -1,5 +1,5 @@
 <div>
-    <p class="node-item-property">{{key}}=</p>
+    <p class="node-item-property">{{getPropertyKey(propertyTree)}}=</p>
     <p class="node-item-value"
       *ngIf="!editable"
       (dblclick)="onDblClick($event)" >{{value}}</p>
diff --git a/src/frontend/components/state-values/state-values.ts b/src/frontend/components/state-values/state-values.ts
@@ -10,14 +10,19 @@ import ParseData from '../../utils/parse-data';
 export default class StateValues {
 
   @Input() id: any;
-  @Input() key: any;
   @Input() value: any;
+  @Input() propertyTree: string;
 
   private editable: boolean = false;
 
   constructor(
     private userActions: UserActions
   ) { }
+  
+  getPropertyKey(tree: any): string {
+    tree = tree.split(',');
+    return tree[tree.length - 1] || '';
+  }
 
   onDblClick($event) {
     this.editable = true;
@@ -39,10 +44,11 @@ export default class StateValues {
       } else {
         newValue = value;
       }
+
       if (newValue !== this.value) {
 
         const property = {
-          'key': this.key,
+          'propertyTree': this.propertyTree.substr(1),
           'value': newValue,
           'id': this.id,
           'type': type
