feat: introducing smart table to hopp ui

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

@@ -31,7 +31,7 @@
 
         <div v-else-if="error">{{ t('users.load_list_error') }}</div>
 
-        <UsersTable
+        <!-- <UsersTable
           v-else-if="usersList.length >= 1"
           :usersList="usersList"
           :fetching="fetching"
@@ -40,7 +40,65 @@
           @makeUserAdmin="makeUserAdmin"
           @makeAdminToUser="makeAdminToUser"
           @deleteUser="deleteUser"
-        />
+        /> -->
+
+        <HoppSmartTable
+          v-else-if="usersList.length >= 1"
+          :list="newUsersList"
+          :headings="headings"
+          @goToDetails="goToUserDetails"
+          :subtitle="{
+            index: 'name',
+            label: 'Admin',
+          }"
+          hide-col="isAdmin"
+          padding="px-6 py-3"
+        >
+          <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="'Make Admin'"
+                          class="!hover:bg-emerald-600"
+                          @click="makeUserAdmin(item)"
+                        />
+                        <HoppSmartItem
+                          v-else
+                          :icon="IconUserMinus"
+                          :label="'Remove Admin Status'"
+                          class="!hover:bg-emerald-600"
+                          @click="makeAdminToUser(item)"
+                        />
+                        <HoppSmartItem
+                          v-if="!isUserAdmin(item)"
+                          :icon="IconTrash"
+                          :label="'Delete User'"
+                          class="!hover:bg-red-600"
+                          @click="deleteUser(item)"
+                        />
+                      </div>
+                    </template>
+                  </tippy>
+                </span>
+              </div>
+            </td>
+          </template>
+        </HoppSmartTable>
 
         <div v-else class="flex justify-center">{{ t('users.no_users') }}</div>
 
@@ -82,7 +140,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { format } from 'date-fns';
+import { computed, ref, watch } from 'vue';
 import { useMutation } from '@urql/vue';
 import {
   InviteNewUserDocument,
@@ -96,12 +155,26 @@ import { useRoute, useRouter } from 'vue-router';
 import { useToast } from '~/composables/toast';
 import { HoppButtonSecondary } from '@hoppscotch/ui';
 import IconAddUser from '~icons/lucide/user-plus';
+import IconTrash from '~icons/lucide/trash';
+import IconUserMinus from '~icons/lucide/user-minus';
+import IconUserCheck from '~icons/lucide/user-check';
+import IconMoreHorizontal from '~icons/lucide/more-horizontal';
 import { useI18n } from '~/composables/i18n';
 
+// Get Proper Date Formats
+const getCreatedDate = (date: string) => format(new Date(date), 'dd-MM-yyyy');
+const getCreatedTime = (date: string) => format(new Date(date), 'hh:mm a');
+
 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 {
@@ -118,6 +191,19 @@ const {
   { cursor: undefined, take: usersPerPage }
 );
 
+const newUsersList = computed(() => {
+  return usersList.value.map((user) => {
+    return {
+      uid: user.uid || '',
+      name: user.displayName || '',
+      email: user.email || '',
+      createdOn: getCreatedDate(user.createdOn) || '',
+    };
+  });
+});
+
+const headings = ['User UID', 'Name', 'Email', 'Created On'];
+
 // Send Invitation through Email
 const sendInvitation = useMutation(InviteNewUserDocument);
 const showInviteUserModal = ref(false);
@@ -141,9 +227,7 @@ const sendInvite = async (email: string) => {
 // Go to Individual User Details Page
 const route = useRoute();
 const router = useRouter();
-const goToUserDetails = (uid: string) => {
-  router.push('/users/' + uid);
-};
+const goToUserDetails = (user: any) => router.push('/users/' + user.uid);
 
 watch(
   () => route.params.id,
@@ -179,9 +263,9 @@ const userToAdmin = useMutation(MakeUserAdminDocument);
 const confirmUserToAdmin = ref(false);
 const userToAdminUID = ref<string | null>(null);
 
-const makeUserAdmin = (id: string) => {
+const makeUserAdmin = (user: any) => {
   confirmUserToAdmin.value = true;
-  userToAdminUID.value = id;
+  userToAdminUID.value = user.uid;
 };
 
 const makeUserAdminMutation = async (id: string | null) => {
@@ -213,14 +297,14 @@ const adminToUser = useMutation(RemoveUserAsAdminDocument);
 const confirmAdminToUser = ref(false);
 const adminToUserUID = ref<string | null>(null);
 
-const makeAdminToUser = (id: string) => {
+const makeAdminToUser = (user: any) => {
   confirmAdminToUser.value = true;
-  adminToUserUID.value = id;
+  adminToUserUID.value = user.uid;
 };
 
-const deleteUser = (id: string) => {
+const deleteUser = (user: any) => {
   confirmDeletion.value = true;
-  deleteUserUID.value = id;
+  deleteUserUID.value = user.uid;
 };
 
 const makeAdminToUserMutation = async (id: string | null) => {