refactor: separated my collections and tam collections

components/collections/index.vue

@@ -89,12 +89,15 @@
     <div class="virtual-list">
       <ul class="flex-col">
         <li v-for="(collection, index) in filteredCollections" :key="collection.name">
-          <CollectionsCollection
+          <component
+            :is="
+              collectionsType.type == 'my-collections'
+                ? 'CollectionsMyCollection'
+                : 'CollectionsTeamsCollection'
+            "
             :name="collection.name"
             :collection-index="index"
             :collection="collection"
-            :folders="collection.children"
-            :requests="collection.requests"
             :doc="doc"
             :isFiltered="filterText.length > 0"
             :selected="selected.some((coll) => coll == collection)"

components/collections/my/Collection.vue

@@ -13,7 +13,7 @@
         <i class="material-icons" v-show="!showChildren && !isFiltered">arrow_right</i>
         <i class="material-icons" v-show="showChildren || isFiltered">arrow_drop_down</i>
         <i class="material-icons">folder</i>
-        <span>{{ collection.name ? collection.name : collection.title }}</span>
+        <span>{{ collection.name }}</span>
       </button>
       <div>
         <button
@@ -33,23 +33,12 @@
           <i class="material-icons">check_box</i>
         </button>
         <v-popover v-if="!saveRequest">
-          <button
+          <button class="tooltip-target icon" v-tooltip.left="$t('more')">
-            v-if="
-              collectionsType.type == 'team-collections' &&
-              collectionsType.selectedTeam.myRole !== 'VIEWER'
-            "
-            class="tooltip-target icon"
-            v-tooltip.left="$t('more')"
-          >
             <i class="material-icons">more_vert</i>
           </button>
           <template slot="popover">
             <div>
               <button
-                v-if="
-                  collectionsType.type == 'team-collections' &&
-                  collectionsType.selectedTeam.myRole !== 'VIEWER'
-                "
                 class="icon"
                 @click="$emit('add-folder', { folder: collection, path: `${collectionIndex}` })"
                 v-close-popover
@@ -59,37 +48,13 @@
               </button>
             </div>
             <div>
-              <button
+              <button class="icon" @click="$emit('edit-collection')" v-close-popover>
-                v-if="
-                  collectionsType.type == 'team-collections' &&
-                  collectionsType.selectedTeam.myRole !== 'VIEWER'
-                "
-                class="icon"
-                @click="$emit('edit-collection')"
-                v-close-popover
-              >
-                <i class="material-icons">create</i>
-                <span>{{ $t("edit") }}</span>
-              </button>
-              <button v-else class="icon" @click="$emit('edit-collection')" v-close-popover>
                 <i class="material-icons">create</i>
                 <span>{{ $t("edit") }}</span>
               </button>
             </div>
             <div>
-              <button
+              <button class="icon" @click="confirmRemove = true" v-close-popover>
-                v-if="
-                  collectionsType.type == 'team-collections' &&
-                  collectionsType.selectedTeam.myRole !== 'VIEWER'
-                "
-                class="icon"
-                @click="confirmRemove = true"
-                v-close-popover
-              >
-                <i class="material-icons">delete</i>
-                <span>{{ $t("delete") }}</span>
-              </button>
-              <button v-else class="icon" @click="confirmRemove = true" v-close-popover>
                 <i class="material-icons">delete</i>
                 <span>{{ $t("delete") }}</span>
               </button>
@@ -101,10 +66,8 @@
     <div v-show="showChildren || isFiltered">
       <ul class="flex-col">
         <li
-          v-for="(folder, index) in collectionsType.type === 'my-collections'
+          v-for="(folder, index) in collection.folders"
-            ? collection.folders
+          :key="index"
-            : collection.children"
-          :key="folder.name ? folder.name : folder.title"
           class="ml-8 border-l border-brdColor"
         >
           <CollectionsFolder
@@ -121,10 +84,7 @@
             @edit-request="$emit('edit-request', $event)"
             @select-folder="
               $emit('select-folder', {
-                name:
+                name: folder.name + '/' + $event.name,
-                  (collectionsType.type == 'my-collections' ? folder.name : folder.title) +
-                  '/' +
-                  $event.name,
                 id: $event.id,
                 reqIdx: $event.reqIdx,
               })
@@ -134,20 +94,16 @@
       </ul>
       <ul class="flex-col">
         <li
-          v-for="(request, index) in collectionsType.type === 'my-collections'
+          v-for="(request, index) in collection.requests"
-            ? collection.requests
-            : collection.requests"
           :key="index"
           class="ml-8 border-l border-brdColor"
         >
           <CollectionsRequest
-            :request="
+            :request="request"
-              collectionsType.type === 'my-collections' ? request : JSON.parse(request.request)
-            "
             :collection-index="collectionIndex"
             :folder-index="-1"
             :folder-name="collection.name"
-            :request-index="collectionsType.type === 'my-collections' ? index : request.id"
+            :request-index="index"
             :doc="doc"
             :saveRequest="saveRequest"
             :collectionsType="collectionsType"
