From a832f5614c668487c79f3592bde159a7b5d9d8af Mon Sep 17 00:00:00 2001
From: Sebastian Kippe <sebastian@kip.pe>
Date: Sat, 6 Jan 2018 12:53:14 +0000
Subject: [PATCH] Add buttons for switching JSON preview style

---
 app/controllers/inspect.js             | 20 ++++++++++++
 app/styles/_buttons.scss               |  8 +++++
 app/styles/app.scss                    |  4 ++-
 app/templates/inspect.hbs              |  6 ++++
 tests/unit/controllers/inspect-test.js | 43 ++++++++++++++++++++++++--
 5 files changed, 77 insertions(+), 4 deletions(-)
 create mode 100644 app/styles/_buttons.scss

diff --git a/app/controllers/inspect.js b/app/controllers/inspect.js
index 829ab66..b7c11e9 100644
--- a/app/controllers/inspect.js
+++ b/app/controllers/inspect.js
@@ -1,7 +1,9 @@
 import Controller from '@ember/controller';
 import { inject as controller } from '@ember/controller';
 import { inject as service } from '@ember/service';
+import { computed } from '@ember/object';
 import { alias } from '@ember/object/computed';
+import { isEmpty } from '@ember/utils';
 
 export default Controller.extend({
 
@@ -12,8 +14,26 @@ export default Controller.extend({
 
   queryParams: ['path'],
 
+  documentIsJSON: computed('model.documentMetaData.type', function(){
+    if (isEmpty(this.get('model.documentMetaData'))) { return false; }
+
+    return !!this.get('model.documentMetaData.type').match(/application\/json/i);
+  }),
+
+  jsonView: 'source',
+  jsonShowTree: computed.equal('jsonView', 'tree'),
+  jsonShowSource: computed.equal('jsonView', 'source'),
+
   actions: {
 
+    showJsonTree () {
+      this.set('jsonView', 'tree');
+    },
+
+    showJsonSource () {
+      this.set('jsonView', 'source');
+    },
+
     deleteItem () {
       if (window.confirm('Sure?')) {
         this.get('storage.client')
diff --git a/app/styles/_buttons.scss b/app/styles/_buttons.scss
new file mode 100644
index 0000000..67c08c1
--- /dev/null
+++ b/app/styles/_buttons.scss
@@ -0,0 +1,8 @@
+div.button-group {
+  display: inline-block;
+}
+
+div.button-group + button,
+div.button-group + div.button-group {
+  margin-left: 1rem;
+}
diff --git a/app/styles/app.scss b/app/styles/app.scss
index 8d2944d..44e7a98 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -16,9 +16,11 @@ body {
   padding: 0;
 }
 
+@import "buttons";
+
 @import "components/account-info";
 @import "components/breadcrumb-nav";
 @import "components/categories-nav";
 @import "components/directory-listing";
-@import "components/item-icon";
 @import "components/file-preview";
+@import "components/item-icon";
diff --git a/app/templates/inspect.hbs b/app/templates/inspect.hbs
index a4ddd1e..55f9ce6 100644
--- a/app/templates/inspect.hbs
+++ b/app/templates/inspect.hbs
@@ -1,6 +1,12 @@
 <header>
   {{breadcrumb-nav currentDirPath=currentDirPath}}
   <nav class="actions">
+    {{#if documentIsJSON}}
+      <div class="button-group json-view">
+        <button disabled={{jsonShowTree}} class="{{if jsonShowTree "active"}}" {{action "showJsonTree"}}>tree view</button>
+        <button disabled={{jsonShowSource}} class="{{if jsonShowSource "active"}}" {{action "showJsonSource"}}>source</button>
+      </div>
+    {{/if}}
     <button class="delete" {{action "deleteItem"}}>delete</button>
   </nav>
 </header>
diff --git a/tests/unit/controllers/inspect-test.js b/tests/unit/controllers/inspect-test.js
index e778892..1f63510 100644
--- a/tests/unit/controllers/inspect-test.js
+++ b/tests/unit/controllers/inspect-test.js
@@ -4,8 +4,45 @@ moduleFor('controller:inspect', 'Unit | Controller | inspect', {
   needs: ['controller:application', 'service:storage']
 });
 
-// Replace this with your real tests.
-test('it exists', function(assert) {
+test('#documentIsJSON', function(assert) {
   let controller = this.subject();
-  assert.ok(controller);
+
+  controller.set('model', {});
+
+  controller.set('model.documentMetaData', {
+    "name": "869575AF-84AE-49B3-8752-5782E9CA2BC5",
+    "type": "application/json",
+    "isBinary": false,
+    "isFolder": false,
+    "size": 202,
+    "path": "/documents/notes/869575AF-84AE-49B3-8752-5782E9CA2BC5",
+    "etag": "776662336"
+  });
+
+  assert.ok(controller.get('documentIsJSON'), 'is true when content type is JSON');
+
+  controller.set('model.documentMetaData', {
+    "name": "171127-1708-32c3.png",
+    "type": "image/png",
+    "isBinary": true,
+    "isFolder": false,
+    "size": 42624,
+    "path": "public/shares/171127-1708-32c3.png",
+    "etag": "894001114"
+  });
+
+  assert.notOk(controller.get('documentIsJSON'), 'is false when content type is not JSON');
+});
+
+test('jsonView actions/methods', function(assert) {
+  let controller = this.subject();
+  controller.set('jsonView', null);
+
+  controller.send('showJsonTree');
+  assert.ok(controller.get('jsonShowTree'));
+  assert.notOk(controller.get('jsonShowSource'));
+
+  controller.send('showJsonSource');
+  assert.ok(controller.get('jsonShowSource'));
+  assert.notOk(controller.get('jsonShowTree'));
 });