From 11fe908017064bddba16bbbc62ddb83ec45269e5 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sat, 18 Dec 2021 17:10:20 +0530
Subject: [PATCH] feat: init drag and drop requests on team collections

---
 .../components/collections/teams/Collection.vue   | 13 +++++++++++++
 .../components/collections/teams/Folder.vue       | 15 ++++++++++++++-
 .../components/collections/teams/Request.vue      | 13 ++++++++++++-
 3 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/packages/hoppscotch-app/components/collections/teams/Collection.vue b/packages/hoppscotch-app/components/collections/teams/Collection.vue
index 7e64a928f..29557b4ec 100644
--- a/packages/hoppscotch-app/components/collections/teams/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Collection.vue
@@ -2,6 +2,12 @@
   <div class="flex flex-col">
     <div
       class="flex items-stretch group"
+      @dragover.prevent
+      @drop.prevent="dropEvent"
+      @dragover="dragging = true"
+      @drop="dragging = false"
+      @dragleave="dragging = false"
+      @dragend="dragging = false"
       @contextmenu.prevent="$refs.options.tippy().show()"
     >
       <span
@@ -196,6 +202,7 @@ export default defineComponent({
   data() {
     return {
       showChildren: false,
+      dragging: false,
       selectedFolder: {},
       confirmRemove: false,
       prevCursor: "",
@@ -251,6 +258,12 @@ export default defineComponent({
     expandCollection(collectionID) {
       this.$emit("expand-collection", collectionID)
     },
+    dropEvent({ dataTransfer }) {
+      this.dragging = !this.dragging
+      const requestIndex = dataTransfer.getData("requestIndex")
+      console.log(requestIndex, this.collection.id)
+      // moveRESTTeamRequest(`${this.collectionIndex}`, requestIndex)
+    },
     removeRequest({ collectionIndex, folderName, requestIndex }) {
       this.$emit("remove-request", {
         collectionIndex,
diff --git a/packages/hoppscotch-app/components/collections/teams/Folder.vue b/packages/hoppscotch-app/components/collections/teams/Folder.vue
index 3e5ba732e..8d5a8d718 100644
--- a/packages/hoppscotch-app/components/collections/teams/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Folder.vue
@@ -1,7 +1,13 @@
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
       class="flex items-stretch group"
+      @dragover.prevent
+      @drop.prevent="dropEvent"
+      @dragover="dragging = true"
+      @drop="dragging = false"
+      @dragleave="dragging = false"
+      @dragend="dragging = false"
       @contextmenu.prevent="$refs.options.tippy().show()"
     >
       <span
@@ -178,6 +184,7 @@ export default defineComponent({
   data() {
     return {
       showChildren: false,
+      dragging: false,
       confirmRemove: false,
       prevCursor: "",
       cursor: "",
@@ -238,6 +245,12 @@ export default defineComponent({
     expandCollection(collectionID) {
       this.$emit("expand-collection", collectionID)
     },
+    dropEvent({ dataTransfer }) {
+      this.dragging = !this.dragging
+      const requestIndex = dataTransfer.getData("requestIndex")
+      console.log(requestIndex, this.folder.id)
+      // moveRESTTeamRequest(this.folder.id, requestIndex)
+    },
     removeRequest({ collectionIndex, folderName, requestIndex }) {
       this.$emit("remove-request", {
         collectionIndex,
diff --git a/packages/hoppscotch-app/components/collections/teams/Request.vue b/packages/hoppscotch-app/components/collections/teams/Request.vue
index ce4aff22f..cce95e621 100644
--- a/packages/hoppscotch-app/components/collections/teams/Request.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Request.vue
@@ -1,7 +1,12 @@
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
       class="flex items-stretch group"
+      draggable="true"
+      @dragstart="dragStart"
+      @dragover.stop
+      @dragleave="dragging = false"
+      @dragend="dragging = false"
       @contextmenu.prevent="$refs.options.tippy().show()"
     >
       <span
@@ -128,6 +133,7 @@ export default defineComponent({
   },
   data() {
     return {
+      dragging: false,
       requestMethodLabels: {
         get: "text-green-500",
         post: "text-yellow-500",
@@ -170,6 +176,11 @@ export default defineComponent({
           requestID: this.requestIndex as string,
         })
     },
+    dragStart({ dataTransfer }) {
+      this.dragging = !this.dragging
+      dataTransfer.setData("requestIndex", this.requestIndex)
+      console.log(dataTransfer)
+    },
     removeRequest() {
       this.$emit("remove-request", {
         collectionIndex: this.$props.collectionIndex,