From 24f32d79b38aad80a7ceb0e5445044ffea889a3d Mon Sep 17 00:00:00 2001
From: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com>
Date: Thu, 20 Jul 2023 17:07:26 +0530
Subject: [PATCH] refactor: remove badges and subtitle implementation from
 table and used slots instead

---
 .../hoppscotch-sh-admin/src/components.d.ts   |   2 -
 .../src/pages/teams/index.vue                 |  71 +++----
 .../src/pages/users/index.vue                 | 177 ++++++++++--------
 .../src/pages/users/invited.vue               |  53 +++---
 .../src/components/smart/Table.vue            |  81 +-------
 5 files changed, 177 insertions(+), 207 deletions(-)

diff --git a/packages/hoppscotch-sh-admin/src/components.d.ts b/packages/hoppscotch-sh-admin/src/components.d.ts
index 3a217ec91..57133841b 100644
--- a/packages/hoppscotch-sh-admin/src/components.d.ts
+++ b/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']
diff --git a/packages/hoppscotch-sh-admin/src/pages/teams/index.vue b/packages/hoppscotch-sh-admin/src/pages/teams/index.vue
index 657a01bdb..e79ce868a 100644
--- a/packages/hoppscotch-sh-admin/src/pages/teams/index.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/teams/index.vue
@@ -27,41 +27,42 @@
           </p>
         </div>
 
-        <HoppSmartTable
-          v-else
-          :list="newTeamsList"
-          :headings="headings"
-          @goToDetails="goToTeamDetails"
-          cell-styles="px-6 py-3"
-        >
-          <template #action="{ item }">
-            <td>
-              <div class="relative">
-                <tippy interactive trigger="click" theme="popover">
-                  <HoppButtonSecondary
-                    v-tippy="{ theme: 'tooltip' }"
-                    :icon="IconMoreHorizontal"
-                  />
-                  <template #content="{ hide }">
-                    <div
-                      ref="tippyActions"
-                      class="flex flex-col focus:outline-none"
-                      tabindex="0"
-                      @keyup.escape="hide()"
-                    >
-                      <HoppSmartItem
-                        :icon="IconTrash"
-                        :label="t('teams.delete_team')"
-                        class="!hover:bg-red-600 w-full"
-                        @click="deleteTeam(item)"
-                      />
-                    </div>
-                  </template>
-                </tippy>
-              </div>
-            </td>
-          </template>
-        </HoppSmartTable>
+        <div v-else class="m-5">
+          <HoppSmartTable
+            :list="newTeamsList"
+            :headings="headings"
+            @goToDetails="goToTeamDetails"
+            cell-styles="px-6 py-3"
+          >
+            <template #action="{ item }">
+              <td>
+                <div class="relative">
+                  <tippy interactive trigger="click" theme="popover">
+                    <HoppButtonSecondary
+                      v-tippy="{ theme: 'tooltip' }"
+                      :icon="IconMoreHorizontal"
+                    />
+                    <template #content="{ hide }">
+                      <div
+                        ref="tippyActions"
+                        class="flex flex-col focus:outline-none"
+                        tabindex="0"
+                        @keyup.escape="hide()"
+                      >
+                        <HoppSmartItem
+                          :icon="IconTrash"
+                          :label="t('teams.delete_team')"
+                          class="!hover:bg-red-600 w-full"
+                          @click="deleteTeam(item)"
+                        />
+                      </div>
+                    </template>
+                  </tippy>
+                </div>
+              </td>
+            </template>
+          </HoppSmartTable>
+        </div>
 
         <div
           v-if="hasNextPage && teamsList.length >= teamsPerPage"
diff --git a/packages/hoppscotch-sh-admin/src/pages/users/index.vue b/packages/hoppscotch-sh-admin/src/pages/users/index.vue
index 9e60b79f7..b8f9d2fee 100644
--- a/packages/hoppscotch-sh-admin/src/pages/users/index.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/users/index.vue
@@ -31,62 +31,105 @@
 
         <div v-else-if="error">{{ t('users.load_list_error') }}</div>
 
