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

Drag and Drop for GraphQL requests in Collections pane

Browse Source
This commit is contained in:
Andrew Bastin
2021-05-30 23:28:08 -04:00
parent 062dd4f889
commit 5df5d59f50
3 changed files with 13 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
components/collections/graphql/Collection.vue
View File

@@ -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}`)
},
},
})

22
components/collections/graphql/Folder.vue
View File

@@ -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)
},
},
})

8
components/collections/graphql/Request.vue
View File

@@ -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)