Add support for child resources

assets/scripts.js

@@ -2,7 +2,11 @@ $(function() {
   $('.js-tab .item').tab()
 
   $('.js-json').each(function(node) {
-    var json = $(this).text()
-    $(this).JSONView(json)
+    try {
+      var json = $(this).text()
+      $(this).JSONView(json).JSONView('collapse', 1)
+    } catch(e) {
+      console.error(e)
+    }
   })
 })

assets/styles.css

@@ -2,6 +2,10 @@ body>.ui.grid>.row {
     padding-bottom: 0;
 }
 
+h1.ui.dividing.header {
+    margin-top: 20px;
+}
+
 .menu-column {
   background: #1B1C1D;
 }

components/menu/menu.tag

@@ -18,9 +18,7 @@
     <div class="header">{ resource.displayName() }</div>
 
     <div class="menu">
-      <a class="item" each={ method in resource.methods() }>
-        { _.toUpper(method.method()) } { resource.relativeUri().value() }
-      </a>
+      <menu-resource resource={ resource }></menu-resource>
     </div>
   </div>
 

components/menu/resource.tag

@@ -0,0 +1,13 @@
+<menu-resource>
+  <a class="item" each={ method in opts.resource.methods() }
+    href={ '#' + _.toUpper(method.method()) + '_' + resource.completeRelativeUri() }>
+    { _.toUpper(method.method()) } { resource.completeRelativeUri() }
+  </a>
+
+  <menu-resource each={ resource in opts.resource.resources() }
+    resource={ resource }></menu-resource>
+
+  <script>
+    this._ = require('lodash')
+  </script>
+</menu-resource>

components/method/response.tag

@@ -1,27 +1,27 @@
 <method-response>
   <div class="ui secondary pointing menu js-tab">
-    <a class="item active" data-tab="schema">
+    <a class="item active" data-tab="schema-{ methodId }">
       Schema
     </a>
 
-    <a class="item" data-tab="example">
+    <a class="item" data-tab="example-{ methodId }">
       Example
     </a>
 
-    <a class="item" data-tab="try">
+    <a class="item" data-tab="try-{ methodId }">
       Try
     </a>
   </div>
 
-  <div class="ui bottom attached tab active js-json" data-tab="schema">
+  <div class="ui bottom attached tab active js-json" data-tab="schema-{ methodId }">
     { JSON.stringify(jsonSchema) }
   </div>
 
-  <div class="ui bottom attached tab js-json" data-tab="example">
+  <div class="ui bottom attached tab js-json" data-tab="example-{ methodId }">
     { resource.methods()[0].responses()[0].body()[0].example().value() }
   </div>
 
-  <div class="ui bottom attached tab" data-tab="try">
+  <div class="ui bottom attached tab" data-tab="try-{ methodId }">
   </div>
 
   <script>
@@ -50,11 +50,18 @@
     }
 
     if (this.method) {
+      console.error(this.method.responses()[0].body()[0].schemaContent())
+
       this.jsonSchema = this.method.responses()[0].body()[0].schemaContent()
-      this.jsonSchema = JSON.parse(this.jsonSchema)
+      try {
+        this.jsonSchema = JSON.parse(this.jsonSchema)
+      } catch(e) {}
+
       this.jsonSchema = this.dereference(this.jsonSchema)
+      this.methodId = this.method.methodId().replace(/[\W]/g, '_')
     } else {
       this.jsonSchema = {}
+      this.methodId = ''
     }
   </script>
 </method-response>

components/resource/method.tag

@@ -1,13 +1,22 @@
 <resource-method>
-  <h2 class="ui header">
-    { _.toUpper(method.method()) } { resource.relativeUri().value() }
-  </h2>
+  <div class="ui row grid">
+    <div class="seven wide column">
+      <h2 class="ui header">
+        { _.toUpper(method.method()) } { resource.completeRelativeUri() }
+      </h2>
 
-  <method-request method={ opts.method }></method-request>
+      <method-request method={ opts.method }></method-request>
+    </div>
+
+    <div class="nine wide column third-column">
+      <method-response resource={ resource }></method-response>
+    </div>
+  </div>
 
   <script>
     this._ = require('lodash')
     this.method = this.parent.method
     this.resource = this.parent.resource
+    this.app = this.parent.app
   </script>
 </resource-method>

components/resource/resource-child.tag

@@ -0,0 +1,16 @@
+<resource-child>
+  <div class="ui row grid">
+    <div class="seven wide column">
+      <resource-method method={ method } resource={ opts.resource }
+        each={ method in opts.resource.methods() }></resource-method>
+    </div>
+
+    <div class="nine wide column third-column">
+      <method-response resource={ opts.resource }></method-response>
+    </div>
+  </div>
+
+  <script>
+    this.app = this.parent.app
+  </script>
+</resource-child>

components/resource/resource.tag

@@ -1,5 +1,4 @@
 <resource>
-
   <div class="ui row grid">
     <div class="seven wide column">
       <h1 class="ui dividing header">{ resource.displayName() }</h1>
@@ -8,22 +7,16 @@
     <div class="nine wide column third-column"></div>
   </div>
 
-  <div class="ui row grid">
-    <div class="seven wide column">
-      <resource-method method={ method } resource={ resource }
-        each={ method in resource.methods() }></resource-method>
-    </div>
-
-    <div class="nine wide column third-column">
-      <method-response resource={ resource }></method-response>
-    </div>
+  <resource-method method={ method } resource={ resource }
+    each={ method in resource.methods() }></resource-method>
 
+  <div each={ resource in resource.resources() }>
+    <resource-method method={ method } resource={ resource }
+      each={ method in resource.methods() }></resource-method>
   </div>
 
   <script>
     this.app = this.parent.app
     this.resource = opts.resource
-    this.schemas = this.parent.schemas
   </script>
-
 </resource>