refactor: unify markup

2024-02-20 20:19:57 +05:30
parent d0c7c4a245
commit 0a0f441da1
5 changed files with 354 additions and 321 deletions
--- a/packages/hoppscotch-common/src/components/new-collections/index.vue
+++ b/packages/hoppscotch-common/src/components/new-collections/index.vue
@@ -1,52 +1,19 @@
 <template>
  <div v-if="!activeWorkspaceHandle">No Workspace Selected.</div>
-  <div
-    v-else
-    :class="{
-      'rounded border border-divider': saveRequest,
-      'bg-primaryDark':
-        draggingToRoot && currentReorderingStatus.type !== 'request',
-    }"
-    class="flex-1"
-    @drop.prevent="dropToRoot"
-    @dragover.prevent="draggingToRoot = true"
-    @dragend="draggingToRoot = false"
-  >
-    <div
-      class="sticky z-10 flex flex-shrink-0 flex-col overflow-x-auto border-b border-dividerLight bg-primary"
-      :style="{
-        top: 0,
-      }"
-    >
-      <WorkspaceCurrent :section="t('tab.collections')" />
-      <input
-        v-model="searchText"
-        type="search"
-        autocomplete="off"
-        class="flex h-8 w-full bg-transparent p-4 py-2"
-        :placeholder="t('action.search')"
-      />
-    </div>
+
  <NewCollectionsRest
-      v-if="platform === 'rest'"
+    v-else-if="platform === 'rest'"
    :picked="picked"
    :save-request="saveRequest"
    :workspace-handle="activeWorkspaceHandle"
    @select="(payload) => emit('select', payload)"
  />
-  </div>
 </template>

 <script setup lang="ts">
 import { useService } from "dioc/vue"
-import { ref } from "vue"
-import { useI18n } from "~/composables/i18n"
-import { useReadonlyStream } from "~/composables/stream"
-import { useToast } from "~/composables/toast"
+
 import { Picked } from "~/helpers/types/HoppPicked"
