From c910a0314a051edadf4758becb07f71c60033433 Mon Sep 17 00:00:00 2001
From: Anwarul Islam <anwaarulislaam@gmail.com>
Date: Thu, 25 May 2023 02:18:19 +0600
Subject: [PATCH] feat: rename request by double clicking its name on tabs
 (#3057)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>
---
 .../components/collections/EditRequest.vue    | 16 ++++---------
 .../src/components/collections/index.vue      |  2 +-
 .../hoppscotch-common/src/pages/index.vue     | 23 +++++++++++++++++++
 3 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/collections/EditRequest.vue b/packages/hoppscotch-common/src/components/collections/EditRequest.vue
index 6299ea0e8..6721b08c9 100644
--- a/packages/hoppscotch-common/src/components/collections/EditRequest.vue
+++ b/packages/hoppscotch-common/src/components/collections/EditRequest.vue
@@ -42,9 +42,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from "vue"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
+import { useVModel } from "@vueuse/core"
 
 const toast = useToast()
 const t = useI18n()
@@ -53,28 +53,22 @@ const props = withDefaults(
   defineProps<{
     show: boolean
     loadingState: boolean
-    editingRequestName: string
+    modelValue?: string
   }>(),
   {
     show: false,
     loadingState: false,
-    editingRequestName: "",
+    modelValue: "",
   }
 )
 
 const emit = defineEmits<{
   (e: "submit", name: string): void
   (e: "hide-modal"): void
+  (e: "update:modelValue", value: string): void
 }>()
 
-const name = ref("")
-
-watch(
-  () => props.editingRequestName,
-  (newName) => {
-    name.value = newName
-  }
-)
+const name = useVModel(props, "modelValue")
 
 const editRequest = () => {
   if (name.value.trim() === "") {
diff --git a/packages/hoppscotch-common/src/components/collections/index.vue b/packages/hoppscotch-common/src/components/collections/index.vue
index b06827d85..ed1e24de4 100644
--- a/packages/hoppscotch-common/src/components/collections/index.vue
+++ b/packages/hoppscotch-common/src/components/collections/index.vue
@@ -126,7 +126,7 @@
     />
     <CollectionsEditRequest
       :show="showModalEditRequest"
-      :editing-request-name="editingRequest ? editingRequest.name : ''"
+      v-bind:model-value="editingRequest ? editingRequest.name : ''"
       :loading-state="modalLoadingState"
       @submit="updateEditingRequest"
       @hide-modal="displayModalEditRequest(false)"
diff --git a/packages/hoppscotch-common/src/pages/index.vue b/packages/hoppscotch-common/src/pages/index.vue
index 7af39c2de..027b447e6 100644
--- a/packages/hoppscotch-common/src/pages/index.vue
+++ b/packages/hoppscotch-common/src/pages/index.vue
@@ -23,6 +23,7 @@
                 v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
                 :title="tab.document.request.name"
                 class="truncate px-2"
+                @dblclick="openReqRenameModal()"
               >
                 <span
                   class="font-semibold text-tiny"
@@ -61,6 +62,12 @@
         <HttpSidebar />
       </template>
     </AppPaneLayout>
+    <CollectionsEditRequest
+      :show="showRenamingReqNameModal"
+      v-model="reqName"
+      @submit="renameReqName"
+      @hide-modal="showRenamingReqNameModal = false"
+    />
     <HoppSmartConfirmModal
       :show="confirmingCloseForTabID !== null"
       :confirm="t('modal.close_unsaved_tab')"
@@ -116,6 +123,8 @@ import { oauthRedirect } from "~/helpers/oauth"
 
 const savingRequest = ref(false)
 const confirmingCloseForTabID = ref<string | null>(null)
+const showRenamingReqNameModal = ref(false)
+const reqName = ref<string>("")
 
 const t = useI18n()
 const toast = useToast()
@@ -166,6 +175,20 @@ const removeTab = (tabID: string) => {
   }
 }
 
+const openReqRenameModal = () => {
+  showRenamingReqNameModal.value = true
+  reqName.value = currentActiveTab.value.document.request.name
+}
+
+const renameReqName = () => {
+  const tab = getTabRef(currentTabID.value)
+  if (tab.value) {
+    tab.value.document.request.name = reqName.value
+    updateTab(tab.value)
+  }
+  showRenamingReqNameModal.value = false
+}
+
 /**
  * This function is closed when the confirm tab is closed by some means (even saving triggers close)
  */