btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

fix: fix ref access when using v-for on Invite.vue (#2744)

Browse Source 
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
This commit is contained in:
Akash K
2022-10-06 16:06:14 +05:30
committed by GitHub
parent 604ef4d004
commit 59ee4babeb
3 changed files with 39 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
packages/hoppscotch-app/src/components/collections/teams/Collection.vue
View File

@@ -8,7 +8,7 @@
@drop="dragging = false" @drop="dragging = false"
@dragleave="dragging = false" @dragleave="dragging = false"
@dragend="dragging = false" @dragend="dragging = false"
@contextmenu.prevent="options.tippy.show()" @contextmenu.prevent="options!.tippy.show()"
> >
<span <span
class="flex items-center justify-center px-4 cursor-pointer" class="flex items-center justify-center px-4 cursor-pointer"
@@ -62,7 +62,7 @@
interactive interactive
trigger="click" trigger="click"
theme="popover" theme="popover"
:on-shown="() => tippyActions.focus()" :on-shown="() => tippyActions!.focus()"
> >
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
@@ -74,11 +74,11 @@
ref="tippyActions" ref="tippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
@keyup.r="requestAction.$el.click()" @keyup.r="requestAction!.$el.click()"
@keyup.n="folderAction.$el.click()" @keyup.n="folderAction!.$el.click()"
@keyup.e="edit.$el.click()" @keyup.e="edit!.$el.click()"
@keyup.delete="deleteAction.$el.click()" @keyup.delete="deleteAction!.$el.click()"
@keyup.x="exportAction.$el.click()" @keyup.x="exportAction!.$el.click()"
@keyup.escape="hide()" @keyup.escape="hide()"
> >
<SmartItem <SmartItem
@@ -246,6 +246,8 @@ import { moveRESTTeamRequest } from "~/helpers/backend/mutations/TeamRequest"
import { useColorMode } from "@composables/theming" import { useColorMode } from "@composables/theming"
import { useI18n } from "@composables/i18n" import { useI18n } from "@composables/i18n"
import { useToast } from "@composables/toast" import { useToast } from "@composables/toast"
import { TippyComponent } from "vue-tippy"
import SmartItem from "@components/smart/Item.vue"
export default defineComponent({ export default defineComponent({
props: { props: {
@@ -275,13 +277,13 @@ export default defineComponent({
return { return {
// Template refs // Template refs
tippyActions: ref<any | null>(null), tippyActions: ref<TippyComponent | null>(null),
options: ref<any | null>(null), options: ref<TippyComponent | null>(null),
requestAction: ref<any | null>(null), requestAction: ref<typeof SmartItem | null>(null),
folderAction: ref<any | null>(null), folderAction: ref<typeof SmartItem | null>(null),
edit: ref<any | null>(null), edit: ref<typeof SmartItem | null>(null),
deleteAction: ref<any | null>(null), deleteAction: ref<typeof SmartItem | null>(null),
exportAction: ref<any | null>(null), exportAction: ref<typeof SmartItem | null>(null),
exportLoading: ref<boolean>(false), exportLoading: ref<boolean>(false),
t, t,
toast: useToast(), toast: useToast(),
@@ -332,7 +334,7 @@ export default defineComponent({
this.toast.error(this.t("error.something_went_wrong").toString()) this.toast.error(this.t("error.something_went_wrong").toString())
console.log(result.left) console.log(result.left)
this.exportLoading = false this.exportLoading = false
this.options.tippy().hide() this.options!.tippy.hide()
return return
} }
@@ -358,7 +360,7 @@ export default defineComponent({
this.exportLoading = false this.exportLoading = false
this.options.tippy().hide() this.options!.tippy.hide()
}, },
editRequest(event: any) { editRequest(event: any) {
this.$emit("edit-request", event) this.$emit("edit-request", event)

34
packages/hoppscotch-app/src/components/collections/teams/Folder.vue
View File

@@ -8,7 +8,7 @@
@drop="dragging = false" @drop="dragging = false"
@dragleave="dragging = false" @dragleave="dragging = false"
@dragend="dragging = false" @dragend="dragging = false"
@contextmenu.prevent="options.tippy.show()" @contextmenu.prevent="options!.tippy.show()"
> >
<span <span
class="flex items-center justify-center px-4 cursor-pointer" class="flex items-center justify-center px-4 cursor-pointer"
@@ -52,7 +52,7 @@
interactive interactive
trigger="click" trigger="click"
theme="popover" theme="popover"
:on-shown="() => tippyActions.focus()" :on-shown="() => tippyActions!.focus()"
> >
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
@@ -64,11 +64,11 @@
ref="tippyActions" ref="tippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
@keyup.r="requestAction.$el.click()" @keyup.r="requestAction!.$el.click()"
@keyup.n="folderAction.$el.click()" @keyup.n="folderAction!.$el.click()"
@keyup.e="edit.$el.click()" @keyup.e="edit!.$el.click()"
@keyup.delete="deleteAction.$el.click()" @keyup.delete="deleteAction!.$el.click()"
@keyup.x="exportAction.$el.click()" @keyup.x="exportAction!.$el.click()"
@keyup.escape="hide()" @keyup.escape="hide()"
> >
<SmartItem <SmartItem
@@ -233,6 +233,8 @@ import { moveRESTTeamRequest } from "~/helpers/backend/mutations/TeamRequest"
import { useI18n } from "@composables/i18n" import { useI18n } from "@composables/i18n"
import { useToast } from "@composables/toast" import { useToast } from "@composables/toast"
import { useColorMode } from "@composables/theming" import { useColorMode } from "@composables/theming"
import { TippyComponent } from "vue-tippy"
import SmartItem from "@components/smart/Item.vue"
export default defineComponent({ export default defineComponent({
name: "Folder", name: "Folder",
@@ -262,13 +264,13 @@ export default defineComponent({
setup() { setup() {
return { return {
// Template refs // Template refs
tippyActions: ref<any | null>(null), tippyActions: ref<TippyComponent | null>(null),
options: ref<any | null>(null), options: ref<TippyComponent | null>(null),
requestAction: ref<any | null>(null), requestAction: ref<typeof SmartItem | null>(null),
folderAction: ref<any | null>(null), folderAction: ref<typeof SmartItem | null>(null),
edit: ref<any | null>(null), edit: ref<typeof SmartItem | null>(null),
deleteAction: ref<any | null>(null), deleteAction: ref<typeof SmartItem | null>(null),
exportAction: ref<any | null>(null), exportAction: ref<typeof SmartItem | null>(null),
exportLoading: ref<boolean>(false), exportLoading: ref<boolean>(false),
toast: useToast(), toast: useToast(),
t: useI18n(), t: useI18n(),
@@ -317,7 +319,7 @@ export default defineComponent({
this.toast.error(this.t("error.something_went_wrong").toString()) this.toast.error(this.t("error.something_went_wrong").toString())
console.log(result.left) console.log(result.left)
this.exportLoading = false this.exportLoading = false
this.options.tippy().hide() this.options!.tippy.hide()
return return
} }
@@ -343,7 +345,7 @@ export default defineComponent({
this.exportLoading = false this.exportLoading = false
this.options.tippy().hide() this.options!.tippy.hide()
}, },
toggleShowChildren() { toggleShowChildren() {
if (this.$props.saveRequest) if (this.$props.saveRequest)

5
packages/hoppscotch-app/src/components/teams/Invite.vue
View File

@@ -143,7 +143,7 @@
interactive interactive
trigger="click" trigger="click"
theme="popover" theme="popover"
:on-shown="() => tippyActions.focus()" :on-shown="() => tippyActions![index].focus()"
> >
<span class="select-wrapper"> <span class="select-wrapper">
<input <input
@@ -364,6 +364,7 @@ import IconMailCheck from "~icons/lucide/mail-check"
import IconCircleDot from "~icons/lucide/circle-dot" import IconCircleDot from "~icons/lucide/circle-dot"
import IconCircle from "~icons/lucide/circle" import IconCircle from "~icons/lucide/circle"
import IconArrowLeft from "~icons/lucide/arrow-left" import IconArrowLeft from "~icons/lucide/arrow-left"
import { TippyComponent } from "vue-tippy"
const t = useI18n() const t = useI18n()
@@ -372,7 +373,7 @@ const toast = useToast()
const colorMode = useColorMode() const colorMode = useColorMode()
// Template refs // Template refs
const tippyActions = ref<any | null>(null) const tippyActions = ref<TippyComponent[] | null>(null)
const props = defineProps({ const props = defineProps({
show: Boolean, show: Boolean,