refactor: replaced table with hoppsmarttable in invited users page and code cleanup

2023-07-07 10:30:56 +05:30
parent dfabf7e8bc
commit 55c191305c
8 changed files with 126 additions and 518 deletions
--- a/packages/hoppscotch-sh-admin/src/pages/teams/index.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/teams/index.vue
@@ -13,7 +13,7 @@

      <div class="overflow-x-auto">
        <div
-          v-if="fetching && !error && teamList.length === 0"
+          v-if="fetching && !error && teamsList.length === 0"
          class="flex justify-center"
        >
          <HoppSmartSpinner />
@@ -21,13 +21,18 @@

        <div v-else-if="error">{{ t('teams.load_list_error') }}</div>

+        <div v-else-if="teamsList.length == 0" class="px-2">
+          <p class="text-lg">
+            {{ t('teams.no_teams') }}
+          </p>
+        </div>
+
        <HoppSmartTable
          v-else
-          :list="teamList"
+          :list="newTeamsList"
          :headings="headings"
          @goToDetails="goToTeamDetails"
          padding="px-6 py-3"
-          item-style="!hover:bg-red-600"
        >
          <template #action="{ item }">
            <td>
@@ -59,7 +64,7 @@
        </HoppSmartTable>

        <div
-          v-if="hasNextPage && teamList.length >= teamsPerPage"
+          v-if="hasNextPage && teamsList.length >= teamsPerPage"
          class="flex justify-center my-5 px-3 py-2 cursor-pointer font-semibold rounded-3xl bg-dividerDark hover:bg-divider transition mx-auto w-38 text-secondaryDark"
          @click="fetchNextTeams"
        >
