Merge pull request #1004 from liyasthomas/feat/doc

components/collections/collection.vue

@@ -1,14 +1,21 @@
 <template>
   <div>
     <div class="flex-wrap">
-      <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>
-      </div>
+      <div>
+        <button
+          v-if="doc"
+          class="icon"
+          @click="$emit('select-collection')"
+          v-tooltip.left="$t('import')"
+        >
+          <i class="material-icons">topic</i>
+        </button>
         <v-popover>
           <button class="tooltip-target icon" v-tooltip.left="$t('more')">
             <i class="material-icons">more_vert</i>
@@ -35,6 +42,7 @@
           </template>
         </v-popover>
       </div>
+    </div>
 
     <div v-show="showChildren">
       <ul>
@@ -43,6 +51,7 @@
             :folder="folder"
             :folderIndex="index"
             :collection-index="collectionIndex"
+            :doc="doc"
             @edit-folder="editFolder(collectionIndex, folder, index)"
             @edit-request="$emit('edit-request', $event)"
           />
@@ -58,6 +67,7 @@
             :collection-index="collectionIndex"
             :folder-index="-1"
             :request-index="index"
+            :doc="doc"
             @edit-request="
               $emit('edit-request', {
                 request,
@@ -97,6 +107,7 @@ export default {
   props: {
     collectionIndex: Number,
     collection: Object,
+    doc: Boolean,
   },
   data() {
     return {

components/collections/folder.vue

@@ -38,6 +38,7 @@
             :collection-index="collectionIndex"
             :folder-index="folderIndex"
             :request-index="index"
+            :doc="doc"
             @edit-request="
               $emit('edit-request', {
                 request,
@@ -77,6 +78,7 @@ export default {
     folder: Object,
     collectionIndex: Number,
     folderIndex: Number,
+    doc: Boolean,
   },
   components: {
     request: () => import("./request"),

components/collections/index.vue

@@ -70,26 +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')">
-      <button class="icon">
-        <i class="material-icons">topic</i>
-        <span>{{ $t("generate_docs") }}</span>
-      </button>
-    </nuxt-link>
   </pw-section>
 </template>
 
 <style scoped lang="scss">
 .virtual-list {
-  max-height: calc(100vh - 290px);
+  max-height: calc(100vh - 245px);
 }
 
 ul {
@@ -113,6 +109,9 @@ export default {
     editRequest: () => import("./editRequest"),
     importExportCollections: () => import("./importExportCollections"),
   },
+  props: {
+    doc: Boolean,
+  },
   data() {
     return {
       showModalAdd: false,

components/collections/request.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="flex-wrap">
     <div>
-      <button class="icon" @click="selectRequest()" v-tooltip="$t('use_request')">
+      <button
+        class="icon"
+        @click="!doc ? selectRequest() : {}"
+        v-tooltip="!doc ? $t('use_request') : ''"
+      >
         <i class="material-icons">insert_drive_file</i>
         <span>{{ request.name }}</span>
       </button>
@@ -50,6 +54,7 @@ export default {
     collectionIndex: Number,
     folderIndex: Number,
     requestIndex: Number,
+    doc: Boolean,
   },
   methods: {
     syncCollections() {

components/layout/sidenav.vue

@@ -126,7 +126,7 @@
       <nav class="secondary-nav">
         <ul>
           <li>
-            <a href="#collections" v-tooltip.right="$t('collections')">
+            <a href="#import" v-tooltip.right="$t('import')">
               <i class="material-icons">folder</i>
             </a>
           </li>

pages/doc.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="page">
-    <pw-section class="blue" :label="$t('collections')" ref="collections">
+    <div class="content">
+      <div class="page-columns inner-left">
+        <pw-section class="blue" :label="$t('import')" ref="import">
           <ul>
             <li>
               <p class="info">
@@ -10,8 +12,13 @@
           </ul>
           <ul>
             <li>
+              <div class="flex-wrap">
                 <label for="collectionUpload">
-            <button class="icon" @click="$refs.collectionUpload.click()" v-tooltip="$t('json')">
+                  <button
+                    class="icon"
+                    @click="$refs.collectionUpload.click()"
+                    v-tooltip="$t('json')"
+                  >
                     <i class="material-icons">folder</i>
                     <span>{{ $t("import_collections") }}</span>
                   </button>
@@ -22,6 +29,16 @@
                   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>
@@ -258,6 +275,12 @@
           </div>
         </pw-section>
       </div>
+
+      <aside class="sticky-inner inner-right">
+        <collections @use-collection="useSelectedCollection($event)" :doc="true" />
+      </aside>
+    </div>
+  </div>
 </template>
 
 <style scoped lang="scss">
@@ -309,6 +332,7 @@ export default {
   components: {
     "pw-section": () => import("~/components/layout/section"),
     Editor: AceEditor,
+    collections: () => import("~/components/collections"),
   },
   data() {
     return {
@@ -349,6 +373,11 @@ export default {
         })
       }
     },
+
+    useSelectedCollection(collection) {
+      let importCollection = `[${JSON.stringify(collection, null, 2)}]`
+      this.collectionJSON = JSON.stringify(JSON.parse(importCollection), null, 2)
+    },
   },
   head() {
     return {