✨ Added 'Export JSON' button to download collections as json file

components/collections/collection.vue

@@ -19,14 +19,14 @@
             </button>
           </div>
           <div>
-            <button class="icon" @click="editCollection" v-tooltip="'Edit collection'">
-              <i class="material-icons">create</i>
-            </button>
             <button class="icon" @click="removeCollection" v-tooltip="'Delete collection'">
               <i class="material-icons">delete</i>
             </button>
+            <button class="icon" @click="editCollection" v-tooltip="'Edit collection'">
+              <i class="material-icons">create</i>
+            </button>
             <button class="icon" @click="toggleModal" v-tooltip="'New Folder'">
-              <i class="material-icons">add</i>
+              <i class="material-icons">create_new_folder</i>
             </button>
           </div>
         </div>

components/collections/exportCollection.vue

@@ -20,6 +20,14 @@
               </textarea>
             </div>
             <div slot="footer">
+              <ul>
+                <li>
+                <button class="icon" @click="exportJSON">
+                  <i class="material-icons">get_app</i>
+                  <span>Export JSON</span>
+                </button>
+                </li>
+              </ul>
             </div>
         </modal>
     </div>
@@ -44,6 +52,21 @@ export default {
         hideModel() {
             this.$emit('hide-model');
         },
+        exportJSON() {
+          let text = this.collectionJson;
+          text = text.replace(/\n/g, '\r\n');
+          let blob = new Blob([text], {
+            type: 'text/json'
+          });
+          let anchor = document.createElement('a');
+          anchor.download = 'postwoman-collection.json';
+          anchor.href = window.URL.createObjectURL(blob);
+          anchor.target = '_blank';
+          anchor.style.display = 'none';
+          document.body.appendChild(anchor);
+          anchor.click();
+          document.body.removeChild(anchor);
+        }
     },
 };
 </script>

components/collections/folder.vue

@@ -10,12 +10,12 @@
             </button>
           </div>
           <div>
-            <button class="icon" @click="editFolder" v-tooltip="'Edit folder'">
-              <i class="material-icons">edit</i>
-            </button>
             <button class="icon" @click="removeFolder" v-tooltip="'Delete folder'">
               <i class="material-icons">delete</i>
             </button>
+            <button class="icon" @click="editFolder" v-tooltip="'Edit folder'">
+              <i class="material-icons">edit</i>
+            </button>
           </div>
         </div>
 

components/collections/request.vue

@@ -1,18 +1,18 @@
 <template>
     <div class="flex-wrap">
       <div>
-        <button class="icon" @click="selectRequest()">
+        <button class="icon" @click="selectRequest()" v-tooltip="'Use request'">
-          <i class="material-icons">star</i>
+          <i class="material-icons">insert_drive_file</i>
           <span>{{request.name}}</span>
         </button>
       </div>
       <div>
-        <button class="icon" @click="editRequest" v-tooltip="'Edit request'">
-          <i class="material-icons">edit</i>
-        </button>
         <button class="icon" @click="removeRequest" v-tooltip="'Delete collection'">
           <i class="material-icons">delete</i>
         </button>
+        <button class="icon" @click="editRequest" v-tooltip="'Edit request'">
+          <i class="material-icons">edit</i>
+        </button>
       </div>
     </div>
 </template>

components/history.vue

@@ -42,12 +42,12 @@
         </li>
         <div class="show-on-small-screen">
           <li>
-            <button v-tooltip="'Delete'" class="icon" :id="'delete-button#'+index" @click="deleteHistory(entry)" aria-label="Delete">
+            <button v-tooltip="'Delete entry'" class="icon" :id="'delete-button#'+index" @click="deleteHistory(entry)" aria-label="Delete">
               <i class="material-icons">delete</i>
             </button>
           </li>
           <li>
-            <button v-tooltip="'Edit'" class="icon" :id="'use-button#'+index" @click="useHistory(entry)" aria-label="Edit">
+            <button v-tooltip="'Edit entry'" class="icon" :id="'use-button#'+index" @click="useHistory(entry)" aria-label="Edit">
               <i class="material-icons">edit</i>
             </button>
           </li>