refactor(ui): teams

2021-08-03 16:50:28 +05:30
parent 7d913b0ee7
commit 17192c898b
10 changed files with 208 additions and 173 deletions
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -41,7 +41,8 @@
                '<br>' +
                `<sub>${currentUser.email || 'Email not found'}</sub>`
              "
-              :indicator="isOnLine ? 'bg-green-500' : 'bg-red-500'"
+              indicator
+              :indicator-styles="isOnLine ? 'bg-green-500' : 'bg-red-500'"
            />
            <TabPrimary
              v-else
--- a/components/http/Request.vue
+++ b/components/http/Request.vue
@@ -27,10 +27,11 @@
                transition
                w-28
                truncate
-                focus:outline-none focus:border-accent
+                focus:border-accent focus:outline-none
              "
              :value="newMethod"
-              readonly
+              :readonly="isCustomMethod()"
+              @input="onSelectMethod($event.target.value)"
            />
          </template>
          <SmartItem
@@ -78,7 +79,7 @@
          px-4
          transition
          truncate
-          focus:outline-none focus:border-accent
+          focus:border-accent focus:outline-none
        "
        name="url"
        type="text"
@@ -332,6 +333,7 @@ export default defineComponent({
        updateMethod(methods[currentIndex - 1])
      }
    }