@@ -194,8 +150,6 @@ export default {
   props: {
     collectionIndex: Number,
     collection: Object,
-    folders: Array,
-    requests: Array,
     doc: Boolean,
     isFiltered: Boolean,
     selected: Boolean,

components/collections/teams/Collection.vue

@@ -0,0 +1,204 @@
+<template>
+  <div>
+    <div class="transition duration-150 ease-in-out row-wrapper">
+      <button class="icon" @click="toggleShowChildren">
+        <i class="material-icons" v-show="!showChildren && !isFiltered">arrow_right</i>
+        <i class="material-icons" v-show="showChildren || isFiltered">arrow_drop_down</i>
+        <i class="material-icons">folder</i>
+        <span>{{ collection.title }}</span>
+      </button>
+      <div>
+        <button
+          v-if="doc && !selected"
+          class="icon"
+          @click="$emit('select-collection')"
+          v-tooltip.left="$t('import')"
+        >
+          <i class="material-icons">check_box_outline_blank</i>
+        </button>
+        <button
+          v-if="doc && selected"
+          class="icon"
+          @click="$emit('unselect-collection')"
+          v-tooltip.left="$t('delete')"
+        >
+          <i class="material-icons">check_box</i>
+        </button>
+        <v-popover v-if="!saveRequest">
+          <button
+            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+            class="tooltip-target icon"
+            v-tooltip.left="$t('more')"
+          >
+            <i class="material-icons">more_vert</i>
+          </button>
+          <template slot="popover">
+            <div>
+              <button
+                v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+                class="icon"
+                @click="$emit('add-folder', { folder: collection, path: `${collectionIndex}` })"
+                v-close-popover
+              >
+                <i class="material-icons">create_new_folder</i>
+                <span>{{ $t("new_folder") }}</span>
+              </button>
+            </div>
+            <div>
+              <button
+                v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+                class="icon"
+                @click="$emit('edit-collection')"
+                v-close-popover
+              >
+                <i class="material-icons">create</i>
+                <span>{{ $t("edit") }}</span>
+              </button>
+            </div>
+            <div>
+              <button
+                v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+                class="icon"
+                @click="confirmRemove = true"
+                v-close-popover
+              >
+                <i class="material-icons">delete</i>
+                <span>{{ $t("delete") }}</span>
+              </button>
+            </div>
+          </template>
+        </v-popover>
+      </div>
+    </div>
+    <div v-show="showChildren || isFiltered">
+      <ul class="flex-col">
+        <li
+          v-for="(folder, index) in collection.children"
+          :key="folder.title"
+          class="ml-8 border-l border-brdColor"
+        >
+          <CollectionsFolder
+            :folder="folder"
+            :folder-index="index"
+            :folder-path="`${collectionIndex}/${index}`"
+            :collection-index="collectionIndex"
+            :doc="doc"
+            :saveRequest="saveRequest"
+            :collectionsType="collectionsType"
+            :isFiltered="isFiltered"
+            @add-folder="$emit('add-folder', $event)"
+            @edit-folder="$emit('edit-folder', $event)"
+            @edit-request="$emit('edit-request', $event)"
+            @select-folder="
+              $emit('select-folder', {
+                name: folder.title + '/' + $event.name,
+                id: $event.id,
+                reqIdx: $event.reqIdx,
+              })
+            "
+          />
+        </li>
+      </ul>
+      <ul class="flex-col">
+        <li
+          v-for="(request, index) in collection.requests"
+          :key="index"
+          class="ml-8 border-l border-brdColor"
+        >
+          <CollectionsRequest
+            :request="JSON.parse(request.request)"
+            :collection-index="collectionIndex"
+            :folder-index="-1"
+            :folder-name="collection.name"
+            :request-index="request.id"
+            :doc="doc"
+            :saveRequest="saveRequest"
+            :collectionsType="collectionsType"
+            @edit-request="editRequest($event)"
+            @select-request="
+              $emit('select-folder', {
+                name: $event.name,
+                id: collection.id,
+                reqIdx: $event.idx,
+              })
+            "
+          />
+        </li>
+      </ul>
+      <ul>
+        <li
+          v-if="
+            (collection.children == undefined || collection.children.length === 0) &&
+            (collection.requests == undefined || collection.requests.length === 0)
+          "
+          class="flex ml-8 border-l border-brdColor"
+        >
+          <p class="info">
+            <i class="material-icons">not_interested</i> {{ $t("collection_empty") }}
+          </p>
+        </li>
+      </ul>
+    </div>
+    <SmartConfirmModal
+      :show="confirmRemove"
+      :title="$t('are_you_sure_remove_collection')"
+      @hide-modal="confirmRemove = false"
+      @resolve="removeCollection"
+    />
+  </div>
+</template>
+
+<script>
+import { fb } from "~/helpers/fb"
+import { getSettingSubject } from "~/newstore/settings"
+import gql from "graphql-tag"
+
+export default {
+  props: {
+    collectionIndex: Number,
+    collection: Object,
+    doc: Boolean,
+    isFiltered: Boolean,
+    selected: Boolean,
+    saveRequest: Boolean,
+    collectionsType: Object,
+  },
+  data() {
+    return {
+      showChildren: false,
+      dragging: false,
+      selectedFolder: {},
+      confirmRemove: false,
+      prevCursor: "",
+      cursor: "",
+      pageNo: 0,
+    }
+  },
+  methods: {
+    editRequest(event) {
+      this.$emit("edit-request", event)
+      if (this.$props.saveRequest)
+        this.$emit("select-folder", {
+          name: this.$data.collection.name,
+          id: this.$data.collection.id,
+          reqIdx: event.requestIndex,
+        })
+    },
+    toggleShowChildren() {
+      if (this.$props.saveRequest)
+        this.$emit("select-folder", { name: "", id: this.$props.collection.id, reqIdx: "" })
+
+      this.$emit("expand-collection", this.collection.id)
+      this.showChildren = !this.showChildren
+    },
+    removeCollection() {
+      this.$emit("remove-collection", {
+        collectionsType: this.collectionsType,
+        collectionIndex: this.collectionIndex,
+        collectionID: this.collection.id,
+      })
+      this.confirmRemove = false
+    },
+  },
+}
+</script>