🎉 Display actual Documentation

pages/doc.vue

@@ -49,11 +49,45 @@
     </pw-section>
 
     <pw-section class="green" label="Documentation" ref="documentation">
-      <ul>
-        {{
-          this.items
-        }}
-      </ul>
+      <div>
+        <span v-for="(collection, index) in this.items" :key="index">
+          <span>
+            <h2>
+              Collection #{{ index + 1 }}: {{ collection.name || "None" }}
+            </h2>
+          </span>
+          <span v-for="(folder, index) in collection.folders" :key="index">
+            <h3>Folder #{{ index + 1 }}: {{ folder.name || "None" }}</h3>
+            <span v-for="(request, index) in folder.requests" :key="index">
+              <p>Request #{{ index + 1 }}: {{ request.name || "None" }}</p>
+              <p>path: {{ request.path || "None" }}</p>
+              <p>method: {{ request.method || "None" }}</p>
+              <p>auth: {{ request.auth || "None" }}</p>
+              <p>httpUser: {{ request.httpUser || "None" }}</p>
+              <p>httpPassword: {{ request.httpPassword || "None" }}</p>
+              <p>bearerToken: {{ request.bearerToken || "None" }}</p>
+              <h4>Headers</h4>
+              <span v-for="header in request.headers" :key="header.key">
+                <p>Key: {{ header.key || "None" }}</p>
+                <p>Value: {{ header.value || "None" }}</p>
+              </span>
+              <h4>Parameters</h4>
+              <span v-for="parameter in request.params" :key="parameter.key">
+                <p>Key: {{ parameter.key || "None" }}</p>
+                <p>Value: {{ parameter.value || "None" }}</p>
+              </span>
+              <h4>Payload</h4>
+              <span v-for="payload in request.bodyParam" :key="payload.key">
+                <p>Key: {{ payload.key || "None" }}</p>
+                <p>Value: {{ payload.value || "None" }}</p>
+              </span>
+              <p>rawParams: {{ request.rawParams || "None" }}</p>
+              <p>contentType: {{ request.contentType || "None" }}</p>
+              <p>requestType: {{ request.requestType || "None" }}</p>
+            </span>
+          </span>
+        </span>
+      </div>
     </pw-section>
   </div>
 </template>
@@ -97,25 +131,7 @@ export default {
     },
 
     getDoc() {
-      let json = this.collectionJSON;
-      let collections = JSON.parse(json);
-      for (let i = 0; i < collections.length; i++) {
-        console.log("Collection", i + 1, collections[i].name);
-        let folders = collections[i].folders;
-        for (let i = 0; i < folders.length; i++) {
-          console.log("Folder", i + 1, folders[i].name);
-          let requests = collections[i].requests;
-          for (let i = 0; i < requests.length; i++) {
-            console.log("Request", i + 1, requests[i].name);
-          }
-        }
-        let requests = collections[i].requests;
-        for (let i = 0; i < requests.length; i++) {
-          console.log("Request", i + 1, requests[i].name);
-        }
-      }
-      // let html = this.obj2htmltable(json);
-      // this.items = html;
+      this.items = JSON.parse(this.collectionJSON);
     }
   }
 };