From 635c82c3162483c4819f84384db5a02d62159bae Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Wed, 23 Oct 2019 08:54:05 +0530
Subject: [PATCH] :sparkles: Added 'Export JSON' button to download collections
 as json file

---
 components/collections/collection.vue       |  8 +++----
 components/collections/exportCollection.vue | 23 +++++++++++++++++++++
 components/collections/folder.vue           |  6 +++---
 components/collections/request.vue          | 10 ++++-----
 components/history.vue                      |  4 ++--
 5 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/components/collections/collection.vue b/components/collections/collection.vue
index 717f6d728..1faa92205 100644
--- a/components/collections/collection.vue
+++ b/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>
diff --git a/components/collections/exportCollection.vue b/components/collections/exportCollection.vue
index b4b927cf7..c0291eaa9 100644
--- a/components/collections/exportCollection.vue
+++ b/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>
diff --git a/components/collections/folder.vue b/components/collections/folder.vue
index f396c4007..de1b5f3f1 100644
--- a/components/collections/folder.vue
+++ b/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>
 
diff --git a/components/collections/request.vue b/components/collections/request.vue
index 459628ed1..18f09b0ae 100644
--- a/components/collections/request.vue
+++ b/components/collections/request.vue
@@ -1,18 +1,18 @@
 <template>
     <div class="flex-wrap">
       <div>
-        <button class="icon" @click="selectRequest()">
-          <i class="material-icons">star</i>
+        <button class="icon" @click="selectRequest()" v-tooltip="'Use request'">
+          <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>
diff --git a/components/history.vue b/components/history.vue
index bc9673826..5d29c5ae7 100644
--- a/components/history.vue
+++ b/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>