From c3a6cc133fe119707afd144217dada00085045c2 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyasthomas@gmail.com>
Date: Sun, 22 Dec 2019 23:28:36 +0530
Subject: [PATCH] :sparkles: Introducing API Documentation

---
 assets/css/styles.scss |  16 ++-
 pages/doc.vue          | 249 ++++++++++++++++++++++++++++++++++++-----
 2 files changed, 231 insertions(+), 34 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index ac82b6b4c..79e6c1d4a 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -251,7 +251,10 @@ nav.secondary-nav {
 
 h1,
 h2,
-h3 {
+h3,
+h4 {
+  display: flex;
+  align-items: center;
   margin: 0;
   font-weight: 700;
 }
@@ -526,7 +529,9 @@ kbd,
 select,
 input,
 textarea,
-pre {
+pre,
+code {
+  display: inline-flex;
   margin: 4px;
   padding: 8px;
   border-radius: 8px;
@@ -560,9 +565,10 @@ pre.ace_editor {
   z-index: 0;
 }
 
-code {
-  height: 336px;
-  border-radius: 8px;
+kbd,
+code,
+pre {
+  width: auto;
 }
 
 .select-wrapper {
diff --git a/pages/doc.vue b/pages/doc.vue
index c91216409..17685daf2 100644
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <pw-section class="blue" label="Import Collection" ref="collections">
+    <pw-section class="blue" label="Collections" ref="collections">
       <ul>
         <li>
           <label for="collectionUpload">
@@ -10,7 +10,7 @@
               v-tooltip="'JSON'"
             >
               <i class="material-icons">folder</i>
-              <span>Import Collection</span>
+              <span>Import Collections</span>
             </button>
           </label>
           <input
@@ -23,7 +23,6 @@
       </ul>
       <ul>
         <li>
-          <label for="rawBody">{{ $t("collections") }}</label>
           <Editor
             v-model="collectionJSON"
             :lang="'json'"
@@ -50,49 +49,241 @@
 
     <pw-section class="green" label="Documentation" ref="documentation">
       <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>
+        <span
+          class="collection"
+          v-for="(collection, index) in this.items"
+          :key="index"
+        >
+          <h2>
+            <i class="material-icons">folder</i>
+            {{ collection.name || "None" }}
+          </h2>
+          <span
+            class="folder"
+            v-for="(folder, index) in collection.folders"
+            :key="index"
+          >
+            <h3>
+              <i class="material-icons">folder_open</i>
+              {{ folder.name || "None" }}
+            </h3>
+            <span
+              class="request"
+              v-for="(request, index) in folder.requests"
+              :key="index"
+            >
+              <h4>
+                <i class="material-icons">insert_drive_file</i>
+                {{ request.name || "None" }}
+              </h4>
+              <p class="doc-desc">
+                <span>
+                  Path: <code>{{ request.path || "None" }}</code>
+                </span>
+              </p>
+              <p class="doc-desc">
+                <span>
+                  Method: <code>{{ request.method || "None" }}</code>
+                </span>
+              </p>
+              <p class="doc-desc">
+                <span>
+                  Authentication:
+                  <code>{{ request.auth || "None" }}</code>
+                </span>
+              </p>
+              <p class="doc-desc">
+                <span>
+                  Uername: <code>{{ request.httpUser || "None" }}</code>
+                </span>
+              </p>
+              <p class="doc-desc">
+                <span>
+                  Password: <code>{{ request.httpPassword || "None" }}</code>
+                </span>
+              </p>
+              <p class="doc-desc">
+                <span>
+                  Token: <code>{{ request.bearerToken || "None" }}</code>
+                </span>
+              </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>
+                <p class="doc-desc">
+                  <span>
+                    {{ header.key || "None" }}:
+                    <code>{{ header.value || "None" }}</code>
+                  </span>
+                </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>
+                <p class="doc-desc">
+                  <span>
+                    {{ parameter.key || "None" }}:
+                    <code>{{ parameter.value || "None" }}</code>
+                  </span>
+                </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>
+                <p class="doc-desc">
+                  <span>
+                    {{ payload.key || "None" }}:
+                    <code>{{ payload.value || "None" }}</code>
+                  </span>
+                </p>
               </span>
-              <p>rawParams: {{ request.rawParams || "None" }}</p>
-              <p>contentType: {{ request.contentType || "None" }}</p>
-              <p>requestType: {{ request.requestType || "None" }}</p>
+              <p class="doc-desc">
+                <span>
+                  Parameters: <code>{{ request.rawParams || "None" }}</code>
+                </span>
+              </p>
+              <p class="doc-desc">
+                <span>
+                  Content Type: <code>{{ request.contentType || "None" }}</code>
+                </span>
+              </p>
+              <p class="doc-desc">
+                <span>
+                  Request Type: <code>{{ request.requestType || "None" }}</code>
+                </span>
+              </p>
             </span>
           </span>
+          <span
+            class="request"
+            v-for="(request, index) in collection.folders"
+            :key="`request-${index}`"
+          >
+            <h4>
+              <i class="material-icons">insert_drive_file</i>
+              {{ request.name || "None" }}
+            </h4>
+            <p class="doc-desc">
+              <span>
+                Path: <code>{{ request.path || "None" }}</code>
+              </span>
+            </p>
+            <p class="doc-desc">
+              <span>
+                Method: <code>{{ request.method || "None" }}</code>
+              </span>
+            </p>
+            <p class="doc-desc">
+              <span>
+                Authentication:
+                <code>{{ request.auth || "None" }}</code>
+              </span>
+            </p>
+            <p class="doc-desc">
+              <span>
+                Uername: <code>{{ request.httpUser || "None" }}</code>
+              </span>
+            </p>
+            <p class="doc-desc">
+              <span>
+                Password: <code>{{ request.httpPassword || "None" }}</code>
+              </span>
+            </p>
+            <p class="doc-desc">
+              <span>
+                Token: <code>{{ request.bearerToken || "None" }}</code>
+              </span>
+            </p>
+            <h4>Headers</h4>
+            <span v-for="header in request.headers" :key="header.key">
+              <p class="doc-desc">
+                <span>
+                  {{ header.key || "None" }}:
+                  <code>{{ header.value || "None" }}</code>
+                </span>
+              </p>
+            </span>
+            <h4>Parameters</h4>
+            <span v-for="parameter in request.params" :key="parameter.key">
+              <p class="doc-desc">
+                <span>
+                  {{ parameter.key || "None" }}:
+                  <code>{{ parameter.value || "None" }}</code>
+                </span>
+              </p>
+            </span>
+            <h4>Payload</h4>
+            <span v-for="payload in request.bodyParam" :key="payload.key">
+              <p class="doc-desc">
+                <span>
+                  {{ payload.key || "None" }}:
+                  <code>{{ payload.value || "None" }}</code>
+                </span>
+              </p>
+            </span>
+            <p class="doc-desc">
+              <span>
+                Parameters: <code>{{ request.rawParams || "None" }}</code>
+              </span>
+            </p>
+            <p class="doc-desc">
+              <span>
+                Content Type: <code>{{ request.contentType || "None" }}</code>
+              </span>
+            </p>
+            <p class="doc-desc">
+              <span>
+                Request Type: <code>{{ request.requestType || "None" }}</code>
+              </span>
+            </p>
+          </span>
         </span>
       </div>
     </pw-section>
   </div>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.collection,
+.folder,
+.request,
+.doc-desc {
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  flex: 1;
+  padding: 16px;
+
+  .material-icons {
+    margin-right: 16px;
+  }
+}
+
+.collection {
+}
+
+.folder {
+  border-left: 1px solid var(--brd-color);
+  margin: 16px 0 0;
+}
+
+.request {
+  border: 1px solid var(--brd-color);
+  border-radius: 8px;
+  margin: 16px 0 0;
+
+  h4 {
+    margin: 8px 0;
+  }
+}
+
+.doc-desc {
+  color: var(--fg-light-color);
+  border-bottom: 1px dashed var(--brd-color);
+  margin: 0;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+</style>
 
 <script>
 import AceEditor from "../components/ace-editor";