-import toast from "~/modules/toast"
-import { moveRESTFolder } from "~/newstore/collections"
-import { currentReorderingStatus$ } from "~/newstore/reordering"
 import { NewWorkspaceService } from "~/services/new-workspace"

 defineProps<{
@@ -59,50 +26,7 @@ const emit = defineEmits<{
  (event: "select", payload: Picked | null): void
 }>()

-const t = useI18n()
-const toast = useToast()
-
-const draggingToRoot = ref(false)
-const searchText = ref("")
-
 const workspaceService = useService(NewWorkspaceService)

 const activeWorkspaceHandle = workspaceService.activeWorkspaceHandle
-
-const currentReorderingStatus = useReadonlyStream(currentReorderingStatus$, {
-  type: "collection",
-  id: "",
-  parentID: "",
-})
-
-/**
- * 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
-    // check if the collection is already in the root
-    if (isAlreadyInRoot(collectionIndexDragged)) {
-      toast.error(`${t("collection.invalid_root_move")}`)
-    } else {
-      moveRESTFolder(collectionIndexDragged, null)
-      toast.success(`${t("collection.moved")}`)
-    }
-
-    draggingToRoot.value = false
-  }
-}
-
-/**
- * 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 = (id: string) => {
-  const indexPath = id.split("/")
-  return indexPath.length === 1
-}
 </script>
--- a/packages/hoppscotch-common/src/components/new-collections/rest/index.vue
+++ b/packages/hoppscotch-common/src/components/new-collections/rest/index.vue
@@ -1,4 +1,30 @@
 <template>
+  <div
+    :class="{
+      'rounded border border-divider': saveRequest,
+      'bg-primaryDark':
+        draggingToRoot && currentReorderingStatus.type !== 'request',
+    }"
+    class="flex-1"
+    @drop.prevent="dropToRoot"
+    @dragover.prevent="draggingToRoot = true"
+    @dragend="draggingToRoot = false"
+  >
+    <div
+      class="sticky z-10 flex flex-shrink-0 flex-col overflow-x-auto border-b border-dividerLight bg-primary"
+      :style="{
+        top: 0,
+      }"
+    >
+      <WorkspaceCurrent :section="t('tab.collections')" />
+      <input
+        v-model="searchText"
+        type="search"
+        autocomplete="off"
+        class="flex h-8 w-full bg-transparent p-4 py-2"
+        :placeholder="t('action.search')"
+      />
+    </div>
    <div class="flex flex-1 flex-col">
      <div
        class="sticky z-10 flex flex-1 justify-between border-b border-dividerLight bg-primary"
@@ -70,7 +96,9 @@
                  toggleChildren(),
                    saveRequest &&
                      onSelectPick({
-                      pickedType: isAlreadyInRoot(node.data.value.collectionID)
+                        pickedType: isAlreadyInRoot(
+                          node.data.value.collectionID
+                        )
                          ? 'my-collection'
                          : 'my-folder',
                        ...getCollectionIndexPathArgs(
@@ -211,6 +239,7 @@
        @set-collection-properties="setCollectionProperties"
      />
    </div>
+  </div>
 </template>

 <script setup lang="ts">
@@ -229,7 +258,6 @@ import { WorkspaceRESTCollectionTreeAdapter } from "~/helpers/adapters/Workspace
 import { TeamCollection } from "~/helpers/backend/graphql"
 import {
  getFoldersByPath,
-  resolveSaveContextOnCollectionReorder,
  updateInheritedPropertiesForAffectedRequests,
 } from "~/helpers/collection/collection"
 import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
@@ -253,6 +281,7 @@ import { RESTTabService } from "~/services/tab/rest"
 import IconImport from "~icons/lucide/folder-down"
 import IconHelpCircle from "~icons/lucide/help-circle"
 import IconPlus from "~icons/lucide/plus"
+import { currentReorderingStatus$ } from "~/newstore/reordering"

 const t = useI18n()
 const toast = useToast()
@@ -306,6 +335,12 @@ const emit = defineEmits<{
 const workspaceService = useService(NewWorkspaceService)
 const restCollectionState = useReadonlyStream(restCollections$, [])

+const currentReorderingStatus = useReadonlyStream(currentReorderingStatus$, {
+  type: "collection",
+  id: "",
+  parentID: "",
+})
+
 const treeAdapter = markRaw(
  new WorkspaceRESTCollectionTreeAdapter(
    props.workspaceHandle,
@@ -313,6 +348,9 @@ const treeAdapter = markRaw(
  )
 )

+const draggingToRoot = ref(false)
+const searchText = ref("")
+
 const modalLoadingState = ref(false)

 const showModalAdd = ref(false)
@@ -1292,6 +1330,27 @@ const dropEvent = (
  }
 }

+/**
+ * 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
+    // check if the collection is already in the root
+    if (isAlreadyInRoot(collectionIndexDragged)) {
+      toast.error(`${t("collection.invalid_root_move")}`)
+    } else {
+      moveRESTFolder(collectionIndexDragged, null)
+      toast.success(`${t("collection.moved")}`)
+    }
+
+    draggingToRoot.value = false
+  }
+}
+
 const dropRequest = (payload: {
  parentCollectionIndexPath?: string | undefined
  requestIndex: string
--- a/packages/hoppscotch-common/src/helpers/collection/collection.ts
+++ b/packages/hoppscotch-common/src/helpers/collection/collection.ts
@@ -64,9 +64,14 @@ export function resolveSaveContextOnCollectionReorder(
  const tabService = getService(RESTTabService)

  const tabs = tabService.getTabsRefTo((tab) => {
+    if (tab.document.saveContext?.originLocation === "user-collection") {
+      return affectedPaths.has(tab.document.saveContext.folderPath)
+    }
+
    return (
-      tab.document.saveContext?.originLocation === "user-collection" &&
-      affectedPaths.has(tab.document.saveContext.folderPath)
+      tab.document.saveContext?.originLocation ===
+        "workspace-user-collection" &&
+      affectedPaths.has(tab.document.saveContext.collectionID)
    )
  })

@@ -77,6 +82,16 @@ export function resolveSaveContextOnCollectionReorder(
      )!
      tab.value.document.saveContext.folderPath = newPath
    }
+
+    if (
+      tab.value.document.saveContext?.originLocation ===
+      "workspace-user-collection"
+    ) {
+      const newPath = affectedPaths.get(
+        tab.value.document.saveContext?.collectionID
+      )!
+      tab.value.document.saveContext.collectionID = newPath
+    }
  }
 }

@@ -93,9 +108,14 @@ export function updateSaveContextForAffectedRequests(
 ) {
  const tabService = getService(RESTTabService)
  const tabs = tabService.getTabsRefTo((tab) => {
+    if (tab.document.saveContext?.originLocation === "user-collection") {
+      return tab.document.saveContext.folderPath.startsWith(oldFolderPath)
+    }
+
    return (
-      tab.document.saveContext?.originLocation === "user-collection" &&
-      tab.document.saveContext.folderPath.startsWith(oldFolderPath)
+      tab.document.saveContext?.originLocation ===
+        "workspace-user-collection" &&
+      tab.document.saveContext.collectionID.startsWith(oldFolderPath)
    )
  })

@@ -109,6 +129,19 @@ export function updateSaveContextForAffectedRequests(
        ),
      }
    }
+
+    if (
+      tab.value.document.saveContext?.originLocation ===
+      "workspace-user-collection"
+    ) {
+      tab.value.document.saveContext = {
+        ...tab.value.document.saveContext,
+        collectionID: tab.value.document.saveContext.collectionID.replace(
+          oldFolderPath,
+          newFolderPath
+        ),
+      }
+    }
  }
 }
 /**
@@ -281,9 +314,14 @@ export function updateInheritedPropertiesForAffectedRequests(
 function resetSaveContextForAffectedRequests(folderPath: string) {
  const tabService = getService(RESTTabService)
  const tabs = tabService.getTabsRefTo((tab) => {
+    if (tab.document.saveContext?.originLocation === "user-collection") {
+      return tab.document.saveContext.folderPath.startsWith(folderPath)
+    }
+
    return (
-      tab.document.saveContext?.originLocation === "user-collection" &&
-      tab.document.saveContext.folderPath.startsWith(folderPath)
+      tab.document.saveContext?.originLocation ===
+        "workspace-user-collection" &&
+      tab.document.saveContext.collectionID.startsWith(folderPath)
    )
  })

--- a/packages/hoppscotch-common/src/helpers/collection/request.ts
+++ b/packages/hoppscotch-common/src/helpers/collection/request.ts
@@ -39,11 +39,21 @@ export function resolveSaveContextOnRequestReorder(payload: {

  const tabService = getService(RESTTabService)
  const tabs = tabService.getTabsRefTo((tab) => {
+    if (tab.document.saveContext?.originLocation === "user-collection") {
      return (
-      tab.document.saveContext?.originLocation === "user-collection" &&
        tab.document.saveContext.folderPath === folderPath &&
        affectedIndexes.has(tab.document.saveContext.requestIndex)
      )
+    }
+
+    return (
+      tab.document.saveContext?.originLocation ===
+        "workspace-user-collection" &&
+      tab.document.saveContext.collectionID === folderPath &&
+      affectedIndexes.has(
+        parseInt(tab.document.saveContext.requestID.split("/").slice(-1)[0])
+      )
+    )
  })

  for (const tab of tabs) {
--- a/packages/hoppscotch-common/src/services/new-workspace/providers/personal.workspace.ts
+++ b/packages/hoppscotch-common/src/services/new-workspace/providers/personal.workspace.ts
@@ -508,13 +508,11 @@ export class PersonalWorkspaceProviderService
      draggedCollectionIndex,
      destinationCollectionIndex
    )
-    // resolveSaveContextOnCollectionReorder({
-    //   lastIndex: pathToLastIndex(draggedCollectionIndex),
-    //   newIndex: pathToLastIndex(
-    //     destinationCollectionIndex ? destinationCollectionIndex : ""
-    //   ),
-    //   folderPath: draggedCollectionIndex.split("/").slice(0, -1).join("/"),
-    // })
+    resolveSaveContextOnCollectionReorder({
+      lastIndex: this.pathToLastIndex(draggedCollectionIndex),
+      newIndex: this.pathToLastIndex(destinationCollectionIndex ?? ""),
+      folderPath: draggedCollectionIndex.split("/").slice(0, -1).join("/"),
+    })

    return Promise.resolve(E.right(undefined))
  }
@@ -533,34 +531,38 @@ export class PersonalWorkspaceProviderService

    const draggedCollectionIndex = collectionHandle.value.data.collectionID

-    // const parentFolder = draggedCollectionIndex
-    //   .split("/")
-    //   .slice(0, -1)
-    //   .join("/") // remove last folder to get parent folder
-
-    // const totalFoldersOfDestinationCollection =
-    //   getFoldersByPath(
-    //     restCollectionStore.value.state,
-    //     destinationCollectionIndex
-    //   ).length - (parentFolder === destinationCollectionIndex ? 1 : 0)
-
    moveRESTFolder(draggedCollectionIndex, destinationCollectionIndex)

-    // resolveSaveContextOnCollectionReorder(
-    //   {
-    //     lastIndex: pathToLastIndex(draggedCollectionIndex),
-    //     newIndex: -1,
-    //     folderPath: parentFolder,
-    //     length: getFoldersByPath(restCollectionStore.value.state, parentFolder)
-    //       .length,
-    //   },
-    //   "drop"
-    // )
+    if (destinationCollectionIndex === null) {
+      return Promise.resolve(E.right(undefined))
+    }

-    // updateSaveContextForAffectedRequests(
-    //   draggedCollectionIndex,
-    //   `${destinationCollectionIndex}/${totalFoldersOfDestinationCollection}`
-    // )
+    const parentFolder = draggedCollectionIndex
+      .split("/")
+      .slice(0, -1)
+      .join("/") // remove last folder to get parent folder
+
+    const totalFoldersOfDestinationCollection =
+      getFoldersByPath(
+        restCollectionStore.value.state,
+        destinationCollectionIndex
+      ).length - (parentFolder === destinationCollectionIndex ? 1 : 0)
+
+    resolveSaveContextOnCollectionReorder(
+      {
+        lastIndex: this.pathToLastIndex(draggedCollectionIndex),
+        newIndex: -1,
+        folderPath: parentFolder,
+        length: getFoldersByPath(restCollectionStore.value.state, parentFolder)
+          .length,
+      },
+      "drop"
+    )
+
+    updateSaveContextForAffectedRequests(
+      draggedCollectionIndex,
+      `${destinationCollectionIndex}/${totalFoldersOfDestinationCollection}`
+    )

    // const { auth, headers } = cascadeParentCollectionForHeaderAuth(
    //   `${destinationCollectionIndex}/${totalFoldersOfDestinationCollection}`,