Add Collections section in Docs page

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">keyboard_backspace</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>
@@ -97,6 +105,7 @@ export default {
   props: {
     collectionIndex: Number,
     collection: Object,
+    doc: Boolean,
   },
   data() {
     return {

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,

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);

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="collections">
           <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,14 @@
           </div>
         </pw-section>
       </div>
+
+      <aside class="sticky-inner inner-right">
+        <section>
+          <collections @use-collection="useSelectedCollection($event)" :doc="true" />
+        </section>
+      </aside>
+    </div>
+  </div>
 </template>
 
 <style scoped lang="scss">
@@ -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 {