refactor: remove badges and subtitle implementation from table and used slots instead

packages/hoppscotch-sh-admin/src/components.d.ts

@@ -23,11 +23,9 @@ declare module '@vue/runtime-core' {
     HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
     HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
     HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
-    HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
     HoppSmartTable: typeof import('@hoppscotch/ui')['HoppSmartTable']
     IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
     IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
-    IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default']
     IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
     IconLucideUser: typeof import('~icons/lucide/user')['default']
     TeamsAdd: typeof import('./components/teams/Add.vue')['default']

packages/hoppscotch-sh-admin/src/pages/teams/index.vue

@@ -27,8 +27,8 @@
           </p>
         </div>
 
+        <div v-else class="m-5">
           <HoppSmartTable
-          v-else
             :list="newTeamsList"
             :headings="headings"
             @goToDetails="goToTeamDetails"
@@ -62,6 +62,7 @@
               </td>
             </template>
           </HoppSmartTable>
+        </div>
 
         <div
           v-if="hasNextPage && teamsList.length >= teamsPerPage"

packages/hoppscotch-sh-admin/src/pages/users/index.vue

@@ -31,17 +31,59 @@
 
         <div v-else-if="error">{{ t('users.load_list_error') }}</div>
 
+        <div v-else-if="usersList.length >= 1" class="m-5">
           <HoppSmartTable
-          v-else-if="usersList.length >= 1"
+            cell-styles="px-6 py-1"
-          cell-styles="px-6 py-2"
             :list="newUsersList"
             :headings="headings"
+            :modify-col-names="colNames"
             @goToDetails="goToUserDetails"
-          :badge-name="t('users.admin')"
-          :badge-row-indices="adminUsersIndices"
-          badge-col-name="name"
-          :subtitles="subtitles"
           >
+            <template #name="{ item }">
+              <div>
+                <div class="flex flex-col truncate justify-center">
+                  <span
+                    v-if="item.name.length"
+                    class="my-1 truncate whitespace-normal"
+                  >
+                    {{ item.name }}
+                  </span>
+
+                  <span
+                    v-if="item.name.length === 0 && !isUserAdmin(item)"
+                    class="mx-auto justify-center"
+                    >-</span
+                  >
+
+                  <span
+                    v-if="isUserAdmin(item)"
+                    class="text-xs font-medium px-3 py-1 my-1 rounded-full bg-green-900 text-green-300 w-min"
+                  >
+                    Admin
+                  </span>
+                </div>
+              </div>
+            </template>
+
+            <template #createdOn="{ item }">
+              <div class="flex flex-col truncate">
+                <span v-if="item" class="truncate">
+                  {{ getCreatedDate(item.createdOn) }}
+                </span>
+                <span v-else> - </span>
+
+                <div>
+                  <div class="text-gray-400 text-tiny">
+                    <span>
+                      <span>
+                        {{ getCreatedTime(item.createdOn) }}
+                      </span>
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </template>
+
             <template #action="{ item }">
               <td>
                 <div class="relative">
@@ -87,6 +129,7 @@
               </td>
             </template>
           </HoppSmartTable>
+        </div>
 
         <div v-else class="flex justify-center">{{ t('users.no_users') }}</div>
 
@@ -181,7 +224,7 @@ const newUsersList = computed(() => {
       uid: user.uid,
       name: user.displayName ?? '',
       email: user.email ?? '',
-      createdOn: getCreatedDate(user.createdOn),
+      createdOn: user.createdOn,
     };
   });
 });
@@ -194,19 +237,6 @@ const isUserAdmin = (
   })[0].isAdmin;
 };
 
-// Returns index of all the admin users
-const adminUsersIndices = computed(() => {
-  const indices = [];
-  for (let index = 0; index < usersList.value.length; index++)
-    if (usersList.value[index].isAdmin) indices.push(index);
-  return indices;
-});
-
-// Returns created time of all the users
-const createdTime = computed(() =>
-  usersList.value.map((user) => getCreatedTime(user.createdOn))
-);
-
 // Headers that are used in the table
 const headings = [
   t('users.id'),
@@ -216,13 +246,8 @@ const headings = [
   '',
 ];
 
-// Subtitles that are used in the table
+//Names of the columns to be modified by this component
-const subtitles = reactive([
+const colNames = ['name', 'createdOn'];
-  {
-    colName: 'createdOn',
-    subtitle: createdTime,
-  },
-]);
 
 // Send Invitation through Email
 const sendInvitation = useMutation(InviteNewUserDocument);

packages/hoppscotch-sh-admin/src/pages/users/invited.vue

@@ -24,13 +24,33 @@
             <p class="text-xl">{{ t('users.no_invite') }}</p>
           </div>
 
+          <div v-else class="m-5">
             <HoppSmartTable
-            v-else
+              cell-styles="px-6 py-1"
-            cell-styles="px-6 py-2"
               :list="newInvitedUsersList"
               :headings="headings"
-            :subtitles="subtitles"
+              :modify-col-names="colNames"
-          />
+            >
+              <template #invitedOn="{ item }">
+                <div class="flex flex-col truncate">
+                  <span v-if="item" class="truncate">
+                    {{ getCreatedDate(item.invitedOn) }}
+                  </span>
+                  <span v-else> - </span>
+
+                  <div>
+                    <div class="text-gray-400 text-tiny">
+                      <span>
+                        <span>
+                          {{ getCreatedTime(item.invitedOn) }}
+                        </span>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </HoppSmartTable>
+          </div>
         </div>
       </div>
     </div>
@@ -38,7 +58,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, reactive } from 'vue';
+import { computed } from 'vue';
 import { useQuery } from '@urql/vue';
 import { InvitedUsersDocument } from '../../helpers/backend/graphql';
 import { format } from 'date-fns';
