Edit files via the JSON tree view editor

app/components/file-preview/component.js

@@ -95,9 +95,46 @@ export default Component.extend({
     view.expand(true);
 
     view.withRootName = false;
-    view.readonly = true;
+    view.readonly = this.get('hideEditor');
 
     this.set('jsonTreeView', view);
+  },
+
+  onShowEditor: observer('showEditor', function(){
+    if (this.get('fileLoaded') && this.get('isJSON') && this.get('jsonShowTree')) {
+      this.set('jsonTreeView.readonly', !this.get('showEditor'));
+    }
+  }),
+
+  actions: {
+
+    saveChanges () {
+      const path = this.get('metaData.path');
+
+      if (this.get('isJSON') && this.get('jsonShowTree')) {
+        const content = JSON.stringify(this.get('jsonTreeView.value'));
+
+        this.get('storage.client')
+            .storeFile('application/json', path, content)
+            .then(etag => {
+              this.setProperties({
+                'metaData.etag': etag,
+                fileContent: content,
+                showEditor: false
+              });
+            }).catch(err => {
+              alert('Failed to update the file. Check the console for more info');
+              console.error(err);
+            });
+      } else {
+        console.warn('not implemented');
+      }
+    },
+
+    cancelEditor () {
+      this.set('showEditor', false);
+    }
+
   }
 
 });

app/components/file-preview/template.hbs

@@ -18,4 +18,11 @@
       <code>{{fileContent}}</code>
     {{/if}}
   {{/if}}
+
+  {{#if showEditor}}
+    <div class="actions">
+      <button {{action "saveChanges"}}>Save changes</button>
+      <button {{action "cancelEditor"}}>Cancel editing</button>
+    </div>
+  {{/if}}
 {{/if}}