From c756be54a1ed7e15472078ac0fb8806706479e65 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Tue, 11 May 2021 13:10:36 +0000
Subject: [PATCH] refactor: separate request components for team & my
 collections

---
 components/collections/my/Collection.vue    |   2 +-
 components/collections/my/Folder.vue        |   2 +-
 components/collections/{ => my}/Request.vue |  39 ++----
 components/collections/teams/Collection.vue |   2 +-
 components/collections/teams/Folder.vue     |   2 +-
 components/collections/teams/Request.vue    | 140 ++++++++++++++++++++
 6 files changed, 154 insertions(+), 33 deletions(-)
 rename components/collections/{ => my}/Request.vue (78%)
 create mode 100644 components/collections/teams/Request.vue

diff --git a/components/collections/my/Collection.vue b/components/collections/my/Collection.vue
index 1cfa96d4e..a85bbe819 100644
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -98,7 +98,7 @@
           :key="index"
           class="ml-8 border-l border-brdColor"
         >
-          <CollectionsRequest
+          <CollectionsMyRequest
             :request="request"
             :collection-index="collectionIndex"
             :folder-index="-1"
diff --git a/components/collections/my/Folder.vue b/components/collections/my/Folder.vue
index a86898ff8..cdb7fdbfa 100644
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -86,7 +86,7 @@
           :key="index"
           class="flex ml-8 border-l border-brdColor"
         >
-          <CollectionsRequest
+          <CollectionsMyRequest
             :request="request"
             :collection-index="collectionIndex"
             :folder-index="folderIndex"