@@ -65,18 +85,11 @@ const newInvitedUsersList = computed(() => {
       adminUid: user.adminUid,
       adminEmail: user.adminEmail,
       inviteeEmail: user.inviteeEmail,
-      invitedOn: getCreatedDate(user.invitedOn),
+      invitedOn: 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'),
@@ -85,11 +98,5 @@ const headings = [
   t('users.invited_on'),
 ];
 
-// Subtitles used in the table
+const colNames = ['invitedOn'];
-const subtitles = reactive([
-  {
-    colName: 'invitedOn',
-    subtitle: createdTime,
-  },
-]);
 </script>

packages/hoppscotch-ui/src/components/smart/Table.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="overflow-auto rounded-md border border-dividerDark shadow-md m-5">
+  <div class="overflow-auto rounded-md border border-dividerDark shadow-md">
     <table class="w-full">
       <thead class="bg-primaryLight">
         <tr
@@ -25,57 +25,18 @@
             class="max-w-40"
             :class="cellStyles"
           >
+            <!-- Custom implementation of the particular column -->
             <div class="flex items-center">
-              <!-- Column with Badge -->
+              <div v-if="modifyColNames?.includes(colIndex.toString())">
-              <div
+                <slot :name="colIndex.toString()" :item="item"></slot>
-                v-if="
-                  colIndex.toString() === badgeColName &&
-                  badgeRowIndices?.includes(rowIndex)
-                "
-              >
-                <div class="flex flex-col truncate">
-                  <span v-if="data" class="mt-1 truncate whitespace-normal">
-                    {{ data }}
-                  </span>
-
-                  <span
-                    class="text-xs font-medium px-3 py-1 my-1 rounded-full bg-green-900 text-green-300 w-min"
-                  >
-                    {{ badgeName }}
-                  </span>
-                </div>
               </div>
 
-              <!-- Column with Subtitles -->
+              <!-- Generic implementation of the column -->
-              <div
+              <div v-else class="flex flex-col truncate text-center">
-                v-else-if="subtitleColumns.includes(colIndex.toString())"
-                class="flex flex-col truncate"
-              >
                 <span v-if="data" class="truncate">
                   {{ data }}
                 </span>
-                <span v-else> - </span>
+                <span v-else class=""> - </span>
-
-                <div v-for="item in subtitles">
-                  <div
-                    v-if="item.colName === colIndex.toString()"
-                    class="text-gray-400 text-tiny"
-                  >
-                    <span>
-                      <span>
-                        {{ itemSubtitle(item.subtitle, rowIndex) }}
-                      </span>
-                    </span>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Column with no subtitle or badge -->
-              <div v-else class="flex flex-col truncate">
-                <span v-if="data" class="truncate">
-                  {{ data }}
-                </span>
-                <span v-else> - </span>
               </div>
             </div>
           </td>
@@ -88,9 +49,7 @@
 </template>
 
 <script lang="ts" setup generic="Item extends Record<string, unknown>">
-import { computed } from "vue"
+defineProps<{
-
-const props = defineProps<{
   /** Whether to show the vertical border between columns */
   yBorder?: boolean
   /**  The list of items to be displayed in the table */
@@ -99,31 +58,11 @@ const props = defineProps<{
   headings: string[]
   /** The styles to be applied to the table cells */
   cellStyles?: string
-  /** The name of the badge */
+  /** The names of the columns which have to modified using slots */
-  badgeName?: string
+  modifyColNames?: string[]
-  /** The indices of the rows that needs to have a badge */
-  badgeRowIndices?: (number | undefined)[]
-  /** The index of the column that needs to have a badge */
-  badgeColName?: string
-  /** The subtitles to be displayed for the columns */
-  subtitles?: Array<{
-    /** The name of the column that needs to have a subtitle */
-    colName: string
-    /** The subtitle to be displayed for the column */
-    subtitle: string | string[]
-  }>
 }>()
 
 defineEmits<{
   (event: "goToDetails", item: Item): void
 }>()
-
-// Returns all the columns that needs to have a subtitle
-const subtitleColumns = computed(() =>
-  props.subtitles ? props.subtitles.map((item) => item.colName) : []
-)
-
-// Returns the subtitle for the given column and row
-const itemSubtitle = (subtitle: string | string[], rowIndex: number) =>
-  typeof subtitle === "object" ? subtitle[rowIndex] : subtitle
 </script>