+
    const cycleDownMethod = () => {
      const currentIndex = methods.indexOf(newMethod.value)
      if (currentIndex === -1) {
@@ -363,6 +365,12 @@ export default defineComponent({
    defineActionHandler("request.method.delete", () => updateMethod("DELETE"))
    defineActionHandler("request.method.head", () => updateMethod("HEAD"))

+    const isCustomMethod = () => {
+      if (newMethod.value === "CUSTOM" || !methods.includes(newMethod.value))
+        return false
+      return true
+    }
+
    return {
      newEndpoint,
      newMethod,
@@ -386,6 +394,8 @@ export default defineComponent({
      methodOptions,
      sendOptions,
      saveOptions,
+
+      isCustomMethod,
    }
  },
 })
--- a/components/profile/Picture.vue
+++ b/components/profile/Picture.vue
@@ -16,9 +16,10 @@
    />
    <div class="rounded-full shadow-inner inset-0 absolute"></div>
    <span
+      v-if="indicator"
      :class="[
        'border-primary rounded-full border-2 h-3 -top-1 -right-1 w-3 absolute',
-        indicator,
+        indicatorStyles,
      ]"
    ></span>
  </div>
@@ -38,6 +39,10 @@ export default {
      default: "Profile picture",
    },
    indicator: {
+      type: Boolean,
+      default: false,
+    },
+    indicatorStyles: {
      type: String,
      default: "bg-green-500",
    },
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -2,9 +2,7 @@
  <SmartModal v-if="show" @close="hideModal">
    <template #header>
      <h3 class="heading">{{ $t("team.edit") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <div class="flex flex-col px-2">
@@ -58,7 +56,7 @@
            />
            <span class="select-wrapper">
              <tippy
-                ref="options"
+                ref="memberOptions"
                interactive
                tabindex="-1"
                trigger="click"
@@ -89,22 +87,22 @@
                <SmartItem
                  label="OWNER"
                  @click.native="
-                    updateRole(index, 'OWNER')
-                    $refs.options.tippy().hide()
+                    $refs.memberOptions.tippy().hide()
+                    updateMemberRole(index, 'OWNER')
                  "
                />
                <SmartItem
                  label="EDITOR"
                  @click.native="
-                    updateRole(index, 'EDITOR')
-                    $refs.options.tippy().hide()
+                    $refs.memberOptions.tippy().hide()
+                    updateMemberRole(index, 'EDITOR')
                  "
                />
                <SmartItem
                  label="VIEWER"
                  @click.native="
-                    updateRole(index, 'VIEWER')
-                    $refs.options.tippy().hide()
+                    $refs.memberOptions.tippy().hide()
+                    updateMemberRole(index, 'VIEWER')
                  "
                />
              </tippy>
@@ -122,7 +120,7 @@
          </div>
          <div
            v-for="(member, index) in newMembers"
-            :key="`member-${index}`"
+            :key="`new-member-${index}`"
            class="
              divide-x divide-dividerLight
              border-b border-dividerLight
@@ -146,7 +144,7 @@
            />
            <span class="select-wrapper">
              <tippy
-                ref="memberOptions"
+                ref="newMemberOptions"
                interactive
                tabindex="-1"
                trigger="click"
@@ -177,22 +175,22 @@
                <SmartItem
                  label="OWNER"
                  @click.native="
-                    member.value = 'OWNER'
-                    $refs.memberOptions.tippy().hide()
+                    $refs.newMemberOptions.tippy().hide()
+                    updateNewMemberRole(index, 'OWNER')
                  "
                />
                <SmartItem
                  label="EDITOR"
                  @click.native="
-                    member.value = 'EDITOR'
-                    $refs.memberOptions.tippy().hide()
+                    $refs.newMemberOptions.tippy().hide()
+                    updateNewMemberRole(index, 'EDITOR')
                  "
                />
                <SmartItem
                  label="VIEWER"
                  @click.native="
-                    member.value = 'VIEWER'
-                    $refs.memberOptions.tippy().hide()
+                    $refs.newMemberOptions.tippy().hide()
+                    updateNewMemberRole(index, 'VIEWER')
                  "
                />
              </tippy>
@@ -222,10 +220,11 @@

 <script>
 import cloneDeep from "lodash/cloneDeep"
+import { defineComponent } from "@nuxtjs/composition-api"
 import * as teamUtils from "~/helpers/teams/utils"
 import TeamMemberAdapter from "~/helpers/teams/TeamMemberAdapter"

-export default {
+export default defineComponent({
  props: {
    show: Boolean,
    editingTeam: { type: Object, default: () => {} },
@@ -263,12 +262,15 @@ export default {
    })
  },
  methods: {
-    updateRole(id, role) {
+    updateMemberRole(id, role) {
      this.members[id].role = role
    },
+    updateNewMemberRole(id, role) {
+      this.newMembers[id].value = role
+    },
    addTeamMember() {
-      const value = { key: "", value: "" }
-      this.newMembers.push(value)
+      const member = { key: "", value: "" }
+      this.newMembers.push(member)
    },
    removeExistingTeamMember(userID) {
      teamUtils
@@ -409,5 +411,5 @@ export default {
      this.$emit("hide-modal")
    },
  },
-}
+})
 </script>
--- a/components/teams/Team.vue
+++ b/components/teams/Team.vue
@@ -1,64 +1,81 @@
 <template>
-  <div class="flex flex-1">
-    <div>
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        :title="team.myRole === 'OWNER' ? $t('edit') : ''"
-        icon="group"
-        :label="team.name"
-        @click.native="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
-      />
+  <div class="flex flex-1 items-end">
+    <div class="flex flex-1 items-start">
+      <div class="p-4">
+        <label
+          class="
+            cursor-pointer
+            font-semibold
+            transition
+            hover:text-secondaryDark
+          "
+          @click="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
+        >
+          {{ team.name || $t("nothing_found") }}
+        </label>
+        <div class="flex -space-x-1 mt-2 overflow-hidden">
+          <img
+            v-for="(member, index) in team.members"
+            :key="`member-${index}`"
+            :src="member.user.photoURL"
+            :alt="member.user.displayName"
+            class="rounded-full h-4 ring-primary ring-2 w-4 inline-block"
+          />
+        </div>
+      </div>
    </div>
-    <tippy
-      ref="options"
-      interactive
-      tabindex="-1"
-      trigger="click"
-      theme="popover"
-      arrow
-    >
-      <template #trigger>
-        <TabPrimary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('more')"
-          icon="more_vert"
+    <span>
+      <tippy
+        ref="options"
+        interactive
+        tabindex="-1"
+        trigger="click"
+        theme="popover"
+        arrow
+      >
+        <template #trigger>
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('more')"
+            icon="more_vert"
+          />
+        </template>
+        <SmartItem
+          v-if="team.myRole === 'OWNER'"
+          icon="create"
+          :label="$t('edit')"
+          @click.native="
+            $emit('edit-team')
+            $refs.options.tippy().hide()
+          "
        />
-      </template>
-      <SmartItem
-        v-if="team.myRole === 'OWNER'"
-        icon="create"
-        :label="$t('edit')"
-        @click.native="
-          $emit('edit-team')
-          $refs.options.tippy().hide()
-        "
-      />
-      <SmartItem
-        v-if="team.myRole === 'OWNER'"
-        icon="delete"
-        color="red"
-        :label="$t('delete')"
-        @click.native="
-          deleteTeam
-          $refs.options.tippy().hide()
-        "
-      />
-      <SmartItem
-        v-tippy="{ theme: 'tooltip' }"
-        :title="
-          team.myRole === 'OWNER' && team.ownersCount == 1
-            ? $t('team.exit_disabled')
-            : ''
-        "
-        :disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
-        icon="remove"
-        :label="$t('team.exit')"
-        @click.native="
-          exitTeam
-          $refs.options.tippy().hide()
-        "
-      />
-    </tippy>
+        <SmartItem
+          v-if="team.myRole === 'OWNER'"
+          icon="delete"
+          color="red"
+          :label="$t('delete')"
+          @click.native="
+            deleteTeam
+            $refs.options.tippy().hide()
+          "
+        />
+        <SmartItem
+          v-tippy="{ theme: 'tooltip' }"
+          :title="
+            team.myRole === 'OWNER' && team.ownersCount == 1
+              ? $t('team.exit_disabled')
+              : ''
+          "
+          :disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
+          icon="remove"
+          :label="$t('team.exit')"
+          @click.native="
+            exitTeam
+            $refs.options.tippy().hide()
+          "
+        />
+      </tippy>
+    </span>
  </div>
 </template>

--- a/components/teams/index.vue
+++ b/components/teams/index.vue
@@ -1,22 +1,44 @@
 <template>
  <AppSection label="teams">
-    <div class="flex flex-col">
-      <legend class="font-bold text-secondaryDark">
-        {{ $t("team.title") }}
-      </legend>
-      <div v-if="currentUser"></div>
-      <div v-else>
-        <label>{{ $t("login_with") }}</label>
-        <p>
-          <ButtonPrimary
-            v-if="currentUser"
-            label="Get Started"
-            @click.native="showLogin = true"
-          />
-        </p>
+    <h4 class="font-bold text-secondaryDark">
+      {{ $t("team.title") }}
+    </h4>
+    <div class="mt-1 text-secondaryLight">
+      Join
+      <SmartAnchor label="beta" to="https://hoppscotch.io/beta" blank />
+      to access teams.
+    </div>
+    <div class="space-y-4 mt-4">
+      <ButtonSecondary
+        :label="$t('team.create_new')"
+        outline
+        @click.native="displayModalAdd(true)"
+      />
+      <p v-if="$apollo.queries.myTeams.loading">
+        {{ $t("loading") }}
+      </p>
+      <p v-if="myTeams.length === 0">
+        <i class="material-icons">help_outline</i> {{ $t("team.create_new") }}
+      </p>
+      <div
+        v-else
+        class="
+          divide-y divide-dividerLight
+          border border-divider
+          rounded
+          flex flex-col flex-1
+          md:w-64
+        "
+      >
+        <TeamsTeam
+          v-for="(team, index) in myTeams"
+          :key="`team-${index}`"
+          :team-i-d="team.id"
+          :team="team"
+          @edit-team="editTeam(team, team.id)"
+        />
      </div>
    </div>
-
    <TeamsAdd :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
    <TeamsEdit
      :team="myTeams[0]"
@@ -25,33 +47,6 @@
      :editingteam-i-d="editingteamID"
      @hide-modal="displayModalEdit(false)"
    />
-    <div class="flex flex-1">
-      <div>
-        <ButtonSecondary
-          icon="add"
-          :label="$t('new')"
-          @click.native="displayModalAdd(true)"
-        />
-      </div>
-    </div>
-    <p v-if="$apollo.queries.myTeams.loading">
-      {{ $t("loading") }}
-    </p>
-    <p v-if="myTeams.length === 0">
-      <i class="material-icons">help_outline</i> {{ $t("team.create_new") }}
-    </p>
-    <div v-else class="hide-scrollbar !overflow-auto">
-      <ul class="flex-col">
-        <li v-for="(team, index) in myTeams" :key="`team-${index}`">
-          <TeamsTeam
-            :team-i-d="team.id"
-            :team="team"
-            @edit-team="editTeam(team, team.id)"
-          />
-        </li>
-      </ul>
-    </div>
-    <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
  </AppSection>
 </template>

@@ -68,7 +63,6 @@ export default {
      editingteamID: "",
      me: {},
      myTeams: [],
-      showLogin: false,
    }
  },
  subscriptions() {
@@ -98,6 +92,7 @@ export default {
            ownersCount
            members {
              user {
+                photoURL
                displayName
                email
                uid