feat: introducing badges and subtitle support for table

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

@@ -44,15 +44,15 @@
 
         <HoppSmartTable
           v-else-if="usersList.length >= 1"
+          padding="px-6 py-3"
           :list="newUsersList"
           :headings="headings"
           @goToDetails="goToUserDetails"
-          :subtitle="{
-            index: 'name',
-            label: 'Admin',
-          }"
-          hide-col="isAdmin"
-          padding="px-6 py-3"
+          badge-name="Admin"
+          :badge-row-index="adminUsers"
+          badge-col-name="name"
+          subtitle-col-name="createdOn"
+          :subtitle="createdTime"
         >
           <template #action="{ item }">
             <td>
@@ -202,7 +202,21 @@ const newUsersList = computed(() => {
   });
 });
 
-const headings = ['User UID', 'Name', 'Email', 'Created On'];
+const headings = ['User UID', 'Name', 'Email', 'Created On', ''];
+
+const adminUsers = computed(() => {
+  return usersList.value.map((user, index) => {
+    if (user.isAdmin) {
+      return index;
+    }
+  });
+});
+
+const createdTime = computed(() => {
+  return usersList.value.map((user) => {
+    return getCreatedTime(user.createdOn);
+  });
+});
 
 // Send Invitation through Email
 const sendInvitation = useMutation(InviteNewUserDocument);

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

@@ -15,61 +15,50 @@
 
       <tbody class="divide-y divide-divider">
         <tr
-          v-for="item in list"
+          v-for="(item, rowIndex) in list"
           :key="item.id"
           class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"
           :class="xBorder ? 'divide-x divide-divider' : ''"
         >
           <td
-            v-for="(data, index) in item"
-            :key="index"
+            v-for="(data, colIndex) in item"
+            :key="colIndex"
             @click="$emit('goToDetails', item)"
             class="max-w-40"
             :class="padding"
           >
             <div class="flex items-center">
-              <div class="flex flex-col">
-                {{ data }}
-                <!-- <div v-if="subdata" class="text-gray-400 text-tiny">
-                  {{ subdata }}
-                </div> -->
-              </div>
-            </div>
-          </td>
-
-          <!-- <td @click="$emit('goToUserDetails', user.uid)" class="py-2 px-3">
-            <div class="flex items-center">
-              <div class="flex flex-col">
-                {{ getCreatedDate(user.createdOn) }}
-                <div class="text-gray-400 text-tiny">
-                  {{ getCreatedTime(user.createdOn) }}
+              <!-- Column with Badge -->
+              <div
+                v-if="
+                  colIndex.toString() === badgeColName &&
+                  badgeRowIndex.includes(rowIndex)
+                "
+              >
+                <div class="flex flex-col">
+                  {{ data }}
+                  <span
+                    class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
+                  >
+                    {{ badgeName }}
+                  </span>
                 </div>
               </div>
-            </div>
-          </td> -->
-
-          <!-- <td @click="$emit('goToUserDetails', user.uid)" class="py-2 px-3">
-            <div v-if="user.displayName" class="flex items-center space-x-3">
-              <span>
-                {{ user.displayName }}
-              </span>
-              <span
-                v-if="user.isAdmin"
-                class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
+              <!-- Column with Subtitles -->
+              <div
+                v-else-if="colIndex.toString() === subtitleColName"
+                class="flex flex-col"
               >
-                Admin
-              </span>
+                <div>
+                  {{ data }}
+                  <div class="text-gray-400 text-tiny">
+                    {{ subtitle[rowIndex] }}
+                  </div>
+                </div>
+              </div>
+              <div v-else class="flex flex-col">{{ data }}</div>
             </div>
-            <div v-else class="flex items-center space-x-3">
-              <span> (Unnamed user) </span>
-              <span
-                v-if="user.isAdmin"
-                class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
-              >
-                Admin
-              </span>
-            </div>
-          </td> -->
+          </td>
 
           <slot name="action" :item="item"></slot>
         </tr>
@@ -85,19 +74,16 @@ defineProps<{
   headings: []
   padding: string
   itemStyle: string
-  subtitle: {
-    index: string
-    label: string
-  }
-  hideCol: number
+  badgeName: string
+  badgeRowIndex: (number | undefined)[]
+  badgeColName: string
+  subtitleColName: string
+  subtitle: []
 }>()
 
 defineEmits<{
   (event: "goToDetails", uid: string): void
   (event: "id", uid: string): void
-  (event: "makeUserAdmin", uid: string): void
-  (event: "makeAdminToUser", uid: string): void
-  (event: "deleteUser", uid: string): void
 }>()
 </script>