diff --git a/components/collections/Request.vue b/components/collections/my/Request.vue
similarity index 78%
rename from components/collections/Request.vue
rename to components/collections/my/Request.vue
index 560e6ee56..f43e7c2d0 100644
--- a/components/collections/Request.vue
+++ b/components/collections/my/Request.vue
@@ -118,35 +118,16 @@ export default {
       dataTransfer.setData("requestIndex", this.$props.requestIndex)
     },
     removeRequest() {
-      if (this.$props.collectionsType.type == "my-collections") {
-        this.$store.commit("postwoman/removeRequest", {
-          collectionIndex: this.$props.collectionIndex,
-          folderName: this.$props.folderName,
-          requestIndex: this.$props.requestIndex,
-          flag: "rest",
-        })
-        this.$toast.error(this.$t("deleted"), {
-          icon: "delete",
-        })
-        this.syncCollections()
-      } else if (this.$props.collectionsType.type == "team-collections") {
-        team_utils
-          .deleteRequest(this.$apollo, this.$props.requestIndex)
-          .then((data) => {
-            // Result
-            this.$toast.success(this.$t("deleted"), {
-              icon: "delete",
-            })
-          })
-          .catch((error) => {
-            // Error
-            this.$toast.error(this.$t("error_occurred"), {
-              icon: "done",
-            })
-            console.error(error)
-          })
-        this.$data.confirmRemove = false
-      }
+      this.$store.commit("postwoman/removeRequest", {
+        collectionIndex: this.$props.collectionIndex,
+        folderName: this.$props.folderName,
+        requestIndex: this.$props.requestIndex,
+        flag: "rest",
+      })
+      this.$toast.error(this.$t("deleted"), {
+        icon: "delete",
+      })
+      this.syncCollections()
     },
     getRequestLabelColor(method) {
       return this.requestMethodLabels[method.toLowerCase()] || this.requestMethodLabels.default
diff --git a/components/collections/teams/Collection.vue b/components/collections/teams/Collection.vue
index 77250ef07..3954ed822 100644
--- a/components/collections/teams/Collection.vue
+++ b/components/collections/teams/Collection.vue
@@ -106,7 +106,7 @@
           :key="index"
           class="ml-8 border-l border-brdColor"
         >
-          <CollectionsRequest
+          <CollectionsTeamsRequest
             :request="JSON.parse(request.request)"
             :collection-index="collectionIndex"
             :folder-index="-1"
diff --git a/components/collections/teams/Folder.vue b/components/collections/teams/Folder.vue
index e25de9cda..b9f363025 100644
--- a/components/collections/teams/Folder.vue
+++ b/components/collections/teams/Folder.vue
@@ -90,7 +90,7 @@
           :key="index"
           class="flex ml-8 border-l border-brdColor"
         >
-          <CollectionsRequest
+          <CollectionsTeamsRequest
             :request="JSON.parse(request.request)"
             :collection-index="collectionIndex"
             :folder-index="folderIndex"
diff --git a/components/collections/teams/Request.vue b/components/collections/teams/Request.vue
new file mode 100644
index 000000000..14ef67d73
--- /dev/null
+++ b/components/collections/teams/Request.vue
@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <div class="transition duration-150 ease-in-out row-wrapper">
+      <div>
+        <button
+          class="icon"
+          @click="!doc ? selectRequest() : {}"
+          v-tooltip="!doc ? $t('use_request') : ''"
+        >
+          <span :class="getRequestLabelColor(request.method)">{{ request.method }}</span>
+          <span>{{ request.name }}</span>
+        </button>
+      </div>
+      <v-popover v-if="!saveRequest">
+        <button
+          v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+          class="tooltip-target icon"
+          v-tooltip="$t('more')"
+        >
+          <i class="material-icons">more_vert</i>
+        </button>
+        <template slot="popover">
+          <div>
+            <button
+              class="icon"
+              @click="
+                $emit('edit-request', {
+                  collectionIndex,
+                  folderIndex,
+                  folderName,
+                  request,
+                  requestIndex,
+                })
+              "
+              v-close-popover
+            >
+              <i class="material-icons">edit</i>
+              <span>{{ $t("edit") }}</span>
+            </button>
+          </div>
+          <div>
+            <button class="icon" @click="confirmRemove = true" v-close-popover>
+              <i class="material-icons">delete</i>
+              <span>{{ $t("delete") }}</span>
+            </button>
+          </div>
+        </template>
+      </v-popover>
+    </div>
+    <SmartConfirmModal
+      :show="confirmRemove"
+      :title="$t('are_you_sure_remove_request')"
+      @hide-modal="confirmRemove = false"
+      @resolve="removeRequest"
+    />
+  </div>
+</template>
+
+<script>
+import { fb } from "~/helpers/fb"
+import { getSettingSubject } from "~/newstore/settings"
+import * as team_utils from "~/helpers/teams/utils"
+
+export default {
+  props: {
+    request: Object,
+    collectionIndex: Number,
+    folderIndex: Number,
+    folderName: String,
+    requestIndex: [Number, String],
+    doc: Boolean,
+    saveRequest: Boolean,
+    collectionsType: Object,
+  },
+  data() {
+    return {
+      dragging: false,
+      requestMethodLabels: {
+        get: "text-green-400",
+        post: "text-yellow-400",
+        put: "text-blue-400",
+        delete: "text-red-400",
+        default: "text-gray-400",
+      },
+      confirmRemove: false,
+    }
+  },
+  subscriptions() {
+    return {
+      SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
+    }
+  },
+  methods: {
+    syncCollections() {
+      if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
+        fb.writeCollections(
+          JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
+          "collections"
+        )
+      }
+    },
+    selectRequest() {
+      if (this.$props.saveRequest)
+        this.$emit("select-request", {
+          idx: this.$props.requestIndex,
+          name: this.$props.request.name,
+        })
+      else this.$store.commit("postwoman/selectRequest", { request: this.request })
+    },
+    dragStart({ dataTransfer }) {
+      this.dragging = !this.dragging
+      dataTransfer.setData("oldCollectionIndex", this.$props.collectionIndex)
+      dataTransfer.setData("oldFolderIndex", this.$props.folderIndex)
+      dataTransfer.setData("oldFolderName", this.$props.folderName)
+      dataTransfer.setData("requestIndex", this.$props.requestIndex)
+    },
+    removeRequest() {
+      team_utils
+        .deleteRequest(this.$apollo, this.$props.requestIndex)
+        .then((data) => {
+          // Result
+          this.$toast.success(this.$t("deleted"), {
+            icon: "delete",
+          })
+        })
+        .catch((error) => {
+          // Error
+          this.$toast.error(this.$t("error_occurred"), {
+            icon: "done",
+          })
+          console.error(error)
+        })
+      this.$data.confirmRemove = false
+    },
+    getRequestLabelColor(method) {
+      return this.requestMethodLabels[method.toLowerCase()] || this.requestMethodLabels.default
+    },
+  },
+}
+</script>