Select multiple collections (#1604) (#1605)

components/collections/Collection.vue

@@ -17,12 +17,20 @@
       </button>
       <div>
         <button
-          v-if="doc"
+          v-if="doc && !selected"
           class="icon"
           @click="$emit('select-collection')"
           v-tooltip.left="$t('import')"
         >
-          <i class="material-icons">topic</i>
+          <i class="material-icons">check_box_outline_blank</i>
+        </button>
+        <button
+          v-if="doc && selected"
+          class="icon"
+          @click="$emit('unselect-collection')"
+          v-tooltip.left="$t('delete')"
+        >
+          <i class="material-icons">check_box</i>
         </button>
         <v-popover>
           <button class="tooltip-target icon" v-tooltip.left="$t('more')">
@@ -122,6 +130,7 @@ export default {
     collection: Object,
     doc: Boolean,
     isFiltered: Boolean,
+    selected: Boolean,
   },
   data() {
     return {

components/collections/index.vue

@@ -64,11 +64,13 @@
             :collection="collection"
             :doc="doc"
             :isFiltered="filterText.length > 0"
+            :selected="selected.some((coll) => coll == collection)"
             @edit-collection="editCollection(collection, index)"
             @add-folder="addFolder($event)"
             @edit-folder="editFolder($event)"
             @edit-request="editRequest($event)"
             @select-collection="$emit('use-collection', collection)"
+            @unselect-collection="$emit('remove-collection', collection)"
           />
         </li>
       </ul>
@@ -92,6 +94,7 @@ import { getSettingSubject } from "~/newstore/settings"
 export default {
   props: {
     doc: Boolean,
+    selected: { type: Array, default: () => [] },
   },
   data() {
     return {

pages/doc.vue

@@ -85,7 +85,12 @@
       </div>
 
       <aside class="sticky-inner inner-right lg:max-w-md">
-        <Collections @use-collection="useSelectedCollection($event)" :doc="true" />
+        <Collections
+          :selected="selected"
+          @use-collection="useSelectedCollection($event)"
+          @remove-collection="removeSelectedCollection($event)"
+          :doc="true"
+        />
       </aside>
     </div>
   </div>
@@ -103,6 +108,7 @@ export default {
       collectionJSON: "[]",
       items: [],
       docsMarkdown: "",
+      selected: [],
     }
   },
   methods: {
@@ -191,7 +197,17 @@ export default {
     },
 
     useSelectedCollection(collection) {
-      let importCollection = `[${JSON.stringify(collection, null, 2)}]`
+      if (this.selected.find((coll) => coll == collection)) {
+        return
+      }
+      this.selected.push(collection)
+      let importCollection = JSON.stringify(this.selected, null, 2)
+      this.collectionJSON = JSON.stringify(JSON.parse(importCollection), null, 2)
+    },
+
+    removeSelectedCollection(collection) {
+      this.selected = this.selected.filter((coll) => coll != collection)
+      let importCollection = JSON.stringify(this.selected, null, 2)
       this.collectionJSON = JSON.stringify(JSON.parse(importCollection), null, 2)
     },
   },