refactor: separate request components for team & my collections

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"

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"

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

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"

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"

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>