From 1827a982845d267f8b9b80a5983290f9bc1f0bd9 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Sat, 18 Jul 2020 06:39:45 +0530
Subject: [PATCH] Add Collections section in Docs page

---
 components/collections/collection.vue |  69 ++--
 components/collections/index.vue      |   9 +-
 components/layout/section.vue         |   2 +
 pages/doc.vue                         | 529 ++++++++++++++------------
 4 files changed, 328 insertions(+), 281 deletions(-)

diff --git a/components/collections/collection.vue b/components/collections/collection.vue
index 0e7bb05dc..aff002c2d 100644
--- a/components/collections/collection.vue
+++ b/components/collections/collection.vue
@@ -1,39 +1,47 @@
 <template>
   <div>
     <div class="flex-wrap">
+      <button class="icon" @click="toggleShowChildren">
+        <i class="material-icons" v-show="!showChildren">arrow_right</i>
+        <i class="material-icons" v-show="showChildren">arrow_drop_down</i>
+        <i class="material-icons">folder</i>
+        <span>{{ collection.name }}</span>
+      </button>
       <div>
-        <button class="icon" @click="toggleShowChildren">
-          <i class="material-icons" v-show="!showChildren">arrow_right</i>
-          <i class="material-icons" v-show="showChildren">arrow_drop_down</i>
-          <i class="material-icons">folder</i>
-          <span>{{ collection.name }}</span>
+        <button
+          v-if="doc"
+          class="icon"
+          @click="$emit('select-collection')"
+          v-tooltip.left="$t('import')"
+        >
+          <i class="material-icons">keyboard_backspace</i>
         </button>
+        <v-popover>
+          <button class="tooltip-target icon" v-tooltip.left="$t('more')">
+            <i class="material-icons">more_vert</i>
+          </button>
+          <template slot="popover">
+            <div>
+              <button class="icon" @click="$emit('add-folder')" v-close-popover>
+                <i class="material-icons">create_new_folder</i>
+                <span>{{ $t("new_folder") }}</span>
+              </button>
+            </div>
+            <div>
+              <button class="icon" @click="$emit('edit-collection')" v-close-popover>
+                <i class="material-icons">create</i>
+                <span>{{ $t("edit") }}</span>
+              </button>
+            </div>
+            <div>
+              <button class="icon" @click="removeCollection" v-close-popover>
+                <i class="material-icons">delete</i>
+                <span>{{ $t("delete") }}</span>
+              </button>
+            </div>
+          </template>
+        </v-popover>
       </div>
-      <v-popover>
-        <button class="tooltip-target icon" v-tooltip.left="$t('more')">
-          <i class="material-icons">more_vert</i>
-        </button>
-        <template slot="popover">
-          <div>
-            <button class="icon" @click="$emit('add-folder')" v-close-popover>
-              <i class="material-icons">create_new_folder</i>
-              <span>{{ $t("new_folder") }}</span>
-            </button>
-          </div>
-          <div>
-            <button class="icon" @click="$emit('edit-collection')" v-close-popover>
-              <i class="material-icons">create</i>
-              <span>{{ $t("edit") }}</span>
-            </button>
-          </div>
-          <div>
-            <button class="icon" @click="removeCollection" v-close-popover>
-              <i class="material-icons">delete</i>
-              <span>{{ $t("delete") }}</span>
-            </button>
-          </div>
-        </template>
-      </v-popover>
     </div>
 
     <div v-show="showChildren">
