From daec39016b1e8a39023fe1e298b89adcdcef09e7 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Mon, 7 Feb 2022 15:38:01 +0530
Subject: [PATCH] feat: loading state on export actions

---
 .../components/collections/my/Collection.vue  | 14 ++++++++++++++
 .../components/collections/my/Folder.vue      | 14 ++++++++++++++
 .../collections/teams/Collection.vue          | 19 +++++++++++++++++++
 .../components/collections/teams/Folder.vue   | 19 +++++++++++++++++++
 4 files changed, 66 insertions(+)

diff --git a/packages/hoppscotch-app/components/collections/my/Collection.vue b/packages/hoppscotch-app/components/collections/my/Collection.vue
index 6cf5a5703..da936ccef 100644
--- a/packages/hoppscotch-app/components/collections/my/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/my/Collection.vue
@@ -81,6 +81,7 @@
               @keyup.n="folderAction.$el.click()"
               @keyup.e="edit.$el.click()"
               @keyup.delete="deleteAction.$el.click()"
+              @keyup.x="exportAction.$el.click()"
               @keyup.escape="options.tippy().hide()"
             >
               <SmartItem
@@ -122,6 +123,18 @@
                   }
                 "
               />
+              <SmartItem
+                ref="exportAction"
+                svg="download"
+                :label="$t('export.as_json')"
+                :shortcut="['X']"
+                @click.native="
+                  () => {
+                    $emit('export-collection')
+                    options.tippy().hide()
+                  }
+                "
+              />
             </div>
           </tippy>
         </span>
@@ -222,6 +235,7 @@ export default defineComponent({
       folderAction: ref<any | null>(null),
       edit: ref<any | null>(null),
       deleteAction: ref<any | null>(null),
+      exportAction: ref<any | null>(null),
     }
   },
   data() {
diff --git a/packages/hoppscotch-app/components/collections/my/Folder.vue b/packages/hoppscotch-app/components/collections/my/Folder.vue
index 032f137fc..c82d00f24 100644
--- a/packages/hoppscotch-app/components/collections/my/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/my/Folder.vue
@@ -59,6 +59,7 @@
               @keyup.n="folderAction.$el.click()"
               @keyup.e="edit.$el.click()"
               @keyup.delete="deleteAction.$el.click()"
+              @keyup.x="exportAction.$el.click()"
               @keyup.escape="options.tippy().hide()"
             >
               <SmartItem
@@ -102,6 +103,18 @@
                   }
                 "
               />
+              <SmartItem
+                ref="exportAction"
+                svg="download"
+                :label="$t('export.as_json')"
+                :shortcut="['X']"
+                @click.native="
+                  () => {
+                    $emit('export-collection')
+                    options.tippy().hide()
+                  }
+                "
+              />
             </div>
           </tippy>
         </span>
@@ -211,6 +224,7 @@ export default defineComponent({
       folderAction: ref<any | null>(null),
       edit: ref<any | null>(null),
       deleteAction: ref<any | null>(null),
+      exportAction: ref<any | null>(null),
       t,
     }
   },
diff --git a/packages/hoppscotch-app/components/collections/teams/Collection.vue b/packages/hoppscotch-app/components/collections/teams/Collection.vue
index c5168434c..a3c65b121 100644
--- a/packages/hoppscotch-app/components/collections/teams/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Collection.vue
@@ -82,6 +82,7 @@
               @keyup.n="folderAction.$el.click()"
               @keyup.e="edit.$el.click()"
               @keyup.delete="deleteAction.$el.click()"
+              @keyup.x="exportAction.$el.click()"
               @keyup.escape="options.tippy().hide()"
             >
               <SmartItem
@@ -123,6 +124,22 @@
                   }
                 "
               />
+              <SmartItem
+                ref="exportAction"
+                svg="download"
+                :label="$t('export.as_json')"
+                :shortcut="['X']"
+                :loading="exportLoading"
+                @click.native="
+                  () => {
+                    $emit('export-collection')
+                    // TODO: remove the below line
+                    exportLoading = true
+                    // TODO: remove the below line, instead hide the tooltip after finishing export
+                    options.tippy().hide()
+                  }
+                "
+              />
             </div>
           </tippy>
         </span>
@@ -237,6 +254,8 @@ export default defineComponent({
       folderAction: ref<any | null>(null),
       edit: ref<any | null>(null),
       deleteAction: ref<any | null>(null),
+      exportAction: ref<any | null>(null),
+      exportLoading: ref<boolean>(false),
       t,
     }
   },
diff --git a/packages/hoppscotch-app/components/collections/teams/Folder.vue b/packages/hoppscotch-app/components/collections/teams/Folder.vue
index 65b1fd540..07a1dac52 100644
--- a/packages/hoppscotch-app/components/collections/teams/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Folder.vue
@@ -61,6 +61,7 @@
               @keyup.n="folderAction.$el.click()"
               @keyup.e="edit.$el.click()"
               @keyup.delete="deleteAction.$el.click()"
+              @keyup.x="exportAction.$el.click()"
               @keyup.escape="options.tippy().hide()"
             >
               <SmartItem
@@ -104,6 +105,22 @@
                   }
                 "
               />
+              <SmartItem
+                ref="exportAction"
+                svg="download"
+                :label="$t('export.as_json')"
+                :shortcut="['X']"
+                :loading="exportLoading"
+                @click.native="
+                  () => {
+                    $emit('export-collection')
+                    // TODO: remove the below line
+                    exportLoading = true
+                    // TODO: remove the below line, instead hide the tooltip after finishing export
+                    options.tippy().hide()
+                  }
+                "
+              />
             </div>
           </tippy>
         </span>
@@ -217,6 +234,8 @@ export default defineComponent({
       folderAction: ref<any | null>(null),
       edit: ref<any | null>(null),
       deleteAction: ref<any | null>(null),
+      exportAction: ref<any | null>(null),
+      exportLoading: ref<boolean>(false),
     }
   },
   data() {