Skip to content

Commit

Permalink
feat: rename request by double clicking its name on tabs (hoppscotch#…
Browse files Browse the repository at this point in the history
…3057)

Co-authored-by: Liyas Thomas <[email protected]>
  • Loading branch information
anwarulislam and liyasthomas authored May 24, 2023
1 parent ddaec1b commit c910a03
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 12 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand All @@ -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() === "") {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)"
Expand Down
23 changes: 23 additions & 0 deletions packages/hoppscotch-common/src/pages/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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')"
Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -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)
*/
Expand Down

0 comments on commit c910a03

Please sign in to comment.