-        <HoppSmartTable
-          v-else-if="usersList.length >= 1"
-          cell-styles="px-6 py-2"
-          :list="newUsersList"
-          :headings="headings"
-          @goToDetails="goToUserDetails"
-          :badge-name="t('users.admin')"
-          :badge-row-indices="adminUsersIndices"
-          badge-col-name="name"
-          :subtitles="subtitles"
-        >
-          <template #action="{ item }">
-            <td>
-              <div class="relative">
-                <span>
-                  <tippy interactive trigger="click" theme="popover">
-                    <HoppButtonSecondary
-                      v-tippy="{ theme: 'tooltip' }"
-                      :icon="IconMoreHorizontal"
-                    />
-                    <template #content="{ hide }">
-                      <div
-                        ref="tippyActions"
-                        class="flex flex-col focus:outline-none"
-                        tabindex="0"
-                        @keyup.escape="hide()"
-                      >
-                        <HoppSmartItem
-                          v-if="!isUserAdmin(item)"
-                          :icon="IconUserCheck"
-                          :label="t('users.make_admin')"
-                          class="!hover:bg-emerald-600"
-                          @click="makeUserAdmin(item)"
-                        />
-                        <HoppSmartItem
-                          v-else
-                          :icon="IconUserMinus"
-                          :label="t('users.remove_admin_status')"
-                          class="!hover:bg-emerald-600"
-                          @click="makeAdminToUser(item)"
-                        />
-                        <HoppSmartItem
-                          v-if="!isUserAdmin(item)"
-                          :icon="IconTrash"
-                          :label="t('users.delete_user')"
-                          class="!hover:bg-red-600"
-                          @click="deleteUser(item)"
-                        />
-                      </div>
-                    </template>
-                  </tippy>
-                </span>
+        <div v-else-if="usersList.length >= 1" class="m-5">
+          <HoppSmartTable
+            cell-styles="px-6 py-1"
+            :list="newUsersList"
+            :headings="headings"
+            :modify-col-names="colNames"
+            @goToDetails="goToUserDetails"
+          >
+            <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>
-            </td>
-          </template>
-        </HoppSmartTable>
+            </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">
+                  <span>
+                    <tippy interactive trigger="click" theme="popover">
+                      <HoppButtonSecondary
+                        v-tippy="{ theme: 'tooltip' }"
+                        :icon="IconMoreHorizontal"
+                      />
+                      <template #content="{ hide }">
+                        <div
+                          ref="tippyActions"
+                          class="flex flex-col focus:outline-none"
+                          tabindex="0"
+                          @keyup.escape="hide()"
+                        >
+                          <HoppSmartItem
+                            v-if="!isUserAdmin(item)"
+                            :icon="IconUserCheck"
+                            :label="t('users.make_admin')"
+                            class="!hover:bg-emerald-600"
+                            @click="makeUserAdmin(item)"
+                          />
+                          <HoppSmartItem
+                            v-else
+                            :icon="IconUserMinus"
+                            :label="t('users.remove_admin_status')"
+                            class="!hover:bg-emerald-600"
+                            @click="makeAdminToUser(item)"
+                          />
+                          <HoppSmartItem
+                            v-if="!isUserAdmin(item)"
+                            :icon="IconTrash"
+                            :label="t('users.delete_user')"
+                            class="!hover:bg-red-600"
+                            @click="deleteUser(item)"
+                          />
+                        </div>
+                      </template>
+                    </tippy>
+                  </span>
+                </div>
+              </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
-const subtitles = reactive([
-  {
-    colName: 'createdOn',
-    subtitle: createdTime,
-  },
-]);
+//Names of the columns to be modified by this component
+const colNames = ['name', 'createdOn'];
 
 // Send Invitation through Email
 const sendInvitation = useMutation(InviteNewUserDocument);
diff --git a/packages/hoppscotch-sh-admin/src/pages/users/invited.vue b/packages/hoppscotch-sh-admin/src/pages/users/invited.vue
index ff0b36dc4..19954f535 100644
--- a/packages/hoppscotch-sh-admin/src/pages/users/invited.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/users/invited.vue
@@ -24,13 +24,33 @@
             <p class="text-xl">{{ t('users.no_invite') }}</p>
           </div>
 
-          <HoppSmartTable
-            v-else
-            cell-styles="px-6 py-2"
-            :list="newInvitedUsersList"
-            :headings="headings"
-            :subtitles="subtitles"
-          />
+          <div v-else class="m-5">
+            <HoppSmartTable
+              cell-styles="px-6 py-1"
+              :list="newInvitedUsersList"
+              :headings="headings"
+              :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 subtitles = reactive([
-  {
-    colName: 'invitedOn',
-    subtitle: createdTime,
-  },
-]);
+const colNames = ['invitedOn'];
 </script>
diff --git a/packages/hoppscotch-ui/src/components/smart/Table.vue b/packages/hoppscotch-ui/src/components/smart/Table.vue
index 158521ee2..9e61fcc6f 100644
--- a/packages/hoppscotch-ui/src/components/smart/Table.vue
+++ b/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="
-                  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 v-if="modifyColNames?.includes(colIndex.toString())">
+                <slot :name="colIndex.toString()" :item="item"></slot>
               </div>
 
-              <!-- Column with Subtitles -->
-              <div
-                v-else-if="subtitleColumns.includes(colIndex.toString())"
-                class="flex flex-col truncate"
-              >
+              <!-- Generic implementation of the column -->
+              <div v-else class="flex flex-col truncate text-center">
                 <span v-if="data" class="truncate">
                   {{ data }}
                 </span>
-                <span v-else> - </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>
+                <span v-else class=""> - </span>
               </div>
             </div>
           </td>
@@ -88,9 +49,7 @@
 </template>
 
 <script lang="ts" setup generic="Item extends Record<string, unknown>">
-import { computed } from "vue"
-
-const props = defineProps<{
+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 */
-  badgeName?: 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[]
-  }>
+  /** The names of the columns which have to modified using slots */
+  modifyColNames?: 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>