From 5df5d59f503c9b79628d40d5ea980f4cc75e7efc Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Sun, 30 May 2021 23:28:08 -0400
Subject: [PATCH] Drag and Drop for GraphQL requests in Collections pane

---
 components/collections/graphql/Collection.vue | 24 +++++--------------
 components/collections/graphql/Folder.vue     | 22 ++++-------------
 components/collections/graphql/Request.vue    |  8 +++----
 3 files changed, 13 insertions(+), 41 deletions(-)

diff --git a/components/collections/graphql/Collection.vue b/components/collections/graphql/Collection.vue
index ed6345c55..a0571ace7 100644
--- a/components/collections/graphql/Collection.vue
+++ b/components/collections/graphql/Collection.vue
@@ -148,7 +148,10 @@
 
 <script lang="ts">
 import Vue from "vue"
-import { removeGraphqlCollection } from "~/newstore/collections"
+import {
+  removeGraphqlCollection,
+  moveGraphqlRequest,
+} from "~/newstore/collections"
 
 export default Vue.extend({
   props: {
@@ -203,25 +206,10 @@ export default Vue.extend({
     dropEvent({ dataTransfer }: any) {
       this.dragging = !this.dragging
 
-      // TODO: Fix this
-
-      const oldCollectionIndex = dataTransfer.getData("oldCollectionIndex")
-      const oldFolderIndex = dataTransfer.getData("oldFolderIndex")
-      const oldFolderName = dataTransfer.getData("oldFolderName")
+      const folderPath = dataTransfer.getData("folderPath")
       const requestIndex = dataTransfer.getData("requestIndex")
-      const flag = "graphql"
 
-      this.$store.commit("postwoman/moveRequest", {
-        oldCollectionIndex,
-        newCollectionIndex: this.$props.collectionIndex,
-        newFolderIndex: -1,
-        newFolderName: this.$props.collection.name,
-        oldFolderIndex,
-        oldFolderName,
-        requestIndex,
-        flag,
-      })
-      // this.syncCollections()
+      moveGraphqlRequest(folderPath, requestIndex, `${this.collectionIndex}`)
     },
   },
 })
diff --git a/components/collections/graphql/Folder.vue b/components/collections/graphql/Folder.vue
index f1962dd38..812413712 100644
--- a/components/collections/graphql/Folder.vue
+++ b/components/collections/graphql/Folder.vue
@@ -97,6 +97,7 @@
             :request="request"
             :collection-index="collectionIndex"
             :folder-index="folderIndex"
+            :folder-path="folderPath"
             :folder-name="folder.name"
             :request-index="index"
             :doc="doc"
@@ -132,7 +133,7 @@
 
 <script lang="ts">
 import Vue from "vue"
-import { removeGraphqlFolder } from "~/newstore/collections"
+import { removeGraphqlFolder, moveGraphqlRequest } from "~/newstore/collections"
 
 export default Vue.extend({
   name: "Folder",
@@ -187,25 +188,10 @@ export default Vue.extend({
     },
     dropEvent({ dataTransfer }: any) {
       this.dragging = !this.dragging
-      const oldCollectionIndex = dataTransfer.getData("oldCollectionIndex")
-      const oldFolderIndex = dataTransfer.getData("oldFolderIndex")
-      const oldFolderName = dataTransfer.getData("oldFolderName")
+      const folderPath = dataTransfer.getData("folderPath")
       const requestIndex = dataTransfer.getData("requestIndex")
-      const flag = "graphql"
 
-      // TODO: Discuss
-
-      this.$store.commit("postwoman/moveRequest", {
-        oldCollectionIndex,
-        newCollectionIndex: this.$props.collectionIndex,
-        newFolderIndex: this.$props.folderIndex,
-        newFolderName: this.$props.folder.name,
-        oldFolderIndex,
-        oldFolderName,
-        requestIndex,
-        flag,
-      })
-      // this.syncCollections()
+      moveGraphqlRequest(folderPath, requestIndex, this.folderPath)
     },
   },
 })
diff --git a/components/collections/graphql/Request.vue b/components/collections/graphql/Request.vue
index b2ce197e1..c22652938 100644
--- a/components/collections/graphql/Request.vue
+++ b/components/collections/graphql/Request.vue
@@ -117,11 +117,9 @@ export default Vue.extend({
     },
     dragStart({ dataTransfer }: any) {
       this.dragging = !this.dragging
-      // TODO: Discuss
-      dataTransfer.setData("oldCollectionIndex", this.$props.collectionIndex)
-      dataTransfer.setData("oldFolderIndex", this.$props.folderIndex)
-      dataTransfer.setData("oldFolderName", this.$props.folderName)
-      dataTransfer.setData("requestIndex", this.$props.requestIndex)
+
+      dataTransfer.setData("folderPath", this.folderPath)
+      dataTransfer.setData("requestIndex", this.requestIndex)
     },
     removeRequest() {
       removeGraphqlRequest(this.folderPath, this.requestIndex)