merge feat/teams-new-ui

Co-authored-by: Isha Gupta <40794215+IshaGupta18@users.noreply.github.com>
Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>
Co-authored-by: Osheen Sachdev <45964755+oshhh@users.noreply.github.com>
Co-authored-by: Rohan Rajpal <rohan46000@gmail.com>
Co-authored-by: Raghav Gupta <raghav.gupta0307@gmail.com>

components/collections/Add.vue

@@ -39,10 +39,12 @@
 <script>
 import { fb } from "~/helpers/fb"
 import { getSettingSubject } from "~/newstore/settings"
+import team_utils from "~/helpers/teams/utils"
 
 export default {
   props: {
     show: Boolean,
+    collectionsType: Object,
   },
   data() {
     return {
@@ -68,12 +70,38 @@ export default {
         this.$toast.info(this.$t("invalid_collection_name"))
         return
       }
-      this.$store.commit("postwoman/addNewCollection", {
+      if (this.collectionsType.type == "my-collections") {
-        name: this.$data.name,
+        this.$store.commit("postwoman/addNewCollection", {
-        flag: "rest",
+          name: this.$data.name,
-      })
+          flag: "rest",
-      this.$emit("hide-modal")
+        })
-      this.syncCollections()
+        this.syncCollections()
+      } else if (this.collectionsType.type == "team-collections") {
+        if (this.collectionsType.selectedTeam.myRole != "VIEWER") {
+          team_utils
+            .createNewRootCollection(
+              this.$apollo,
+              this.$data.name,
+              this.collectionsType.selectedTeam.id
+            )
+            .then((data) => {
+              // Result
+              this.$toast.success(this.$t("collection_added"), {
+                icon: "done",
+              })
+              console.log(data)
+              this.$emit("update-team-collections")
+            })
+            .catch((error) => {
+              // Error
+              this.$toast.error(this.$t("error_occurred"), {
+                icon: "done",
+              })
+              console.error(error)
+            })
+        }
+      }
+      this.hideModal()
     },
     hideModal() {
       this.$emit("hide-modal")

components/collections/ChooseType.vue

@@ -0,0 +1,63 @@
+<template>
+  <div v-if="show">
+    <SmartTabs styles="m-4" :id="'collections_tab'" v-on:tab-changed="updateCollectionsType">
+      <SmartTab :id="'my-collections'" :label="'My Collections'" :selected="true"> </SmartTab>
+      <SmartTab :id="'team-collections'" :label="'Team Collections'">
+        <ul>
+          <li>
+            <span class="select-wrapper">
+              <select
+                type="text"
+                id="team"
+                class="team"
+                autofocus
+                @change="
+                  collectionsType.selectedTeam = myTeams[$event.target.value]
+                  $emit('update-team-collections')
+                "
+              >
+                <option :key="undefined" :value="undefined" hidden disabled selected>
+                  Select team
+                </option>
+                <option v-for="(team, index) in myTeams" :key="index" :value="index">
+                  {{ team.name }}
+                </option>
+              </select>
+            </span>
+          </li>
+        </ul>
+      </SmartTab>
+    </SmartTabs>
+  </div>
+</template>
+
+<script>
+import gql from "graphql-tag"
+
+export default {
+  props: {
+    collectionsType: Object,
+    show: Boolean,
+  },
+  apollo: {
+    myTeams: {
+      query: gql`
+        query GetMyTeams {
+          myTeams {
+            id
+            name
+            myRole
+          }
+        }
+      `,
+      pollInterval: 10000,
+    },
+  },
+  methods: {
+    updateCollectionsType(tabID) {
+      this.collectionsType.type = tabID
+      this.$emit("update-team-collections")
+    },
+  },
+}
+</script>

components/collections/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 }}</span>
+        <span>{{ collection.name ? collection.name : collection.title }}</span>
       </button>
       <div>
         <button
@@ -32,7 +32,31 @@
         >
           <i class="material-icons">check_box</i>
         </button>
-        <v-popover>
+        <div v-if="collectionsType.type !== 'my-collections' && showChildren">
+          <button
+            class="icon"
+            v-if="cursor !== ''"
+            @click="
+              cursor = prevCursor
+              pageNo -= 1
+            "
+          >
+            Prev
+          </button>
+          <span v-if="cursor !== '' || (requests && requests.length === 10)">{{ pageNo }}</span>
+          <button
+            class="icon"
+            v-if="requests && requests.length === 10"
+            @click="
+              prevCursor = cursor
+              cursor = requests[requests.length - 1].id
+              pageNo += 1
+            "
+          >
+            Next
+          </button>
+        </div>
+        <v-popover v-if="!saveRequest">
           <button class="tooltip-target icon" v-tooltip.left="$t('more')">
             <i class="material-icons">more_vert</i>
           </button>
@@ -48,13 +72,43 @@
               </button>
             </div>
             <div>
-              <button class="icon" @click="$emit('edit-collection')" v-close-popover>
+              <button
+                v-if="
+                  collectionsType.type == 'team-collections' &&
+                  collectionsType.selectedTeam.myRole == 'VIEWER'
+                "
+                class="icon"
+                @click="$emit('edit-collection')"
+                v-close-popover
+                disabled
+              >
+                <i class="material-icons">create</i>
+                <div v-tooltip.left="$t('disable_new_collection')">
+                  <span>{{ $t("edit") }}</span>
+                </div>
+              </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 class="icon" @click="confirmRemove = true" v-close-popover>
+              <button
+                v-if="
+                  collectionsType.type == 'team-collections' &&
+                  collectionsType.selectedTeam.myRole == 'VIEWER'
+                "
+                class="icon"
+                @click="confirmRemove = true"
+                v-close-popover
+                disabled
+              >
+                <i class="material-icons">add</i>
+                <div v-tooltip.left="$t('disable_new_collection')">
+                  <span>{{ $t("delete") }}</span>
+                </div>
+              </button>
+              <button v-else class="icon" @click="confirmRemove = true" v-close-popover>
                 <i class="material-icons">delete</i>
                 <span>{{ $t("delete") }}</span>
               </button>
@@ -66,8 +120,10 @@
     <div v-show="showChildren || isFiltered">
       <ul class="flex-col">
         <li
-          v-for="(folder, index) in collection.folders"
+          v-for="(folder, index) in collectionsType.type === 'my-collections'
-          :key="folder.name"
+            ? collection.folders
+            : folders"
+          :key="folder.name ? folder.name : folder.title"
           class="ml-8 border-l border-brdColor"
         >
           <CollectionsFolder
@@ -76,33 +132,62 @@
             :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)"
