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}}

app/controllers/inspect.js

@@ -53,7 +53,6 @@ export default Controller.extend({
 
     showEditor () {
       this.set('documentShowEditor', true);
-      // TODO init editing
     },
 
     cancelEditor () {

app/styles/_layout.scss

@@ -99,7 +99,7 @@
     padding: 1.5rem 1px;
 
     &.content {
-      overflow: auto;
+      overflow: hidden;
     }
 
     &.meta {

app/styles/components/_file-preview.scss

@@ -11,4 +11,12 @@
     max-width: 100%;
   }
 
+  #json-tree-view {
+    overflow: auto;
+  }
+
+  .actions {
+    margin-top: 2rem;
+  }
+
 }

app/templates/inspect.hbs

@@ -42,7 +42,7 @@
       <div class="button-group editable">
         <button disabled={{documentHideEditor}}
                 class="{{if documentHideEditor "active"}}"
-                title="{{if documentShowEditor "Cancel editing"}}"
+                title="{{if documentHideEditor "Cancel editing"}}"
                 {{action "cancelEditor"}}>
           {{partial "icons/eye"}}
         </button>
@@ -62,6 +62,9 @@
   <section class="content">
     {{file-preview metaData=model.documentMetaData
                    isJSON=documentIsJSON
+                   isEditable=documentIsEditableHide
+                   showEditor=documentShowEditor
+                   hideEditor=documentHideEditor
                    jsonShowTree=jsonShowTree
                    jsonShowSource=jsonShowSource}}
   </section>