@@ -97,6 +105,7 @@ export default {
   props: {
     collectionIndex: Number,
     collection: Object,
+    doc: Boolean,
   },
   data() {
     return {
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 510dbefd7..b090ebb4b 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -70,20 +70,22 @@ TODO:
           <collection
             :collection-index="index"
             :collection="collection"
+            :doc="doc"
             @edit-collection="editCollection(collection, index)"
             @add-folder="addFolder(collection, index)"
             @edit-folder="editFolder($event)"
             @edit-request="editRequest($event)"
+            @select-collection="$emit('use-collection', collection)"
           />
         </li>
       </ul>
     </div>
-    <nuxt-link :to="localePath('doc')" :aria-label="$t('documentation')">
+    <!-- <nuxt-link :to="localePath('doc')" :aria-label="$t('documentation')">
       <button class="icon">
         <i class="material-icons">topic</i>
         <span>{{ $t("generate_docs") }}</span>
       </button>
-    </nuxt-link>
+    </nuxt-link> -->
   </pw-section>
 </template>
 
@@ -113,6 +115,9 @@ export default {
     editRequest: () => import("./editRequest"),
     importExportCollections: () => import("./importExportCollections"),
   },
+  props: {
+    doc: Boolean,
+  },
   data() {
     return {
       showModalAdd: false,
diff --git a/components/layout/section.vue b/components/layout/section.vue
index 181937fb7..bc7db67b3 100644
--- a/components/layout/section.vue
+++ b/components/layout/section.vue
@@ -14,6 +14,8 @@
 
 <style scoped lang="scss">
 fieldset {
+  display: flex;
+  flex: 1;
   margin: 16px 0;
   border-radius: 8px;
   background-color: var(--bg-dark-color);
diff --git a/pages/doc.vue b/pages/doc.vue
index a1b380ad4..9aff4487b 100644
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -1,262 +1,287 @@
 <template>
   <div class="page">
-    <pw-section class="blue" :label="$t('collections')" ref="collections">
-      <ul>
-        <li>
-          <p class="info">
-            {{ $t("generate_docs_message") }}
-          </p>
-        </li>
-      </ul>
-      <ul>
-        <li>
-          <label for="collectionUpload">
-            <button class="icon" @click="$refs.collectionUpload.click()" v-tooltip="$t('json')">
-              <i class="material-icons">folder</i>
-              <span>{{ $t("import_collections") }}</span>
-            </button>
-          </label>
-          <input
-            ref="collectionUpload"
-            name="collectionUpload"
-            type="file"
-            @change="uploadCollection"
-          />
-        </li>
-      </ul>
-      <ul>
-        <li>
-          <Editor
-            v-model="collectionJSON"
-            :lang="'json'"
-            :lint="false"
-            :options="{
-              maxLines: '16',
-              minLines: '8',
-              fontSize: '16px',
-              autoScrollEditorIntoView: true,
-              showPrintMargin: false,
-              useWorker: false,
-            }"
-          />
-        </li>
-      </ul>
-      <ul>
-        <li>
-          <button class="icon" @click="getDoc">
-            <i class="material-icons">topic</i>
-            <span>{{ $t("generate_docs") }}</span>
-          </button>
-        </li>
-      </ul>
-    </pw-section>
+    <div class="content">
+      <div class="page-columns inner-left">
+        <pw-section class="blue" :label="$t('import')" ref="collections">
+          <ul>
+            <li>
+              <p class="info">
+                {{ $t("generate_docs_message") }}
+              </p>
+            </li>
+          </ul>
+          <ul>
+            <li>
+              <div class="flex-wrap">
+                <label for="collectionUpload">
+                  <button
+                    class="icon"
+                    @click="$refs.collectionUpload.click()"
+                    v-tooltip="$t('json')"
+                  >
+                    <i class="material-icons">folder</i>
+                    <span>{{ $t("import_collections") }}</span>
+                  </button>
+                </label>
+                <input
+                  ref="collectionUpload"
+                  name="collectionUpload"
+                  type="file"
+                  @change="uploadCollection"
+                />
+                <div>
+                  <button
+                    class="icon"
+                    @click="collectionJSON = '[]'"
+                    v-tooltip.bottom="$t('clear')"
+                  >
+                    <i class="material-icons">clear_all</i>
+                  </button>
+                </div>
+              </div>
+            </li>
+          </ul>
+          <ul>
+            <li>
+              <Editor
+                v-model="collectionJSON"
+                :lang="'json'"
+                :lint="false"
+                :options="{
+                  maxLines: '16',
+                  minLines: '8',
+                  fontSize: '16px',
+                  autoScrollEditorIntoView: true,
+                  showPrintMargin: false,
+                  useWorker: false,
+                }"
+              />
+            </li>
+          </ul>
+          <ul>
+            <li>
+              <button class="icon" @click="getDoc">
+                <i class="material-icons">topic</i>
+                <span>{{ $t("generate_docs") }}</span>
+              </button>
+            </li>
+          </ul>
+        </pw-section>
 
-    <pw-section class="green" label="Documentation" ref="documentation">
-      <p v-if="this.items.length === 0" class="info">
-        {{ $t("generate_docs_first") }}
-      </p>
-      <div>
-        <span class="collection" v-for="(collection, index) in this.items" :key="index">
-          <h2>
-            <i class="material-icons">folder</i>
-            {{ collection.name || $t("none") }}
-          </h2>
-          <span class="folder" v-for="(folder, index) in collection.folders" :key="index">
-            <h3>
-              <i class="material-icons">folder_open</i>
-              {{ folder.name || $t("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 || $t("none") }}
-              </h4>
-              <p class="doc-desc" v-if="request.url">
-                <span>
-                  {{ $t("url") }}: <code>{{ request.url || $t("none") }}</code>
+        <pw-section class="green" label="Documentation" ref="documentation">
+          <p v-if="this.items.length === 0" class="info">
+            {{ $t("generate_docs_first") }}
+          </p>
+          <div>
+            <span class="collection" v-for="(collection, index) in this.items" :key="index">
+              <h2>
+                <i class="material-icons">folder</i>
+                {{ collection.name || $t("none") }}
+              </h2>
+              <span class="folder" v-for="(folder, index) in collection.folders" :key="index">
+                <h3>
+                  <i class="material-icons">folder_open</i>
+                  {{ folder.name || $t("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 || $t("none") }}
+                  </h4>
+                  <p class="doc-desc" v-if="request.url">
+                    <span>
+                      {{ $t("url") }}: <code>{{ request.url || $t("none") }}</code>
+                    </span>
+                  </p>
+                  <p class="doc-desc" v-if="request.path">
+                    <span>
+                      {{ $t("path") }}:
+                      <code>{{ request.path || $t("none") }}</code>
+                    </span>
+                  </p>
+                  <p class="doc-desc" v-if="request.method">
+                    <span>
+                      {{ $t("method") }}:
+                      <code>{{ request.method || $t("none") }}</code>
+                    </span>
+                  </p>
+                  <p class="doc-desc" v-if="request.auth">
+                    <span>
+                      {{ $t("authentication") }}:
+                      <code>{{ request.auth || $t("none") }}</code>
+                    </span>
+                  </p>
+                  <p class="doc-desc" v-if="request.httpUser">
+                    <span>
+                      {{ $t("username") }}:
+                      <code>{{ request.httpUser || $t("none") }}</code>
+                    </span>
+                  </p>
+                  <p class="doc-desc" v-if="request.httpPassword">
+                    <span>
+                      {{ $t("password") }}:
+                      <code>{{ request.httpPassword || $t("none") }}</code>
+                    </span>
+                  </p>
+                  <p class="doc-desc" v-if="request.bearerToken">
+                    <span>
+                      {{ $t("token") }}:
+                      <code>{{ request.bearerToken || $t("none") }}</code>
+                    </span>
+                  </p>
+                  <h4 v-if="request.headers.length > 0">{{ $t("headers") }}</h4>
+                  <span v-if="request.headers">
+                    <p v-for="header in request.headers" :key="header.key" class="doc-desc">
+                      <span>
+                        {{ header.key || $t("none") }}:
+                        <code>{{ header.value || $t("none") }}</code>
+                      </span>
+                    </p>
+                  </span>
+                  <h4 v-if="request.params.length > 0">{{ $t("parameters") }}</h4>
+                  <span v-if="request.params">
+                    <p v-for="parameter in request.params" :key="parameter.key" class="doc-desc">
+                      <span>
+                        {{ parameter.key || $t("none") }}:
+                        <code>{{ parameter.value || $t("none") }}</code>
+                      </span>
+                    </p>
+                  </span>
+                  <h4 v-if="request.bodyParam">{{ $t("payload") }}</h4>
+                  <span v-if="request.bodyParam">
+                    <p v-for="payload in request.bodyParam" :key="payload.key" class="doc-desc">
+                      <span>
+                        {{ payload.key || $t("none") }}:
+                        <code>{{ payload.value || $t("none") }}</code>
+                      </span>
+                    </p>
+                  </span>
+                  <p class="doc-desc" v-if="request.rawParams">
+                    <span>
+                      {{ $t("parameters") }}:
+                      <code>{{ request.rawParams || $t("none") }}</code>
+                    </span>
+                  </p>
+                  <p class="doc-desc" v-if="request.contentType">
+                    <span>
+                      {{ $t("content_type") }}:
+                      <code>{{ request.contentType || $t("none") }}</code>
+                    </span>
+                  </p>
+                  <p class="doc-desc" v-if="request.requestType">
+                    <span>
+                      {{ $t("request_type") }}:
+                      <code>{{ request.requestType || $t("none") }}</code>
+                    </span>
+                  </p>
                 </span>
-              </p>
-              <p class="doc-desc" v-if="request.path">
-                <span>
-                  {{ $t("path") }}:
-                  <code>{{ request.path || $t("none") }}</code>
-                </span>
-              </p>
-              <p class="doc-desc" v-if="request.method">
-                <span>
-                  {{ $t("method") }}:
-                  <code>{{ request.method || $t("none") }}</code>
-                </span>
-              </p>
-              <p class="doc-desc" v-if="request.auth">
-                <span>
-                  {{ $t("authentication") }}:
-                  <code>{{ request.auth || $t("none") }}</code>
-                </span>
-              </p>
-              <p class="doc-desc" v-if="request.httpUser">
-                <span>
-                  {{ $t("username") }}:
-                  <code>{{ request.httpUser || $t("none") }}</code>
-                </span>
-              </p>
-              <p class="doc-desc" v-if="request.httpPassword">
-                <span>
-                  {{ $t("password") }}:
-                  <code>{{ request.httpPassword || $t("none") }}</code>
-                </span>
-              </p>
-              <p class="doc-desc" v-if="request.bearerToken">
-                <span>
-                  {{ $t("token") }}:
-                  <code>{{ request.bearerToken || $t("none") }}</code>
-                </span>
-              </p>
-              <h4 v-if="request.headers.length > 0">{{ $t("headers") }}</h4>
-              <span v-if="request.headers">
-                <p v-for="header in request.headers" :key="header.key" class="doc-desc">
+              </span>
+              <span
+                class="request"
+                v-for="(request, index) in collection.requests"
+                :key="`request-${index}`"
+              >
+                <h4>
+                  <i class="material-icons">insert_drive_file</i>
+                  {{ request.name || $t("none") }}
+                </h4>
+                <p class="doc-desc" v-if="request.url">
                   <span>
-                    {{ header.key || $t("none") }}:
-                    <code>{{ header.value || $t("none") }}</code>
+                    {{ $t("url") }}: <code>{{ request.url || $t("none") }}</code>
+                  </span>
+                </p>
+                <p class="doc-desc" v-if="request.path">
+                  <span>
+                    {{ $t("path") }}: <code>{{ request.path || $t("none") }}</code>
+                  </span>
+                </p>
+                <p class="doc-desc" v-if="request.method">
+                  <span>
+                    {{ $t("method") }}:
+                    <code>{{ request.method || $t("none") }}</code>
+                  </span>
+                </p>
+                <p class="doc-desc" v-if="request.auth">
+                  <span>
+                    {{ $t("authentication") }}:
+                    <code>{{ request.auth || $t("none") }}</code>
+                  </span>
+                </p>
+                <p class="doc-desc" v-if="request.httpUser">
+                  <span>
+                    {{ $t("username") }}:
+                    <code>{{ request.httpUser || $t("none") }}</code>
+                  </span>
+                </p>
+                <p class="doc-desc" v-if="request.httpPassword">
+                  <span>
+                    {{ $t("password") }}:
+                    <code>{{ request.httpPassword || $t("none") }}</code>
+                  </span>
+                </p>
+                <p class="doc-desc" v-if="request.bearerToken">
+                  <span>
+                    {{ $t("token") }}:
+                    <code>{{ request.bearerToken || $t("none") }}</code>
+                  </span>
+                </p>
+                <h4 v-if="request.headers.length > 0">{{ $t("headers") }}</h4>
+                <span v-if="request.headers">
+                  <p v-for="header in request.headers" :key="header.key" class="doc-desc">
+                    <span>
+                      {{ header.key || $t("none") }}:
+                      <code>{{ header.value || $t("none") }}</code>
+                    </span>
+                  </p>
+                </span>
+                <h4 v-if="request.params.length > 0">{{ $t("parameters") }}</h4>
+                <span v-if="request.params">
+                  <p v-for="parameter in request.params" :key="parameter.key" class="doc-desc">
+                    <span>
+                      {{ parameter.key || $t("none") }}:
+                      <code>{{ parameter.value || $t("none") }}</code>
+                    </span>
+                  </p>
+                </span>
+                <h4 v-if="request.bodyParam">{{ $t("payload") }}</h4>
+                <span v-if="request.bodyParam">
+                  <p v-for="payload in request.bodyParam" :key="payload.key" class="doc-desc">
+                    <span>
+                      {{ payload.key || $t("none") }}:
+                      <code>{{ payload.value || $t("none") }}</code>
+                    </span>
+                  </p>
+                </span>
+                <p class="doc-desc" v-if="request.rawParams">
+                  <span>
+                    {{ $t("parameters") }}:
+                    <code>{{ request.rawParams || $t("none") }}</code>
+                  </span>
+                </p>
+                <p class="doc-desc" v-if="request.contentType">
+                  <span>
+                    {{ $t("content_type") }}:
+                    <code>{{ request.contentType || $t("none") }}</code>
+                  </span>
+                </p>
+                <p class="doc-desc" v-if="request.requestType">
+                  <span>
+                    {{ $t("request_type") }}:
+                    <code>{{ request.requestType || $t("none") }}</code>
                   </span>
                 </p>
               </span>
-              <h4 v-if="request.params.length > 0">{{ $t("parameters") }}</h4>
-              <span v-if="request.params">
-                <p v-for="parameter in request.params" :key="parameter.key" class="doc-desc">
-                  <span>
-                    {{ parameter.key || $t("none") }}:
-                    <code>{{ parameter.value || $t("none") }}</code>
-                  </span>
-                </p>
-              </span>
-              <h4 v-if="request.bodyParam">{{ $t("payload") }}</h4>
-              <span v-if="request.bodyParam">
-                <p v-for="payload in request.bodyParam" :key="payload.key" class="doc-desc">
-                  <span>
-                    {{ payload.key || $t("none") }}:
-                    <code>{{ payload.value || $t("none") }}</code>
-                  </span>
-                </p>
-              </span>
-              <p class="doc-desc" v-if="request.rawParams">
-                <span>
-                  {{ $t("parameters") }}:
-                  <code>{{ request.rawParams || $t("none") }}</code>
-                </span>
-              </p>
-              <p class="doc-desc" v-if="request.contentType">
-                <span>
-                  {{ $t("content_type") }}:
-                  <code>{{ request.contentType || $t("none") }}</code>
-                </span>
-              </p>
-              <p class="doc-desc" v-if="request.requestType">
-                <span>
-                  {{ $t("request_type") }}:
-                  <code>{{ request.requestType || $t("none") }}</code>
-                </span>
-              </p>
             </span>
-          </span>
-          <span
-            class="request"
-            v-for="(request, index) in collection.requests"
-            :key="`request-${index}`"
-          >
-            <h4>
-              <i class="material-icons">insert_drive_file</i>
-              {{ request.name || $t("none") }}
-            </h4>
-            <p class="doc-desc" v-if="request.url">
-              <span>
-                {{ $t("url") }}: <code>{{ request.url || $t("none") }}</code>
-              </span>
-            </p>
-            <p class="doc-desc" v-if="request.path">
-              <span>
-                {{ $t("path") }}: <code>{{ request.path || $t("none") }}</code>
-              </span>
-            </p>
-            <p class="doc-desc" v-if="request.method">
-              <span>
-                {{ $t("method") }}:
-                <code>{{ request.method || $t("none") }}</code>
-              </span>
-            </p>
-            <p class="doc-desc" v-if="request.auth">
-              <span>
-                {{ $t("authentication") }}:
-                <code>{{ request.auth || $t("none") }}</code>
-              </span>
-            </p>
-            <p class="doc-desc" v-if="request.httpUser">
-              <span>
-                {{ $t("username") }}:
-                <code>{{ request.httpUser || $t("none") }}</code>
-              </span>
-            </p>
-            <p class="doc-desc" v-if="request.httpPassword">
-              <span>
-                {{ $t("password") }}:
-                <code>{{ request.httpPassword || $t("none") }}</code>
-              </span>
-            </p>
-            <p class="doc-desc" v-if="request.bearerToken">
-              <span>
-                {{ $t("token") }}:
-                <code>{{ request.bearerToken || $t("none") }}</code>
-              </span>
-            </p>
-            <h4 v-if="request.headers.length > 0">{{ $t("headers") }}</h4>
-            <span v-if="request.headers">
-              <p v-for="header in request.headers" :key="header.key" class="doc-desc">
-                <span>
-                  {{ header.key || $t("none") }}:
-                  <code>{{ header.value || $t("none") }}</code>
-                </span>
-              </p>
-            </span>
-            <h4 v-if="request.params.length > 0">{{ $t("parameters") }}</h4>
-            <span v-if="request.params">
-              <p v-for="parameter in request.params" :key="parameter.key" class="doc-desc">
-                <span>
-                  {{ parameter.key || $t("none") }}:
-                  <code>{{ parameter.value || $t("none") }}</code>
-                </span>
-              </p>
-            </span>
-            <h4 v-if="request.bodyParam">{{ $t("payload") }}</h4>
-            <span v-if="request.bodyParam">
-              <p v-for="payload in request.bodyParam" :key="payload.key" class="doc-desc">
-                <span>
-                  {{ payload.key || $t("none") }}:
-                  <code>{{ payload.value || $t("none") }}</code>
-                </span>
-              </p>
-            </span>
-            <p class="doc-desc" v-if="request.rawParams">
-              <span>
-                {{ $t("parameters") }}:
-                <code>{{ request.rawParams || $t("none") }}</code>
-              </span>
-            </p>
-            <p class="doc-desc" v-if="request.contentType">
-              <span>
-                {{ $t("content_type") }}:
-                <code>{{ request.contentType || $t("none") }}</code>
-              </span>
-            </p>
-            <p class="doc-desc" v-if="request.requestType">
-              <span>
-                {{ $t("request_type") }}:
-                <code>{{ request.requestType || $t("none") }}</code>
-              </span>
-            </p>
-          </span>
-        </span>
+          </div>
+        </pw-section>
       </div>
-    </pw-section>
+
+      <aside class="sticky-inner inner-right">
+        <section>
+          <collections @use-collection="useSelectedCollection($event)" :doc="true" />
+        </section>
+      </aside>
+    </div>
   </div>
 </template>
 
@@ -309,6 +334,7 @@ export default {
   components: {
     "pw-section": () => import("~/components/layout/section"),
     Editor: AceEditor,
+    collections: () => import("~/components/collections"),
   },
   data() {
     return {
@@ -349,6 +375,11 @@ export default {
         })
       }
     },
+
+    useSelectedCollection(collection) {
+      let importCollection = `[${JSON.stringify(collection, null, 2)}]`
+      this.collectionJSON = JSON.stringify(JSON.parse(importCollection), null, 2)
+    },
   },
   head() {
     return {