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

chore: merge hoppscotch/staging into self-hosted/main

Browse Source
This commit is contained in:
Andrew Bastin
2023-04-05 16:37:44 +05:30
parent 47bfef958b 1d397af674
commit 9bfb965e63
12 changed files with 470 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
packages/hoppscotch-common/src/components/app/Header.vue
View File

@@ -17,27 +17,13 @@
/>
<!-- <AppGitHubStarButton class="mt-1.5 transition" /> -->
</div>
<div class="inline-flex items-center justify-center flex-1 space-x-2">
<AppNavigation v-if="mdAndLarger" />
<div
class="bg-primaryDark max-w-128 text-secondaryLight justify-between cursor-pointer rounded border border-dividerDark hover:border-dividerDark hover:bg-primaryLight hover:text-secondary focus-visible:border-dividerDark focus-visible:bg-primaryLight focus-visible:text-secondary focus:outline-none transition flex flex-1 items-center px-2 py-1.25"
tabindex="0"
@click="invokeAction('modals.search.toggle')"
>
<span class="inline-flex">
<icon-lucide-search class="mr-2 svg-icons" />
{{ t("app.search") }}
</span>
<kbd class="shortcut-key">/</kbd>
</div>
<div class="inline-flex items-center space-x-2">
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip', allowHTML: true }"
:title="`${
mdAndLarger ? t('support.title') : t('app.options')
} <kbd>?</kbd>`"
:icon="IconHelpCircle"
:title="`${t('app.search')} <kbd>/</kbd>`"
:icon="IconSearch"
class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
@click="invokeAction('modals.support.toggle')"
@click="invokeAction('modals.search.toggle')"
/>
<HoppButtonSecondary
v-if="showInstallButton"
@@ -47,8 +33,15 @@
class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
@click="installPWA()"
/>
</div>
<div class="inline-flex items-center justify-end flex-1 space-x-2">
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip', allowHTML: true }"
:title="`${
mdAndLarger ? t('support.title') : t('app.options')
} <kbd>?</kbd>`"
:icon="IconLifeBuoy"
class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
@click="invokeAction('modals.support.toggle')"
/>
<div
v-if="currentUser === null"
class="inline-flex items-center space-x-2"
@@ -242,7 +235,8 @@ import IconSettings from "~icons/lucide/settings"
import IconDownload from "~icons/lucide/download"
import IconUploadCloud from "~icons/lucide/upload-cloud"
import IconUserPlus from "~icons/lucide/user-plus"
import IconHelpCircle from "~icons/lucide/help-circle"
import IconLifeBuoy from "~icons/lucide/life-buoy"
import IconSearch from "~icons/lucide/search"
import { breakpointsTailwind, useBreakpoints, useNetwork } from "@vueuse/core"
import { pwaDefferedPrompt, installPWA } from "@modules/pwa"
import { platform } from "~/platform"

33
packages/hoppscotch-common/src/components/app/Navigation.vue
View File

@@ -1,33 +0,0 @@
<template>
<div class="flex items-center justify-between">
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
:title="`${t(
'action.go_back'
)} <kbd>${getSpecialKey()}</kbd><kbd>←</kbd>`"
:icon="IconArrowLeft"
class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
@click="router.go(-1)"
/>
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
:title="`${t(
'action.go_forward'
)} <kbd>${getSpecialKey()}</kbd><kbd>→</kbd>`"
:icon="IconArrowRight"
class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
@click="router.go(1)"
/>
</div>
</template>
<script setup lang="ts">
import { useI18n } from "@composables/i18n"
import { useRouter } from "vue-router"
import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
import IconArrowLeft from "~icons/lucide/arrow-left"
import IconArrowRight from "~icons/lucide/arrow-right"
const t = useI18n()
const router = useRouter()
</script>

58
packages/hoppscotch-common/src/components/collections/Collection.vue
View File

@@ -165,6 +165,20 @@
</div>
</div>
</div>
<div
v-if="isLastItem"
class="w-full transition"
:class="[
{
'bg-accentDark': isLastItemReorderable,
'h-1 ': isLastItem,
},
]"
@drop="updateLastItemOrder"
@dragover.prevent="orderingLastItem = true"
@dragleave="orderingLastItem = false"
@dragend="resetDragState"
></div>
</div>
</template>
@@ -249,6 +263,11 @@ const props = defineProps({
default: () => [],
required: false,
},
isLastItem: {
type: Boolean,
default: false,
required: false,
},
})
const emit = defineEmits<{
@@ -262,6 +281,7 @@ const emit = defineEmits<{
(event: "drag-event", payload: DataTransfer): void
(event: "dragging", payload: boolean): void
(event: "update-collection-order", payload: DataTransfer): void
(event: "update-last-collection-order", payload: DataTransfer): void
}>()
const tippyActions = ref<TippyComponent | null>(null)
@@ -274,6 +294,7 @@ const options = ref<TippyComponent | null>(null)
const dragging = ref(false)
const ordering = ref(false)
const orderingLastItem = ref(false)
const dropItemID = ref("")
const currentReorderingStatus = useReadonlyStream(currentReorderingStatus$, {
@@ -333,6 +354,14 @@ const isReorderable = computed(() => {
isSameParent.value
)
})
const isLastItemReorderable = computed(() => {
return (
orderingLastItem.value &&
notSameDestination.value &&
!isRequestDragging.value &&
isSameParent.value
)
})
const dragStart = ({ dataTransfer }: DragEvent) => {
if (dataTransfer) {
@@ -350,17 +379,35 @@ const dragStart = ({ dataTransfer }: DragEvent) => {
// Trigger the re-ordering event when a collection is dragged over another collection's top section
const handleDragOver = (e: DragEvent) => {
dragging.value = true
if (e.offsetY < 10 && notSameDestination.value) {
if (
e.offsetY < 10 &&
notSameDestination.value &&
!isRequestDragging.value &&
isSameParent.value
) {
ordering.value = true
dragging.value = false
orderingLastItem.value = false
} else if (
e.offsetY > 18 &&
notSameDestination.value &&
!isRequestDragging.value &&
isSameParent.value
) {
orderingLastItem.value = true
dragging.value = false
ordering.value = false
} else {
ordering.value = false
orderingLastItem.value = false
}
}
const handelDrop = (e: DragEvent) => {
if (ordering.value) {
orderUpdateCollectionEvent(e)
} else if (orderingLastItem.value) {
updateLastItemOrder(e)
} else {
dropEvent(e)
}
@@ -382,6 +429,14 @@ const orderUpdateCollectionEvent = (e: DragEvent) => {
}
}
const updateLastItemOrder = (e: DragEvent) => {
if (e.dataTransfer) {
e.stopPropagation()
emit("update-last-collection-order", e.dataTransfer)
resetDragState()
}
}
const notSameDestination = computed(() => {
return dropItemID.value !== props.id
})
@@ -397,5 +452,6 @@ const isCollLoading = computed(() => {
const resetDragState = () => {
dragging.value = false
ordering.value = false
orderingLastItem.value = false
}
</script>

65
packages/hoppscotch-common/src/components/collections/MyCollections.vue
View File

@@ -43,6 +43,7 @@
:data="node.data.data.data"
:collections-type="collectionsType.type"
:is-open="isOpen"
:is-last-item="node.data.isLastItem"
:is-selected="
isSelected({
collectionIndex: parseInt(node.id),
@@ -77,7 +78,18 @@
@remove-collection="emit('remove-collection', node.id)"
@drop-event="dropEvent($event, node.id)"
@drag-event="dragEvent($event, node.id)"
@update-collection-order="updateCollectionOrder($event, node.id)"
@update-collection-order="
updateCollectionOrder($event, {
destinationCollectionIndex: node.id,
destinationCollectionParentIndex: node.data.data.parentIndex,
})
"
@update-last-collection-order="
updateCollectionOrder($event, {
destinationCollectionIndex: null,
destinationCollectionParentIndex: node.data.data.parentIndex,
})
"
@dragging="
(isDraging) => highlightChildren(isDraging ? node.id : null)
"
@@ -99,6 +111,7 @@
:data="node.data.data.data"
:collections-type="collectionsType.type"
:is-open="isOpen"
:is-last-item="node.data.isLastItem"
:is-selected="
isSelected({
folderPath: node.id,
@@ -133,7 +146,18 @@
@remove-collection="emit('remove-folder', node.id)"
@drop-event="dropEvent($event, node.id)"
@drag-event="dragEvent($event, node.id)"
@update-collection-order="updateCollectionOrder($event, node.id)"
@update-collection-order="
updateCollectionOrder($event, {
destinationCollectionIndex: node.id,
destinationCollectionParentIndex: node.data.data.parentIndex,
})
"
@update-last-collection-order="
updateCollectionOrder($event, {
destinationCollectionIndex: null,
destinationCollectionParentIndex: node.data.data.parentIndex,
})
"
@dragging="
(isDraging) => highlightChildren(isDraging ? node.id : null)
"
@@ -155,6 +179,7 @@
:parent-i-d="node.data.data.parentIndex"
:collections-type="collectionsType.type"
:save-request="saveRequest"
:is-last-item="node.data.isLastItem"
:is-active="
isActiveRequest(
node.data.data.parentIndex,
@@ -209,6 +234,12 @@
requestIndex: node.id,
})
"
@update-last-request-order="
updateRequestOrder($event, {
folderPath: node.data.data.parentIndex,
requestIndex: null,
})
"
/>
</template>
<template #emptyNode="{ node }">
@@ -305,6 +336,7 @@ import { currentActiveTab } from "~/helpers/rest/tab"
export type Collection = {
type: "collections"
isLastItem: boolean
data: {
parentIndex: null
data: HoppCollection<HoppRESTRequest>
@@ -313,6 +345,7 @@ export type Collection = {
type Folder = {
type: "folders"
isLastItem: boolean
data: {
parentIndex: string
data: HoppCollection<HoppRESTRequest>
@@ -321,6 +354,7 @@ type Folder = {
type Requests = {
type: "requests"
isLastItem: boolean
data: {
parentIndex: string
data: HoppRESTRequest
@@ -450,7 +484,7 @@ const emit = defineEmits<{
event: "update-request-order",
payload: {
dragedRequestIndex: string
destinationRequestIndex: string
destinationRequestIndex: string | null
destinationCollectionIndex: string
}
): void
@@ -458,7 +492,10 @@ const emit = defineEmits<{
event: "update-collection-order",
payload: {
dragedCollectionIndex: string
destinationCollectionIndex: string
destinationCollection: {
destinationCollectionIndex: string | null
destinationCollectionParentIndex: string | null
}
}
): void
(event: "select", payload: Picked | null): void
@@ -589,7 +626,7 @@ const updateRequestOrder = (
{
folderPath,
requestIndex,
}: { folderPath: string | null; requestIndex: string }
}: { folderPath: string | null; requestIndex: string | null }
) => {
if (!folderPath) return
const dragedRequestIndex = dataTransfer.getData("requestIndex")
@@ -605,13 +642,16 @@ const updateRequestOrder = (
const updateCollectionOrder = (
dataTransfer: DataTransfer,
destinationCollectionIndex: string
destinationCollection: {
destinationCollectionIndex: string | null
destinationCollectionParentIndex: string | null
}
) => {
const dragedCollectionIndex = dataTransfer.getData("collectionIndex")
emit("update-collection-order", {
dragedCollectionIndex,
destinationCollectionIndex,
destinationCollection,
})
}
@@ -641,6 +681,7 @@ class MyCollectionsAdapter implements SmartTreeAdapter<MyCollectionNode> {
id: index.toString(),
data: {
type: "collections",
isLastItem: index === this.data.value.length - 1,
data: {
parentIndex: null,
data: item,
@@ -662,23 +703,25 @@ class MyCollectionsAdapter implements SmartTreeAdapter<MyCollectionNode> {
if (item) {
const data = [
...item.folders.map((item, index) => ({
...item.folders.map((folder, index) => ({
id: `${id}/${index}`,
data: {
isLastItem: index === item.folders.length - 1,
type: "folders",
data: {
parentIndex: id,
data: item,
data: folder,
},
},
})),
...item.requests.map((item, index) => ({
...item.requests.map((requests, index) => ({
id: `${id}/${index}`,
data: {
isLastItem: index === item.requests.length - 1,
type: "requests",
data: {
parentIndex: id,
data: item,
data: requests,
},
},
})),

70
packages/hoppscotch-common/src/components/collections/Request.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="flex flex-col">
<div
class="h-1"
class="h-1 w-full transition"
:class="[
{
'bg-accentDark': isReorderable,
},
]"
@drop="dropEvent"
@drop="updateRequestOrder"
@dragover.prevent="ordering = true"
@dragleave="resetDragState"
@dragend="resetDragState"
@@ -15,7 +15,7 @@
<div
class="flex items-stretch group"
:draggable="!hasNoTeamAccess"
@drop="dropEvent"
@drop="handelDrop"
@dragstart="dragStart"
@dragover="handleDragOver($event)"
@dragleave="resetDragState"
@@ -138,6 +138,19 @@
</span>
</div>
</div>
<div
class="w-full transition"
:class="[
{
'bg-accentDark': isLastItemReorderable,
'h-1 ': isLastItem,
},
]"
@drop="handelDrop"
@dragover.prevent="orderingLastItem = true"
@dragleave="resetDragState"
@dragend="resetDragState"
></div>
</div>
</template>
@@ -214,6 +227,11 @@ const props = defineProps({
default: () => [],
required: false,
},
isLastItem: {
type: Boolean,
default: false,
required: false,
},
})
const emit = defineEmits<{
@@ -223,6 +241,7 @@ const emit = defineEmits<{
(event: "select-request"): void
(event: "drag-request", payload: DataTransfer): void
(event: "update-request-order", payload: DataTransfer): void
(event: "update-last-request-order", payload: DataTransfer): void
}>()
const tippyActions = ref<TippyComponent | null>(null)
@@ -233,6 +252,7 @@ const duplicate = ref<HTMLButtonElement | null>(null)
const dragging = ref(false)
const ordering = ref(false)
const orderingLastItem = ref(false)
const currentReorderingStatus = useReadonlyStream(currentReorderingStatus$, {
type: "collection",
@@ -269,6 +289,10 @@ const dragStart = ({ dataTransfer }: DragEvent) => {
}
}
const isSameRequest = computed(() => {
return currentReorderingStatus.value.id === props.requestID
})
const isCollectionDragging = computed(() => {
return currentReorderingStatus.value.type === "collection"
})
@@ -278,7 +302,18 @@ const isSameParent = computed(() => {
})
const isReorderable = computed(() => {
return ordering.value && !isCollectionDragging.value && isSameParent.value
return (
ordering.value &&
!isCollectionDragging.value &&
isSameParent.value &&
!isSameRequest.value
)
})
const isLastItemReorderable = computed(() => {
return (
orderingLastItem.value && isSameParent.value && !isCollectionDragging.value
)
})
// Trigger the re-ordering event when a request is dragged over another request's top section
@@ -287,12 +322,28 @@ const handleDragOver = (e: DragEvent) => {
if (e.offsetY < 10) {
ordering.value = true
dragging.value = false
orderingLastItem.value = false
} else if (e.offsetY > 18) {
orderingLastItem.value = true
dragging.value = false
ordering.value = false
} else {
ordering.value = false
orderingLastItem.value = false
}
}
const dropEvent = (e: DragEvent) => {
const handelDrop = (e: DragEvent) => {
if (ordering.value) {
updateRequestOrder(e)
} else if (orderingLastItem.value) {
updateLastItemOrder(e)
} else {
updateRequestOrder(e)
}
}
const updateRequestOrder = (e: DragEvent) => {
if (e.dataTransfer) {
e.stopPropagation()
resetDragState()
@@ -300,6 +351,14 @@ const dropEvent = (e: DragEvent) => {
}
}
const updateLastItemOrder = (e: DragEvent) => {
if (e.dataTransfer) {
e.stopPropagation()
resetDragState()
emit("update-last-request-order", e.dataTransfer)
}
}
const isRequestLoading = computed(() => {
if (props.requestMoveLoading.length > 0 && props.requestID) {
return props.requestMoveLoading.includes(props.requestID)
@@ -311,5 +370,6 @@ const isRequestLoading = computed(() => {
const resetDragState = () => {
dragging.value = false
ordering.value = false
orderingLastItem.value = false
}
</script>

59
packages/hoppscotch-common/src/components/collections/TeamCollections.vue
View File

@@ -60,6 +60,7 @@
:export-loading="exportLoading"
:has-no-team-access="hasNoTeamAccess"
:collection-move-loading="collectionMoveLoading"
:is-last-item="node.data.isLastItem"
:is-selected="
isSelected({
collectionID: node.id,
@@ -95,7 +96,16 @@
@drop-event="dropEvent($event, node.id)"
@drag-event="dragEvent($event, node.id)"
@update-collection-order="
updateCollectionOrder($event, node.data.data.data.id)
updateCollectionOrder($event, {
destinationCollectionIndex: node.data.data.data.id,
destinationCollectionParentIndex: node.data.data.parentIndex,
})
"
@update-last-collection-order="
updateCollectionOrder($event, {
destinationCollectionIndex: null,
destinationCollectionParentIndex: node.data.data.parentIndex,
})
"
@dragging="
(isDraging) =>
@@ -122,6 +132,7 @@
:export-loading="exportLoading"
:has-no-team-access="hasNoTeamAccess"
:collection-move-loading="collectionMoveLoading"
:is-last-item="node.data.isLastItem"
:is-selected="
isSelected({
folderID: node.data.data.data.id,
@@ -159,7 +170,16 @@
@drop-event="dropEvent($event, node.data.data.data.id)"
@drag-event="dragEvent($event, node.data.data.data.id)"
@update-collection-order="
updateCollectionOrder($event, node.data.data.data.id)
updateCollectionOrder($event, {
destinationCollectionIndex: node.data.data.data.id,
destinationCollectionParentIndex: node.data.data.parentIndex,
})
"
@update-last-collection-order="
updateCollectionOrder($event, {
destinationCollectionIndex: null,
destinationCollectionParentIndex: node.data.data.parentIndex,
})
"
@dragging="
(isDraging) =>
@@ -186,6 +206,7 @@
:is-active="isActiveRequest(node.data.data.data.id)"
:has-no-team-access="hasNoTeamAccess"
:request-move-loading="requestMoveLoading"
:is-last-item="node.data.isLastItem"
:is-selected="
isSelected({
requestID: node.data.data.data.id,
@@ -231,6 +252,12 @@
requestIndex: node.data.data.data.id,
})
"
@update-last-request-order="
updateRequestOrder($event, {
folderPath: node.data.data.parentIndex,
requestIndex: null,
})
"
/>
</template>
<template #emptyNode="{ node }">
@@ -461,7 +488,7 @@ const emit = defineEmits<{
event: "update-request-order",
payload: {
dragedRequestIndex: string
destinationRequestIndex: string
destinationRequestIndex: string | null
destinationCollectionIndex: string
}
): void
@@ -469,7 +496,10 @@ const emit = defineEmits<{
event: "update-collection-order",
payload: {
dragedCollectionIndex: string
destinationCollectionIndex: string
destinationCollection: {
destinationCollectionIndex: string | null
destinationCollectionParentIndex: string | null
}
}
): void
(event: "select", payload: Picked | null): void
@@ -597,7 +627,7 @@ const updateRequestOrder = (
{
folderPath,
requestIndex,
}: { folderPath: string | null; requestIndex: string }
}: { folderPath: string | null; requestIndex: string | null }
) => {
if (!folderPath) return
const dragedRequestIndex = dataTransfer.getData("requestIndex")
@@ -613,17 +643,21 @@ const updateRequestOrder = (
const updateCollectionOrder = (
dataTransfer: DataTransfer,
destinationCollectionIndex: string
destinationCollection: {
destinationCollectionIndex: string | null
destinationCollectionParentIndex: string | null
}
) => {
const dragedCollectionIndex = dataTransfer.getData("collectionIndex")
emit("update-collection-order", {
dragedCollectionIndex,
destinationCollectionIndex,
destinationCollection,
})
}
type TeamCollections = {
isLastItem: boolean
type: "collections"
data: {
parentIndex: null
@@ -632,6 +666,7 @@ type TeamCollections = {
}
type TeamFolder = {
isLastItem: boolean
type: "folders"
data: {
parentIndex: string
@@ -640,6 +675,7 @@ type TeamFolder = {
}
type TeamRequests = {
isLastItem: boolean
type: "requests"
data: {
parentIndex: string
@@ -679,9 +715,10 @@ class TeamCollectionsAdapter implements SmartTreeAdapter<TeamCollectionNode> {
status: "loading",
}
} else {
const data = this.data.value.map((item) => ({
const data = this.data.value.map((item, index) => ({
id: item.id,
data: {
isLastItem: index === this.data.value.length - 1,
type: "collections",
data: {
parentIndex: null,
@@ -709,9 +746,10 @@ class TeamCollectionsAdapter implements SmartTreeAdapter<TeamCollectionNode> {
if (items) {
const data = [
...(items.children
? items.children.map((item) => ({
? items.children.map((item, index) => ({
id: `${id}/${item.id}`,
data: {
isLastItem: index === items.children.length - 1,
type: "folders",
data: {
parentIndex: parsedID,
@@ -721,9 +759,10 @@ class TeamCollectionsAdapter implements SmartTreeAdapter<TeamCollectionNode> {
}))
: []),
...(items.requests
? items.requests.map((item) => ({
? items.requests.map((item, index) => ({
id: `${id}/${item.id}`,
data: {
isLastItem: index === items.requests.length - 1,
type: "requests",
data: {
parentIndex: parsedID,

112
packages/hoppscotch-common/src/components/collections/index.vue
View File

@@ -2,7 +2,8 @@
<div
:class="{
'rounded border border-divider': saveRequest,
'bg-primaryDark': draggingToRoot,
'bg-primaryDark':
draggingToRoot && currentReorderingStatus.type !== 'request',
}"
class="flex-1"
@drop.prevent="dropToRoot"
@@ -85,7 +86,9 @@
/>
<div
class="hidden bg-primaryDark flex-col flex-1 items-center py-15 justify-center px-4 text-secondaryLight"
:class="{ '!flex': draggingToRoot }"
:class="{
'!flex': draggingToRoot && currentReorderingStatus.type !== 'request',
}"
>
<component :is="IconListEnd" class="svg-icons !w-8 !h-8" />
</div>
@@ -232,6 +235,7 @@ import {
resolveSaveContextOnCollectionReorder,
updateSaveContextForAffectedRequests,
} from "~/helpers/collection/collection"
import { currentReorderingStatus$ } from "~/newstore/reordering"
const t = useI18n()
const toast = useToast()
@@ -396,6 +400,12 @@ watch(
}
)
const currentReorderingStatus = useReadonlyStream(currentReorderingStatus$, {
type: "collection",
id: "",
parentID: "",
})
const hasTeamWriteAccess = computed(() => {
if (!collectionsType.value.selectedTeam) return false
@@ -1525,27 +1535,49 @@ const dropToRoot = ({ dataTransfer }: DragEvent) => {
/**
* Used to check if the request/collection is being moved to the same parent since reorder is only allowed within the same parent
* @param draggedReq - path index of the dragged request
* @param destinationReq - path index of the destination request
* @param draggedItem - path index of the dragged request
* @param destinationItem - path index of the destination request
* @param destinationCollectionIndex - index of the destination collection
* @returns boolean - true if the request is being moved to the same parent
*/
const isSameSameParent = (draggedItem: string, destinationItem: string) => {
const draggedItemIndex = pathToIndex(draggedItem)
const destinationItemIndex = pathToIndex(destinationItem)
const isSameSameParent = (
draggedItemPath: string,
destinationItemPath: string | null,
destinationCollectionIndex: string | null
) => {
const draggedItemIndex = pathToIndex(draggedItemPath)
// length of 1 means the request is in the root
if (draggedItemIndex.length === 1 && destinationItemIndex.length === 1) {
return true
} else if (draggedItemIndex.length === destinationItemIndex.length) {
// if the destinationItemPath and destinationCollectionIndex is null, it means the request is being moved to the root
if (destinationItemPath === null && destinationCollectionIndex === null) {
return draggedItemIndex.length === 1
} else if (
destinationItemPath === null &&
destinationCollectionIndex !== null &&
draggedItemIndex.length === 1
) {
return draggedItemIndex[0] === destinationCollectionIndex
} else if (destinationItemPath === null && draggedItemIndex.length !== 1) {
const dragedItemParent = draggedItemIndex.slice(0, -1)
const destinationItemParent = destinationItemIndex.slice(0, -1)
if (isEqual(dragedItemParent, destinationItemParent)) {
return dragedItemParent[0] === destinationCollectionIndex
} else {
if (destinationItemPath === null) return false
const destinationItemIndex = pathToIndex(destinationItemPath)
// length of 1 means the request is in the root
if (draggedItemIndex.length === 1 && destinationItemIndex.length === 1) {
return true
} else if (draggedItemIndex.length === destinationItemIndex.length) {
const dragedItemParent = draggedItemIndex.slice(0, -1)
const destinationItemParent = destinationItemIndex.slice(0, -1)
if (isEqual(dragedItemParent, destinationItemParent)) {
return true
} else {
return false
}
} else {
return false
}
} else {
return false
}
}
@@ -1556,7 +1588,7 @@ const isSameSameParent = (draggedItem: string, destinationItem: string) => {
*/
const updateRequestOrder = (payload: {
dragedRequestIndex: string
destinationRequestIndex: string
destinationRequestIndex: string | null
destinationCollectionIndex: string
}) => {
const {
@@ -1565,29 +1597,28 @@ const updateRequestOrder = (payload: {
destinationCollectionIndex,
} = payload
if (
!dragedRequestIndex ||
!destinationRequestIndex ||
!destinationCollectionIndex
)
return
if (!dragedRequestIndex || !destinationCollectionIndex) return
if (dragedRequestIndex === destinationRequestIndex) return
if (collectionsType.value.type === "my-collections") {
if (!isSameSameParent(dragedRequestIndex, destinationRequestIndex)) {
if (
!isSameSameParent(
dragedRequestIndex,
destinationRequestIndex,
destinationCollectionIndex
)
) {
toast.error(`${t("collection.different_parent")}`)
} else {
updateRESTRequestOrder(
pathToLastIndex(dragedRequestIndex),
pathToLastIndex(destinationRequestIndex),
destinationRequestIndex
? pathToLastIndex(destinationRequestIndex)
: null,
destinationCollectionIndex
)
resolveSaveContextOnRequestReorder({
lastIndex: pathToLastIndex(dragedRequestIndex),
newIndex: pathToLastIndex(destinationRequestIndex),
folderPath: destinationCollectionIndex,
})
toast.success(`${t("request.order_changed")}`)
}
} else if (hasTeamWriteAccess.value) {
@@ -1628,14 +1659,25 @@ const updateRequestOrder = (payload: {
*/
const updateCollectionOrder = (payload: {
dragedCollectionIndex: string
destinationCollectionIndex: string
destinationCollection: {
destinationCollectionIndex: string | null
destinationCollectionParentIndex: string | null
}
}) => {
const { dragedCollectionIndex, destinationCollectionIndex } = payload
if (!dragedCollectionIndex || !destinationCollectionIndex) return
const { dragedCollectionIndex, destinationCollection } = payload
const { destinationCollectionIndex, destinationCollectionParentIndex } =
destinationCollection
if (!dragedCollectionIndex) return
if (dragedCollectionIndex === destinationCollectionIndex) return
if (collectionsType.value.type === "my-collections") {
if (!isSameSameParent(dragedCollectionIndex, destinationCollectionIndex)) {
if (
!isSameSameParent(
dragedCollectionIndex,
destinationCollectionIndex,
destinationCollectionParentIndex
)
) {
toast.error(`${t("collection.different_parent")}`)
} else {
updateRESTCollectionOrder(
@@ -1644,7 +1686,9 @@ const updateCollectionOrder = (payload: {
)
resolveSaveContextOnCollectionReorder({
lastIndex: pathToLastIndex(dragedCollectionIndex),
newIndex: pathToLastIndex(destinationCollectionIndex),
newIndex: pathToLastIndex(
destinationCollectionIndex ? destinationCollectionIndex : ""
),
folderPath: dragedCollectionIndex.split("/").slice(0, -1).join("/"),
})
toast.success(`${t("collection.order_changed")}`)

2
packages/hoppscotch-common/src/helpers/backend/gql/mutations/UpdateCollectionOrder.graphql
View File

@@ -1,3 +1,3 @@
mutation UpdateCollectionOrder($collectionID: ID!, $destCollID: ID!) {
mutation UpdateCollectionOrder($collectionID: ID!, $destCollID: ID) {
updateCollectionOrder(collectionID: $collectionID, destCollID: $destCollID)
}

2
packages/hoppscotch-common/src/helpers/backend/mutations/TeamCollection.ts
View File

@@ -103,7 +103,7 @@ export const moveRESTTeamCollection = (
export const updateOrderRESTTeamCollection = (
collectionID: string,
destCollID: string
destCollID: string | null
) =>
runMutation<
UpdateCollectionOrderMutation,

2
packages/hoppscotch-common/src/helpers/backend/mutations/TeamRequest.ts
View File

@@ -84,7 +84,7 @@ export const moveRESTTeamRequest = (collectionID: string, requestID: string) =>
export const updateOrderRESTTeamRequest = (
requestID: string,
nextRequestID: string,
nextRequestID: string | null,
collectionID: string
) =>
runMutation<

132
packages/hoppscotch-common/src/helpers/teams/TeamCollectionAdapter.ts
View File

@@ -558,67 +558,112 @@ export default class NewTeamCollectionAdapter {
public updateRequestOrder(
dragedRequestID: string,
destinationRequestID: string,
destinationRequestID: string | null,
destinationCollectionID: string
) {
const tree = this.collections$.value
// Find collection in tree, don't attempt if no collection is found
const collection = findCollInTree(tree, destinationCollectionID)
if (!collection) return // Ignore order update
// If the destination request is null, then it is the last request in the collection
if (destinationRequestID === null) {
const collection = findCollInTree(tree, destinationCollectionID)
// Collection is not expanded
if (!collection.requests) return
if (!collection) return // Ignore order update
const requestIndex = collection.requests.findIndex(
(req) => req.id === dragedRequestID
)
const destinationIndex = collection.requests.findIndex(
(req) => req.id === destinationRequestID
)
// Collection is not expanded
if (!collection.requests) return
if (requestIndex === -1) return
const requestIndex = collection.requests.findIndex(
(req) => req.id === dragedRequestID
)
this.reorderItems(collection.requests, requestIndex, destinationIndex)
// If the collection index is not found, don't update
if (requestIndex === -1) return
// Move the request to the end of the requests
collection.requests.push(collection.requests.splice(requestIndex, 1)[0])
} else {
// Find collection in tree, don't attempt if no collection is found
const collection = findCollInTree(tree, destinationCollectionID)
if (!collection) return // Ignore order update
// Collection is not expanded
if (!collection.requests) return
const requestIndex = collection.requests.findIndex(
(req) => req.id === dragedRequestID
)
const destinationIndex = collection.requests.findIndex(
(req) => req.id === destinationRequestID
)
if (requestIndex === -1) return
this.reorderItems(collection.requests, requestIndex, destinationIndex)
}
this.collections$.next(tree)
}
public updateCollectionOrder = (
collectionID: string,
destinationCollectionID: string
destinationCollectionID: string | null
) => {
const tree = this.collections$.value
// Find collection in tree
const coll = findParentOfColl(tree, destinationCollectionID)
// If the destination collection is null, then it is the last collection in the tree
if (destinationCollectionID === null) {
const collLast = findParentOfColl(tree, collectionID)
if (collLast && collLast.children) {
const collectionIndex = collLast.children.findIndex(
(coll) => coll.id === collectionID
)
// If the collection has a parent collection and check if it has children
if (coll && coll.children) {
const collectionIndex = coll.children.findIndex(
(coll) => coll.id === collectionID
)
// reorder the collection to the end of the collections
collLast.children.push(collLast.children.splice(collectionIndex, 1)[0])
} else {
const collectionIndex = tree.findIndex(
(coll) => coll.id === collectionID
)
const destinationIndex = coll.children.findIndex(
(coll) => coll.id === destinationCollectionID
)
// If the collection index is not found, don't update
if (collectionIndex === -1) return
// If the collection index is not found, don't update
if (collectionIndex === -1) return
this.reorderItems(coll.children, collectionIndex, destinationIndex)
// reorder the collection to the end of the collections in the root
tree.push(tree.splice(collectionIndex, 1)[0])
}
} else {
// If the collection has no parent collection, it is a root collection
const collectionIndex = tree.findIndex((coll) => coll.id === collectionID)
// Find collection in tree
const coll = findParentOfColl(tree, destinationCollectionID)
const destinationIndex = tree.findIndex(
(coll) => coll.id === destinationCollectionID
)
// If the collection has a parent collection and check if it has children
if (coll && coll.children) {
const collectionIndex = coll.children.findIndex(
(coll) => coll.id === collectionID
)
// If the collection index is not found, don't update
if (collectionIndex === -1) return
const destinationIndex = coll.children.findIndex(
(coll) => coll.id === destinationCollectionID
)
this.reorderItems(tree, collectionIndex, destinationIndex)
// If the collection index is not found, don't update
if (collectionIndex === -1) return
this.reorderItems(coll.children, collectionIndex, destinationIndex)
} else {
// If the collection has no parent collection, it is a root collection
const collectionIndex = tree.findIndex(
(coll) => coll.id === collectionID
)
const destinationIndex = tree.findIndex(
(coll) => coll.id === destinationCollectionID
)
// If the collection index is not found, don't update
if (collectionIndex === -1) return
this.reorderItems(tree, collectionIndex, destinationIndex)
}
}
this.collections$.next(tree)
@@ -821,12 +866,10 @@ export default class NewTeamCollectionAdapter {
const { request } = requestOrderUpdated
const { nextRequest } = requestOrderUpdated
if (!nextRequest) return
this.updateRequestOrder(
request.id,
nextRequest.id,
nextRequest.collectionID
nextRequest ? nextRequest.id : null,
nextRequest ? nextRequest.collectionID : request.collectionID
)
}
)
@@ -851,9 +894,10 @@ export default class NewTeamCollectionAdapter {
const { collection } = collectionOrderUpdated
const { nextCollection } = collectionOrderUpdated
if (!nextCollection) return
this.updateCollectionOrder(collection.id, nextCollection.id)
this.updateCollectionOrder(
collection.id,
nextCollection ? nextCollection.id : null
)
}
)
}

66
packages/hoppscotch-common/src/newstore/collections.ts
View File

@@ -8,6 +8,7 @@ import {
import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
import { cloneDeep } from "lodash-es"
import { getTabRefWithSaveContext } from "~/helpers/rest/tab"
import { resolveSaveContextOnRequestReorder } from "~/helpers/collection/request"
const defaultRESTCollectionState = {
state: [
@@ -288,18 +289,49 @@ const restCollectionDispatchers = defineDispatchers({
destinationCollectionIndex,
}: {
collectionIndex: string
destinationCollectionIndex: string
destinationCollectionIndex: string | null
}
) {
const newState = state
const indexPaths = collectionIndex.split("/").map((x) => parseInt(x))
if (indexPaths.length === 0) {
console.log("Given path too short. Skipping request.")
return {}
}
// Reordering the collection to the last position
if (destinationCollectionIndex === null) {
const folderIndex = indexPaths.pop() as number
const containingFolder = navigateToFolderWithIndexPath(
newState,
indexPaths
)
if (containingFolder === null) {
newState.push(newState.splice(folderIndex, 1)[0])
return {
state: newState,
}
}
// Pushing the folder to the end of the array (last position)
containingFolder.folders.push(
containingFolder.folders.splice(folderIndex, 1)[0]
)
return {
state: newState,
}
}
const destinationIndexPaths = destinationCollectionIndex
.split("/")
.map((x) => parseInt(x))
if (indexPaths.length === 0 || destinationIndexPaths.length === 0) {
if (destinationIndexPaths.length === 0) {
console.log("Given path too short. Skipping request.")
return {}
}
@@ -487,7 +519,7 @@ const restCollectionDispatchers = defineDispatchers({
destinationCollectionPath,
}: {
requestIndex: number
destinationRequestIndex: number
destinationRequestIndex: number | null
destinationCollectionPath: string
}
) {
@@ -511,8 +543,32 @@ const restCollectionDispatchers = defineDispatchers({
return {}
}
// if the destination is null, we are moving to the end of the list
if (destinationRequestIndex === null) {
// move to the end of the list
targetLocation.requests.push(
targetLocation.requests.splice(requestIndex, 1)[0]
)
resolveSaveContextOnRequestReorder({
lastIndex: requestIndex,
newIndex: targetLocation.requests.length,
folderPath: destinationCollectionPath,
})
return {
state: newState,
}
}
reorderItems(targetLocation.requests, requestIndex, destinationRequestIndex)
resolveSaveContextOnRequestReorder({
lastIndex: requestIndex,
newIndex: destinationRequestIndex,
folderPath: destinationCollectionPath,
})
return {
state: newState,
}
@@ -967,7 +1023,7 @@ export function moveRESTRequest(
export function updateRESTRequestOrder(
requestIndex: number,
destinationRequestIndex: number,
destinationRequestIndex: number | null,
destinationCollectionPath: string
) {
restCollectionStore.dispatch({
@@ -982,7 +1038,7 @@ export function updateRESTRequestOrder(
export function updateRESTCollectionOrder(
collectionIndex: string,
destinationCollectionIndex: string
destinationCollectionIndex: string | null
) {
restCollectionStore.dispatch({
dispatcher: "updateCollectionOrder",