@@ -127,7 +132,7 @@ const {
  error,
  goToNextPage: fetchNextTeams,
  refetch,
-  list: list,
+  list: teamsList,
  hasNextPage,
 } = usePagedQuery(
  TeamListDocument,
@@ -137,8 +142,9 @@ const {
  { cursor: undefined, take: teamsPerPage }
 );

-const teamList = computed(() => {
-  return list.value.map((team) => {
+// The new teams list that is used in the table
+const newTeamsList = computed(() => {
+  return teamsList.value.map((team) => {
    return {
      id: team.id || '',
      name: team.name || '',
@@ -147,7 +153,8 @@ const teamList = computed(() => {
  });
 });

-const headings = ['Team ID', 'Team Name', 'Number of Members', ''];
+// Headers that are used in the table
+const headings = [t('teams.id'), t('teams.name'), t('teams.members'), ''];

 // Create Team
 const createTeamMutation = useMutation(CreateTeamDocument);
@@ -216,7 +223,7 @@ const deleteTeamMutation = async (id: string | null) => {
    if (result.error) {
      toast.error(`${t('state.delete_team_failure')}`);
    } else {
-      list.value = list.value.filter((team) => team.id !== id);
+      teamsList.value = teamsList.value.filter((team) => team.id !== id);
      toast.success(`${t('state.delete_team_success')}`);
    }
  });
--- a/packages/hoppscotch-sh-admin/src/pages/users/index.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/users/index.vue
@@ -31,27 +31,16 @@

        <div v-else-if="error">{{ t('users.load_list_error') }}</div>

-        <!-- <UsersTable
-          v-else-if="usersList.length >= 1"
-          :usersList="usersList"
-          :fetching="fetching"
-          :error="error"
-          @goToUserDetails="goToUserDetails"
-          @makeUserAdmin="makeUserAdmin"
-          @makeAdminToUser="makeAdminToUser"
-          @deleteUser="deleteUser"
-        /> -->
-
        <HoppSmartTable
          v-else-if="usersList.length >= 1"
          padding="px-6 py-3"
          :list="newUsersList"
          :headings="headings"
          @goToDetails="goToUserDetails"
-          badge-name="Admin"
-          :badge-row-index="adminUsers"
+          :badge-name="t('users.admin')"
+          :badge-row-index="adminUsersIndexes"
          badge-col-name="name"
-          :subtitle="subtitle"
+          :subtitles="subtitles"
        >
          <template #action="{ item }">
            <td>
@@ -140,7 +129,7 @@

 <script setup lang="ts">
 import { format } from 'date-fns';
-import { computed, onMounted, reactive, ref, watch } from 'vue';
+import { computed, reactive, ref, watch } from 'vue';
 import { useMutation } from '@urql/vue';
 import {
  InviteNewUserDocument,
@@ -148,6 +137,7 @@ import {
  RemoveUserByAdminDocument,
  RemoveUserAsAdminDocument,
  UsersListDocument,
+  UsersListQuery,
 } from '../../helpers/backend/graphql';
 import { usePagedQuery } from '~/composables/usePagedQuery';
 import { useRoute, useRouter } from 'vue-router';
@@ -168,12 +158,6 @@ const t = useI18n();

 const toast = useToast();

-const isUserAdmin = (selectedUser: any) => {
-  return usersList.value.filter((user) => {
-    return user.uid === selectedUser.uid;
-  })[0].isAdmin;
-};
-
 // Get Paginated Results of all the users in the infra
 const usersPerPage = 20;
 const {
@@ -190,6 +174,7 @@ const {
  { cursor: undefined, take: usersPerPage }
 );

+// The new users list that is used in the table
 const newUsersList = computed(() => {
  return usersList.value.map((user) => {
    return {
@@ -201,32 +186,37 @@ const newUsersList = computed(() => {
  });
 });

-const headings = ['User UID', 'Name', 'Email', 'Created On', ''];
+const isUserAdmin = (selectedUser: UsersListQuery['admin']['allUsers']) => {
+  return usersList.value.filter((user) => {
+    return user.uid === selectedUser.uid;
+  })[0].isAdmin;
+};

-const adminUsers = computed(() => {
-  return usersList.value.map((user, index) => {
+// Returns index of all the admin users
+const adminUsersIndexes = computed(() =>
+  usersList.value.map((user, index) => {
    if (user.isAdmin) {
      return index;
    }
-  });
-});
+  })
+);

-const createdTime = computed(() => {
-  return usersList.value.map((user) => {
-    return getCreatedTime(user.createdOn);
-  });
-});
+// Returns created time of all the users
+const createdTime = computed(() =>
+  usersList.value.map((user) => getCreatedTime(user.createdOn))
+);

-onMounted(() => {
-  console.log(createdTime);
+// Headers that are used in the table
+const headings = [
+  t('users.id'),
+  t('users.name'),
+  t('users.email'),
+  t('users.date'),
+  '',
+];

-  console.log(createdTime.value);
-  for (var item in createdTime.value) {
-    console.log(item);
-  }
-});
-
-const subtitle = reactive([
+// Subtitles that are used in the table
+const subtitles = reactive([
  {
    colName: 'createdOn',
    subtitle: createdTime,
--- a/packages/hoppscotch-sh-admin/src/pages/users/invited.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/users/invited.vue
@@ -16,64 +16,21 @@
          <div v-if="fetching" class="flex justify-center">
            <HoppSmartSpinner />
          </div>
-          <div v-else-if="error || invitedUsers === undefined">
+          <div
+            v-else-if="
+              error || invitedUsers === undefined || invitedUsers.length === 0
+            "
+          >
            <p class="text-xl">{{ t('users.no_invite') }}</p>
          </div>

-          <table v-else class="w-full text-left">
-            <thead>
-              <tr
-                class="text-secondary border-b border-dividerDark text-sm text-left"
-              >
-                <th class="px-3 pb-3">{{ t('users.admin_id') }}</th>
-                <th class="px-3 pb-3">{{ t('users.admin_email') }}</th>
-                <th class="px-3 pb-3">{{ t('users.invitee_email') }}</th>
-                <th class="px-3 pb-3">{{ t('users.invited_on') }}</th>
-              </tr>
-            </thead>
-            <tbody class="divide-y divide-divider">
-              <tr
-                v-if="invitedUsers.length === 0"
-                class="text-secondaryDark py-4"
-              >
-                <div class="py-6 px-3">{{ t('users.no_invite') }}</div>
-              </tr>
-              <tr
-                v-else
-                v-for="(user, index) in invitedUsers"
-                :key="index"
-                class="text-secondaryDark hover:bg-zinc-800 hover:cursor-pointer rounded-xl"
-              >
-                <td class="py-2 px-3 max-w-30">
-                  <div>
-                    <span class="truncate">
-                      {{ user?.adminUid }}
-                    </span>
-                  </div>
-                </td>
-                <td class="py-2 px-3">
-                  <span class="flex items-center">
-                    {{ user?.adminEmail }}
-                  </span>
-                </td>
-                <td class="py-2 px-3">
-                  <span>
-                    {{ user?.inviteeEmail }}
-                  </span>
-                </td>
-                <td class="py-2 px-3">
-                  <div class="flex items-center">
-                    <div class="flex flex-col">
-                      {{ getCreatedDate(user?.invitedOn) }}
-                      <div class="text-gray-400 text-xs">
-                        {{ getCreatedTime(user?.invitedOn) }}
-                      </div>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+          <HoppSmartTable
+            v-else
+            padding="px-6 py-3"
+            :list="newInvitedUsersList"
+            :headings="headings"
+            :subtitles="subtitles"
+          />
        </div>
      </div>
    </div>
@@ -81,7 +38,7 @@
 </template>

 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, reactive } from 'vue';
 import { useQuery } from '@urql/vue';
 import { InvitedUsersDocument } from '../../helpers/backend/graphql';
 import { format } from 'date-fns';
@@ -100,4 +57,39 @@ const getCreatedTime = (date: string) => format(new Date(date), 'hh:mm a');
 // Get Invited Users
 const { fetching, error, data } = useQuery({ query: InvitedUsersDocument });
 const invitedUsers = computed(() => data?.value?.admin.invitedUsers);
+
+// The new invited users list that is used in the table
+const newInvitedUsersList = computed(() => {
+  return invitedUsers.value?.map((user) => {
+    return {
+      adminUid: user.adminUid || '',
+      adminEmail: user.adminEmail || '',
+      inviteeEmail: user.inviteeEmail || '',
+      invitedOn: getCreatedDate(user.invitedOn) || '',
+    };
+  });
+});
+
+// Returns the created time of all the invited user
+const createdTime = computed(() => {
+  return invitedUsers.value?.map((user) => {
+    return getCreatedTime(user.invitedOn);
+  });
+});
+
+// Headings used in the table
+const headings = [
+  t('users.admin_id'),
+  t('users.admin_email'),
+  t('users.invitee_email'),
+  t('users.invited_on'),
+];
+
+// Subtitles used in the table
+const subtitles = reactive([
+  {
+    colName: 'invitedOn',
+    subtitle: createdTime,
+  },
+]);
 </script>