-
+
+
+
@@ -160,6 +182,11 @@ type FolderType = "collection" | "folder"
const t = useI18n()
const props = defineProps({
+ id: {
+ type: String,
+ default: "",
+ required: true,
+ },
data: {
type: Object as PropType
-
-
-
+
+
+ {{ collectionName }}
+
+
-
-
-
+
+
+
+
+
+
+
+
-
+
+
+
+ ,
default: "my-collections",
@@ -175,10 +193,15 @@ const props = defineProps({
required: false,
},
isSelected: {
- type: Boolean,
+ type: Boolean as PropType,
default: false,
required: false,
},
+ requestMoveLoading: {
+ type: Array as PropType,
+ default: () => [],
+ required: false,
+ },
})
const emit = defineEmits<{
@@ -187,6 +210,7 @@ const emit = defineEmits<{
(event: "remove-request"): void
(event: "select-request"): void
(event: "drag-request", payload: DataTransfer): void
+ (event: "update-request-order", payload: DataTransfer): void
}>()
const tippyActions = ref(null)
@@ -196,6 +220,7 @@ const options = ref(null)
const duplicate = ref(null)
const dragging = ref(false)
+const ordering = ref(false)
const requestMethodLabels = {
get: "text-green-500",
@@ -228,8 +253,24 @@ const selectRequest = () => {
const dragStart = ({ dataTransfer }: DragEvent) => {
if (dataTransfer) {
- dragging.value = !dragging.value
emit("drag-request", dataTransfer)
+ dragging.value = !dragging.value
}
}
+
+const dropEvent = (e: DragEvent) => {
+ if (e.dataTransfer) {
+ e.stopPropagation()
+ ordering.value = !ordering.value
+ emit("update-request-order", e.dataTransfer)
+ }
+}
+
+const isRequestLoading = computed(() => {
+ if (props.requestMoveLoading.length > 0 && props.requestID) {
+ return props.requestMoveLoading.includes(props.requestID)
+ } else {
+ return false
+ }
+})
diff --git a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
index 2a4eb6790..984a5477f 100644
--- a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
+++ b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
@@ -1,5 +1,5 @@
-
+
-
+
![]()
{{ t("empty.collections") }}
@@ -213,11 +252,12 @@
filled
outline
:title="t('team.no_access')"
- :label="t('add.new')"
+ :label="t('action.new')"
/>
![]()
- {{ t("empty.collection") }}
+ {{ t("empty.collections") }}
-
![]()
,
+ default: () => [],
+ required: false,
+ },
+ requestMoveLoading: {
+ type: Array as PropType,
+ default: () => [],
+ required: false,
+ },
})
const emit = defineEmits<{
@@ -410,6 +440,36 @@ const emit = defineEmits<{
folderPath?: string | undefined
}
): void
+ (
+ event: "drop-request",
+ payload: {
+ folderPath: string
+ requestIndex: string
+ destinationCollectionIndex: string
+ }
+ ): void
+ (
+ event: "drop-collection",
+ payload: {
+ collectionIndexDragged: string
+ destinationCollectionIndex: string
+ }
+ ): void
+ (
+ event: "update-request-order",
+ payload: {
+ dragedRequestIndex: string
+ destinationRequestIndex: string
+ destinationCollectionIndex: string
+ }
+ ): void
+ (
+ event: "update-collection-order",
+ payload: {
+ dragedCollectionIndex: string
+ destinationCollectionIndex: string
+ }
+ ): void
(event: "select", payload: Picked | null): void
(event: "expand-team-collection", payload: string): void
(event: "display-modal-add"): void
@@ -493,6 +553,74 @@ const selectRequest = (data: {
}
}
+const dragRequest = (
+ dataTransfer: DataTransfer,
+ {
+ folderPath,
+ requestIndex,
+ }: { folderPath: string | null; requestIndex: string }
+) => {
+ if (!folderPath) return
+ dataTransfer.setData("folderPath", folderPath)
+ dataTransfer.setData("requestIndex", requestIndex)
+}
+
+const dragEvent = (dataTransfer: DataTransfer, collectionIndex: string) => {
+ dataTransfer.setData("collectionIndex", collectionIndex)
+}
+
+const dropEvent = (
+ dataTransfer: DataTransfer,
+ destinationCollectionIndex: string
+) => {
+ const folderPath = dataTransfer.getData("folderPath")
+ const requestIndex = dataTransfer.getData("requestIndex")
+ const collectionIndexDragged = dataTransfer.getData("collectionIndex")
+ if (folderPath && requestIndex) {
+ emit("drop-request", {
+ folderPath,
+ requestIndex,
+ destinationCollectionIndex,
+ })
+ } else {
+ emit("drop-collection", {
+ collectionIndexDragged,
+ destinationCollectionIndex,
+ })
+ }
+}
+
+const updateRequestOrder = (
+ dataTransfer: DataTransfer,
+ {
+ folderPath,
+ requestIndex,
+ }: { folderPath: string | null; requestIndex: string }
+) => {
+ if (!folderPath) return
+ const dragedRequestIndex = dataTransfer.getData("requestIndex")
+ const destinationRequestIndex = requestIndex
+ const destinationCollectionIndex = folderPath
+
+ emit("update-request-order", {
+ dragedRequestIndex,
+ destinationRequestIndex,
+ destinationCollectionIndex,
+ })
+}
+
+const updateCollectionOrder = (
+ dataTransfer: DataTransfer,
+ destinationCollectionIndex: string
+) => {
+ const dragedCollectionIndex = dataTransfer.getData("collectionIndex")
+
+ emit("update-collection-order", {
+ dragedCollectionIndex,
+ destinationCollectionIndex,
+ })
+}
+
type TeamCollections = {
type: "collections"
data: {
diff --git a/packages/hoppscotch-common/src/components/collections/index.vue b/packages/hoppscotch-common/src/components/collections/index.vue
index d8e360c29..02268b9dd 100644
--- a/packages/hoppscotch-common/src/components/collections/index.vue
+++ b/packages/hoppscotch-common/src/components/collections/index.vue
@@ -1,5 +1,14 @@
-
+
+ ([])
+const requestMoveLoading = ref([])
+
// Export - Import refs
const collectionJSON = ref("")
const exportingTeamCollections = ref(false)
@@ -1333,16 +1370,314 @@ const discardRequestChange = () => {
confirmChangeToRequest.value = false
}
-// Drag and drop functions
+/**
+ * Used to get the index of the request from the path
+ * @param path The path of the request
+ * @returns The index of the request
+ */
+const pathToIndex = computed(() => {
+ return (path: string) => {
+ const pathArr = path.split("/")
+ return parseInt(pathArr[pathArr.length - 1])
+ }
+})
+
+/**
+ * This function is called when the user drops the request inside a collection
+ * @param payload Object that contains the folder path, request index and the destination collection index
+ */
const dropRequest = (payload: {
- folderPath: string
+ folderPath?: string | undefined
requestIndex: string
- collectionIndex: string
+ destinationCollectionIndex: string
}) => {
- const { folderPath, requestIndex, collectionIndex } = payload
- moveRESTRequest(folderPath, parseInt(requestIndex), collectionIndex)
+ const { folderPath, requestIndex, destinationCollectionIndex } = payload
+ if (!requestIndex || !destinationCollectionIndex) return
+ if (collectionsType.value.type === "my-collections" && folderPath) {
+ moveRESTRequest(
+ folderPath,
+ pathToIndex.value(requestIndex),
+ destinationCollectionIndex
+ )
+ toast.success(`${t("request.moved")}`)
+ draggingToRoot.value = false
+ } else if (hasTeamWriteAccess.value) {
+ // add the request index to the loading array
+ requestMoveLoading.value.push(requestIndex)
+
+ pipe(
+ moveRESTTeamRequest(destinationCollectionIndex, requestIndex),
+ TE.match(
+ (err: GQLError) => {
+ toast.error(`${getErrorMessage(err)}`)
+ requestMoveLoading.value.splice(
+ requestMoveLoading.value.indexOf(requestIndex),
+ 1
+ )
+ },
+ () => {
+ // remove the request index from the loading array
+ requestMoveLoading.value.splice(
+ requestMoveLoading.value.indexOf(requestIndex),
+ 1
+ )
+ toast.success(`${t("request.moved")}`)
+ }
+ )
+ )()
+ }
}
+/**
+ * This function is called when the user moves the collection
+ * to a different collection or folder
+ * @param payload - object containing the collection index dragged and the destination collection index
+ */
+const dropCollection = (payload: {
+ collectionIndexDragged: string
+ destinationCollectionIndex: string
+}) => {
+ const { collectionIndexDragged, destinationCollectionIndex } = payload
+ if (!collectionIndexDragged || !destinationCollectionIndex) return
+ if (collectionIndexDragged === destinationCollectionIndex) return
+ if (collectionsType.value.type === "my-collections") {
+ moveRESTFolder(collectionIndexDragged, destinationCollectionIndex)
+ draggingToRoot.value = false
+ toast.success(`${t("collection.moved")}`)
+ } else if (hasTeamWriteAccess.value) {
+ // add the collection index to the loading array
+ collectionMoveLoading.value.push(collectionIndexDragged)
+ pipe(
+ moveRESTTeamCollection(
+ collectionIndexDragged,
+ destinationCollectionIndex
+ ),
+ TE.match(
+ (err: GQLError) => {
+ toast.error(`${getErrorMessage(err)}`)
+ collectionMoveLoading.value.splice(
+ collectionMoveLoading.value.indexOf(collectionIndexDragged),
+ 1
+ )
+ },
+ () => {
+ toast.success(`${t("collection.moved")}`)
+ // remove the collection index from the loading array
+ collectionMoveLoading.value.splice(
+ collectionMoveLoading.value.indexOf(collectionIndexDragged),
+ 1
+ )
+ }
+ )
+ )()
+ }
+}
+
+/**
+ * Checks if the collection is already in the root
+ * @param id - path of the collection
+ * @returns boolean - true if the collection is already in the root
+ */
+const isAlreadyInRoot = computed(() => {
+ return (id: string) => {
+ const indexPath = id.split("/").map((i) => parseInt(i))
+ return indexPath.length === 1
+ }
+})
+
+/**
+ * This function is called when the user drops the collection
+ * to the root
+ * @param payload - object containing the collection index dragged
+ */
+const dropToRoot = ({ dataTransfer }: DragEvent) => {
+ if (dataTransfer) {
+ const collectionIndexDragged = dataTransfer.getData("collectionIndex")
+ if (!collectionIndexDragged) return
+ if (collectionsType.value.type === "my-collections") {
+ // check if the collection is already in the root
+ if (isAlreadyInRoot.value(collectionIndexDragged)) {
+ toast.error(`${t("collection.invalid_root_move")}`)
+ } else {
+ moveRESTFolder(collectionIndexDragged, null)
+ toast.success(`${t("collection.moved")}`)
+ }
+
+ draggingToRoot.value = false
+ } else if (hasTeamWriteAccess.value) {
+ // add the collection index to the loading array
+ collectionMoveLoading.value.push(collectionIndexDragged)
+
+ // destination collection index is null since we are moving to root
+ pipe(
+ moveRESTTeamCollection(collectionIndexDragged, null),
+ TE.match(
+ (err: GQLError) => {
+ collectionMoveLoading.value.splice(
+ collectionMoveLoading.value.indexOf(collectionIndexDragged),
+ 1
+ )
+ toast.error(`${getErrorMessage(err)}`)
+ },
+ () => {
+ // remove the collection index from the loading array
+ collectionMoveLoading.value.splice(
+ collectionMoveLoading.value.indexOf(collectionIndexDragged),
+ 1
+ )
+ toast.success(`${t("collection.moved")}`)
+ }
+ )
+ )()
+ }
+ }
+}
+
+/**
+ * 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
+ * @returns boolean - true if the request is being moved to the same parent
+ */
+const isSameSameParent = computed(
+ () => (draggedReq: string, destinationReq: string) => {
+ const draggedReqIndex = draggedReq.split("/").map((i) => parseInt(i))
+ const destinationReqIndex = destinationReq
+ .split("/")
+ .map((i) => parseInt(i))
+
+ // length of 1 means the request is in the root
+ if (draggedReqIndex.length === 1 && destinationReqIndex.length === 1) {
+ return true
+ } else if (
+ draggedReqIndex[draggedReqIndex.length - 2] ===
+ destinationReqIndex[destinationReqIndex.length - 2]
+ ) {
+ return true
+ } else {
+ return false
+ }
+ }
+)
+
+/**
+ * This function is called when the user updates the request order in a collection
+ * @param payload - object containing the request index dragged and the destination request index
+ * with the destination collection index
+ */
+const updateRequestOrder = (payload: {
+ dragedRequestIndex: string
+ destinationRequestIndex: string
+ destinationCollectionIndex: string
+}) => {
+ const {
+ dragedRequestIndex,
+ destinationRequestIndex,
+ destinationCollectionIndex,
+ } = payload
+
+ if (
+ !dragedRequestIndex ||
+ !destinationRequestIndex ||
+ !destinationCollectionIndex
+ )
+ return
+
+ if (dragedRequestIndex === destinationRequestIndex) return
+
+ if (collectionsType.value.type === "my-collections") {
+ if (!isSameSameParent.value(dragedRequestIndex, destinationRequestIndex)) {
+ toast.error(`${t("collection.different_parent")}`)
+ } else {
+ updateRESTRequestOrder(
+ pathToIndex.value(dragedRequestIndex),
+ pathToIndex.value(destinationRequestIndex),
+ destinationCollectionIndex
+ )
+ toast.success(`${t("request.order_changed")}`)
+ }
+ } else if (hasTeamWriteAccess.value) {
+ // add the request index to the loading array
+ requestMoveLoading.value.push(dragedRequestIndex)
+
+ pipe(
+ updateOrderRESTTeamRequest(
+ dragedRequestIndex,
+ destinationRequestIndex,
+ destinationCollectionIndex
+ ),
+ TE.match(
+ (err: GQLError) => {
+ toast.error(`${getErrorMessage(err)}`)
+ requestMoveLoading.value.splice(
+ requestMoveLoading.value.indexOf(dragedRequestIndex),
+ 1
+ )
+ },
+ () => {
+ toast.success(`${t("request.order_changed")}`)
+
+ // remove the request index from the loading array
+ requestMoveLoading.value.splice(
+ requestMoveLoading.value.indexOf(dragedRequestIndex),
+ 1
+ )
+ }
+ )
+ )()
+ }
+}
+
+/**
+ * This function is called when the user updates the collection or folder order
+ * @param payload - object containing the collection index dragged and the destination collection index
+ */
+const updateCollectionOrder = (payload: {
+ dragedCollectionIndex: string
+ destinationCollectionIndex: string
+}) => {
+ const { dragedCollectionIndex, destinationCollectionIndex } = payload
+ if (!dragedCollectionIndex || !destinationCollectionIndex) return
+ if (dragedCollectionIndex === destinationCollectionIndex) return
+
+ if (collectionsType.value.type === "my-collections") {
+ if (
+ !isSameSameParent.value(dragedCollectionIndex, destinationCollectionIndex)
+ ) {
+ toast.error(`${t("collection.different_parent")}`)
+ } else {
+ updateRESTCollectionOrder(
+ dragedCollectionIndex,
+ destinationCollectionIndex
+ )
+ toast.success(`${t("collection.order_changed")}`)
+ }
+ } else if (hasTeamWriteAccess.value) {
+ collectionMoveLoading.value.push(dragedCollectionIndex)
+ pipe(
+ updateOrderRESTTeamCollection(
+ dragedCollectionIndex,
+ destinationCollectionIndex
+ ),
+ TE.match(
+ (err: GQLError) => {
+ toast.error(`${getErrorMessage(err)}`)
+ collectionMoveLoading.value.splice(
+ collectionMoveLoading.value.indexOf(dragedCollectionIndex),
+ 1
+ )
+ },
+ () => {
+ toast.success(`${t("collection.order_changed")}`)
+ collectionMoveLoading.value.splice(
+ collectionMoveLoading.value.indexOf(dragedCollectionIndex),
+ 1
+ )
+ }
+ )
+ )()
+ }
+}
// Import - Export Collection functions
/**
* Export the whole my collection or specific team collection to JSON
@@ -1525,28 +1860,38 @@ const resetSelectedData = () => {
}
const getErrorMessage = (err: GQLError) => {
+ console.error(err)
if (err.type === "network_error") {
- console.error(err)
return t("error.network_error")
} else {
switch (err.error) {
case "team_coll/short_title":
- console.error(err)
return t("collection.name_length_insufficient")
case "team/invalid_coll_id":
- console.error(err)
- return t("team.invalid_id")
+ case "bug/team_coll/no_coll_id":
+ case "team_req/invalid_target_id":
+ return t("team.invalid_coll_id")
case "team/not_required_role":
- console.error(err)
return t("profile.no_permission")
case "team_req/not_required_role":
- console.error(err)
return t("profile.no_permission")
case "Forbidden resource":
- console.error(err)
return t("profile.no_permission")
+ case "team_req/not_found":
+ return t("team.no_request_found")
+ case "bug/team_req/no_req_id":
+ return t("team.no_request_found")
+ case "team/collection_is_parent_coll":
+ return t("team.parent_coll_move")
+ case "team/target_and_destination_collection_are_same":
+ return t("team.same_target_destination")
+ case "team/target_collection_is_already_root_collection":
+ return t("collection.invalid_root_move")
+ case "team_req/requests_not_from_same_collection":
+ return t("request.different_collection")
+ case "team/team_collections_have_different_parents":
+ return t("collection.different_parent")
default:
- console.error(err)
return t("error.something_went_wrong")
}
}
diff --git a/packages/hoppscotch-common/src/components/smart/Tree.vue b/packages/hoppscotch-common/src/components/smart/Tree.vue
index fe875fa6c..3c9a07459 100644
--- a/packages/hoppscotch-common/src/components/smart/Tree.vue
+++ b/packages/hoppscotch-common/src/components/smart/Tree.vue
@@ -13,12 +13,15 @@
:node-item="rootNode"
:adapter="adapter as SmartTreeAdapter"
>
-
+
-
+
(
ImportFromJsonDocument,
diff --git a/packages/hoppscotch-common/src/helpers/backend/mutations/TeamRequest.ts b/packages/hoppscotch-common/src/helpers/backend/mutations/TeamRequest.ts
index 7346a66c5..daff454a5 100644
--- a/packages/hoppscotch-common/src/helpers/backend/mutations/TeamRequest.ts
+++ b/packages/hoppscotch-common/src/helpers/backend/mutations/TeamRequest.ts
@@ -9,16 +9,27 @@ import {
MoveRestTeamRequestDocument,
MoveRestTeamRequestMutation,
MoveRestTeamRequestMutationVariables,
+ UpdateLookUpRequestOrderDocument,
+ UpdateLookUpRequestOrderMutation,
+ UpdateLookUpRequestOrderMutationVariables,
UpdateRequestDocument,
UpdateRequestMutation,
UpdateRequestMutationVariables,
} from "../graphql"
+type DeleteRequestErrors = "team_req/not_found"
+
type MoveRestTeamRequestErrors =
| "team_req/not_found"
| "team_req/invalid_target_id"
+ | "team/invalid_coll_id"
+ | "team_req/not_required_role"
+ | "bug/team_req/no_req_id"
-type DeleteRequestErrors = "team_req/not_found"
+type UpdateLookUpRequestOrderErrors =
+ | "team_req/not_found"
+ | "team/request_and_next_request_are_same"
+ | "team_req/requests_not_from_same_collection"
export const createRequestInCollection = (
collectionID: string,
@@ -61,12 +72,27 @@ export const deleteTeamRequest = (requestID: string) =>
requestID,
})
-export const moveRESTTeamRequest = (requestID: string, collectionID: string) =>
+export const moveRESTTeamRequest = (collectionID: string, requestID: string) =>
runMutation<
MoveRestTeamRequestMutation,
MoveRestTeamRequestMutationVariables,
MoveRestTeamRequestErrors
>(MoveRestTeamRequestDocument, {
+ collectionID,
requestID,
+ })
+
+export const updateOrderRESTTeamRequest = (
+ requestID: string,
+ nextRequestID: string,
+ collectionID: string
+) =>
+ runMutation<
+ UpdateLookUpRequestOrderMutation,
+ UpdateLookUpRequestOrderMutationVariables,
+ UpdateLookUpRequestOrderErrors
+ >(UpdateLookUpRequestOrderDocument, {
+ requestID,
+ nextRequestID,
collectionID,
})
diff --git a/packages/hoppscotch-common/src/helpers/teams/TeamCollectionAdapter.ts b/packages/hoppscotch-common/src/helpers/teams/TeamCollectionAdapter.ts
index 49a891bde..8fa716f4b 100644
--- a/packages/hoppscotch-common/src/helpers/teams/TeamCollectionAdapter.ts
+++ b/packages/hoppscotch-common/src/helpers/teams/TeamCollectionAdapter.ts
@@ -16,6 +16,10 @@ import {
TeamRequestDeletedDocument,
GetCollectionChildrenDocument,
GetCollectionRequestsDocument,
+ TeamRequestMovedDocument,
+ TeamCollectionMovedDocument,
+ TeamRequestOrderUpdatedDocument,
+ TeamCollectionOrderUpdatedDocument,
} from "~/helpers/backend/graphql"
const TEAMS_BACKEND_PAGE_SIZE = 10
@@ -201,6 +205,10 @@ export default class NewTeamCollectionAdapter {
private teamRequestAdded$: Subscription | null
private teamRequestUpdated$: Subscription | null
private teamRequestDeleted$: Subscription | null
+ private teamRequestMoved$: Subscription | null
+ private teamCollectionMoved$: Subscription | null
+ private teamRequestOrderUpdated$: Subscription | null
+ private teamCollectionOrderUpdated$: Subscription | null
private teamCollectionAddedSub: WSubscription | null
private teamCollectionUpdatedSub: WSubscription | null
@@ -208,6 +216,10 @@ export default class NewTeamCollectionAdapter {
private teamRequestAddedSub: WSubscription | null
private teamRequestUpdatedSub: WSubscription | null
private teamRequestDeletedSub: WSubscription | null
+ private teamRequestMovedSub: WSubscription | null
+ private teamCollectionMovedSub: WSubscription | null
+ private teamRequestOrderUpdatedSub: WSubscription | null
+ private teamCollectionOrderUpdatedSub: WSubscription | null
constructor(private teamID: string | null) {
this.collections$ = new BehaviorSubject([])
@@ -221,6 +233,10 @@ export default class NewTeamCollectionAdapter {
this.teamRequestAdded$ = null
this.teamRequestDeleted$ = null
this.teamRequestUpdated$ = null
+ this.teamRequestMoved$ = null
+ this.teamCollectionMoved$ = null
+ this.teamRequestOrderUpdated$ = null
+ this.teamCollectionOrderUpdated$ = null
this.teamCollectionAddedSub = null
this.teamCollectionUpdatedSub = null
@@ -228,6 +244,10 @@ export default class NewTeamCollectionAdapter {
this.teamRequestAddedSub = null
this.teamRequestDeletedSub = null
this.teamRequestUpdatedSub = null
+ this.teamRequestMovedSub = null
+ this.teamCollectionMovedSub = null
+ this.teamRequestOrderUpdatedSub = null
+ this.teamCollectionOrderUpdatedSub = null
if (this.teamID) this.initialize()
}
@@ -255,6 +275,10 @@ export default class NewTeamCollectionAdapter {
this.teamRequestAdded$?.unsubscribe()
this.teamRequestDeleted$?.unsubscribe()
this.teamRequestUpdated$?.unsubscribe()
+ this.teamRequestMoved$?.unsubscribe()
+ this.teamCollectionMoved$?.unsubscribe()
+ this.teamRequestOrderUpdated$?.unsubscribe()
+ this.teamCollectionOrderUpdated$?.unsubscribe()
this.teamCollectionAddedSub?.unsubscribe()
this.teamCollectionUpdatedSub?.unsubscribe()
@@ -262,6 +286,10 @@ export default class NewTeamCollectionAdapter {
this.teamRequestAddedSub?.unsubscribe()
this.teamRequestDeletedSub?.unsubscribe()
this.teamRequestUpdatedSub?.unsubscribe()
+ this.teamRequestMovedSub?.unsubscribe()
+ this.teamCollectionMovedSub?.unsubscribe()
+ this.teamRequestOrderUpdatedSub?.unsubscribe()
+ this.teamCollectionOrderUpdatedSub?.unsubscribe()
}
private async initialize() {
@@ -328,7 +356,7 @@ export default class NewTeamCollectionAdapter {
this.loadingCollections$.getValue().filter((x) => x !== "root")
)
- throw new Error(`Error fetching root collections: ${result}`)
+ throw new Error(`Error fetching root collections: ${result.left.error}`)
}
totalCollections.push(
@@ -456,6 +484,143 @@ export default class NewTeamCollectionAdapter {
this.collections$.next(tree)
}
+ /**
+ * Moves a request from one collection to another
+ *
+ * @param {string} request - The request to move
+ */
+ private async moveRequest(request: TeamRequest) {
+ const tree = this.collections$.value
+
+ // Remove the request from the current collection
+ this.removeRequest(request.id)
+
+ const currentRequest = request.request
+
+ if (currentRequest === null || currentRequest === undefined) return
+
+ // Find request in tree, don't attempt if no collection or no requests is found
+ const collection = findCollInTree(tree, request.collectionID)
+ if (!collection) return // Ignore add request
+
+ // Collection is not expanded
+ if (!collection.requests) return
+
+ this.addRequest({
+ id: request.id,
+ collectionID: request.collectionID,
+ request: translateToNewRequest(request.request),
+ title: request.title,
+ })
+ }
+
+ /**
+ * Moves a collection from one collection to another or to root
+ *
+ * @param {string} collectionID - The ID of the collection to move
+ */
+ private async moveCollection(
+ collectionID: string,
+ parentID: string | null,
+ title: string
+ ) {
+ // Remove the collection from the current position
+ this.removeCollection(collectionID)
+
+ if (collectionID === null || parentID === undefined) return
+
+ // Expand the parent collection if it is not expanded
+ // so that the old children is also visible when expanding
+ if (parentID) this.expandCollection(parentID)
+
+ this.addCollection(
+ {
+ id: collectionID,
+ children: null,
+ requests: null,
+ title: title,
+ },
+ parentID ?? null
+ )
+ }
+
+ public updateRequestOrder(
+ dragedRequestID: string,
+ destinationRequestID: string,
+ 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
+
+ // 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
+
+ const request = collection.requests[requestIndex]
+
+ collection.requests.splice(requestIndex, 1)
+ collection.requests.splice(destinationIndex, 0, request)
+
+ this.collections$.next(tree)
+ }
+
+ public updateCollectionOrder = (
+ collectionID: string,
+ destinationCollectionID: string
+ ) => {
+ const tree = this.collections$.value
+
+ // Find collection in tree
+ const coll = findParentOfColl(tree, 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
+ )
+
+ const destinationIndex = coll.children.findIndex(
+ (coll) => coll.id === destinationCollectionID
+ )
+
+ // If the collection index is not found, don't update
+ if (collectionIndex === -1) return
+
+ const collection = coll.children[collectionIndex]
+
+ coll.children.splice(collectionIndex, 1)
+ coll.children.splice(destinationIndex, 0, collection)
+ } 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
+
+ const collection = tree[collectionIndex]
+
+ tree.splice(collectionIndex, 1)
+ tree.splice(destinationIndex, 0, collection)
+ }
+
+ this.collections$.next(tree)
+ }
+
private registerSubscriptions() {
if (!this.teamID) return
@@ -575,7 +740,7 @@ export default class NewTeamCollectionAdapter {
},
})
- this.teamRequestUpdatedSub = teamReqDeleted
+ this.teamRequestDeletedSub = teamReqDeleted
this.teamRequestDeleted$ = teamReqDeleted$.subscribe((result) => {
if (E.isLeft(result))
throw new Error(
@@ -584,6 +749,110 @@ export default class NewTeamCollectionAdapter {
this.removeRequest(result.right.teamRequestDeleted)
})
+
+ const [teamRequestMoved$, teamRequestMoved] = runGQLSubscription({
+ query: TeamRequestMovedDocument,
+ variables: {
+ teamID: this.teamID,
+ },
+ })
+
+ this.teamRequestMovedSub = teamRequestMoved
+ this.teamRequestMoved$ = teamRequestMoved$.subscribe((result) => {
+ if (E.isLeft(result))
+ throw new Error(
+ `Team Request Move Error ${JSON.stringify(result.left)}`
+ )
+
+ const { requestMoved } = result.right
+
+ const request = {
+ id: requestMoved.id,
+ collectionID: requestMoved.collectionID,
+ title: requestMoved.title,
+ request: JSON.parse(requestMoved.request),
+ }
+
+ this.moveRequest(request)
+ })
+
+ const [teamCollectionMoved$, teamCollectionMoved] = runGQLSubscription({
+ query: TeamCollectionMovedDocument,
+ variables: {
+ teamID: this.teamID,
+ },
+ })
+
+ this.teamCollectionMovedSub = teamCollectionMoved
+ this.teamCollectionMoved$ = teamCollectionMoved$.subscribe((result) => {
+ if (E.isLeft(result))
+ throw new Error(
+ `Team Collection Move Error ${JSON.stringify(result.left)}`
+ )
+
+ const { teamCollectionMoved } = result.right
+ const { id, parent, title } = teamCollectionMoved
+
+ const parentID = parent?.id ?? null
+
+ this.moveCollection(id, parentID, title)
+ })
+
+ const [teamRequestOrderUpdated$, teamRequestOrderUpdated] =
+ runGQLSubscription({
+ query: TeamRequestOrderUpdatedDocument,
+ variables: {
+ teamID: this.teamID,
+ },
+ })
+
+ this.teamRequestOrderUpdatedSub = teamRequestOrderUpdated
+ this.teamRequestOrderUpdated$ = teamRequestOrderUpdated$.subscribe(
+ (result) => {
+ if (E.isLeft(result))
+ throw new Error(
+ `Team Request Order Update Error ${JSON.stringify(result.left)}`
+ )
+
+ const { requestOrderUpdated } = result.right
+ const { request } = requestOrderUpdated
+ const { nextRequest } = requestOrderUpdated
+
+ if (!nextRequest) return
+
+ this.updateRequestOrder(
+ request.id,
+ nextRequest.id,
+ nextRequest.collectionID
+ )
+ }
+ )
+
+ const [teamCollectionOrderUpdated$, teamCollectionOrderUpdated] =
+ runGQLSubscription({
+ query: TeamCollectionOrderUpdatedDocument,
+ variables: {
+ teamID: this.teamID,
+ },
+ })
+
+ this.teamCollectionOrderUpdatedSub = teamCollectionOrderUpdated
+ this.teamCollectionOrderUpdated$ = teamCollectionOrderUpdated$.subscribe(
+ (result) => {
+ if (E.isLeft(result))
+ throw new Error(
+ `Team Collection Order Update Error ${JSON.stringify(result.left)}`
+ )
+
+ const { collectionOrderUpdated } = result.right
+ const { collection } = collectionOrderUpdated
+ const { nextCollection } = collectionOrderUpdated
+
+ if (!nextCollection) return
+
+ this.updateCollectionOrder(collection.id, nextCollection.id)
+ }
+ )
}
/**
diff --git a/packages/hoppscotch-common/src/newstore/collections.ts b/packages/hoppscotch-common/src/newstore/collections.ts
index 6ccec0e66..bcfe05571 100644
--- a/packages/hoppscotch-common/src/newstore/collections.ts
+++ b/packages/hoppscotch-common/src/newstore/collections.ts
@@ -186,6 +186,133 @@ const restCollectionDispatchers = defineDispatchers({
}
},
+ moveFolder(
+ { state }: RESTCollectionStoreType,
+ { path, destinationPath }: { path: string; destinationPath: string | null }
+ ) {
+ const newState = state
+
+ // Move the folder to the root
+ if (destinationPath === null) {
+ const indexPaths = path.split("/").map((x) => parseInt(x))
+
+ if (indexPaths.length === 0) {
+ console.log("Given path too short. Skipping request.")
+ return {}
+ }
+
+ const folderIndex = indexPaths.pop() as number
+
+ const containingFolder = navigateToFolderWithIndexPath(
+ newState,
+ indexPaths
+ )
+ if (containingFolder === null) {
+ console.error(
+ `The folder to move is already in the root. Skipping request to move folder.`
+ )
+ return {}
+ }
+
+ const theFolder = containingFolder.folders.splice(folderIndex, 1)
+ newState.push(theFolder[0] as HoppCollection)
+
+ return {
+ state: newState,
+ }
+ }
+
+ const indexPaths = path.split("/").map((x) => parseInt(x))
+
+ const destinationIndexPaths = destinationPath
+ .split("/")
+ .map((x) => parseInt(x))
+
+ if (indexPaths.length === 0 || destinationIndexPaths.length === 0) {
+ console.error(
+ `Given path is too short. Skipping request to move folder '${path}' to destination '${destinationPath}'.`
+ )
+ return {}
+ }
+
+ const target = navigateToFolderWithIndexPath(
+ newState,
+ destinationIndexPaths
+ )
+ if (target === null) {
+ console.error(
+ `Could not resolve destination path '${destinationPath}'. Skipping moveFolder dispatch.`
+ )
+ return {}
+ }
+
+ const folderIndex = indexPaths.pop() as number
+
+ const containingFolder = navigateToFolderWithIndexPath(newState, indexPaths)
+ // We are moving a folder from the root
+ if (containingFolder === null) {
+ const theFolder = newState.splice(folderIndex, 1)
+
+ target.folders.push(theFolder[0])
+ } else {
+ const theFolder = containingFolder.folders.splice(folderIndex, 1)
+
+ target.folders.push(theFolder[0])
+ }
+
+ return { state: newState }
+ },
+
+ updateCollectionOrder(
+ { state }: RESTCollectionStoreType,
+ {
+ collectionIndex,
+ destinationCollectionIndex,
+ }: {
+ collectionIndex: string
+ destinationCollectionIndex: string
+ }
+ ) {
+ const newState = state
+
+ const indexPaths = collectionIndex.split("/").map((x) => parseInt(x))
+
+ const destinationIndexPaths = destinationCollectionIndex
+ .split("/")
+ .map((x) => parseInt(x))
+
+ if (indexPaths.length === 0 || destinationIndexPaths.length === 0) {
+ console.log("Given path too short. Skipping request.")
+ return {}
+ }
+
+ const folderIndex = indexPaths.pop() as number
+ const destinationFolderIndex = destinationIndexPaths.pop() as number
+
+ const containingFolder = navigateToFolderWithIndexPath(
+ newState,
+ destinationIndexPaths
+ )
+
+ if (containingFolder === null) {
+ const [removed] = newState.splice(folderIndex, 1)
+
+ newState.splice(destinationFolderIndex, 0, removed)
+
+ return {
+ state: newState,
+ }
+ }
+
+ const [removed] = containingFolder.folders.splice(folderIndex, 1)
+
+ containingFolder.folders.splice(destinationFolderIndex, 0, removed)
+
+ return {
+ state: newState,
+ }
+ },
+
editRequest(
{ state }: RESTCollectionStoreType,
{
@@ -286,6 +413,11 @@ const restCollectionDispatchers = defineDispatchers({
const indexPaths = path.split("/").map((x) => parseInt(x))
+ if (indexPaths.length === 0) {
+ console.log("Given path too short. Skipping request.")
+ return {}
+ }
+
const targetLocation = navigateToFolderWithIndexPath(newState, indexPaths)
if (targetLocation === null) {
@@ -315,6 +447,47 @@ const restCollectionDispatchers = defineDispatchers({
state: newState,
}
},
+
+ updateRequestOrder(
+ { state }: RESTCollectionStoreType,
+ {
+ requestIndex,
+ destinationRequestIndex,
+ destinationCollectionPath,
+ }: {
+ requestIndex: number
+ destinationRequestIndex: number
+ destinationCollectionPath: string
+ }
+ ) {
+ const newState = state
+
+ const indexPaths = destinationCollectionPath
+ .split("/")
+ .map((x) => parseInt(x))
+
+ if (indexPaths.length === 0) {
+ console.log("Given path too short. Skipping request.")
+ return {}
+ }
+
+ const targetLocation = navigateToFolderWithIndexPath(newState, indexPaths)
+
+ if (targetLocation === null) {
+ console.log(
+ `Could not resolve path '${destinationCollectionPath}'. Ignoring reorderRequest dispatch.`
+ )
+ return {}
+ }
+
+ const [removed] = targetLocation.requests.splice(requestIndex, 1)
+
+ targetLocation.requests.splice(destinationRequestIndex, 0, removed)
+
+ return {
+ state: newState,
+ }
+ },
})
const gqlCollectionDispatchers = defineDispatchers({
@@ -691,6 +864,16 @@ export function removeRESTFolder(path: string) {
})
}
+export function moveRESTFolder(path: string, destinationPath: string | null) {
+ restCollectionStore.dispatch({
+ dispatcher: "moveFolder",
+ payload: {
+ path,
+ destinationPath,
+ },
+ })
+}
+
export function editRESTRequest(
path: string,
requestIndex: number,
@@ -757,6 +940,34 @@ export function moveRESTRequest(
})
}
+export function updateRESTRequestOrder(
+ requestIndex: number,
+ destinationRequestIndex: number,
+ destinationCollectionPath: string
+) {
+ restCollectionStore.dispatch({
+ dispatcher: "updateRequestOrder",
+ payload: {
+ requestIndex,
+ destinationRequestIndex,
+ destinationCollectionPath,
+ },
+ })
+}
+
+export function updateRESTCollectionOrder(
+ collectionIndex: string,
+ destinationCollectionIndex: string
+) {
+ restCollectionStore.dispatch({
+ dispatcher: "updateCollectionOrder",
+ payload: {
+ collectionIndex,
+ destinationCollectionIndex,
+ },
+ })
+}
+
export function setGraphqlCollections(
entries: HoppCollection[]
) {
+