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/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>