From d5e421134755001da66a27cbf062be976d98f20b Mon Sep 17 00:00:00 2001
From: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com>
Date: Thu, 20 Jul 2023 21:51:08 +0530
Subject: [PATCH] refactor: renamed emit event and removed action slot

---
 .../hoppscotch-sh-admin/src/components.d.ts   |  3 +
 .../src/pages/teams/index.vue                 | 54 +++++------
 .../src/pages/users/index.vue                 | 91 +++++++++----------
 .../src/components/smart/Table.vue            | 27 +++---
 4 files changed, 87 insertions(+), 88 deletions(-)

diff --git a/packages/hoppscotch-sh-admin/src/components.d.ts b/packages/hoppscotch-sh-admin/src/components.d.ts
index 57133841b..6b781eed5 100644
--- a/packages/hoppscotch-sh-admin/src/components.d.ts
+++ b/packages/hoppscotch-sh-admin/src/components.d.ts
@@ -22,10 +22,13 @@ declare module '@vue/runtime-core' {
     HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
     HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
     HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
+    HoppSmartPlaceholder: typeof import('@hoppscotch/ui')['HoppSmartPlaceholder']
     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 e79ce868a..c9036a747 100644
--- a/packages/hoppscotch-sh-admin/src/pages/teams/index.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/teams/index.vue
@@ -31,35 +31,34 @@
           <HoppSmartTable
             :list="newTeamsList"
             :headings="headings"
-            @goToDetails="goToTeamDetails"
-            cell-styles="px-6 py-3"
+            @openRowContent="goToTeamDetails"
+            :modify-col-names="['action']"
+            cell-styles="px-6 py-1"
           >
             <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>
+              <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>
             </template>
           </HoppSmartTable>
         </div>
@@ -150,6 +149,7 @@ const newTeamsList = computed(() => {
       id: team.id,
       name: team.name,
       members: team.members.length,
+      action: '',
     };
   });
 });
diff --git a/packages/hoppscotch-sh-admin/src/pages/users/index.vue b/packages/hoppscotch-sh-admin/src/pages/users/index.vue
index b8f9d2fee..e78d5d974 100644
--- a/packages/hoppscotch-sh-admin/src/pages/users/index.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/users/index.vue
@@ -37,7 +37,7 @@
             :list="newUsersList"
             :headings="headings"
             :modify-col-names="colNames"
-            @goToDetails="goToUserDetails"
+            @openRowContent="goToUserDetails"
           >
             <template #name="{ item }">
               <div>
@@ -49,9 +49,7 @@
                     {{ item.name }}
                   </span>
 
-                  <span
-                    v-if="item.name.length === 0 && !isUserAdmin(item)"
-                    class="mx-auto justify-center"
+                  <span v-if="item.name.length === 0 && !isUserAdmin(item)"
                     >-</span
                   >
 
@@ -85,48 +83,46 @@
             </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>
+              <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>
             </template>
           </HoppSmartTable>
         </div>
@@ -225,6 +221,7 @@ const newUsersList = computed(() => {
       name: user.displayName ?? '',
       email: user.email ?? '',
       createdOn: user.createdOn,
+      action: '',
     };
   });
 });
@@ -247,7 +244,7 @@ const headings = [
 ];
 
 //Names of the columns to be modified by this component
-const colNames = ['name', 'createdOn'];
+const colNames = ['name', 'createdOn', 'action'];
 
 // Send Invitation through Email
 const sendInvitation = useMutation(InviteNewUserDocument);
diff --git a/packages/hoppscotch-ui/src/components/smart/Table.vue b/packages/hoppscotch-ui/src/components/smart/Table.vue
index 9e61fcc6f..f825274b0 100644
--- a/packages/hoppscotch-ui/src/components/smart/Table.vue
+++ b/packages/hoppscotch-ui/src/components/smart/Table.vue
@@ -21,27 +21,26 @@
           <td
             v-for="(data, colIndex) in item"
             :key="colIndex"
-            @click="$emit('goToDetails', item)"
+            @click="$emit('openRowContent', item)"
             class="max-w-40"
             :class="cellStyles"
           >
             <!-- Custom implementation of the particular column -->
-            <div class="flex items-center">
-              <div v-if="modifyColNames?.includes(colIndex.toString())">
-                <slot :name="colIndex.toString()" :item="item"></slot>
-              </div>
 
-              <!-- 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 class=""> - </span>
-              </div>
+            <div v-if="modifyColNames?.includes(colIndex.toString())">
+              <slot :name="colIndex.toString()" :item="item"></slot>
+            </div>
+
+            <!-- Generic implementation of the column -->
+            <div v-else class="flex flex-col truncate">
+              <span v-if="data" class="truncate">
+                {{ data }}
+              </span>
+              <span v-else class=""> - </span>
             </div>
           </td>
 
-          <slot name="action" :item="item"></slot>
+          <!-- <slot name="action" :item="item"></slot> -->
         </tr>
       </tbody>
     </table>
@@ -63,6 +62,6 @@ defineProps<{
 }>()
 
 defineEmits<{
-  (event: "goToDetails", item: Item): void
+  (event: "openRowContent", item: Item): void
 }>()
 </script>