+            @update-team-collections="$emit('update-team-collections')"
+            @select-folder="
+              $emit('select-folder', {
+                name:
+                  (collectionsType.type == 'my-collections' ? 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"
+          v-for="(request, index) in collectionsType.type === 'my-collections'
+            ? collection.requests
+            : 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="index"
+            :request-index="collectionsType.type === 'my-collections' ? index : request.id"
             :doc="doc"
-            @edit-request="$emit('edit-request', $event)"
+            :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.folders.length === 0 && collection.requests.length === 0"
+          v-if="
+            (folders == undefined || folders.length === 0) &&
+            (requests == undefined || requests.length === 0)
+          "
           class="flex ml-8 border-l border-brdColor"
         >
           <p class="info">
@@ -123,6 +208,7 @@
 <script>
 import { fb } from "~/helpers/fb"
 import { getSettingSubject } from "~/newstore/settings"
+import gql from "graphql-tag"
 
 export default {
   props: {
@@ -131,6 +217,8 @@ export default {
     doc: Boolean,
     isFiltered: Boolean,
     selected: Boolean,
+    saveRequest: Boolean,
+    collectionsType: Object,
   },
   data() {
     return {
@@ -138,6 +226,9 @@ export default {
       dragging: false,
       selectedFolder: {},
       confirmRemove: false,
+      prevCursor: "",
+      cursor: "",
+      pageNo: 0,
     }
   },
   subscriptions() {
@@ -145,7 +236,237 @@ export default {
       SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
     }
   },
+  apollo: {
+    requests: {
+      query: gql`
+        query getCollectionRequests($collectionID: String!, $cursor: String) {
+          requestsInCollection(collectionID: $collectionID, cursor: $cursor) {
+            id
+            title
+            request
+          }
+        }
+      `,
+      subscribeToMore: [
+        {
+          document: gql`
+            subscription teamRequestAdded($teamID: String!) {
+              teamRequestAdded(teamID: $teamID) {
+                id
+                request
+                title
+                collection {
+                  id
+                  title
+                }
+              }
+            }
+          `,
+          variables() {
+            return { teamID: this.$props.collectionsType.selectedTeam.id }
+          },
+          skip() {
+            return this.$props.collectionsType.selectedTeam === undefined
+          },
+          updateQuery(previousResult, { subscriptionData }) {
+            if (
+              subscriptionData.data.teamRequestAdded.collection.id === this.$props.collection.id
+            ) {
+              previousResult.requestsInCollection.push({
+                id: subscriptionData.data.teamRequestAdded.id,
+                request: subscriptionData.data.teamRequestAdded.request,
+                title: subscriptionData.data.teamRequestAdded.title,
+                __typename: subscriptionData.data.teamRequestAdded.__typename,
+              })
+              return previousResult
+            }
+          },
+        },
+        {
+          document: gql`
+            subscription teamRequestUpdated($teamID: String!) {
+              teamRequestUpdated(teamID: $teamID) {
+                id
+                request
+                title
+                collection {
+                  id
+                  title
+                }
+              }
+            }
+          `,
+          variables() {
+            return { teamID: this.$props.collectionsType.selectedTeam.id }
+          },
+          skip() {
+            return this.$props.collectionsType.selectedTeam === undefined
+          },
+          updateQuery(previousResult, { subscriptionData }) {
+            if (
+              subscriptionData.data.teamRequestUpdated.collection.id === this.$props.collection.id
+            ) {
+              const index = previousResult.requestsInCollection.findIndex(
+                (x) => x.id === subscriptionData.data.teamRequestUpdated.id
+              )
+              previousResult.requestsInCollection[index].title =
+                subscriptionData.data.teamRequestUpdated.title
+              previousResult.requestsInCollection[index].request =
+                subscriptionData.data.teamRequestUpdated.request
+              return previousResult
+            }
+          },
+        },
+        {
+          document: gql`
+            subscription teamRequestDeleted($teamID: String!) {
+              teamRequestDeleted(teamID: $teamID)
+            }
+          `,
+          variables() {
+            return { teamID: this.$props.collectionsType.selectedTeam.id }
+          },
+          skip() {
+            return this.$props.collectionsType.selectedTeam === undefined
+          },
+          updateQuery(previousResult, { subscriptionData }) {
+            const index = previousResult.requestsInCollection.findIndex(
+              (x) => x.id === subscriptionData.data.teamRequestDeleted
+            )
+            if (index !== -1) previousResult.requestsInCollection.splice(index, 1)
+            return previousResult
+          },
+        },
+      ],
+      variables() {
+        return {
+          collectionID: this.$props.collection.id,
+          cursor: this.$data.cursor,
+        }
+      },
+      update: (response) => response.requestsInCollection,
+      skip() {
+        return this.$props.collection.id === undefined
+      },
+      fetchPolicy: "no-cache",
+    },
+    folders: {
+      query: gql`
+        query getCollectionChildren($collectionID: String!) {
+          collection(collectionID: $collectionID) {
+            children {
+              id
+              title
+            }
+          }
+        }
+      `,
+      subscribeToMore: [
+        {
+          document: gql`
+            subscription teamCollectionAdded($teamID: String!) {
+              teamCollectionAdded(teamID: $teamID) {
+                id
+                title
+                parent {
+                  id
+                  title
+                }
+              }
+            }
+          `,
+          variables() {
+            return { teamID: this.$props.collectionsType.selectedTeam.id }
+          },
+          skip() {
+            return this.$props.collectionsType.selectedTeam === undefined
+          },
+          updateQuery(previousResult, { subscriptionData }) {
+            if (subscriptionData.data.teamCollectionAdded.parent.id === this.$props.collection.id) {
+              previousResult.collection.children.push({
+                id: subscriptionData.data.teamCollectionAdded.id,
+                title: subscriptionData.data.teamCollectionAdded.title,
+                __typename: subscriptionData.data.teamCollectionAdded.__typename,
+              })
+              return previousResult
+            }
+          },
+        },
+        {
+          document: gql`
+            subscription teamCollectionUpdated($teamID: String!) {
+              teamCollectionUpdated(teamID: $teamID) {
+                id
+                title
+                parent {
+                  id
+                  title
+                }
+              }
+            }
+          `,
+          variables() {
+            return { teamID: this.$props.collectionsType.selectedTeam.id }
+          },
+          skip() {
+            return this.$props.collectionsType.selectedTeam === undefined
+          },
+          updateQuery(previousResult, { subscriptionData }) {
+            if (
+              subscriptionData.data.teamCollectionUpdated.parent.id === this.$props.collection.id
+            ) {
+              const index = previousResult.collection.children.findIndex(
+                (x) => x.id === subscriptionData.data.teamCollectionUpdated.id
+              )
+              previousResult.collection.children[index].title =
+                subscriptionData.data.teamCollectionUpdated.title
+              return previousResult
+            }
+          },
+        },
+        {
+          document: gql`
+            subscription teamCollectionRemoved($teamID: String!) {
+              teamCollectionRemoved(teamID: $teamID)
+            }
+          `,
+          variables() {
+            return { teamID: this.$props.collectionsType.selectedTeam.id }
+          },
+          skip() {
+            return this.$props.collectionsType.selectedTeam === undefined
+          },
+          updateQuery(previousResult, { subscriptionData }) {
+            const index = previousResult.collection.children.findIndex(
+              (x) => x.id === subscriptionData.data.teamCollectionRemoved
+            )
+            if (index !== -1) previousResult.collection.children.splice(index, 1)
+            return previousResult
+          },
+        },
+      ],
+      variables() {
+        return {
+          collectionID: this.$props.collection.id,
+        }
+      },
+      update: (response) => response.collection.children,
+      skip() {
+        return this.$props.collection.id === undefined
+      },
+      fetchPolicy: "no-cache",
+    },
+  },
   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,
+        })
+    },
     syncCollections() {
       if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
         fb.writeCollections(
@@ -155,17 +476,54 @@ export default {
       }
     },
     toggleShowChildren() {
+      if (this.$props.saveRequest)
+        this.$emit("select-folder", { name: "", id: this.$props.collection.id, reqIdx: "" })
+
       this.showChildren = !this.showChildren
     },
     removeCollection() {
-      this.$store.commit("postwoman/removeCollection", {
+      if (this.collectionsType.type == "my-collections") {
-        collectionIndex: this.collectionIndex,
+        this.$store.commit("postwoman/removeCollection", {
-        flag: "rest",
+          collectionIndex: this.collectionIndex,
-      })
+          flag: "rest",
-      this.$toast.error(this.$t("deleted"), {
+        })
-        icon: "delete",
+        this.$toast.error(this.$t("deleted"), {
-      })
+          icon: "delete",
-      this.syncCollections()
+        })
+        this.syncCollections()
+      } else if (this.collectionsType.type == "team-collections") {
+        if (this.collectionsType.selectedTeam.myRole != "VIEWER") {
+          this.$apollo
+            .mutate({
+              // Query
+              mutation: gql`
+                mutation($collectionID: String!) {
+                  deleteCollection(collectionID: $collectionID)
+                }
+              `,
+              // Parameters
+              variables: {
+                collectionID: this.collection.id,
+              },
+            })
+            .then((data) => {
+              // Result
+              this.$toast.success(this.$t("deleted"), {
+                icon: "delete",
+              })
+              console.log(data)
+              this.$emit("update-team-collections")
+            })
+            .catch((error) => {
+              // Error
+              this.$toast.error(this.$t("error_occurred"), {
+                icon: "done",
+              })
+              console.error(error)
+            })
+        }
+      }
+      this.confirmRemove = false
     },
     dropEvent({ dataTransfer }) {
       this.dragging = !this.dragging

components/collections/Edit.vue

@@ -39,12 +39,14 @@
 <script>
 import { fb } from "~/helpers/fb"
 import { getSettingSubject } from "~/newstore/settings"
+import team_utils from "~/helpers/teams/utils"
 
 export default {
   props: {
     show: Boolean,
     editingCollection: Object,
     editingCollectionIndex: Number,
+    collectionsType: Object,
   },
   data() {
     return {
@@ -70,20 +72,42 @@ export default {
         this.$toast.info(this.$t("invalid_collection_name"))
         return
       }
-      const collectionUpdated = {
+      if (this.collectionsType.type == "my-collections") {
-        ...this.$props.editingCollection,
+        const collectionUpdated = {
-        name: this.$data.name,
+          ...this.$props.editingCollection,
+          name: this.$data.name,
+        }
+        this.$store.commit("postwoman/editCollection", {
+          collection: collectionUpdated,
+          collectionIndex: this.$props.editingCollectionIndex,
+          flag: "rest",
+        })
+        this.syncCollections()
+      } else if (this.collectionsType.type == "team-collections") {
+        if (this.collectionsType.selectedTeam.myRole != "VIEWER") {
+          team_utils
+            .renameCollection(this.$apollo, this.$data.name, this.$props.editingCollection.id)
+            .then((data) => {
+              // Result
+              this.$toast.success("Collection Renamed", {
+                icon: "done",
+              })
+              this.$emit("update-team-collections")
+            })
+            .catch((error) => {
+              // Error
+              this.$toast.error(this.$t("error_occurred"), {
+                icon: "done",
+              })
+              console.error(error)
+            })
+        }
       }
-      this.$store.commit("postwoman/editCollection", {
+      this.hideModal()
-        collection: collectionUpdated,
-        collectionIndex: this.$props.editingCollectionIndex,
-        flag: "rest",
-      })
-      this.$emit("hide-modal")
-      this.syncCollections()
     },
     hideModal() {
       this.$emit("hide-modal")
+      this.$data.name = undefined
     },
   },
 }

components/collections/EditFolder.vue

@@ -39,6 +39,7 @@
 <script>
 import { fb } from "~/helpers/fb"
 import { getSettingSubject } from "~/newstore/settings"
+import team_utils from "~/helpers/teams/utils"
 
 export default {
   props: {
@@ -46,6 +47,7 @@ export default {
     collectionIndex: Number,
     folder: Object,
     folderIndex: Number,
+    collectionsType: Object,
   },
   data() {
     return {
@@ -67,15 +69,37 @@ export default {
       }
     },
     editFolder() {
-      this.$store.commit("postwoman/editFolder", {
+      if (this.collectionsType.type == "my-collections") {
-        collectionIndex: this.$props.collectionIndex,
+        this.$store.commit("postwoman/editFolder", {
-        folder: { ...this.$props.folder, name: this.$data.name },
+          collectionIndex: this.$props.collectionIndex,
-        folderIndex: this.$props.folderIndex,
+          folder: { ...this.$props.folder, name: this.$data.name },
-        folderName: this.$props.folder.name,
+          folderIndex: this.$props.folderIndex,
-        flag: "rest",
+          folderName: this.$props.folder.name,
-      })
+          flag: "rest",
+        })
+        this.syncCollections()
+      } else if (this.collectionsType.type == "team-collections") {
+        if (this.collectionsType.selectedTeam.myRole != "VIEWER") {
+          team_utils
+            .renameCollection(this.$apollo, this.$data.name, this.folder.id)
+            .then((data) => {
+              // Result
+              this.$toast.success(this.$t("folder_renamed"), {
+                icon: "done",
+              })
+              this.$emit("update-team-collections")
+            })
+            .catch((error) => {
+              // Error
+              this.$toast.error(this.$t("error_occurred"), {
+                icon: "done",
+              })
+              console.error(error)
+            })
+        }
+      }
+
       this.hideModal()
-      this.syncCollections()
     },
     hideModal() {
       this.$emit("hide-modal")

components/collections/EditRequest.vue

@@ -39,6 +39,7 @@
 <script>
 import { fb } from "~/helpers/fb"
 import { getSettingSubject } from "~/newstore/settings"
+import team_utils from "~/helpers/teams/utils"
 
 export default {
   props: {
@@ -47,7 +48,8 @@ export default {
     folderIndex: Number,
     folderName: String,
     request: Object,
-    requestIndex: Number,
+    requestIndex: [String, Number],
+    collectionsType: Object,
   },
   data() {
     return {
@@ -76,17 +78,39 @@ export default {
         name: this.$data.requestUpdateData.name || this.$props.request.name,
       }
 
-      this.$store.commit("postwoman/editRequest", {
+      if (this.$props.collectionsType.type == "my-collections") {
-        requestCollectionIndex: this.$props.collectionIndex,
+        this.$store.commit("postwoman/editRequest", {
-        requestFolderName: this.$props.folderName,
+          requestCollectionIndex: this.$props.collectionIndex,
-        requestFolderIndex: this.$props.folderIndex,
+          requestFolderName: this.$props.folderName,
-        requestNew: requestUpdated,
+          requestFolderIndex: this.$props.folderIndex,
-        requestIndex: this.$props.requestIndex,
+          requestNew: requestUpdated,
-        flag: "rest",
+          requestIndex: this.$props.requestIndex,
-      })
+          flag: "rest",
+        })
+        this.syncCollections()
+      } else if (this.$props.collectionsType.type == "team-collections") {
+        if (this.collectionsType.selectedTeam.myRole != "VIEWER") {
+          let requestName = this.$data.requestUpdateData.name || this.$props.request.name
+          team_utils
+            .updateRequest(this.$apollo, requestUpdated, requestName, this.$props.requestIndex)
+            .then((data) => {
+              // Result
+              this.$toast.success("Request Renamed", {
+                icon: "done",
+              })
+              this.$emit("update-team-collections")
+            })
+            .catch((error) => {
+              // Error
+              this.$toast.error(this.$t("error_occurred"), {
+                icon: "done",
+              })
+              console.error(error)
+            })
+        }
+      }
 
       this.hideModal()
-      this.syncCollections()
     },
     hideModal() {
       this.$emit("hide-modal")

components/collections/Folder.vue

@@ -14,10 +14,34 @@
           <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_open</i>
-          <span>{{ folder.name }}</span>
+          <span>{{ folder.name ? folder.name : folder.title }}</span>
         </button>
       </div>
-      <v-popover>
+      <div v-if="collectionsType.type !== 'my-collections' && showChildren">
+        <button
+          class="icon"
+          v-if="cursor !== ''"
+          @click="
+            cursor = prevCursor
+            pageNo -= 1
+          "
+        >
+          Prev
+        </button>
+        <span v-if="cursor !== '' || (requests && requests.length === 10)">{{ pageNo }}</span>
+        <button
+          class="icon"
+          v-if="requests && requests.length === 10"
+          @click="
+            prevCursor = cursor
+            cursor = requests[requests.length - 1].id
+            pageNo += 1
+          "
+        >
+          Next
+        </button>
+      </div>
+      <v-popover v-if="!saveRequest">
         <button class="tooltip-target icon" v-tooltip.left="$t('more')">
           <i class="material-icons">more_vert</i>
         </button>
@@ -52,9 +76,9 @@
       </v-popover>
     </div>
     <div v-show="showChildren || isFiltered">
-      <ul v-if="folder.folders && folder.folders.length" class="flex-col">
+      <ul v-if="folders && folders.length" class="flex-col">
         <li
-          v-for="(subFolder, subFolderIndex) in folder.folders"
+          v-for="(subFolder, subFolderIndex) in folders"
           :key="subFolder.name"
           class="ml-8 border-l border-brdColor"
         >
@@ -63,38 +87,52 @@
             :folder-index="subFolderIndex"
             :collection-index="collectionIndex"
             :doc="doc"
+            :saveRequest="saveRequest"
+            :collectionsType="collectionsType"
             :folder-path="`${folderPath}/${subFolderIndex}`"
             @add-folder="$emit('add-folder', $event)"
             @edit-folder="$emit('edit-folder', $event)"
             @edit-request="$emit('edit-request', $event)"
+            @update-team-collections="$emit('update-team-collections')"
+            @select-folder="
+              $emit('select-folder', {
+                name: subFolder.name + '/' + $event.name,
+                id: subFolder.id,
+                reqIdx: $event.reqIdx,
+              })
+            "
           />
         </li>
       </ul>
       <ul class="flex-col">
         <li
-          v-for="(request, index) in folder.requests"
+          v-for="(request, index) in requests"
           :key="index"
           class="flex ml-8 border-l border-brdColor"
         >
           <CollectionsRequest
-            :request="request"
+            :request="
+              collectionsType.type == 'my-collections' ? request : JSON.parse(request.request)
+            "
             :collection-index="collectionIndex"
             :folder-index="folderIndex"
             :folder-name="folder.name"
-            :request-index="index"
+            :request-index="collectionsType.type === 'my-collections' ? index : request.id"
             :doc="doc"
+            :saveRequest="saveRequest"
+            :collectionsType="collectionsType"
             @edit-request="$emit('edit-request', $event)"
+            @select-request="
+              $emit('select-folder', {
+                name: $event.name,
+                id: folder.id,
+                reqIdx: $event.idx,
+              })
+            "
           />
         </li>
       </ul>
-      <ul
+      <ul v-if="folders && folders.length === 0 && requests && requests.length === 0">
-        v-if="
-          folder.folders &&
-          folder.folders.length === 0 &&
-          folder.requests &&
-          folder.requests.length === 0
-        "
-      >
         <li class="flex ml-8 border-l border-brdColor">
           <p class="info"><i class="material-icons">not_interested</i> {{ $t("folder_empty") }}</p>
         </li>
@@ -112,6 +150,8 @@
 <script>
 import { fb } from "~/helpers/fb"
 import { getSettingSubject } from "~/newstore/settings"
+import team_utils from "~/helpers/teams/utils"
+import gql from "graphql-tag"
 
 export default {
   name: "folder",
@@ -121,13 +161,18 @@ export default {
     collectionIndex: Number,
     folderPath: String,
     doc: Boolean,
+    saveRequest: Boolean,
     isFiltered: Boolean,
+    collectionsType: Object,
   },
   data() {
     return {
       showChildren: false,
       dragging: false,
       confirmRemove: false,
+      prevCursor: "",
+      cursor: "",
+      pageNo: 0,
     }
   },
   subscriptions() {
@@ -135,6 +180,221 @@ export default {
       SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
     }
   },
+  apollo: {
+    folders: {
+      query: gql`
+        query getCollectionChildren($collectionID: String!) {
+          collection(collectionID: $collectionID) {
+            children {
+              id
+              title
+            }
+          }
+        }
+      `,
+      subscribeToMore: [
+        {
+          document: gql`
+            subscription teamCollectionAdded($teamID: String!) {
+              teamCollectionAdded(teamID: $teamID) {
+                id
+                title
+                parent {
+                  id
+                  title
+                }
+              }
+            }
+          `,
+          variables() {
+            return { teamID: this.$props.collectionsType.selectedTeam.id }
+          },
+          skip() {
+            return this.$props.collectionsType.selectedTeam === undefined
+          },
+          updateQuery(previousResult, { subscriptionData }) {
+            if (subscriptionData.data.teamCollectionAdded.parent.id === this.$props.folder.id) {
+              previousResult.collection.children.push({
+                id: subscriptionData.data.teamCollectionAdded.id,
+                title: subscriptionData.data.teamCollectionAdded.title,
+                __typename: subscriptionData.data.teamCollectionAdded.__typename,
+              })
+              return previousResult
+            }
+          },
+        },
+        {
+          document: gql`
+            subscription teamCollectionUpdated($teamID: String!) {
+              teamCollectionUpdated(teamID: $teamID) {
+                id
+                title
+                parent {
+                  id
+                  title
+                }
+              }
+            }
+          `,
+          variables() {
+            return { teamID: this.$props.collectionsType.selectedTeam.id }
+          },
+          skip() {
+            return this.$props.collectionsType.selectedTeam === undefined
+          },
+          updateQuery(previousResult, { subscriptionData }) {
+            if (subscriptionData.data.teamCollectionUpdated.parent.id === this.$props.folder.id) {
+              const index = previousResult.collection.children.findIndex(
+                (x) => x.id === subscriptionData.data.teamCollectionUpdated.id
+              )
+              previousResult.collection.children[index].title =
+                subscriptionData.data.teamCollectionUpdated.title
+              return previousResult
+            }
+          },
+        },
+        {
+          document: gql`
+            subscription teamCollectionRemoved($teamID: String!) {
+              teamCollectionRemoved(teamID: $teamID)
+            }
+          `,
+          variables() {
+            return { teamID: this.$props.collectionsType.selectedTeam.id }
+          },
+          skip() {
+            return this.$props.collectionsType.selectedTeam === undefined
+          },
+          updateQuery(previousResult, { subscriptionData }) {
+            const index = previousResult.collection.children.findIndex(
+              (x) => x.id === subscriptionData.data.teamCollectionRemoved
+            )
+            if (index !== -1) previousResult.collection.children.splice(index, 1)
+            return previousResult
+          },
+        },
+      ],
+      variables() {
+        return {
+          collectionID: this.$props.folder.id,
+        }
+      },
+      update: (response) => response.collection.children,
+      skip() {
+        return this.$props.collectionsType.selectedTeam === undefined
+      },
+      fetchPolicy: "no-cache",
+    },
+    requests: {
+      query: gql`
+        query getCollectionRequests($collectionID: String!, $cursor: String) {
+          requestsInCollection(collectionID: $collectionID, cursor: $cursor) {
+            id
+            title
+            request
+          }
+        }
+      `,
+      subscribeToMore: [
+        {
+          document: gql`
+            subscription teamRequestAdded($teamID: String!) {
+              teamRequestAdded(teamID: $teamID) {
+                id
+                request
+                title
+                collection {
+                  id
+                  title
+                }
+              }
+            }
+          `,
+          variables() {
+            return { teamID: this.$props.collectionsType.selectedTeam.id }
+          },
+          skip() {
+            return this.$props.collectionsType.selectedTeam === undefined
+          },
+          updateQuery(previousResult, { subscriptionData }) {
+            if (subscriptionData.data.teamRequestAdded.collection.id === this.$props.folder.id) {
+              previousResult.requestsInCollection.push({
+                id: subscriptionData.data.teamRequestAdded.id,
+                request: subscriptionData.data.teamRequestAdded.request,
+                title: subscriptionData.data.teamRequestAdded.title,
+                __typename: subscriptionData.data.teamRequestAdded.__typename,
+              })
+              return previousResult
+            }
+          },
+        },
+        {
+          document: gql`
+            subscription teamRequestUpdated($teamID: String!) {
+              teamRequestUpdated(teamID: $teamID) {
+                id
+                request
+                title
+                collection {
+                  id
+                  title
+                }
+              }
+            }
+          `,
+          variables() {
+            return { teamID: this.$props.collectionsType.selectedTeam.id }
+          },
+          skip() {
+            return this.$props.collectionsType.selectedTeam === undefined
+          },
+          updateQuery(previousResult, { subscriptionData }) {
+            if (subscriptionData.data.teamRequestUpdated.collection.id === this.$props.folder.id) {
+              const index = previousResult.requestsInCollection.findIndex(
+                (x) => x.id === subscriptionData.data.teamRequestUpdated.id
+              )
+              previousResult.requestsInCollection[index].title =
+                subscriptionData.data.teamRequestUpdated.title
+              previousResult.requestsInCollection[index].request =
+                subscriptionData.data.teamRequestUpdated.request
+              return previousResult
+            }
+          },
+        },
+        {
+          document: gql`
+            subscription teamRequestDeleted($teamID: String!) {
+              teamRequestDeleted(teamID: $teamID)
+            }
+          `,
+          variables() {
+            return { teamID: this.$props.collectionsType.selectedTeam.id }
+          },
+          skip() {
+            return this.$props.collectionsType.selectedTeam === undefined
+          },
+          updateQuery(previousResult, { subscriptionData }) {
+            const index = previousResult.requestsInCollection.findIndex(
+              (x) => x.id === subscriptionData.data.teamRequestDeleted
+            )
+            if (index !== -1) previousResult.requestsInCollection.splice(index, 1)
+            return previousResult
+          },
+        },
+      ],
+      variables() {
+        return {
+          collectionID: this.$props.folder.id,
+          cursor: this.$data.cursor,
+        }
+      },
+      update: (response) => response.requestsInCollection,
+      skip() {
+        return this.$props.collectionsType.selectedTeam === undefined
+      },
+      fetchPolicy: "no-cache",
+    },
+  },
   methods: {
     syncCollections() {
       if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
@@ -145,19 +405,45 @@ export default {
       }
     },
     toggleShowChildren() {
+      if (this.$props.saveRequest)
+        this.$emit("select-folder", { name: "", id: this.$props.folder.id, reqIdx: "" })
       this.showChildren = !this.showChildren
     },
     removeFolder() {
-      this.$store.commit("postwoman/removeFolder", {
+      if (this.collectionsType.type == "my-collections") {
-        collectionIndex: this.$props.collectionIndex,
+        this.$store.commit("postwoman/removeFolder", {
-        folderName: this.$props.folder.name,
+          collectionIndex: this.$props.collectionIndex,
-        folderIndex: this.$props.folderIndex,
+          folderName: this.$props.folder.name,
-        flag: "rest",
+          folderIndex: this.$props.folderIndex,
-      })
+          flag: "rest",
-      this.syncCollections()
+        })
-      this.$toast.error(this.$t("deleted"), {
+        this.syncCollections()
-        icon: "delete",
+        this.$toast.error(this.$t("deleted"), {
-      })
+          icon: "delete",
+        })
+      } else if (this.collectionsType.type == "team-collections") {
+        if (this.collectionsType.selectedTeam.myRole != "VIEWER") {
+          team_utils
+            .deleteCollection(this.$apollo, this.folder.id)
+            .then((data) => {
+              // Result
+              this.$toast.success(this.$t("deleted"), {
+                icon: "delete",
+              })
+              console.log(data)
+              this.$emit("update-team-collections")
+              this.confirmRemove = false
+            })
+            .catch((error) => {
+              // Error
+              this.$toast.error(this.$t("error_occurred"), {
+                icon: "done",
+              })
+              console.error(error)
+            })
+          this.$emit("update-team-collections")
+        }
+      }
     },
     dropEvent({ dataTransfer }) {
       this.dragging = !this.dragging

components/collections/ImportExport.vue

@@ -2,9 +2,17 @@
   <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
-        <h3 class="title">{{ $t("import_export") }} {{ $t("collections") }}</h3>
+        <h3 class="title">{{ $t(mode) }}</h3>
         <div>
-          <v-popover>
+          <button
+            class="tooltip-target icon"
+            v-if="mode != 'import_export'"
+            @click="mode = 'import_export'"
+            v-tooltip.left="$t('back')"
+          >
+            <i class="material-icons">arrow_left</i>
+          </button>
+          <v-popover v-if="mode == 'import_export' && collectionsType.type == 'my-collections'">
             <button class="tooltip-target icon" v-tooltip.left="$t('more')">
               <i class="material-icons">more_vert</i>
             </button>
@@ -45,13 +53,18 @@
       </div>
     </div>
     <div slot="body" class="flex flex-col">
-      <div class="flex flex-col items-start p-2">
+      <div v-if="mode == 'import_export'" class="flex flex-col items-start p-2">
         <span
           v-tooltip="{
             content: !fb.currentUser ? $t('login_first') : $t('replace_current'),
           }"
         >
-          <button :disabled="!fb.currentUser" class="icon" @click="syncCollections">
+          <button
+            :disabled="!fb.currentUser"
+            v-if="collectionsType.type == 'my-collections'"
+            class="icon"
+            @click="syncCollections"
+          >
             <i class="material-icons">folder_shared</i>
             <span>{{ $t("import_from_sync") }}</span>
           </button>
@@ -86,26 +99,65 @@
             accept="application/json"
           />
         </button>
+        <button
+          class="icon"
+          @click="mode = 'import_from_my_collections'"
+          v-tooltip="$t('replace_current')"
+          v-if="collectionsType.type == 'team-collections'"
+        >
+          <i class="material-icons">folder_special</i>
+          <span>{{ "Import from My Collections" }}</span>
+        </button>
+        <button
+          class="icon"
+          @click="
+            () => {
+              mode = 'export_as_json'
+              getJSONCollection()
+            }
+          "
+          v-tooltip="$t('show_code')"
+        >
+          <i class="material-icons">folder_special</i>
+          <span>{{ "Export As JSON" }}</span>
+        </button>
       </div>
-      <div v-if="showJsonCode" class="row-wrapper">
+      <div v-if="mode == 'import_from_my_collections'">
+        <span class="select-wrapper">
+          <select
+            type="text"
+            autofocus
+            @change="
+              ($event) => {
+                mySelectedCollectionID = $event.target.value
+              }
+            "
+          >
+            <option :key="undefined" :value="undefined" hidden disabled selected>
+              Select Collection
+            </option>
+            <option v-for="(collection, index) in myCollections" :key="index" :value="index">
+              {{ collection.name }}
+            </option>
+          </select>
+        </span>
+        <button
+          class="icon primary"
+          :disabled="mySelectedCollectionID == undefined"
+          @click="importFromMyCollections"
+        >
+          {{ $t("import") }}
+        </button>
+      </div>
+      <div v-if="mode == 'export_as_json'">
         <textarea v-model="collectionJson" rows="8" readonly></textarea>
-      </div>
+        <div class="row-wrapper">
-    </div>
+          <span>
-    <div slot="footer">
+            <button class="icon primary" @click="exportJSON" v-tooltip="$t('download_file')">
-      <div class="row-wrapper">
+              {{ $t("export") }}
-        <span>
+            </button>
-          <SmartToggle :on="showJsonCode" @change="showJsonCode = $event">
+          </span>
-            {{ $t("show_code") }}
+        </div>
-          </SmartToggle>
-        </span>
-        <span>
-          <button class="icon" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon primary" @click="exportJSON" v-tooltip="$t('download_file')">
-            {{ $t("export") }}
-          </button>
-        </span>
       </div>
     </div>
   </SmartModal>
@@ -114,12 +166,16 @@
 <script>
 import { fb } from "~/helpers/fb"
 import { getSettingSubject } from "~/newstore/settings"
+import team_utils from "~/helpers/teams/utils"
 
 export default {
   data() {
     return {
       fb,
       showJsonCode: false,
+      mode: "import_export",
+      mySelectedCollectionID: undefined,
+      collectionJson: "",
     }
   },
   subscriptions() {
@@ -127,10 +183,13 @@ export default {
   },
   props: {
     show: Boolean,
+    collectionsType: Object,
   },
   computed: {
-    collectionJson() {
+    myCollections() {
-      return JSON.stringify(this.$store.state.postwoman.collections, null, 2)
+      return fb.currentUser !== null
+        ? fb.currentCollections
+        : this.$store.state.postwoman.collections
     },
   },
   methods: {
@@ -141,7 +200,7 @@ export default {
           {
             files: {
               "hoppscotch-collections.json": {
-                content: this.collectionJson,
+                content: this.getJSONCollection(),
               },
             },
           },
@@ -186,6 +245,8 @@ export default {
         })
     },
     hideModal() {
+      this.mode = "import_export"
+      this.mySelectedCollectionID = undefined
       this.$emit("hide-modal")
     },
     openDialogChooseFileToReplaceWith() {
@@ -208,11 +269,27 @@ export default {
           collections = [this.parsePostmanCollection(collections)]
         } else {
           this.failedImport()
-          return
         }
-        this.$store.commit("postwoman/replaceCollections", { data: collections, flag: "rest" })
+        if (this.collectionsType.type == "team-collections") {
-        this.fileImported()
+          team_utils
-        this.syncToFBCollections()
+            .replaceWithJSON(this.$apollo, collections, this.collectionsType.selectedTeam.id)
+            .then((status) => {
+              if (status) {
+                this.$emit("update-team-collections")
+                this.fileImported()
+              } else {
+                this.failedImport()
+              }
+            })
+            .catch((error) => {
+              console.log(error)
+              this.failedImport()
+            })
+        } else {
+          this.$store.commit("postwoman/replaceCollections", collections)
+          this.fileImported()
+          this.syncToFBCollections()
+        }
       }
       reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0])
       this.$refs.inputChooseFileToReplaceWith.value = ""
@@ -235,13 +312,62 @@ export default {
           this.failedImport()
           return
         }
-        this.$store.commit("postwoman/importCollections", { data: collections, flag: "rest" })
+        if (this.collectionsType.type == "team-collections") {
-        this.fileImported()
+          team_utils
-        this.syncToFBCollections()
+            .importFromJSON(this.$apollo, collections, this.collectionsType.selectedTeam.id)
+            .then((status) => {
+              if (status) {
+                this.$emit("update-team-collections")
+                this.fileImported()
+              } else {
+                this.failedImport()
+              }
+            })
+            .catch((error) => {
+              console.log(error)
+              this.failedImport()
+            })
+        } else {
+          this.$store.commit("postwoman/importCollections", collections)
+          this.syncToFBCollections()
+          this.fileImported()
+        }
       }
       reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0])
       this.$refs.inputChooseFileToImportFrom.value = ""
     },
+    importFromMyCollections() {
+      team_utils
+        .importFromMyCollections(
+          this.$apollo,
+          this.mySelectedCollectionID,
+          this.collectionsType.selectedTeam.id
+        )
+        .then((success) => {
+          if (success) {
+            this.fileImported()
+            this.$emit("update-team-collections")
+          } else {
+            this.failedImport()
+          }
+        })
+        .catch((error) => {
+          console.log(error)
+          this.failedImport()
+        })
+    },
+    async getJSONCollection() {
+      if (this.collectionsType.type == "my-collections") {
+        this.collectionJson = JSON.stringify(this.$store.state.postwoman.collections, null, 2)
+      } else {
+        this.collectionJson = await team_utils.exportAsJSON(
+          this.$apollo,
+          this.collectionsType.selectedTeam.id
+        )
+      }
+      console.log(this.collectionJson)
+      return this.collectionJson
+    },
     exportJSON() {
       let text = this.collectionJson
       text = text.replace(/\n/g, "\r\n")

components/collections/Request.vue

@@ -18,7 +18,7 @@
           <span>{{ request.name }}</span>
         </button>
       </div>
-      <v-popover>
+      <v-popover v-if="!saveRequest">
         <button class="tooltip-target icon" v-tooltip="$t('more')">
           <i class="material-icons">more_vert</i>
         </button>
@@ -62,6 +62,7 @@
 <script>
 import { fb } from "~/helpers/fb"
 import { getSettingSubject } from "~/newstore/settings"
+import team_utils from "~/helpers/teams/utils"
 
 export default {
   props: {
@@ -69,8 +70,10 @@ export default {
     collectionIndex: Number,
     folderIndex: Number,
     folderName: String,
-    requestIndex: Number,
+    requestIndex: [Number, String],
     doc: Boolean,
+    saveRequest: Boolean,
+    collectionsType: Object,
   },
   data() {
     return {
@@ -100,7 +103,12 @@ export default {
       }
     },
     selectRequest() {
-      this.$store.commit("postwoman/selectRequest", { request: this.request })
+      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
@@ -110,17 +118,35 @@ export default {
       dataTransfer.setData("requestIndex", this.$props.requestIndex)
     },
     removeRequest() {
-      this.$store.commit("postwoman/removeRequest", {
+      if (this.$props.collectionsType.type == "my-collections") {
-        collectionIndex: this.$props.collectionIndex,
+        this.$store.commit("postwoman/removeRequest", {
-        folderName: this.$props.folderName,
+          collectionIndex: this.$props.collectionIndex,
-        requestIndex: this.$props.requestIndex,
+          folderName: this.$props.folderName,
-        flag: "rest",
+          requestIndex: this.$props.requestIndex,
-      })
+          flag: "rest",
-      this.$toast.error(this.$t("deleted"), {
+        })
-        icon: "delete",
+        this.$toast.error(this.$t("deleted"), {
-      })
+          icon: "delete",
-      this.confirmRemove = false
+        })
-      this.syncCollections()
+        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
+      }
     },
     getRequestLabelColor(method) {
       return this.requestMethodLabels[method.toLowerCase()] || this.requestMethodLabels.default

components/collections/SaveRequest.vue

@@ -13,45 +13,13 @@
     <div slot="body" class="flex flex-col">
       <label for="selectLabel">{{ $t("token_req_name") }}</label>
       <input type="text" id="selectLabel" v-model="requestData.name" @keyup.enter="saveRequestAs" />
-      <ul>
+      <label for="selectLabel">Request path</label>
-        <li>
+      <input readonly :value="path" />
-          <label for="selectCollection">{{ $t("collection") }}</label>
+      <collections
-          <span class="select-wrapper">
+        @select-folder="changeRequestDetails($event)"
-            <select type="text" id="selectCollection" v-model="requestData.collectionIndex">
+        @update-collection="collectionsType.type = $event"
-              <option :key="undefined" :value="undefined" hidden disabled selected>
+        :saveRequest="true"
-                {{ $t("select_collection") }}
-              </option>
-              <option
-                v-for="(collection, index) in $store.state.postwoman.collections"
-                :key="index"
-                :value="index"
-              >
-                {{ collection.name }}
-              </option>
-            </select>
-          </span>
-        </li>
-      </ul>
-      <label>{{ $t("folder") }}</label>
-      <SmartAutoComplete
-        :placeholder="$t('search')"
-        :source="folders"
-        :spellcheck="false"
-        v-model="requestData.folderName"
       />
-      <ul>
-        <li>
-          <label for="selectRequest">{{ $t("request") }}</label>
-          <span class="select-wrapper">
-            <select type="text" id="selectRequest" v-model="requestData.requestIndex">
-              <option :key="undefined" :value="undefined">/</option>
-              <option v-for="(folder, index) in requests" :key="index" :value="index">
-                {{ folder.name }}
-              </option>
-            </select>
-          </span>
-        </li>
-      </ul>
     </div>
     <div slot="footer">
       <div class="row-wrapper">
@@ -72,6 +40,7 @@
 <script>
 import { fb } from "~/helpers/fb"
 import { getSettingSubject } from "~/newstore/settings"
+import team_utils from "~/helpers/teams/utils"
 
 export default {
   props: {
@@ -81,12 +50,17 @@ export default {
   data() {
     return {
       defaultRequestName: "Untitled Request",
+      path: "Path will appear here",
       requestData: {
         name: undefined,
         collectionIndex: undefined,
         folderName: undefined,
         requestIndex: undefined,
       },
+      collectionsType: {
+        type: "my-collections",
+        selectedTeam: undefined,
+      },
     }
   },
   subscriptions() {
@@ -149,6 +123,15 @@ export default {
     },
   },
   methods: {
+    changeRequestDetails(data) {
+      this.$data.requestData.folderName = data.folderName.split("/").slice(-2)[0]
+      this.$data.path = data.folderName
+      this.$data.requestData.collectionIndex = data.collectionIndex
+      this.$data.requestData.requestIndex = data.reqIdx
+      if (data.collectionsType.type !== "my-collections") {
+        this.$data.collectionsType = data.collectionsType
+      }
+    },
     syncCollections() {
       if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
         fb.writeCollections(
@@ -178,16 +161,35 @@ export default {
         collection: this.$data.requestData.collectionIndex,
       }
 
-      this.$store.commit("postwoman/saveRequestAs", {
+      if (this.$data.collectionsType.type === "my-collections") {
-        request: requestUpdated,
+        this.$store.commit("postwoman/saveRequestAs", {
-        collectionIndex: this.$data.requestData.collectionIndex,
+          request: requestUpdated,
-        folderName: this.$data.requestData.folderName,
+          collectionIndex: this.$data.requestData.collectionIndex,
-        requestIndex: this.$data.requestData.requestIndex,
+          folderName: this.$data.requestData.folderName,
-        flag: "rest",
+          requestIndex: this.$data.requestData.requestIndex,
-      })
+          flag: "rest",
+        })
+        this.syncCollections()
+      } else {
+        if (this.$data.requestData.requestIndex) {
+          team_utils.overwriteRequestTeams(
+            this.$apollo,
+            JSON.stringify(requestUpdated),
+            requestUpdated.name,
+            this.$data.requestData.requestIndex
+          )
+        } else {
+          team_utils.saveRequestAsTeams(
+            this.$apollo,
+            JSON.stringify(requestUpdated),
+            requestUpdated.name,
+            this.$data.collectionsType.selectedTeam.id,
+            this.$data.requestData.collectionIndex
+          )
+        }
+      }
 
       this.hideModal()
-      this.syncCollections()
     },
     hideModal() {
       this.$emit("hide-modal")
@@ -195,12 +197,12 @@ export default {
   },
 }
 
-function getFolderNames(folders, namesList) {
+function getFolderNames(folders, namesList, folderName = "") {
   if (folders.length) {
     folders.forEach((folder) => {
-      namesList.push(folder.name)
+      namesList.push(folderName + folder.name)
       if (folder.folders && folder.folders.length) {
-        getFolderNames(folder.folders, namesList)
+        getFolderNames(folder.folders, namesList, folder.name + "/")
       }
     })
   }

components/collections/index.vue

@@ -5,16 +5,29 @@
         aria-label="Search"
         type="search"
         :placeholder="$t('search')"
+        v-if="!saveRequest"
         v-model="filterText"
         class="rounded-t-lg"
       />
     </div>
-    <CollectionsAdd :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
+    <CollectionsChooseType
+      :collectionsType="collectionsType"
+      @update-team-collections="updateTeamCollections"
+      :show="showTeamCollections"
+    />
+    <CollectionsAdd
+      :collectionsType="collectionsType"
+      :show="showModalAdd"
+      @update-team-collections="updateTeamCollections"
+      @hide-modal="displayModalAdd(false)"
+    />
     <CollectionsEdit
       :show="showModalEdit"
       :editing-collection="editingCollection"
       :editing-collection-index="editingCollectionIndex"
+      :collectionsType="collectionsType"
       @hide-modal="displayModalEdit(false)"
+      @update-team-collections="updateTeamCollections"
     />
     <CollectionsAddFolder
       :show="showModalAddFolder"
@@ -28,6 +41,7 @@
       :collection-index="editingCollectionIndex"
       :folder="editingFolder"
       :folder-index="editingFolderIndex"
+      :collectionsType="collectionsType"
       @hide-modal="displayModalEditFolder(false)"
     />
     <CollectionsEditRequest
@@ -37,18 +51,45 @@
       :folder-name="editingFolderName"
       :request="editingRequest"
       :request-index="editingRequestIndex"
+      :collectionsType="collectionsType"
       @hide-modal="displayModalEditRequest(false)"
+      @update-team-collections="updateTeamCollections"
     />
     <CollectionsImportExport
       :show="showModalImportExport"
+      :collectionsType="collectionsType"
       @hide-modal="displayModalImportExport(false)"
+      @update-team-collections="updateTeamCollections"
     />
     <div class="border-b row-wrapper border-brdColor">
-      <button class="icon" @click="displayModalAdd(true)">
+      <button
+        v-if="
+          collectionsType.type == 'team-collections' &&
+          (collectionsType.selectedTeam == undefined ||
+            collectionsType.selectedTeam.myRole == 'VIEWER') &&
+          !saveRequest
+        "
+        class="icon"
+        @click="displayModalAdd(true)"
+        disabled
+      >
+        <i class="material-icons">add</i>
+        <div v-tooltip.left="$t('disable_new_collection')">
+          <span>{{ $t("new") }}</span>
+        </div>
+      </button>
+      <button v-else-if="!saveRequest" class="icon" @click="displayModalAdd(true)">
         <i class="material-icons">add</i>
         <span>{{ $t("new") }}</span>
       </button>
-      <button class="icon" @click="displayModalImportExport(true)">
+      <button
+        v-if="!saveRequest"
+        :disabled="
+          collectionsType.type == 'team-collections' && collectionsType.selectedTeam == undefined
+        "
+        class="icon"
+        @click="displayModalImportExport(true)"
+      >
         {{ $t("import_export") }}
       </button>
     </div>
@@ -65,11 +106,26 @@
             :doc="doc"
             :isFiltered="filterText.length > 0"
             :selected="selected.some((coll) => coll == collection)"
+            :saveRequest="saveRequest"
+            :collectionsType="collectionsType"
             @edit-collection="editCollection(collection, index)"
             @add-folder="addFolder($event)"
             @edit-folder="editFolder($event)"
             @edit-request="editRequest($event)"
-            @select-collection="$emit('use-collection', collection)"
+            @update-team-collections="updateTeamCollections"
+            @select-collection="$emit('use-collection', index)"
+            @select-folder="
+              $emit('select-folder', {
+                folderName:
+                  (collectionsType.type == 'my-collections' ? collection.name : collection.title) +
+                  '/' +
+                  $event.name,
+                collectionIndex: collectionsType.type == 'my-collections' ? index : $event.id,
+                reqIdx: $event.reqIdx,
+                collectionsType: collectionsType,
+                folderId: $event.id,
+              })
+            "
             @unselect-collection="$emit('remove-collection', collection)"
           />
         </li>
@@ -90,11 +146,14 @@
 <script>
 import { fb } from "~/helpers/fb"
 import { getSettingSubject } from "~/newstore/settings"
+import gql from "graphql-tag"
+import team_utils from "~/helpers/teams/utils"
 
 export default {
   props: {
     doc: Boolean,
     selected: { type: Array, default: () => [] },
+    saveRequest: Boolean,
   },
   data() {
     return {
@@ -113,6 +172,11 @@ export default {
       editingRequest: undefined,
       editingRequestIndex: undefined,
       filterText: "",
+      collectionsType: {
+        type: "my-collections",
+        selectedTeam: undefined,
+      },
+      teamCollections: {},
     }
   },
   subscriptions() {
@@ -120,17 +184,59 @@ export default {
       SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
     }
   },
+  apollo: {
+    myTeams: {
+      query: gql`
+        query GetMyTeams {
+          myTeams {
+            id
+            name
+            myRole
+          }
+        }
+      `,
+      pollInterval: 10000,
+    },
+  },
+  watch: {
+    "collectionsType.type": function emitstuff() {
+      this.$emit("update-collection", this.$data.collectionsType.type)
+    },
+  },
   computed: {
+    showTeamCollections() {
+      if (fb.currentUser == null) {
+        this.collectionsType.type = "my-collections"
+      }
+      return fb.currentUser !== null
+    },
     collections() {
       return fb.currentUser !== null
         ? fb.currentCollections
         : this.$store.state.postwoman.collections
     },
     filteredCollections() {
-      const collections =
+      let collections = null
-        fb.currentUser !== null ? fb.currentCollections : this.$store.state.postwoman.collections
+      if (this.collectionsType.type == "my-collections") {
+        collections =
+          fb.currentUser !== null ? fb.currentCollections : this.$store.state.postwoman.collections
+      } else {
+        if (
+          this.collectionsType.selectedTeam &&
+          this.collectionsType.selectedTeam.id in this.teamCollections
+        ) {
+          collections = this.teamCollections[this.collectionsType.selectedTeam.id]
+        } else {
+          collections = []
+        }
+      }
+      if (!this.filterText) {
+        return collections
+      }
 
-      if (!this.filterText) return collections
+      if (this.collectionsType.type == "team-collections") {
+        return []
+      }
 
       const filterText = this.filterText.toLowerCase()
       const filteredCollections = []
@@ -154,7 +260,10 @@ export default {
           }
         }
 
-        if (filteredRequests.length + filteredFolders.length > 0) {
+        if (
+          filteredRequests.length + filteredFolders.length > 0 ||
+          collection.name.toLowerCase().includes(filterText)
+        ) {
           const filteredCollection = Object.assign({}, collection)
           filteredCollection.requests = filteredRequests
           filteredCollection.folders = filteredFolders
@@ -175,6 +284,18 @@ export default {
     document.addEventListener("keydown", this._keyListener.bind(this))
   },
   methods: {
+    updateTeamCollections() {
+      this.$emit("select-collection-type")
+      if (this.collectionsType.selectedTeam == undefined) return
+      team_utils
+        .rootCollectionsOfTeam(this.$apollo, this.collectionsType.selectedTeam.id)
+        .then((collections) => {
+          this.$set(this.teamCollections, this.collectionsType.selectedTeam.id, collections)
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    },
     displayModalAdd(shouldDisplay) {
       this.showModalAdd = shouldDisplay
     },
@@ -207,16 +328,50 @@ export default {
       this.displayModalEdit(true)
       this.syncCollections()
     },
-    onAddFolder({ name, path }) {
+    onAddFolder({ name, folder, path }) {
       const flag = "rest"
-      this.$store.commit("postwoman/addFolder", {
+      if (this.collectionsType.type === "my-collections") {
-        name,
+        this.$store.commit("postwoman/addFolder", {
-        path,
+          name,
-        flag,
+          path,
-      })
+          flag,
+        })
+        this.syncCollections()
+      } else if (this.collectionsType.type === "team-collections") {
+        if (this.collectionsType.selectedTeam.myRole != "VIEWER") {
+          this.$apollo
+            .mutate({
+              mutation: gql`
+                mutation($childTitle: String!, $collectionID: String!) {
+                  createChildCollection(childTitle: $childTitle, collectionID: $collectionID) {
+                    id
+                  }
+                }
+              `,
+              // Parameters
+              variables: {
+                childTitle: name,
+                collectionID: folder.id,
+              },
+            })
+            .then((data) => {
+              // Result
+              this.$toast.success(this.$t("folder_added"), {
+                icon: "done",
+              })
+              this.$emit("update-team-collections")
+            })
+            .catch((error) => {
+              // Error
+              this.$toast.error(this.$t("error_occurred"), {
+                icon: "done",
+              })
+              console.error(error)
+            })
+        }
+      }
 
       this.displayModalAddFolder(false)
-      this.syncCollections()
     },
     addFolder(payload) {
       const { folder, path } = payload
@@ -229,6 +384,7 @@ export default {
       this.$data.editingCollectionIndex = collectionIndex
       this.$data.editingFolder = folder
       this.$data.editingFolderIndex = folderIndex
+      this.$data.collectionsType = this.collectionsType
       this.displayModalEditFolder(true)
       this.syncCollections()
     },
@@ -239,6 +395,7 @@ export default {
       this.$data.editingFolderName = folderName
       this.$data.editingRequest = request
       this.$data.editingRequestIndex = requestIndex
+      this.$emit("select-request", requestIndex)
       this.displayModalEditRequest(true)
       this.syncCollections()
     },

components/smart/Tabs.vue

@@ -117,6 +117,7 @@ export default {
       this.tabs.forEach((tab) => {
         tab.isActive = tab.id == id
       })
+      this.$emit("tab-changed", id)
     },
   },
 }

components/teams/Add.vue

@@ -0,0 +1,92 @@
+<template>
+  <SmartModal v-if="show" @close="hideModal">
+    <div slot="header">
+      <ul>
+        <li>
+          <div class="row-wrapper">
+            <h3 class="title">{{ $t("new_team") }}</h3>
+            <div>
+              <button class="icon" @click="hideModal">
+                <i class="material-icons">close</i>
+              </button>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div slot="body">
+      <ul>
+        <li>
+          <input
+            type="text"
+            v-model="name"
+            :placeholder="$t('my_new_team')"
+            @keyup.enter="addNewTeam"
+          />
+        </li>
+      </ul>
+    </div>
+    <div slot="footer">
+      <div class="row-wrapper">
+        <span></span>
+        <span>
+          <button class="icon" @click="hideModal">
+            {{ $t("cancel") }}
+          </button>
+          <button class="icon primary" @click="addNewTeam">
+            {{ $t("save") }}
+          </button>
+        </span>
+      </div>
+    </div>
+  </SmartModal>
+</template>
+
+<script>
+import team_utils from "~/helpers/teams/utils"
+
+export default {
+  props: {
+    show: Boolean,
+  },
+  data() {
+    return {
+      name: undefined,
+    }
+  },
+  methods: {
+    addNewTeam() {
+      console.log("addNewTeam start")
+      // We save the user input in case of an error
+      const name = this.name
+      // We clear it early to give the UI a snappy feel
+      this.name = ""
+      if (name != null && name.replace(/\s/g, "").length < 6) {
+        this.$toast.error(this.$t("string_length_insufficient"), {
+          icon: "error",
+        })
+        console.log("String length less than 6")
+        return
+      }
+      // Call to the graphql mutation
+      team_utils
+        .createTeam(this.$apollo, name)
+        .then((data) => {
+          // Result
+          this.hideModal()
+          console.log(data)
+        })
+        .catch((error) => {
+          // Error
+          console.error(error)
+          // We restore the initial user input
+          this.name = name
+        })
+    },
+    hideModal() {
+      this.$data.name = undefined
+      this.$emit("hide-modal")
+    },
+  },
+}
+</script>

components/teams/Edit.vue

@@ -0,0 +1,436 @@
+<template>
+  <SmartModal v-if="show" @close="hideModal">
+    <div slot="header">
+      <ul>
+        <li>
+          <div class="row-wrapper">
+            <h3 class="title">{{ $t("edit_team") }}</h3>
+            <div>
+              <button class="icon" @click="hideModal">
+                <i class="material-icons">close</i>
+              </button>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div slot="body">
+      <ul>
+        <li>
+          <input
+            type="text"
+            v-model="name"
+            :placeholder="editingTeam.name"
+            @keyup.enter="saveTeam"
+          />
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <div class="row-wrapper">
+            <label for="memberList">{{ $t("team_member_list") }}</label>
+            <div></div>
+          </div>
+        </li>
+      </ul>
+      <ul v-for="(member, index) in teamMembers" :key="`new-${index}`">
+        <li>
+          <input
+            :placeholder="$t('email')"
+            :name="'param' + index"
+            :value="member.user.email"
+            readonly
+          />
+        </li>
+        <li>
+          <span class="select-wrapper">
+            <v-popover>
+              <input
+                :placeholder="$t('permissions')"
+                :name="'value' + index"
+                :value="typeof member.role === 'string' ? member.role : JSON.stringify(member.role)"
+                readonly
+              />
+              <template slot="popover">
+                <div>
+                  <button class="icon" v-close-popover @click="member.role = 'OWNER'">OWNER</button>
+                </div>
+                <div>
+                  <button class="icon" v-close-popover @click="member.role = 'EDITOR'">
+                    EDITOR
+                  </button>
+                </div>
+                <div>
+                  <button class="icon" v-close-popover @click="member.role = 'VIEWER'">
+                    VIEWER
+                  </button>
+                </div>
+              </template>
+            </v-popover>
+          </span>
+        </li>
+        <div>
+          <li>
+            <button
+              class="icon"
+              @click="removeExistingTeamMember(member.user.uid)"
+              v-tooltip.bottom="$t('delete')"
+              id="member"
+            >
+              <i class="material-icons">delete</i>
+            </button>
+          </li>
+        </div>
+      </ul>
+      <ul v-for="(member, index) in members" :key="index">
+        <li>
+          <input
+            :placeholder="$t('email')"
+            :name="'param' + index"
+            v-model="member.key"
+            autofocus
+          />
+        </li>
+        <li>
+          <span class="select-wrapper">
+            <v-popover>
+              <input
+                :placeholder="$t('permissions')"
+                :name="'value' + index"
+                :value="
+                  typeof member.value === 'string' ? member.value : JSON.stringify(member.value)
+                "
+                readonly
+              />
+              <template slot="popover">
+                <div>
+                  <button class="icon" v-close-popover @click="member.value = 'OWNER'">
+                    OWNER
+                  </button>
+                </div>
+                <div>
+                  <button class="icon" v-close-popover @click="member.value = 'EDITOR'">
+                    EDITOR
+                  </button>
+                </div>
+                <div>
+                  <button class="icon" v-close-popover @click="member.value = 'VIEWER'">
+                    VIEWER
+                  </button>
+                </div>
+              </template>
+            </v-popover>
+          </span>
+        </li>
+        <div>
+          <li>
+            <button
+              class="icon"
+              @click="removeTeamMember(index)"
+              v-tooltip.bottom="$t('delete')"
+              id="member"
+            >
+              <i class="material-icons">delete</i>
+            </button>
+          </li>
+        </div>
+      </ul>
+      <ul>
+        <li>
+          <button class="icon" @click="addTeamMember">
+            <i class="material-icons">add</i>
+            <span>{{ $t("add_new") }}</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+    <div slot="footer">
+      <div class="row-wrapper">
+        <span></span>
+        <span>
+          <button class="icon" @click="hideModal">
+            {{ $t("cancel") }}
+          </button>
+          <button class="icon primary" @click="saveTeam">
+            {{ $t("save") }}
+          </button>
+        </span>
+      </div>
+    </div>
+  </SmartModal>
+</template>
+
+<script>
+import team_utils from "~/helpers/teams/utils"
+import gql from "graphql-tag"
+
+export default {
+  apollo: {
+    teamMembers: {
+      query: gql`
+        query GetMyTeams {
+          myTeams {
+            id
+            members {
+              user {
+                displayName
+                email
+                uid
+              }
+              role
+            }
+          }
+        }
+      `,
+      subscribeToMore: [
+        {
+          document: gql`
+            subscription teamMemberAdded($teamID: String!) {
+              teamMemberAdded(teamID: $teamID) {
+                role
+                user {
+                  displayName
+                  email
+                  uid
+                }
+              }
+            }
+          `,
+          variables() {
+            return { teamID: this.$props.editingteamID }
+          },
+          skip() {
+            return this.$props.editingteamID === ""
+          },
+          updateQuery(previousResult, { subscriptionData }) {
+            const teamIdx = previousResult.myTeams.findIndex(
+              (x) => x.id === this.$props.editingteamID
+            )
+            previousResult.myTeams[teamIdx].members.push(subscriptionData.data.teamMemberAdded)
+            return previousResult
+          },
+        },
+        {
+          document: gql`
+            subscription teamMemberUpdated($teamID: String!) {
+              teamMemberUpdated(teamID: $teamID) {
+                role
+                user {
+                  displayName
+                  email
+                  uid
+                }
+              }
+            }
+          `,
+          variables() {
+            return { teamID: this.$props.editingteamID }
+          },
+          skip() {
+            return this.$props.editingteamID === ""
+          },
+          updateQuery(previousResult, { subscriptionData }) {
+            const teamIdx = previousResult.myTeams.findIndex(
+              (x) => x.id === this.$props.editingteamID
+            )
+            const memberIdx = previousResult.myTeams[teamIdx].members.findIndex(
+              (x) => x.user.uid === subscriptionData.data.teamMemberUpdated.user.uid
+            )
+            previousResult.myTeams[teamIdx].members[memberIdx].user =
+              subscriptionData.data.teamMemberUpdated.user
+            previousResult.myTeams[teamIdx].members[memberIdx].role =
+              subscriptionData.data.teamMemberUpdated.role
+
+            return previousResult
+          },
+        },
+        {
+          document: gql`
+            subscription teamMemberRemoved($teamID: String!) {
+              teamMemberRemoved(teamID: $teamID)
+            }
+          `,
+          variables() {
+            return { teamID: this.$props.editingteamID }
+          },
+          skip() {
+            return this.$props.editingteamID === ""
+          },
+          updateQuery(previousResult, { subscriptionData }) {
+            const teamIdx = previousResult.myTeams.findIndex(
+              (x) => x.id === this.$props.editingteamID
+            )
+            const memberIdx = previousResult.myTeams[teamIdx].members.findIndex(
+              (x) => x.user.id === subscriptionData.data.teamMemberRemoved.id
+            )
+            if (memberIdx !== -1) previousResult.myTeams[teamIdx].members.splice(memberIdx, 1)
+
+            return previousResult
+          },
+        },
+      ],
+      update(response) {
+        const teamIdx = response.myTeams.findIndex((x) => x.id === this.$props.editingteamID)
+        return response.myTeams[teamIdx].members
+      },
+      skip() {
+        return this.$props.editingteamID === ""
+      },
+    },
+  },
+  props: {
+    show: Boolean,
+    editingTeam: Object,
+    editingteamID: String,
+  },
+  data() {
+    return {
+      rename: null,
+      doneButton: '<i class="material-icons">done</i>',
+      members: [],
+    }
+  },
+  computed: {
+    editingTeamCopy() {
+      return this.editingTeam
+    },
+    name: {
+      get() {
+        return this.editingTeam.name
+      },
+      set(name) {
+        this.rename = name
+      },
+    },
+  },
+  methods: {
+    addTeamMember() {
+      let value = { key: "", value: "" }
+      this.members.push(value)
+      console.log("addTeamMember")
+    },
+    removeExistingTeamMember(userID) {
+      team_utils
+        .removeTeamMember(this.$apollo, userID, this.editingteamID)
+        .then((data) => {
+          // Result
+          this.$toast.success(this.$t("user_removed"), {
+            icon: "done",
+          })
+          this.hideModal()
+        })
+        .catch((error) => {
+          // Error
+          this.$toast.error(this.$t("error_occurred"), {
+            icon: "done",
+          })
+          console.error(error)
+        })
+    },
+    removeTeamMember(index) {
+      this.members.splice(index, 1)
+      console.log("removeTeamMember")
+    },
+    validateEmail(emailID) {
+      if (/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(emailID)) {
+        return true
+      }
+      return false
+    },
+    saveTeam() {
+      if (this.$data.rename !== null && this.$data.rename.replace(/\s/g, "").length < 6) {
+        this.$toast.error(this.$t("string_length_insufficient"), {
+          icon: "error",
+        })
+        console.log("String length less than 6")
+        return
+      }
+      console.log("saveTeam", this.members)
+      this.$data.members.forEach((element) => {
+        if (!this.validateEmail(element.key)) {
+          this.$toast.error(this.$t("invalid_emailID_format"), {
+            icon: "error",
+          })
+          console.log("Email id format invalid")
+          return
+        }
+      })
+      this.$data.members.forEach((element) => {
+        // Call to the graphql mutation
+        team_utils
+          .addTeamMemberByEmail(this.$apollo, element.value, element.key, this.editingteamID)
+          .then((data) => {
+            // Result
+            this.$toast.success(this.$t("team_saved"), {
+              icon: "done",
+            })
+            this.hideModal()
+          })
+          .catch((error) => {
+            // Error
+            this.$toast.error(this.$t("error_occurred"), {
+              icon: "done",
+            })
+            console.error(error)
+          })
+      })
+      let messageShown = true
+      this.teamMembers.forEach((element) => {
+        team_utils
+          .updateTeamMemberRole(this.$apollo, element.user.uid, element.role, this.editingteamID)
+          .then((data) => {
+            // Result
+            if (messageShown) {
+              this.$toast.success(this.$t("role_updated"), {
+                icon: "done",
+              })
+              messageShown = false
+            }
+            this.hideModal()
+          })
+          .catch((error) => {
+            // Error
+            if (messageShown) {
+              this.$toast.error(this.$t("error_occurred"), {
+                icon: "done",
+              })
+              messageShown = false
+            }
+            console.error(error)
+          })
+      })
+      if (this.$data.rename !== null) {
+        const newName = this.name === this.$data.rename ? this.name : this.$data.rename
+        if (!/\S/.test(newName))
+          return this.$toast.error(this.$t("team_name_empty"), {
+            icon: "error",
+          })
+        // Call to the graphql mutation
+        if (this.name !== this.rename)
+          team_utils
+            .renameTeam(this.$apollo, newName, this.editingteamID)
+            .then((data) => {
+              // Result
+              this.$toast.success(this.$t("team_saved"), {
+                icon: "done",
+              })
+              this.hideModal()
+            })
+            .catch((error) => {
+              // Error
+              this.$toast.error(this.$t("error_occurred"), {
+                icon: "done",
+              })
+              console.error(error)
+            })
+      }
+      this.hideModal()
+      this.members = []
+    },
+    hideModal() {
+      this.$emit("hide-modal")
+      this.$data.name = undefined
+    },
+  },
+}
+</script>

components/teams/ImportExport.vue

@@ -0,0 +1,173 @@
+<template>
+  <SmartModal v-if="show" @close="hideModal">
+    <div slot="header">
+      <ul>
+        <li>
+          <div class="row-wrapper">
+            <h3 class="title">{{ $t("import_export") }} {{ $t("teams") }}</h3>
+            <div>
+              <button class="icon" @click="hideModal">
+                <i class="material-icons">close</i>
+              </button>
+            </div>
+          </div>
+          <div class="row-wrapper">
+            <span
+              v-tooltip="{
+                content: !fb.currentUser ? $t('login_first') : $t('replace_current'),
+              }"
+            >
+              <button :disabled="!fb.currentUser" class="icon" @click="syncTeams">
+                <i class="material-icons">folder_shared</i>
+                <span>{{ $t("import_from_sync") }}</span>
+              </button>
+            </span>
+            <button
+              class="icon"
+              @click="openDialogChooseFileToReplaceWith"
+              v-tooltip="$t('replace_current')"
+            >
+              <i class="material-icons">create_new_folder</i>
+              <span>{{ $t("replace_json") }}</span>
+              <input
+                type="file"
+                @change="replaceWithJSON"
+                style="display: none"
+                ref="inputChooseFileToReplaceWith"
+                accept="application/json"
+              />
+            </button>
+            <button
+              class="icon"
+              @click="openDialogChooseFileToImportFrom"
+              v-tooltip="$t('preserve_current')"
+            >
+              <i class="material-icons">folder_special</i>
+              <span>{{ $t("import_json") }}</span>
+              <input
+                type="file"
+                @change="importFromJSON"
+                style="display: none"
+                ref="inputChooseFileToImportFrom"
+                accept="application/json"
+              />
+            </button>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div slot="body">
+      <textarea v-model="teamJson" rows="8" readonly></textarea>
+    </div>
+    <div slot="footer">
+      <div class="row-wrapper">
+        <span></span>
+        <span>
+          <button class="icon" @click="hideModal">
+            {{ $t("cancel") }}
+          </button>
+          <button class="icon primary" @click="exportJSON" v-tooltip="$t('download_file')">
+            {{ $t("export") }}
+          </button>
+        </span>
+      </div>
+    </div>
+  </SmartModal>
+</template>
+
+<script>
+import { fb } from "~/helpers/fb"
+
+export default {
+  data() {
+    return {
+      fb,
+    }
+  },
+  props: {
+    show: Boolean,
+    teams: Array,
+  },
+  computed: {
+    teamJson() {
+      return this.teams
+    },
+  },
+  methods: {
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+    openDialogChooseFileToReplaceWith() {
+      this.$refs.inputChooseFileToReplaceWith.click()
+    },
+    openDialogChooseFileToImportFrom() {
+      this.$refs.inputChooseFileToImportFrom.click()
+    },
+    replaceWithJSON() {
+      let reader = new FileReader()
+      reader.onload = (event) => {
+        let content = event.target.result
+        let teams = JSON.parse(content)
+      }
+      reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0])
+      this.fileImported()
+      this.syncToFBTeams()
+    },
+    importFromJSON() {
+      let reader = new FileReader()
+      reader.onload = (event) => {
+        let content = event.target.result
+        let importFileObj = JSON.parse(content)
+        if (importFileObj["_postman_member_scope"] === "team") {
+          this.importFromPostman(importFileObj)
+        } else {
+          this.importFromPostwoman(importFileObj)
+        }
+      }
+      reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0])
+      this.syncToFBTeams()
+    },
+    importFromPostwoman(teams) {
+      let confirmation = this.$t("file_imported")
+      console.log("Import from PW")
+    },
+    importFromPostman(importFileObj) {
+      let team = { name: importFileObj.name, members: [] }
+      importFileObj.values.forEach((element) =>
+        team.members.push({ key: element.key, value: element.value })
+      )
+      let teams = [team]
+      this.importFromPostwoman(teams)
+    },
+    exportJSON() {
+      let text = this.teamJson
+      text = text.replace(/\n/g, "\r\n")
+      let blob = new Blob([text], {
+        type: "text/json",
+      })
+      let anchor = document.createElement("a")
+      anchor.download = "postwoman-team.json"
+      anchor.href = window.URL.createObjectURL(blob)
+      anchor.target = "_blank"
+      anchor.style.display = "none"
+      document.body.appendChild(anchor)
+      anchor.click()
+      document.body.removeChild(anchor)
+      this.$toast.success(this.$t("download_started"), {
+        icon: "done",
+      })
+    },
+    syncTeams() {
+      this.fileImported()
+    },
+    syncToFBTeams() {
+      console.log("syncToFBTeams")
+    },
+    fileImported() {
+      this.$toast.info(this.$t("file_imported"), {
+        icon: "folder_shared",
+      })
+    },
+  },
+}
+</script>

components/teams/Team.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="row-wrapper">
+    <div>
+      <button class="icon" v-tooltip.right="$t('use_team')">
+        <i class="material-icons">group</i>
+        <span>{{ team.name }}</span>
+      </button>
+    </div>
+    <v-popover>
+      <button class="tooltip-target icon" v-tooltip.left="$t('more')">
+        <i class="material-icons">more_vert</i>
+      </button>
+      <template slot="popover">
+        <div v-if="team.myRole === 'OWNER'">
+          <button class="icon" @click="$emit('edit-team')" v-close-popover>
+            <i class="material-icons">create</i>
+            <span>{{ $t("edit") }}</span>
+          </button>
+        </div>
+        <div v-if="team.myRole === 'OWNER'">
+          <button class="icon" @click="deleteTeam" v-close-popover>
+            <i class="material-icons">delete</i>
+            <span>{{ $t("delete") }}</span>
+          </button>
+        </div>
+        <div>
+          <button
+            class="icon"
+            @click="exitTeam"
+            v-close-popover
+            :disabled="!(team.myRole === 'OWNER' && team.ownersCount == 1)"
+          >
+            <i class="material-icons">remove</i>
+            <div
+              v-tooltip.left="{
+                content:
+                  team.myRole === 'OWNER' && team.ownersCount == 1 ? null : $t('disable_exit'),
+              }"
+            >
+              <span>{{ $t("exit") }}</span>
+            </div>
+          </button>
+        </div>
+      </template>
+    </v-popover>
+  </div>
+</template>
+
+<style scoped lang="scss">
+ul {
+  display: flex;
+  flex-direction: column;
+}
+
+ul li {
+  display: flex;
+  padding-left: 16px;
+  border-left: 1px solid var(--brd-color);
+}
+</style>
+
+<script>
+import team_utils from "~/helpers/teams/utils"
+
+export default {
+  props: {
+    team: Object,
+    teamID: String,
+  },
+  methods: {
+    deleteTeam() {
+      if (!confirm("Are you sure you want to remove this team?")) return
+      console.log("deleteTeam", this.teamID)
+      // Call to the graphql mutation
+      team_utils
+        .deleteTeam(this.$apollo, this.teamID)
+        .then((data) => {
+          // Result
+          this.$toast.success(this.$t("new_team_created"), {
+            icon: "done",
+          })
+          console.log(data)
+        })
+        .catch((error) => {
+          // Error
+          this.$toast.error(this.$t("error_occurred"), {
+            icon: "done",
+          })
+          console.error(error)
+        })
+    },
+    exitTeam() {
+      if (!confirm("Are you sure you want to exit this team?")) return
+      console.log("leaveTeam", this.teamID)
+      team_utils
+        .exitTeam(this.$apollo, this.teamID)
+        .then((data) => {
+          // Result
+          this.$toast.success(this.$t("team_exited"), {
+            icon: "done",
+          })
+          console.log(data)
+        })
+        .catch((error) => {
+          // Error
+          this.$toast.error(this.$t("error_occurred"), {
+            icon: "error",
+          })
+          console.error(error)
+        })
+    },
+  },
+}
+</script>

components/teams/index.vue

@@ -0,0 +1,145 @@
+<template>
+  <AppSection class="green" icon="history" :label="$t('teams')" ref="teams" no-legend>
+    <!-- debug start -->
+    <pre>me: {{ me }}</pre>
+    <pre>myTeams: {{ myTeams }}</pre>
+    <!-- debug end -->
+    <TeamsAdd :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
+    <TeamsEdit
+      :team="myTeams[0]"
+      :show="showModalEdit"
+      :editingTeam="editingTeam"
+      :editingteamID="editingteamID"
+      @hide-modal="displayModalEdit(false)"
+    />
+    <TeamsImportExport
+      :show="showModalImportExport"
+      :teams="myTeams"
+      @hide-modal="displayModalImportExport(false)"
+    />
+    <div class="row-wrapper">
+      <div>
+        <button class="icon" @click="displayModalAdd(true)">
+          <i class="material-icons">add</i>
+          <span>{{ $t("new") }}</span>
+        </button>
+      </div>
+      <div>
+        <button class="icon" @click="displayModalImportExport(true)">
+          {{ $t("import_export") }}
+        </button>
+      </div>
+    </div>
+    <p v-if="$apollo.queries.myTeams.loading" class="info">{{ $t("loading") }}</p>
+    <p v-if="myTeams.length === 0" class="info">
+      <i class="material-icons">help_outline</i> {{ $t("create_new_team") }}
+    </p>
+    <div v-else class="virtual-list">
+      <ul class="flex-col">
+        <li v-for="(team, index) in myTeams" :key="`team-${index}`">
+          <TeamsTeam :teamID="team.id" :team="team" @edit-team="editTeam(team, team.id)" />
+        </li>
+      </ul>
+    </div>
+  </AppSection>
+</template>
+
+<style scoped lang="scss">
+.virtual-list {
+  max-height: calc(100vh - 241px);
+}
+
+ul {
+  display: flex;
+  flex-direction: column;
+}
+</style>
+
+<script>
+import gql from "graphql-tag"
+
+export default {
+  data() {
+    return {
+      showModalImportExport: false,
+      showModalAdd: false,
+      showModalEdit: false,
+      editingTeam: {},
+      editingteamID: "",
+      me: {},
+      myTeams: [],
+    }
+  },
+  apollo: {
+    me: {
+      query: gql`
+        query GetMe {
+          me {
+            uid
+          }
+        }
+      `,
+      pollInterval: 100000,
+    },
+    myTeams: {
+      query: gql`
+        query GetMyTeams {
+          myTeams {
+            id
+            name
+            myRole
+            ownersCount
+            members {
+              user {
+                displayName
+                email
+                uid
+              }
+              role
+            }
+          }
+        }
+      `,
+      pollInterval: 10000,
+    },
+  },
+  async mounted() {
+    this._keyListener = function (e) {
+      if (e.key === "Escape") {
+        e.preventDefault()
+        this.showModalImportExport = false
+      }
+    }
+    document.addEventListener("keydown", this._keyListener.bind(this))
+  },
+  methods: {
+    displayModalAdd(shouldDisplay) {
+      this.showModalAdd = shouldDisplay
+    },
+    displayModalEdit(shouldDisplay) {
+      this.showModalEdit = shouldDisplay
+
+      if (!shouldDisplay) this.resetSelectedData()
+    },
+    displayModalImportExport(shouldDisplay) {
+      this.showModalImportExport = shouldDisplay
+    },
+    editTeam(team, teamID) {
+      console.log("editTeamStart", team)
+      this.editingTeam = team
+      this.editingteamID = team.id
+      this.displayModalEdit(true)
+      this.syncTeams()
+    },
+    resetSelectedData() {
+      console.log("resetSelectedData")
+    },
+    syncTeams() {
+      console.log("syncTeams")
+    },
+  },
+  beforeDestroy() {
+    document.removeEventListener("keydown", this._keyListener)
+  },
+}
+</script>

helpers/fb.js

@@ -32,6 +32,7 @@ export class FirebaseInstance {
     this.usersCollection = this.app.firestore().collection("users")
 
     this.currentUser = null
+    this.idToken = null
     this.currentFeeds = []
     this.currentSettings = []
     this.currentHistory = []
@@ -76,6 +77,8 @@ export class FirebaseInstance {
     })
 
     this.app.auth().onAuthStateChanged((user) => {
+      this.currentUser$.next(user)
+
       if (user) {
         this.currentUser = user
 

helpers/teams/utils.js

@@ -0,0 +1,460 @@
+import gql from "graphql-tag"
+
+async function createTeam(apollo, name) {
+  return apollo.mutate({
+    mutation: gql`
+      mutation($name: String!) {
+        createTeam(name: $name) {
+          name
+        }
+      }
+    `,
+    variables: {
+      name: name,
+    },
+  })
+}
+
+async function addTeamMemberByEmail(apollo, userRole, userEmail, teamID) {
+  return apollo.mutate({
+    mutation: gql`
+      mutation addTeamMemberByEmail(
+        $userRole: TeamMemberRole!
+        $userEmail: String!
+        $teamID: String!
+      ) {
+        addTeamMemberByEmail(userRole: $userRole, userEmail: $userEmail, teamID: $teamID) {
+          role
+        }
+      }
+    `,
+    variables: {
+      userRole: userRole,
+      userEmail: userEmail,
+      teamID: teamID,
+    },
+  })
+}
+
+async function updateTeamMemberRole(apollo, userID, newRole, teamID) {
+  return apollo.mutate({
+    mutation: gql`
+      mutation updateTeamMemberRole(
+        $newRole: TeamMemberRole!
+        $userUid: String!
+        $teamID: String!
+      ) {
+        updateTeamMemberRole(newRole: $newRole, userUid: $userUid, teamID: $teamID) {
+          role
+        }
+      }
+    `,
+    variables: {
+      newRole: newRole,
+      userUid: userID,
+      teamID: teamID,
+    },
+  })
+}
+
+async function renameTeam(apollo, name, teamID) {
+  return apollo.mutate({
+    mutation: gql`
+      mutation renameTeam($newName: String!, $teamID: String!) {
+        renameTeam(newName: $newName, teamID: $teamID) {
+          id
+        }
+      }
+    `,
+    variables: {
+      newName: name,
+      teamID: teamID,
+    },
+  })
+}
+
+async function removeTeamMember(apollo, userID, teamID) {
+  return apollo.mutate({
+    mutation: gql`
+      mutation removeTeamMember($userUid: String!, $teamID: String!) {
+        removeTeamMember(userUid: $userUid, teamID: $teamID)
+      }
+    `,
+    variables: {
+      userUid: userID,
+      teamID: teamID,
+    },
+  })
+}
+
+async function deleteTeam(apollo, teamID) {
+  let response = undefined
+  while (true) {
+    response = await apollo.mutate({
+      mutation: gql`
+        mutation($teamID: String!) {
+          deleteTeam(teamID: $teamID)
+        }
+      `,
+      variables: {
+        teamID: teamID,
+      },
+    })
+    if (response != undefined) break
+  }
+  return response
+}
+
+async function exitTeam(apollo, teamID) {
+  apollo.mutate({
+    mutation: gql`
+      mutation($teamID: String!) {
+        leaveTeam(teamID: $teamID)
+      }
+    `,
+    variables: {
+      teamID: teamID,
+    },
+  })
+}
+
+async function rootCollectionsOfTeam(apollo, teamID) {
+  var collections = []
+  var cursor = ""
+  while (true) {
+    var response = await apollo.query({
+      query: gql`
+        query rootCollectionsOfTeam($teamID: String!, $cursor: String!) {
+          rootCollectionsOfTeam(teamID: $teamID, cursor: $cursor) {
+            id
+            title
+          }
+        }
+      `,
+      variables: {
+        teamID: teamID,
+        cursor: cursor,
+      },
+      fetchPolicy: "no-cache",
+    })
+    if (response.data.rootCollectionsOfTeam.length == 0) break
+    response.data.rootCollectionsOfTeam.forEach((collection) => {
+      collections.push(collection)
+    })
+    cursor = collections[collections.length - 1].id
+  }
+  return collections
+}
+
+async function getCollectionChildren(apollo, collectionID) {
+  var children = []
+  var response = await apollo.query({
+    query: gql`
+      query getCollectionChildren($collectionID: String!) {
+        collection(collectionID: $collectionID) {
+          children {
+            id
+            title
+          }
+        }
+      }
+    `,
+    variables: {
+      collectionID: collectionID,
+    },
+    fetchPolicy: "no-cache",
+  })
+  response.data.collection.children.forEach((child) => {
+    children.push(child)
+  })
+  return children
+}
+
+async function getCollectionRequests(apollo, collectionID) {
+  var requests = []
+  var cursor = ""
+  while (true) {
+    var response = await apollo.query({
+      query: gql`
+        query getCollectionRequests($collectionID: String!, $cursor: String) {
+          requestsInCollection(collectionID: $collectionID, cursor: $cursor) {
+            id
+            title
+            request
+          }
+        }
+      `,
+      variables: {
+        collectionID: collectionID,
+        cursor: cursor,
+      },
+      fetchPolicy: "no-cache",
+    })
+
+    response.data.requestsInCollection.forEach((request) => {
+      requests.push(request)
+    })
+
+    if (response.data.requestsInCollection.length < 10) {
+      break
+    }
+    cursor = requests[requests.length - 1].id
+  }
+  return requests
+}
+
+async function renameCollection(apollo, title, id) {
+  let response = undefined
+  while (true) {
+    response = await apollo.mutate({
+      mutation: gql`
+        mutation($newTitle: String!, $collectionID: String!) {
+          renameCollection(newTitle: $newTitle, collectionID: $collectionID) {
+            id
+          }
+        }
+      `,
+      variables: {
+        newTitle: title,
+        collectionID: id,
+      },
+    })
+    if (response != undefined) break
+  }
+  return response
+}
+
+async function updateRequest(apollo, request, requestName, requestID) {
+  let response = undefined
+  while (true) {
+    response = await apollo.mutate({
+      mutation: gql`
+        mutation($data: UpdateTeamRequestInput!, $requestID: String!) {
+          updateRequest(data: $data, requestID: $requestID) {
+            id
+          }
+        }
+      `,
+      variables: {
+        data: {
+          request: JSON.stringify(request),
+          title: requestName,
+        },
+        requestID: requestID,
+      },
+    })
+    if (response != undefined) break
+  }
+  return response
+}
+
+async function addChildCollection(apollo, title, id) {
+  let response = undefined
+  while (true) {
+    response = await apollo.mutate({
+      mutation: gql`
+        mutation($childTitle: String!, $collectionID: String!) {
+          createChildCollection(childTitle: $childTitle, collectionID: $collectionID) {
+            id
+          }
+        }
+      `,
+      variables: {
+        childTitle: title,
+        collectionID: id,
+      },
+    })
+    if (response != undefined) break
+  }
+  return response
+}
+
+async function deleteCollection(apollo, id) {
+  let response = undefined
+  while (true) {
+    response = await apollo.mutate({
+      mutation: gql`
+        mutation($collectionID: String!) {
+          deleteCollection(collectionID: $collectionID)
+        }
+      `,
+      variables: {
+        collectionID: id,
+      },
+    })
+    if (response != undefined) break
+  }
+  return response
+}
+
+async function deleteRequest(apollo, requestID) {
+  let response = undefined
+  while (true) {
+    response = await apollo.mutate({
+      mutation: gql`
+        mutation($requestID: String!) {
+          deleteRequest(requestID: $requestID)
+        }
+      `,
+      variables: {
+        requestID: requestID,
+      },
+    })
+    if (response != undefined) break
+  }
+  return response
+}
+
+async function createNewRootCollection(apollo, title, id) {
+  let response = undefined
+  while (true) {
+    response = await apollo.mutate({
+      mutation: gql`
+        mutation($title: String!, $teamID: String!) {
+          createRootCollection(title: $title, teamID: $teamID) {
+            id
+          }
+        }
+      `,
+      variables: {
+        title: title,
+        teamID: id,
+      },
+    })
+    if (response != undefined) break
+  }
+  return response
+}
+
+async function saveRequestAsTeams(apollo, request, title, teamID, collectionID) {
+  await apollo.mutate({
+    mutation: gql`
+      mutation($data: CreateTeamRequestInput!, $collectionID: String!) {
+        createRequestInCollection(data: $data, collectionID: $collectionID) {
+          collection {
+            id
+            team {
+              id
+              name
+            }
+          }
+        }
+      }
+    `,
+    variables: {
+      collectionID: collectionID,
+      data: {
+        teamID: teamID,
+        title: title,
+        request: request,
+      },
+    },
+  })
+}
+
+async function overwriteRequestTeams(apollo, request, title, requestID) {
+  await apollo.mutate({
+    mutation: gql`
+      mutation updateRequest($data: UpdateTeamRequestInput!, $requestID: String!) {
+        updateRequest(data: $data, requestID: $requestID) {
+          id
+          title
+        }
+      }
+    `,
+    variables: {
+      requestID: requestID,
+      data: {
+        request: request,
+        title: title,
+      },
+    },
+  })
+}
+
+async function importFromMyCollections(apollo, collectionID, teamID) {
+  let response = await apollo.mutate({
+    mutation: gql`
+      mutation importFromMyCollections($fbCollectionPath: String!, $teamID: String!) {
+        importCollectionFromUserFirestore(fbCollectionPath: $fbCollectionPath, teamID: $teamID) {
+          id
+          title
+        }
+      }
+    `,
+    variables: {
+      fbCollectionPath: collectionID,
+      teamID: teamID,
+    },
+  })
+  return response.data != null
+}
+
+async function importFromJSON(apollo, collections, teamID) {
+  let response = await apollo.mutate({
+    mutation: gql`
+      mutation importFromJSON($jsonString: String!, $teamID: String!) {
+        importCollectionsFromJSON(jsonString: $jsonString, teamID: $teamID)
+      }
+    `,
+    variables: {
+      jsonString: JSON.stringify(collections),
+      teamID: teamID,
+    },
+  })
+  return response.data != null
+}
+
+async function replaceWithJSON(apollo, collections, teamID) {
+  let response = await apollo.mutate({
+    mutation: gql`
+      mutation replaceWithJSON($jsonString: String!, $teamID: String!) {
+        replaceCollectionsWithJSON(jsonString: $jsonString, teamID: $teamID)
+      }
+    `,
+    variables: {
+      jsonString: JSON.stringify(collections),
+      teamID: teamID,
+    },
+  })
+  return response.data != null
+}
+
+async function exportAsJSON(apollo, teamID) {
+  let response = await apollo.query({
+    query: gql`
+      query exportAsJSON($teamID: String!) {
+        exportCollectionsToJSON(teamID: $teamID)
+      }
+    `,
+    variables: {
+      teamID: teamID,
+    },
+  })
+  return response.data.exportCollectionsToJSON
+}
+
+export default {
+  rootCollectionsOfTeam: rootCollectionsOfTeam,
+  getCollectionChildren: getCollectionChildren,
+  getCollectionRequests: getCollectionRequests,
+  saveRequestAsTeams: saveRequestAsTeams,
+  overwriteRequestTeams: overwriteRequestTeams,
+  importFromMyCollections: importFromMyCollections,
+  importFromJSON: importFromJSON,
+  replaceWithJSON: replaceWithJSON,
+  exportAsJSON: exportAsJSON,
+  renameCollection: renameCollection,
+  updateRequest: updateRequest,
+  addChildCollection: addChildCollection,
+  deleteCollection: deleteCollection,
+  deleteRequest: deleteRequest,
+  createNewRootCollection: createNewRootCollection,
+  createTeam: createTeam,
+  addTeamMemberByEmail: addTeamMemberByEmail,
+  renameTeam: renameTeam,
+  deleteTeam: deleteTeam,
+  exitTeam: exitTeam,
+  updateTeamMemberRole: updateTeamMemberRole,
+  removeTeamMember: removeTeamMember,
+}

lang/en-US.json

@@ -305,5 +305,30 @@
   "account_exists": "Account exists with different credential - Login to link both accounts",
   "confirm": "Confirm",
   "new_version_found": "New version found. Refresh to update.",
-  "size": "Size"
+  "size": "Size",
+  "exit": "Exit Team",
+  "string_length_insufficient": "Team name should be atleast 6 characters long",
+  "invalid_emailID_format": "Email ID format is invalid",
+  "teams": "Teams",
+  "new_team": "New Team",
+  "my_new_team": "My New Team",
+  "edit_team": "Edit Team",
+  "team_member_list": "Member List",
+  "invalid_team_name": "Please provide a valid name for the team",
+  "use_team": "Use Team",
+  "add_one_member": "(add at least one member)",
+  "permissions": "Permissions",
+  "email": "E-mail",
+  "create_new_team": "Create new team",
+  "new_team_created": "New team created",
+  "team_saved": "Team saved",
+  "team_name_empty": "Team name empty",
+  "disable_new_collection": "You do not have edit access to these collections",
+  "collection_added": "Collection added successfully",
+  "folder_added": "Folder added successfully",
+  "team_exited": "Team exited",
+  "disable_exit": "Only owner cannot exit the team",
+  "folder_renamed": "Folder renamed successfully",
+  "role_updated": "User role(s) updated successfully",
+  "user_removed": "User removed successfully"
 }

layouts/default.vue

@@ -14,6 +14,7 @@
 </template>
 
 <script>
+import { fb } from "~/helpers/fb"
 import { setupLocalPersistence } from "~/newstore/localpersistence"
 import { performMigrations } from "~/helpers/migrations"
 
@@ -37,6 +38,17 @@ export default {
       "%cContribute: https://github.com/hoppscotch/hoppscotch",
       "background-color:black;padding:4px 8px;border-radius:8px;font-size:16px;color:white;"
     )
+
+    // Update GraphQL Token on firebase ID Token changes
+    fb.idToken$.subscribe((token) => {
+      if (token) {
+        console.log(token)
+        this.$apolloHelpers.onLogin(token)
+      } else {
+        this.$apolloHelpers.onLogout()
+      }
+    })
+
     const workbox = await window.$workbox
     if (workbox) {
       workbox.addEventListener("installed", (event) => {

nuxt.config.js

@@ -129,8 +129,16 @@ export default {
     "@nuxtjs/robots",
     // https://github.com/nuxt-community/sitemap-module
     "@nuxtjs/sitemap",
+    // https://github.com/nuxt-community/apollo-module
+    "@nuxtjs/apollo",
   ],
 
+  apollo: {
+    clientConfigs: {
+      default: "~/plugins/apollo.js",
+    },
+  },
+
   // PWA module configuration (https://pwa.nuxtjs.org/setup)
   pwa: {
     meta: {

package.json

@@ -20,6 +20,8 @@
     "printWidth": 100
   },
   "dependencies": {
+    "@apollo/client": "^3.3.6",
+    "@nuxtjs/apollo": "^4.0.1-rc.5",
     "@nuxtjs/axios": "^5.13.1",
     "@nuxtjs/gtm": "^2.4.0",
     "@nuxtjs/robots": "^2.5.0",
@@ -42,6 +44,7 @@
     "socketio-wildcard": "^2.0.0",
     "tern": "^0.24.3",
     "v-tooltip": "^2.1.3",
+    "vue-cli-plugin-apollo": "^0.22.2",
     "vue-rx": "^6.2.0",
     "vuejs-auto-complete": "^0.9.0",
     "vuex-persist": "^3.1.3",

pages/index.vue

@@ -546,6 +546,10 @@
             <SmartTab :id="'notes'" :label="$t('notes')">
               <HttpNotes />
             </SmartTab>
+
+            <SmartTab :id="'teams'" :label="'Teams'">
+              <Teams />
+            </SmartTab>
           </SmartTabs>
         </section>
       </aside>

pages/settings.vue

@@ -1,5 +1,9 @@
 <template>
   <div class="page">
+    <div v-if="fb.currentUser">
+      <Teams />
+    </div>
+
     <AppSection :label="$t('account')" ref="account" no-legend>
       <div class="flex flex-col">
         <label>{{ $t("account") }}</label>

plugins/apollo.js

@@ -0,0 +1,12 @@
+export default () => {
+  return {
+    httpEndpoint:
+      process.env.CONTEXT === "production"
+        ? "https://api.hoppscotch.io/graphql"
+        : "https://api.hoppscotch.io/graphql",
+    wsEndpoint:
+      process.env.CONTEXT === "production"
+        ? "wss://api.hoppscotch.io/graphql"
+        : "wss://api.hoppscotch.io/graphql",
+  }
+}