feature: allow importing collections from local JSON files

components/collections/importExportCollections.vue

@@ -5,7 +5,7 @@
             <ul>
                 <li>
                 <div class="flex-wrap">
-                    <h3 class="title">Export Collections</h3>
+                    <h3 class="title">Import / Export Collections</h3>
                     <div>
                     <button class="icon" @click="hideModel">
                         <i class="material-icons">close</i>
@@ -21,6 +21,20 @@
             </div>
             <div slot="footer">
               <ul>
+                <li>
+                <button class="icon" @click="openDialogChooseFileToReplaceWith">
+                  <i class="material-icons">get_app</i>
+                  <span>Replace with JSON</span>
+                  <input type="file" @change="replaceWithJSON" style="display: none;" ref="inputChooseFileToReplaceWith">
+                </button>
+                </li>
+                <li>
+                <button class="icon" @click="openDialogChooseFileToImportFrom">
+                  <i class="material-icons">get_app</i>
+                  <span>Import from JSON</span>
+                  <input type="file" @change="importFromJSON" style="display: none;" ref="inputChooseFileToImportFrom">
+                </button>
+                </li>
                 <li>
                 <button class="icon" @click="exportJSON">
                   <i class="material-icons">get_app</i>
@@ -52,6 +66,30 @@ export default {
         hideModel() {
             this.$emit('hide-model');
         },
+        openDialogChooseFileToReplaceWith() {
+          this.$refs.inputChooseFileToReplaceWith.click();
+        },
+        openDialogChooseFileToImportFrom() {
+          this.$refs.inputChooseFileToImportFrom.click();
+        },
+        replaceWithJSON() {
+          let reader = new FileReader();
+          reader.onload = (event) => {
+            let content = event.target.result;
+            let collections = JSON.parse(content);
+            this.$store.commit('postwoman/replaceCollections', collections);
+          };
+          reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0]);
+        },
+        importFromJSON() {
+          let reader = new FileReader();
+          reader.onload = (event) => {
+            let content = event.target.result;
+            let collections = JSON.parse(content);
+            this.$store.commit('postwoman/importCollections', collections);
+          };
+          reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0]);
+        },
         exportJSON() {
           let text = this.collectionJson;
           text = text.replace(/\n/g, '\r\n');

components/collections/index.vue

@@ -9,7 +9,7 @@
       >
     </addCollection>
 
-    <exportCollection :show="showExportModal" v-on:hide-model='toggleExport'></exportCollection>
+    <importExportCollections :show="showImportExportModal" v-on:hide-model='toggleImportExport'></importExportCollections>
 
     <div class='flex-wrap'>
       <div>
@@ -19,9 +19,9 @@
         </button>
       </div>
       <div>
-        <button class="icon" @click="toggleExport">
+        <button class="icon" @click="toggleImportExport">
           <i class="material-icons">import_export</i>
-          <span>Export</span>
+          <span>Import / Export</span>
         </button>
       </div>
     </div>
@@ -50,19 +50,19 @@
 
 <script>
   import addCollection from "./addCollection";
-  import exportCollection from "./exportCollection";
+  import importExportCollections from "./importExportCollections";
   import collection from './collection'
 
   export default {
     components: {
       collection,
       addCollection,
-      exportCollection,
+      importExportCollections,
     },
     data() {
       return {
         showAddModel: false,
-        showExportModal: false,
+        showImportExportModal: false,
         selectedCollection: {},
       }
     },
@@ -75,8 +75,8 @@
       toggleModal() {
         this.showAddModel = !this.showAddModel;
       },
-      toggleExport() {
-        this.showExportModal = !this.showExportModal;
+      toggleImportExport() {
+        this.showImportExportModal = !this.showImportExportModal;
       },
       addNewCollection(newCollection) {
         this.$store.commit('postwoman/addCollection', newCollection);

store/postwoman.js

@@ -68,6 +68,14 @@ export const mutations = {
         state.settings[key] = value;
     },
 
+    replaceCollections (state, collections) {
+        state.collections = collections;
+    },
+
+    importCollections (state, collections) {
+        state.collections = [...state.collections, ...collections];
+    },
+
     addCollection (state, newCollection) {
         state.collections.push(newCollection);
     },
@@ -99,7 +107,7 @@ export const mutations = {
 
     addRequest (state, payload) {
         const { request } = payload;
-        
+
         // Request that is directly attached to collection
         if (request.folder === -1) {
             state.collections[request.collection].requests.push(request);
@@ -126,7 +134,7 @@ export const mutations = {
 
         delete request.oldCollection;
         delete request.oldFolder;
-        
+
         // Request that is directly attached to collection
         if (request.folder === -1) {
             state.collections[request.collection].requests[request.requestIndex] = request;