feat: implementation of users module of the admin dashboard (#29)

Co-authored-by: Anwarul Islam <anwaarulislaam@gmail.com>

packages/hoppscotch-sh-admin/package.json

@@ -12,12 +12,14 @@
   },
   "dependencies": {
     "@graphql-typed-document-node/core": "^3.1.1",
-    "@hoppscotch/ui": "workspace:^",
+    "@hoppscotch/ui": "workspace:^0.0.1",
+    "@hoppscotch/vue-toasted": "^0.1.0",
     "@types/cors": "^2.8.13",
     "@types/express": "^4.17.15",
     "@urql/vue": "^1.0.4",
     "@vueuse/core": "^9.10.0",
     "cors": "^2.8.5",
+    "date-fns": "^2.29.3",
     "express": "^4.18.2",
     "express-graphql": "^0.12.0",
     "graphql": "^16.6.0",

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

@@ -10,14 +10,21 @@ declare module '@vue/runtime-core' {
     AppHeader: typeof import('./components/app/Header.vue')['default']
     AppModal: typeof import('./components/app/Modal.vue')['default']
     AppSidebar: typeof import('./components/app/Sidebar.vue')['default']
+    AppToast: typeof import('./components/app/Toast.vue')['default']
     ButtonPrimary: typeof import('./../../hoppscotch-ui/src/components/button/Primary.vue')['default']
     ButtonSecondary: typeof import('./../../hoppscotch-ui/src/components/button/Secondary.vue')['default']
-    HoppSmartExpand: typeof import('@hoppscotch/ui')['HoppSmartExpand']
+    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
+    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
+    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
     IconLucideBell: typeof import('~icons/lucide/bell')['default']
+    IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
+    IconLucideChevronLeft: typeof import('~icons/lucide/chevron-left')['default']
+    IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
     IconLucideLayoutDashboard: typeof import('~icons/lucide/layout-dashboard')['default']
     IconLucideLineChart: typeof import('~icons/lucide/line-chart')['default']
     IconLucideLock: typeof import('~icons/lucide/lock')['default']
     IconLucideMenu: typeof import('~icons/lucide/menu')['default']
+    IconLucideMoreHorizontal: typeof import('~icons/lucide/more-horizontal')['default']
     IconLucideSettings: typeof import('~icons/lucide/settings')['default']
     IconLucideSidebarClose: typeof import('~icons/lucide/sidebar-close')['default']
     IconLucideSidebarOpen: typeof import('~icons/lucide/sidebar-open')['default']
@@ -47,6 +54,7 @@ declare module '@vue/runtime-core' {
     SmartWindow: typeof import('./../../hoppscotch-ui/src/components/smart/Window.vue')['default']
     SmartWindows: typeof import('./../../hoppscotch-ui/src/components/smart/Windows.vue')['default']
     TeamsAddMembers: typeof import('./components/teams/AddMembers.vue')['default']
+    UsersDetails: typeof import('./components/users/Details.vue')['default']
   }
 
 }

packages/hoppscotch-sh-admin/src/components/app/Header.vue

@@ -5,12 +5,12 @@
     <div class="flex items-center">
       <button
         @click="isOpen = true"
-        class="text-gray-200 focus:outline-none lg:hidden mr-2"
+        class="text-gray-200 focus:outline-none md:hidden mr-2"
       >
         <icon-lucide-menu class="text-gray-300 w-6" />
       </button>
 
-      <div class="mr-3 mt-2">
+      <div class="mr-3 mt-2 xs:hidden md:block">
         <button @click="expandSidebar">
           <icon-lucide-sidebar-open
             v-if="isExpanded"

packages/hoppscotch-sh-admin/src/components/app/Modal.vue

@@ -41,7 +41,7 @@
         <div class="px-6 py-4 text-left modal-content">
           <!--Title-->
           <div class="flex items-center justify-between pb-3">
-            <p class="text-2xl ml-3 font-bold">{{ title }}</p>
+            <p class="text-2xl ml-3 font-bold text-gray-300">{{ title }}</p>
             <div class="z-50 cursor-pointer modal-close" @click="open = false">
               <svg
                 class="text-white fill-current"
@@ -79,6 +79,10 @@ defineProps({
   button: {
     type: String,
   },
+  requireButton: {
+    type: Boolean,
+    default: true,
+  },
 });
 </script>
 

packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue

@@ -9,8 +9,8 @@
     <!-- End Backdrop -->
 
     <div
-      :class="isOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'"
-      class="flex fixed inset-y-0 left-0 z-30 overflow-y-auto transition duration-300 transform bg-neutral-200 dark:bg-neutral-900 lg:translate-x-0 lg:static lg:inset-0 border-r border-gray-300 dark:border-gray-600"
+      :class="isOpen ? '' : '!-translate-x-full ease-in'"
+      class="sidebar-container transform !md:translate-x-0 ease-out"
     >
       <div :class="isExpanded ? 'w-64' : 'w-full'">
         <div class="flex items-center justify-start mt-6 ml-6">
@@ -98,3 +98,12 @@ const activeClass =
 const inactiveClass =
   'border-gray-900 text-gray-500 hover:bg-gray-600 hover:bg-opacity-25 hover:text-gray-100';
 </script>
+
+<style scoped>
+.sidebar-container {
+  @apply fixed md:static md:translate-x-0 md:inset-0 inset-y-0 left-0 z-30;
+  @apply transition duration-300;
+
+  @apply flex overflow-y-auto bg-neutral-200 dark:bg-neutral-900 border-r border-gray-300 dark:border-gray-600;
+}
+</style>

packages/hoppscotch-sh-admin/src/components/app/Toast.vue

@@ -0,0 +1,28 @@
+<template>
+  <div
+    :class="`fixed bottom-0 right-0 mb-4 mr-4 bg-zinc-500 text-gray-800 px-6 py-3 rounded-md z-50 transition-opacity duration-300 ${
+      state.isVisible ? 'opacity-100' : 'opacity-0'
+    }`"
+    @click="close"
+  >
+    {{ message }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue';
+
+defineProps({
+  message: {
+    type: String,
+    required: true,
+  },
+});
+const state = reactive({
+  isVisible: true,
+});
+
+const close = () => {
+  state.isVisible = false;
+};
+</script>

packages/hoppscotch-sh-admin/src/components/users/Details.vue

@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <div>
+      <div class="px-6 rounded-md">
+        <div class="grid gap-6 mt-4">
+          <div v-if="user.photoURL" class="h-10">
+            <img :src="user?.photoURL" alt="" />
+          </div>
+          <div>
+            <label class="text-gray-800 dark:text-gray-200" for="username"
+              >UID</label
+            >
+            <div
+              v-if="user.uid"
+              class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+            >
+              {{ user?.uid }}
+            </div>
+          </div>
+          <div v-if="user.displayName">
+            <label class="text-gray-800 dark:text-gray-200" for="username"
+              >Name</label
+            >
+            <div
+              class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+            >
+              {{ user?.displayName }}
+            </div>
+          </div>
+          <div v-if="user.email">
+            <label class="text-gray-800 dark:text-gray-200" for="username"
+              >Email</label
+            >
+            <div
+              class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+            >
+              {{ user?.email }}
+            </div>
+          </div>
+          <div v-if="user.createdOn">
+            <label class="text-gray-800 dark:text-gray-200" for="username"
+              >Created On</label
+            >
+            <div
+              class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+            >
+              {{ getCreatedDateAndTime(user?.createdOn) }}
+            </div>
+          </div>
+        </div>
+
+        <div class="flex justify-center sm:justify-start mt-8">
+          <button
+            class="mr-3 px-4 py-2 text-gray-200 bg-emerald-900 rounded-md hover:bg-emerald-700 focus:outline-none focus:bg-emerald-800"
+          >
+            Go Back
+          </button>
+
+          <button
+            @click="deleteUser"
+            class="px-4 py-2 text-gray-200 bg-red-800 rounded-md hover:bg-red-600 focus:outline-none focus:bg-red-800"
+          >
+            Delete User
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, onMounted, ref } from 'vue';
+import { format } from 'date-fns';
+import { useQuery } from '@urql/vue';
+import { UserInfoDocument } from '../../helpers/backend/graphql';
+import { routeLocationKey, useRoute } from 'vue-router';
+
+const route = useRoute();
+
+const { fetching, error, data } = useQuery({ query: UserInfoDocument });
+
+// Get Proper Date Formats
+const getCreatedDateAndTime = (date: string) =>
+  format(new Date(date), 'd-MM-yyyy  hh:mm a');
+
+const props = defineProps({
+  user: {
+    type: Object,
+    required: true,
+  },
+});
+
+onMounted(() => {
+  console.log('mounted');
+
+  console.log(props.user.uid);
+});
+
+const deleteUser = () => {
+  console.log('delete user');
+};
+</script>
+
+<style>
+.modal {
+  transition: opacity 0.25s ease;
+}
+</style>

packages/hoppscotch-sh-admin/src/composables/toast.ts

@@ -0,0 +1,3 @@
+import { useToasted } from '@hoppscotch/vue-toasted';
+
+export const useToast = useToasted;

packages/hoppscotch-sh-admin/src/composables/usePagedQuery.ts

@@ -0,0 +1,63 @@
+import { TypedDocumentNode, useClientHandle } from '@urql/vue';
+import { DocumentNode } from 'graphql';
+import { onMounted, ref } from 'vue';
+
+export function usePagedQuery<
+  Result,
+  Vars extends Record<string, any>,
+  ListItem
+>(
+  query: string | TypedDocumentNode<Result, Vars> | DocumentNode,
+  getList: (result: Result) => ListItem[],
+  getCursor: (value: ListItem) => string,
+  variables: Vars
+) {
+  //Fetch All Users
+  const { client } = useClientHandle();
+  const fetching = ref(true);
+  const error = ref(false);
+  const list = ref<any[]>([]);
+  const currentPage = ref(1);
+
+  onMounted(async () => {
+    fetching.value = true;
+    try {
+      const result = await client.query(query, variables).toPromise();
+
+      const resultList = getList(result.data!);
+
+      list.value.push(...resultList);
+    } catch (e) {
+      error.value = true;
+    }
+    fetching.value = false;
+  });
+
+  const goToNextPage = async () => {
+    if (list.value.length % 20 === 0) {
+      fetching.value = true;
+      try {
+        const result = await client
+          .query(query, {
+            ...variables,
+            cursor: getCursor(list.value.at(-1)),
+          })
+          .toPromise();
+        const resultList = getList(result.data!);
+
+        list.value.push(...resultList);
+        currentPage.value++;
+      } catch (e) {
+        error.value = true;
+      }
+      fetching.value = false;
+    }
+  };
+
+  return {
+    fetching,
+    error,
+    goToNextPage,
+    list,
+  };
+}

packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/InviteUserToSignIn.graphql

@@ -0,0 +1,5 @@
+mutation InviteUserToSignIn($inviteeEmail: String!) {
+  inviteUserToSignin(inviteeEmail: $inviteeEmail) {
+    inviteeEmail
+  }
+}

packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/MakeUserAdmin.graphql

@@ -0,0 +1,3 @@
+mutation MakeUserAdmin($uid: String!) {
+  makeUserAdmin(userUID: $uid)
+}

packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/UserInfo.graphql

@@ -0,0 +1,11 @@
+query UserInfo($uid: ID!) {
+  admin {
+    userInfo(userUid: $uid) {
+      uid
+      displayName
+      email
+      photoURL
+      createdOn
+    }
+  }
+}

packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/GetCollectionChildren.graphql

@@ -1,8 +0,0 @@
-query GetCollectionChildren($collectionID: ID!, $cursor: String) {
-  collection(collectionID: $collectionID) {
-    children(cursor: $cursor) {
-      id
-      title
-    }
-  }
-}

packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/InvitedUsers.graphql

@@ -0,0 +1,10 @@
+query InvitedUsers {
+  admin {
+    invitedUsers {
+      adminUid
+      adminEmail
+      inviteeEmail
+      invitedOn
+    }
+  }
+}

packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/Me.graphql

@@ -1,9 +0,0 @@
-query Me {
-  me {
-    uid
-    displayName
-    photoURL
-    isAdmin
-    createdOn
-  }
-}

packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/RemoveUserAccountByAdmin.graphql

@@ -0,0 +1,3 @@
+mutation RemoveUserAccountByAdmin($uid: String!) {
+  removeUserAccountByAdmin(userUID: $uid)
+}

packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/UsersList.graphql

@@ -0,0 +1,11 @@
+query UsersList($cursor: ID) {
+  admin {
+    allUsers(cursor: $cursor) {
+      uid
+      displayName
+      email
+      isAdmin
+      createdOn
+    }
+  }
+}

packages/hoppscotch-sh-admin/src/main.ts

@@ -1,10 +1,17 @@
 import { createApp } from 'vue';
 import urql, { createClient } from '@urql/vue';
 import App from './App.vue';
+import Toasted from '@hoppscotch/vue-toasted';
+import type { ToastOptions } from '@hoppscotch/vue-toasted';
+
+// STYLES
+import 'virtual:windi.css';
+import '@hoppscotch/vue-toasted/style.css';
+import '@hoppscotch/ui/style.css';
 import '../assets/scss/themes.scss';
 import '../assets/scss/styles.scss';
-import '@hoppscotch/ui/style.css';
-import 'virtual:windi.css';
+// END STYLES
+
 import {
   createRouter,
   createWebHashHistory,
@@ -34,6 +41,15 @@ const app = createApp(App).use(
   })
 );
 
+// We are using a fork of Vue Toasted (github.com/clayzar/vue-toasted) which is a bit of
+// an untrusted fork, we will either want to make our own fork or move to a more stable one
+// The original Vue Toasted doesn't support Vue 3 and the OP has been irresponsive.
+app.use(Toasted, <ToastOptions>{
+  position: 'bottom-center',
+  duration: 3000,
+  keepOnHover: true,
+});
+
 app.use(HoppUIPlugin, options);
 app.use(
   createRouter({

packages/hoppscotch-sh-admin/src/pages/dashboard.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="sm:px-6 p-4">
-    <h3 class="text-3xl font-medium text-gray-800 dark:text-gray-200">
+    <h3 class="text-3xl font-medium text-gray-800 dark:text-gray-200 mb-6">
       Dashboard
     </h3>
 
     <div class="mt-4">
-      <div class="flex flex-wrap -mx-6">
-        <div class="w-full px-6 sm:w-1/2 xl:w-1/3">
+      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <div class="w-full">
           <div
             class="flex items-center px-5 py-6 bg-zinc-200 dark:bg-zinc-800 rounded-md shadow-sm"
           >
@@ -23,7 +23,7 @@
           </div>
         </div>
 
-        <div class="w-full px-6 mt-6 sm:w-1/2 xl:w-1/3 sm:mt-0">
+        <div class="w-full">
           <div
             class="flex items-center px-5 py-6 bg-zinc-200 dark:bg-zinc-800 rounded-md shadow-sm"
           >
@@ -40,7 +40,7 @@
           </div>
         </div>
 
-        <div class="w-full px-6 mt-6 sm:w-1/2 xl:w-1/3 xl:mt-0">
+        <div class="w-full">
           <div
             class="flex items-center px-5 py-6 bg-zinc-200 dark:bg-zinc-800 rounded-md shadow-sm"
           >
@@ -57,7 +57,7 @@
           </div>
         </div>
 
-        <div class="w-full px-6 mt-6 sm:w-1/2 xl:w-1/3 xl:mt-10">
+        <div class="w-full">
           <div
             class="flex items-center px-5 py-6 bg-zinc-200 dark:bg-zinc-800 rounded-md shadow-sm"
           >

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

@@ -1,125 +0,0 @@
-<template>
-  <h3 class="sm:px-6 p-4 text-3xl font-medium text-zinc-800 dark:text-gray-200">
-    Add User
-  </h3>
-
-  <div>
-    <div>
-      <div class="px-6 rounded-md">
-        <form @submit.prevent="register">
-          <div class="grid gap-6 mt-4">
-            <div>
-              <label class="text-gray-800 dark:text-gray-200" for="username"
-                >Name</label
-              >
-              <input
-                class="w-full mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
-                type="text"
-                placeholder="Enter Name"
-                v-model="user.name"
-              />
-            </div>
-            <div>
-              <label class="text-gray-800 dark:text-gray-200" for="username"
-                >Username</label
-              >
-              <input
-                class="w-full mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
-                type="text"
-                placeholder="Enter Username"
-                v-model="user.username"
-              />
-            </div>
-
-            <div>
-              <label class="text-gray-800 dark:text-gray-200" for="emailAddress"
-                >Email Address</label
-              >
-              <input
-                class="w-full mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
-                type="email"
-                placeholder="Enter Email Address"
-                v-model="user.email"
-              />
-            </div>
-
-            <div class="grid grid-cols-1 sm:grid-cols-2">
-              <div class="sm:mt-0 sm:mr-3">
-                <label class="text-gray-800 dark:text-gray-200" for="password"
-                  >Password</label
-                >
-                <input
-                  class="w-full mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
-                  type="password"
-                  placeholder="Enter Password"
-                  v-model="user.password"
-                />
-              </div>
-
-              <div class="mt-6 ml-0 sm:mt-0 sm:ml-3">
-                <label
-                  class="text-gray-800 dark:text-gray-200"
-                  for="passwordConfirmation"
-                  >Password Confirmation</label
-                >
-                <input
-                  class="w-full mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
-                  type="password"
-                  placeholder="Password Confirmation"
-                  v-model="user.confirm"
-                />
-              </div>
-            </div>
-          </div>
-
-          <div class="flex justify-center sm:justify-start mt-8">
-            <router-link to="/user">
-              <button
-                class="px-4 py-2 text-gray-200 bg-emerald-900 rounded-md hover:bg-emerald-700 focus:outline-none focus:bg-emerald-800"
-              >
-                Save
-              </button>
-            </router-link>
-          </div>
-        </form>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { defineProps, ref } from 'vue';
-
-const props = defineProps({
-  open: {
-    type: Boolean,
-  },
-});
-
-interface User {
-  name: string;
-  username: string;
-  email: string;
-  password: string;
-  confirm: string;
-}
-
-const user = ref<User>({
-  name: '',
-  username: '',
-  email: '',
-  password: '',
-  confirm: '',
-});
-
-const register = () => {
-  const data = JSON.parse(JSON.stringify(user.value));
-  console.log('Registered: ', data);
-};
-</script>
-
-<style>
-.modal {
-  transition: opacity 0.25s ease;
-}
-</style>

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

@@ -0,0 +1,153 @@
+<template>
+  <div v-if="fetching" class="flex justify-center"><HoppSmartSpinner /></div>
+  <div v-else>
+    <h3
+      class="sm:px-6 p-4 text-3xl font-medium text-zinc-800 dark:text-gray-200"
+    >
+      User Details
+    </h3>
+
+    <div>
+      <div>
+        <div class="px-6 rounded-md">
+          <div class="grid gap-6 mt-4">
+            <div v-if="user.photoURL">
+              <img
+                class="object-cover h-20 w-20 rounded-3xl mb-3"
+                :src="user.photoURL"
+              />
+            </div>
+            <div v-else class="bg-primaryDark w-17 p-3 rounded-2xl mb-3">
+              <icon-lucide-user class="text-4xl" />
+            </div>
+            <div v-if="user.uid">
+              <label class="text-gray-800 dark:text-gray-200" for="username"
+                >UID</label
+              >
+              <div
+                class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+              >
+                {{ user.uid }}
+              </div>
+            </div>
+            <div v-if="user.displayName">
+              <label class="text-gray-800 dark:text-gray-200" for="username"
+                >Name</label
+              >
+              <div
+                class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+              >
+                {{ user.displayName }}
+              </div>
+            </div>
+            <div v-if="user.email">
+              <label class="text-gray-800 dark:text-gray-200" for="username"
+                >Email</label
+              >
+              <div
+                class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+              >
+                {{ user.email }}
+              </div>
+            </div>
+            <div v-if="user.createdOn">
+              <label class="text-gray-800 dark:text-gray-200" for="username"
+                >Created On</label
+              >
+              <div
+                class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+              >
+                {{ getCreatedDateAndTime(user.createdOn) }}
+              </div>
+            </div>
+          </div>
+
+          <div class="flex justify-start mt-8">
+            <HoppButtonSecondary
+              class="mr-4"
+              filled
+              outline
+              label="Delete"
+              @click="deleteUser(user.uid)"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <HoppSmartConfirmModal
+      :show="confirmDeletion"
+      :title="`Confirm Deletion of User?`"
+      @hide-modal="confirmDeletion = false"
+      @resolve="deleteUserMutation(deleteUserUID)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useMutation } from '@urql/vue';
+import {
+  UserInfoDocument,
+  RemoveUserAccountByAdminDocument,
+} from '../../helpers/backend/graphql';
+import { useClientHandle } from '@urql/vue';
+import { format } from 'date-fns';
+import { useRoute, useRouter } from 'vue-router';
+import { useToast } from '../../composables/toast';
+import { HoppButtonSecondary, HoppSmartSpinner } from '@hoppscotch/ui';
+
+// Get Proper Date Formats
+const getCreatedDateAndTime = (date: string) =>
+  format(new Date(date), 'd-MM-yyyy  hh:mm a');
+
+const route = useRoute();
+const toast = useToast();
+
+// Get User Info
+const user = ref();
+const { client } = useClientHandle();
+const fetching = ref(true);
+
+onMounted(async () => {
+  fetching.value = true;
+  const result = await client
+    .query(UserInfoDocument, { uid: route.params.id.toString() })
+    .toPromise();
+
+  if (result.error) {
+    toast.error('Unable to Load User Info..');
+  }
+  user.value = result.data?.admin.userInfo ?? {};
+  fetching.value = false;
+});
+
+// User Deletion
+const router = useRouter();
+const userDeletion = useMutation(RemoveUserAccountByAdminDocument);
+const confirmDeletion = ref(false);
+const deleteUserUID = ref<string | null>(null);
+
+const deleteUser = (id: string) => {
+  confirmDeletion.value = true;
+  deleteUserUID.value = id;
+};
+
+const deleteUserMutation = async (id: string | null) => {
+  if (!id) {
+    confirmDeletion.value = false;
+    toast.error('User Deletion Failed');
+    return;
+  }
+  const variables = { uid: id };
+  await userDeletion.executeMutation(variables).then((result) => {
+    if (result.error) {
+      toast.error('User Deletion Failed');
+    } else {
+      toast.success('User Deleted Successfully');
+    }
+  });
+  confirmDeletion.value = false;
+  deleteUserUID.value = null;
+  router.push('/users');
+};
+</script>

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

@@ -1,126 +0,0 @@
-<template>
-  <div class="sm:px-6 p-4">
-    <h3
-      class="sm:px-6 p-4 text-3xl font-medium text-gray-800 dark:text-gray-200"
-    >
-      User Detail
-    </h3>
-
-    <div class="mt-5">
-      <div class="flex flex-wrap justify-center mx-6">
-        <div class="w-full px-4 sm:w-1/2 xl:w-1/3">
-          <div
-            class="h-80 px-6 py-6 bg-zinc-200 dark:bg-zinc-800 rounded-md shadow-sm"
-          >
-            <div class="flex ml-3 mt-2">
-              <icon-lucide-user class="text-emerald-400 text-3xl" />
-
-              <h4
-                class="text-3xl ml-2 font-semibold text-gray-700 dark:text-gray-200"
-              >
-                User Info
-              </h4>
-            </div>
-
-            <div class="flex mt-5 ml-5 text-xl">
-              <h4 class="font-semibold text-gray-700 dark:text-gray-400">
-                Name:
-              </h4>
-              <div class="text-gray-600 dark:text-gray-200 ml-2">
-                {{ user.name }}
-              </div>
-            </div>
-
-            <div class="flex mt-2 ml-5 text-xl">
-              <h4 class="font-semibold text-gray-700 dark:text-gray-400">
-                Username:
-              </h4>
-              <div class="text-gray-600 dark:text-gray-200 ml-2">
-                {{ user.username }}
-              </div>
-            </div>
-
-            <div class="flex mt-2 ml-5 text-xl">
-              <h4 class="font-semibold text-gray-700 dark:text-gray-400">
-                Email:
-              </h4>
-              <div class="text-gray-600 dark:text-gray-200 ml-2">
-                {{ user.email }}
-              </div>
-            </div>
-
-            <div class="flex mt-2 ml-5 text-xl">
-              <h4 class="font-semibold text-gray-700 dark:text-gray-400">
-                Password:
-              </h4>
-              <div class="text-gray-600 dark:text-gray-200 ml-2">
-                {{ user.password }}
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="w-full px-6 sm:w-1/2 xl:w-1/3">
-          <div
-            class="h-80 px-5 py-5 bg-zinc-200 dark:bg-zinc-800 rounded-md shadow-sm"
-          >
-            <div class="flex ml-5 mt-2">
-              <icon-lucide-line-chart class="text-yellow-300 text-3xl" />
-
-              <h4
-                class="text-3xl ml-2 font-semibold text-gray-700 dark:text-gray-200"
-              >
-                Stats
-              </h4>
-            </div>
-
-            <div class="flex mt-5 ml-5 text-xl">
-              <h4 class="font-semibold text-gray-700 dark:text-gray-400">
-                Role:
-              </h4>
-              <div class="text-gray-600 dark:text-gray-200 ml-2">
-                {{ user.role }}
-              </div>
-            </div>
-
-            <div class="flex mt-2 ml-5 text-xl">
-              <h4 class="font-semibold text-gray-700 dark:text-gray-400">
-                Number of Teams:
-              </h4>
-              <div class="text-gray-600 dark:text-gray-200 ml-2">10</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="mt-8"></div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-
-interface User {
-  name: string;
-  username: string;
-  email: string;
-  password: string;
-  confirm: string;
-  role: string;
-}
-
-const user = ref<User>({
-  name: 'Joel',
-  username: 'joeljs',
-  email: 'joel@gmail.com',
-  password: 'joel@2436',
-  confirm: 'yes',
-  role: 'Owner',
-});
-</script>
-
-<style>
-.modal {
-  transition: opacity 0.25s ease;
-}
-</style>

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

@@ -6,260 +6,362 @@
       Users
     </h3>
 
+    <!-- Table List View for All Users -->
     <div class="flex flex-col">
       <div class="py-2 -my-2 overflow-x-auto sm:-mx-6 sm:px-4 lg:-mx-8 lg:px-8">
         <div class="inline-block min-w-full overflow-hidden align-middle">
           <div class="sm:px-7 p-4">
             <div class="flex w-full items-center mb-7">
-              <button
-                class="inline-flex mr-3 items-center h-8 pl-2.5 pr-2 rounded-md shadow text-gray-700 dark:text-gray-400 dark:border-gray-800 border-2 border-gray-200 leading-none py-0"
-              >
-                Last 30 days
-                <icon-lucide-chevron-down
-                  class="w-4 ml-1.5 text-gray-400 dark:text-gray-600"
-                />
-              </button>
+              <HoppButtonPrimary
+                class="mr-4"
+                label="Invite User"
+                @click="showInviteUserModal = true"
+              />
 
-              <div class="relative">
-                <button
-                  @click="dropdownOpen = !dropdownOpen"
-                  class="inline-flex items-center h-8 pl-2.5 pr-2 rounded-md shadow text-gray-700 dark:text-gray-400 dark:border-gray-800 border-2 border-gray-200 leading-none py-0"
-                >
-                  Filter by
-                  <icon-lucide-chevron-down
-                    class="w-4 ml-1.5 text-gray-400 dark:text-gray-600"
-                  />
-                </button>
-
-                <div
-                  v-show="dropdownOpen"
-                  @click="dropdownOpen = false"
-                  class="fixed inset-0 z-10 w-full h-full"
-                ></div>
-
-                <transition
-                  enter-active-class="transition duration-150 ease-out transform"
-                  enter-from-class="scale-95 opacity-0"
-                  enter-to-class="scale-100 opacity-100"
-                  leave-active-class="transition duration-150 ease-in transform"
-                  leave-from-class="scale-100 opacity-100"
-                  leave-to-class="scale-95 opacity-0"
-                >
-                  <div
-                    v-show="dropdownOpen"
-                    class="absolute left-0 z-20 w-48 mt-2 bg-zinc-200 dark:bg-zinc-800 rounded-md shadow-xl"
-                  >
-                    <button
-                      href="#"
-                      class="block w-full text-left rounded-md px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-emerald-700 hover:text-white"
-                    >
-                      Status
-                    </button>
-                  </div>
-                </transition>
-              </div>
-
-              <Modal v-if="open" :button="button" :title="title">
-                <template #title>
-                  <p class="text-2xl font-bold">Invite User</p>
-                </template>
-                <template #content>
-                  <div>
-                    <div>
-                      <div class="px-6 rounded-md">
-                        <form>
-                          <div class="my-4">
-                            <div>
-                              <label
-                                class="text-gray-800 dark:text-gray-200"
-                                for="emailAddress"
-                                >Email Address</label
-                              >
-                              <input
-                                class="w-full p-3 mt-3 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
-                                type="email"
-                                v-model="email"
-                                placeholder="Enter Email Address"
-                              />
-                            </div>
-                          </div>
-                          <div class="flex justify-end my-2 pt-3">
-                            <button
-                              @click="sendInvite"
-                              class="px-4 py-2 font-medium tracking-wide text-white bg-emerald-700 rounded-md hover:bg-emerald-600 focus:outline-none"
-                            >
-                              Send Invite
-                            </button>
-                          </div>
-                        </form>
-                      </div>
-                    </div>
-                  </div>
-                </template>
-              </Modal>
-
-              <button
-                class="inline-flex items-center bg-zinc-700 h-8 ml-3 pl-2.5 pr-2 rounded-md shadow text-gray-200 dark:border-gray-800 border border-gray-200 leading-none py-0 hover:bg-emerald-700 focus:outline-none focus:bg-emerald-800"
-              >
-                <router-link :to="'/users/invited'">
-                  Invited Users
-                </router-link>
-              </button>
-              <div
-                class="ml-auto text-gray-400 text-xs sm:inline-flex hidden items-center"
-              >
-                <span class="mr-3">Page 2 of 4</span>
-                <button
-                  class="inline-flex mr-2 items-center h-8 w-8 justify-center text-gray-400 rounded-md shadow border border-gray-200 dark:border-gray-800 leading-none py-0"
-                >
-                  <icon-lucide-chevron-left class="text-xl" />
-                </button>
-
-                <button
-                  class="inline-flex items-center h-8 w-8 justify-center text-gray-400 rounded-md shadow border border-gray-200 dark:border-gray-800 leading-none py-0"
-                >
-                  <icon-lucide-chevron-right class="text-xl" />
-                </button>
-              </div>
+              <HoppButtonSecondary
+                filled
+                outline
+                label="Invite Users"
+                :to="'/users/invited'"
+              />
             </div>
             <div>
-              <table class="w-full text-left">
+              <div
+                v-if="fetching && !error && !(usersList.length >= 1)"
+                class="flex justify-center"
+              >
+                <HoppSmartSpinner />
+              </div>
+              <div v-else-if="error">Unable to Load Users List..</div>
+
+              <table
+                v-if="usersList.length >= 1"
+                class="w-full text-left min-h-32"
+              >
                 <thead>
                   <tr
-                    class="text-zinc-900 dark:text-gray-200 border-b border-gray-300 dark:border-gray-600 text-sm"
+                    class="text-zinc-900 dark:text-gray-200 border-b border-gray-300 dark:border-gray-600 text-sm text-center"
                   >
-                    <th class="font-normal px-3 pt-0 pb-3"></th>
                     <th class="font-normal px-3 pt-0 pb-3">User ID</th>
-                    <th class="font-normal px-3 pt-0 pb-3">Sign-In Method</th>
-                    <th class="font-normal px-3 pt-0 pb-3 hidden md:table-cell">
-                      Email
-                    </th>
-                    <th class="font-normal px-3 pt-0 pb-3">Status</th>
+                    <th class="font-normal px-3 pt-0 pb-3">Name</th>
+                    <th class="font-normal px-3 pt-0 pb-3">Email</th>
                     <th class="font-normal px-3 pt-0 pb-3">Date</th>
+                    <th class="font-normal px-3 pt-0 pb-3"></th>
                   </tr>
                 </thead>
 
                 <tbody class="text-gray-600 dark:text-gray-300">
                   <tr
-                    v-for="user in users"
-                    @click="goToUser"
+                    v-for="user in usersList"
+                    :key="user.uid"
                     class="border-b border-gray-300 dark:border-gray-600 hover:bg-zinc-800 rounded-xl"
                   >
-                    <td>
-                      <label>
-                        <input
-                          type="checkbox"
-                          class="appearance-none bg-gray-600 checked:bg-emerald-600 rounded-md ml-3 w-5 h-5"
-                          name="radio"
-                        />
-                      </label>
-                    </td>
-                    <td class="sm:p-3 py-2 px-1">
+                    <td
+                      @click="goToUserDetails(user)"
+                      class="sm:p-3 py-2 px-1 max-w-30"
+                    >
                       <div class="flex">
                         <span class="ml-3 truncate">
-                          {{ user?.id }}
+                          {{ user.uid }}
                         </span>
                       </div>
                     </td>
-                    <td class="sm:p-3 py-2 px-1 0">
-                      <div class="flex items-center">
-                        {{ user?.signin }}
+                    <td
+                      @click="goToUserDetails(user)"
+                      class="sm:p-3 py-2 px-1 0"
+                    >
+                      <div
+                        v-if="user.displayName"
+                        class="flex items-center justify-center"
+                      >
+                        {{ user.displayName }}
+                        <span
+                          v-if="user.isAdmin"
+                          class="rounded-xl p-1 border-1 border-emerald-600 text-xs text-emerald-600 ml-2"
+                        >
+                          Admin
+                        </span>
+                      </div>
+                      <div
+                        v-else
+                        class="flex items-center justify-center text-center"
+                      >
+                        <span v-if="!user.isAdmin"> - </span>
+                        <span
+                          v-if="user.isAdmin"
+                          class="rounded-xl p-1 border-1 border-emerald-600 text-xs text-emerald-600 ml-2"
+                        >
+                          Admin
+                        </span>
                       </div>
                     </td>
                     <td
-                      class="sm:p-3 py-2 px-1 md:table-cell hidden text-sky-500 dark:text-sky-300"
+                      @click="goToUserDetails(user)"
+                      class="sm:p-3 py-2 px-1 text-sky-500 dark:text-sky-300 text-center"
                     >
-                      {{ user?.email }}
+                      {{ user.email }}
                     </td>
-                    <td class="sm:p-3 py-2 px-1 text-green-500">
-                      {{ user?.status }}
-                    </td>
-                    <td class="sm:p-3 py-2 px-1">
-                      <div class="flex items-center">
-                        <div class="sm:flex hidden flex-col">
-                          {{ user?.date }}
-                          <div class="text-gray-400 text-xs">11:16 AM</div>
+
+                    <td @click="goToUserDetails(user)" class="sm:p-3 py-2 px-1">
+                      <div class="flex items-center justify-center">
+                        <div class="flex flex-col">
+                          {{ getCreatedDate(user.createdOn) }}
+                          <div class="text-gray-400 text-xs text-center">
+                            {{ getCreatedTime(user.createdOn) }}
+                          </div>
                         </div>
+                      </div>
+                    </td>
+                    <td>
+                      <div class="relative">
                         <button
-                          class="w-8 h-8 inline-flex items-center justify-center text-gray-400 ml-auto"
+                          @click.stop="toggleDropdown(user.uid)"
+                          class="w-8 h-8 dropdown inline-flex items-center justify-right text-gray-400"
                         >
                           <icon-lucide-more-horizontal />
                         </button>
+
+                        <transition
+                          enter-active-class="transition duration-150 ease-out transform"
+                          enter-from-class="scale-95 opacity-0"
+                          enter-to-class="scale-100 opacity-100"
+                          leave-active-class="transition duration-150 ease-in transform"
+                          leave-from-class="scale-100 opacity-100"
+                          leave-to-class="scale-95 opacity-0"
+                        >
+                          <div
+                            v-show="activeUserId && activeUserId == user.uid"
+                            class="absolute right-0 z-20 w-28 mt-5 bg-zinc-200 dark:bg-zinc-800 rounded-md shadow-xl"
+                          >
+                            <button
+                              v-if="!user.isAdmin"
+                              @click="makeUserAdmin(user.uid)"
+                              class="block w-full h-10 px-4 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-emerald-700 hover:text-white rounded-md"
+                            >
+                              Make admin
+                            </button>
+                            <button
+                              class="block w-full h-10 px-4 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-red-700 hover:text-white rounded-md"
+                              @click="deleteUser(user.uid)"
+                            >
+                              Delete
+                            </button>
+                          </div>
+                        </transition>
                       </div>
                     </td>
                   </tr>
                 </tbody>
               </table>
+
+              <div v-if="usersList.length >= 20" class="text-center">
+                <button
+                  @click="fetchNextUsers"
+                  class="mt-5 p-2 rounded-3xl bg-gray-700"
+                >
+                  <icon-lucide-chevron-down class="text-xl" />
+                </button>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
+
+    <!-- Send Invite Modal -->
+    <HoppSmartModal
+      v-if="showInviteUserModal"
+      dialog
+      title="Invite User"
+      @close="showInviteUserModal = false"
+    >
+      <template #body>
+        <div>
+          <div>
+            <div class="px-6 rounded-md">
+              <div>
+                <div class="my-4">
+                  <div>
+                    <label
+                      class="text-gray-800 dark:text-gray-200"
+                      for="emailAddress"
+                    >
+                      Email Address
+                    </label>
+                    <input
+                      class="w-full p-3 mt-3 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+                      type="email"
+                      v-model="email"
+                      placeholder="Enter Email Address"
+                    />
+                  </div>
+                </div>
+                <div class="flex justify-end my-2 pt-3">
+                  <HoppButtonPrimary
+                    label="Send Invite"
+                    @click="sendInvite()"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </HoppSmartModal>
+
+    <HoppSmartConfirmModal
+      :show="confirmDeletion"
+      :title="`Confirm User Deletion?`"
+      @hide-modal="confirmDeletion = false"
+      @resolve="deleteUserMutation(deleteUserUID)"
+    />
+    <HoppSmartConfirmModal
+      :show="confirmUserToAdmin"
+      :title="`Do you want to make this User into an Admin?`"
+      @hide-modal="confirmUserToAdmin = false"
+      @resolve="makeUserAdminMutation(adminUserUID)"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onMounted, onBeforeUnmount, ref } from 'vue';
+import { useMutation } from '@urql/vue';
+import {
+  UsersListDocument,
+  InviteUserToSignInDocument,
+  RemoveUserAccountByAdminDocument,
+  MakeUserAdminDocument,
+} from '../../helpers/backend/graphql';
+import { usePagedQuery } from '../../composables/usePagedQuery';
+import { format } from 'date-fns';
 import { useRouter } from 'vue-router';
-import Modal from '../../components/app/Modal.vue';
+import { useToast } from '../../composables/toast';
+import { HoppButtonSecondary, HoppSmartSpinner } from '@hoppscotch/ui';
 
-const open = ref(true);
+const toast = useToast();
 
-const sendInvite = () => {
-  open.value = false;
-};
+// 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 router = useRouter();
-
-const { fetching, data } = useQuery({
-  query: `
-    query {
-      me {
-        displayName
-      }
-    }
-  `,
-});
-
-const goToUser = () => {
-  router.push('/users/details');
-};
+// Get Paginated Results of all the users in the infra
+const {
+  fetching,
+  error,
+  goToNextPage: fetchNextUsers,
+  list: usersList,
+} = usePagedQuery(
+  UsersListDocument,
+  (x) => x.admin.allUsers,
+  (x) => x.uid,
+  { cursor: undefined }
+);
 
+// Send Invitation through Email
 const email = ref('');
+const sendInvitation = useMutation(InviteUserToSignInDocument);
+const showInviteUserModal = ref(false);
 
-type User = {
-  id: string;
-  signin: string;
-  email: string;
-  status: string;
-  date: string;
+const sendInvite = async () => {
+  const variables = { inviteeEmail: email.value.trim() };
+  await sendInvitation.executeMutation(variables).then((result) => {
+    if (result.error) {
+      toast.error('Failed to Send Invitation');
+    } else {
+      toast.success('Email Invitation Sent Successfully');
+    }
+  });
 };
 
-const title = 'Invite User';
-const button = 'Send Invite';
-const dropdownOpen = ref(false);
+// Go to Individual User Details Page
+const router = useRouter();
+const goToUserDetails = (user: any) => {
+  router.push('/users/' + user.uid);
+};
 
-const users: Array<User> = [
-  {
-    id: 'abc12',
-    signin: 'Microsoft',
-    email: 'joel@gmail.com',
-    status: 'Active',
-    date: '15-01-2023',
-  },
-  {
-    id: 'zxc21',
-    signin: 'Microsoft',
-    email: 'andrew@gmail.com',
-    status: 'Active',
-    date: '15-01-2023',
-  },
-  {
-    id: 'cadf4',
-    signin: 'Microsoft',
-    email: 'liyas@gmail.com',
-    status: 'Active',
-    date: '15-01-2023',
-  },
-];
+// Open the side menu dropdown of only the selected user
+const activeUserId = ref<null | String>(null);
+
+function toggleDropdown(uid: String) {
+  if (activeUserId.value && activeUserId.value == uid) {
+    activeUserId.value = null;
+  } else {
+    activeUserId.value = uid;
+  }
+}
+
+// Hide dropdown when user clicks elsewhere
+const close = (e: any) => {
+  if (!e.target.closest('.dropdown')) {
+    activeUserId.value = null;
+  }
+};
+
+onMounted(() => document.addEventListener('click', close));
+onBeforeUnmount(() => document.removeEventListener('click', close));
+
+// User Deletion
+const userDeletion = useMutation(RemoveUserAccountByAdminDocument);
+const confirmDeletion = ref(false);
+const deleteUserUID = ref<string | null>(null);
+
+const deleteUser = (id: string) => {
+  confirmDeletion.value = true;
+  deleteUserUID.value = id;
+};
+
+const deleteUserMutation = async (id: string | null) => {
+  if (!id) {
+    confirmDeletion.value = false;
+    toast.error('User Deletion Failed');
+    return;
+  }
+  const variables = { uid: id };
+  await userDeletion.executeMutation(variables).then((result) => {
+    if (result.error) {
+      toast.error('User Deletion Failed');
+    } else {
+      toast.success('User Deleted Successfully');
+      usersList.value = usersList.value.filter((user) => user.uid !== id);
+      toggleDropdown(id);
+    }
+  });
+  confirmDeletion.value = false;
+  deleteUserUID.value = null;
+};
+
+// Make User Admin
+const userToAdmin = useMutation(MakeUserAdminDocument);
+const confirmUserToAdmin = ref(false);
+const adminUserUID = ref<string | null>(null);
+
+const makeUserAdmin = (id: string) => {
+  confirmUserToAdmin.value = true;
+  adminUserUID.value = id;
+};
+
+const makeUserAdminMutation = async (id: string | null) => {
+  if (!id) {
+    confirmUserToAdmin.value = false;
+    toast.error('User Deletion Failed');
+    return;
+  }
+  const variables = { uid: id };
+  await userToAdmin.executeMutation(variables).then((result) => {
+    if (result.error) {
+      toast.error('Failed to make user an admin');
+    } else {
+      toast.success('User is now an Admin');
+      usersList.value = usersList.value.map((user) => {
+        if (user.uid === id) {
+          user.isAdmin = true;
+        }
+        return user;
+      });
+    }
+  });
+  confirmUserToAdmin.value = false;
+  adminUserUID.value = null;
+};
 </script>

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

@@ -10,113 +10,22 @@
       <div class="py-2 -my-2 overflow-x-auto sm:-mx-6 sm:px-4 lg:-mx-8 lg:px-8">
         <div class="inline-block min-w-full overflow-hidden align-middle">
           <div class="sm:px-7 p-4">
-            <div class="flex w-full items-center mb-7">
-              <button
-                class="inline-flex mr-3 items-center h-8 pl-2.5 pr-2 rounded-md shadow text-gray-700 dark:text-gray-400 dark:border-gray-800 border-2 border-gray-200 leading-none py-0"
-              >
-                Last 30 days
-                <icon-lucide-chevron-down
-                  class="w-4 ml-1.5 text-gray-400 dark:text-gray-600"
-                />
-              </button>
-
-              <div class="relative">
-                <button
-                  @click="dropdownOpen = !dropdownOpen"
-                  class="inline-flex items-center h-8 pl-2.5 pr-2 rounded-md shadow text-gray-700 dark:text-gray-400 dark:border-gray-800 border-2 border-gray-200 leading-none py-0"
-                >
-                  Filter by
-                  <icon-lucide-chevron-down
-                    class="w-4 ml-1.5 text-gray-400 dark:text-gray-600"
-                  />
-                </button>
-
-                <div
-                  v-show="dropdownOpen"
-                  @click="dropdownOpen = false"
-                  class="fixed inset-0 z-10 w-full h-full"
-                ></div>
-
-                <transition
-                  enter-active-class="transition duration-150 ease-out transform"
-                  enter-from-class="scale-95 opacity-0"
-                  enter-to-class="scale-100 opacity-100"
-                  leave-active-class="transition duration-150 ease-in transform"
-                  leave-from-class="scale-100 opacity-100"
-                  leave-to-class="scale-95 opacity-0"
-                >
-                  <div
-                    v-show="dropdownOpen"
-                    class="absolute left-0 z-20 w-48 mt-2 bg-zinc-200 dark:bg-zinc-800 rounded-md shadow-xl"
-                  >
-                    <button
-                      href="#"
-                      class="block w-full text-left rounded-md px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-emerald-700 hover:text-white"
-                    >
-                      Status
-                    </button>
-                  </div>
-                </transition>
-              </div>
-
-              <Modal v-if="open" :button="button" :title="title">
-                <template #title>
-                  <p class="text-2xl font-bold">Invite User</p>
-                </template>
-                <template #content>
-                  <div>
-                    <div>
-                      <div class="px-6 rounded-md">
-                        <form>
-                          <div class="my-4">
-                            <div>
-                              <label
-                                class="text-gray-800 dark:text-gray-200"
-                                for="emailAddress"
-                                >Email Address</label
-                              >
-                              <input
-                                class="w-full mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
-                                type="email"
-                                placeholder="Enter Email Address"
-                              />
-                            </div>
-                          </div>
-                        </form>
-                      </div>
-                    </div>
-                  </div>
-                </template>
-              </Modal>
-
-              <div
-                class="ml-auto text-gray-400 text-xs sm:inline-flex hidden items-center"
-              >
-                <span class="mr-3">Page 2 of 4</span>
-                <button
-                  class="inline-flex mr-2 items-center h-8 w-8 justify-center text-gray-400 rounded-md shadow border border-gray-200 dark:border-gray-800 leading-none py-0"
-                >
-                  <icon-lucide-chevron-left class="text-xl" />
-                </button>
-                <button
-                  class="inline-flex items-center h-8 w-8 justify-center text-gray-400 rounded-md shadow border border-gray-200 dark:border-gray-800 leading-none py-0"
-                >
-                  <icon-lucide-chevron-right class="text-xl" />
-                </button>
-              </div>
-            </div>
             <div>
-              <table class="w-full text-left">
+              <div v-if="fetching" class="flex justify-center">
+                <HoppSmartSpinner />
+              </div>
+              <div v-else-if="error">
+                <p class="text-xl">No Invited Users Found</p>
+              </div>
+
+              <table v-else class="w-full text-left">
                 <thead>
                   <tr
-                    class="text-zinc-900 dark:text-gray-200 border-b border-gray-300 dark:border-gray-600 text-sm"
+                    class="text-zinc-900 dark:text-gray-200 border-b border-gray-300 dark:border-gray-600 text-sm text-center"
                   >
-                    <th class="font-normal px-3 pt-0 pb-3"></th>
                     <th class="font-normal px-3 pt-0 pb-3">Admin ID</th>
                     <th class="font-normal px-3 pt-0 pb-3">Admin Email</th>
-                    <th class="font-normal px-3 pt-0 pb-3 hidden md:table-cell">
-                      Invitee Email
-                    </th>
+                    <th class="font-normal px-3 pt-0 pb-3">Invitee Email</th>
                     <th class="font-normal px-3 pt-0 pb-3">Invited On</th>
                   </tr>
                 </thead>
@@ -126,47 +35,34 @@
                   class="text-gray-600 dark:text-gray-300"
                 >
                   <tr
-                    @click="goToUser"
                     class="border-b border-gray-300 dark:border-gray-600 hover:bg-zinc-800 rounded-xl"
                   >
-                    <td>
-                      <label>
-                        <input
-                          type="checkbox"
-                          class="appearance-none bg-gray-600 checked:bg-emerald-600 rounded-md ml-3 w-5 h-5"
-                          name="radio"
-                        />
-                      </label>
-                    </td>
-                    <td class="sm:p-3 py-2 px-1">
-                      <div class="flex">
-                        <span class="ml-3">
-                          {{ user.adminId }}
+                    <td class="sm:p-3 py-2 px-3 max-w-30">
+                      <div class="flex justify-center">
+                        <span class="ml-3 truncate">
+                          {{ user?.adminUid }}
                         </span>
                       </div>
                     </td>
                     <td class="sm:p-3 py-2 px-1 text-sky-500 dark:text-sky-300">
-                      <div class="flex items-center">
-                        {{ user.adminEmail }}
+                      <div class="flex items-center justify-center">
+                        {{ user?.adminEmail }}
                       </div>
                     </td>
                     <td
-                      class="sm:p-3 py-2 px-1 md:table-cell hidden text-sky-500 dark:text-sky-300"
+                      class="sm:p-3 py-2 px-1 text-sky-500 dark:text-sky-300 text-center"
                     >
-                      {{ user.inviteeEmail }}
+                      {{ user?.inviteeEmail }}
                     </td>
 
                     <td class="sm:p-3 py-2 px-1">
-                      <div class="flex items-center">
-                        <div class="sm:flex hidden flex-col">
-                          {{ user.invitedOn }}
-                          <div class="text-gray-400 text-xs">11:16 AM</div>
+                      <div class="flex items-center justify-center">
+                        <div class="flex flex-col">
+                          {{ getCreatedDate(user?.invitedOn) }}
+                          <div class="text-gray-400 text-xs text-center">
+                            {{ getCreatedTime(user?.invitedOn) }}
+                          </div>
                         </div>
-                        <button
-                          class="w-8 h-8 inline-flex items-center justify-center text-gray-400 ml-auto"
-                        >
-                          <icon-lucide-more-horizontal />
-                        </button>
                       </div>
                     </td>
                   </tr>
@@ -181,46 +77,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-import Modal from '../../components/app/Modal.vue';
+import { computed } from 'vue';
+import { useQuery } from '@urql/vue';
+import { InvitedUsersDocument } from '../../helpers/backend/graphql';
+import { format } from 'date-fns';
+import { HoppSmartSpinner } from '@hoppscotch/ui';
 
-const router = useRouter();
+// 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 goToUser = () => {
-  router.push('/users/detail');
-};
-
-const open = ref(false);
-const title = 'Invite User';
-const button = 'Send Invite';
-const dropdownOpen = ref(false);
-
-type InvitedUser = {
-  adminId: string;
-  adminEmail: string;
-  inviteeEmail: string;
-  invitedOn: string;
-};
-
-const invitedUsers: Array<InvitedUser> = [
-  {
-    adminId: 'abc12',
-    adminEmail: 'joel@gmail.com',
-    inviteeEmail: 'jack@gmail.com',
-    invitedOn: '15-01-2023',
-  },
-  {
-    adminId: 'zxc21',
-    adminEmail: 'andrew@gmail.com',
-    inviteeEmail: 'max@gmail.com',
-    invitedOn: '15-01-2023',
-  },
-  {
-    adminId: 'cadf4',
-    adminEmail: 'liyas@gmail.com',
-    inviteeEmail: 'john@gmail.com',
-    invitedOn: '15-01-2023',
-  },
-];
+// Get Invited Users
+const { fetching, error, data } = useQuery({ query: InvitedUsersDocument });
+const invitedUsers = computed(() => data?.value?.admin.invitedUsers);
 </script>

packages/hoppscotch-sh-admin/vite.config.ts

@@ -13,7 +13,7 @@ import path from 'path';
 export default defineConfig({
   envDir: path.resolve(__dirname, "../../"),
   server: {
-    port: 3100,
+    port: 3000,
   },
   plugins: [
     vue(),

pnpm-lock.yaml

@@ -642,7 +642,8 @@ importers:
       '@graphql-codegen/typescript-operations': 3.0.0
       '@graphql-codegen/urql-introspection': 2.2.1
       '@graphql-typed-document-node/core': ^3.1.1
-      '@hoppscotch/ui': workspace:^
+      '@hoppscotch/ui': workspace:^0.0.1
+      '@hoppscotch/vue-toasted': ^0.1.0
       '@types/cors': ^2.8.13
       '@types/express': ^4.17.15
       '@urql/vue': ^1.0.4
@@ -650,6 +651,7 @@ importers:
       '@vue/compiler-sfc': ^3.2.6
       '@vueuse/core': ^9.10.0
       cors: ^2.8.5
+      date-fns: ^2.29.3
       express: ^4.18.2
       express-graphql: ^0.12.0
       graphql: ^16.6.0
@@ -672,11 +674,13 @@ importers:
     dependencies:
       '@graphql-typed-document-node/core': 3.1.1_graphql@16.6.0
       '@hoppscotch/ui': link:../hoppscotch-ui
+      '@hoppscotch/vue-toasted': 0.1.0_vue@3.2.45
       '@types/cors': 2.8.13
       '@types/express': 4.17.16
       '@urql/vue': 1.0.4_graphql@16.6.0+vue@3.2.45
       '@vueuse/core': 9.12.0_vue@3.2.45
       cors: 2.8.5
+      date-fns: 2.29.3
       express: 4.18.2
       express-graphql: 0.12.0_graphql@16.6.0
       graphql: 16.6.0
@@ -10191,6 +10195,11 @@ packages:
     resolution: {integrity: sha512-8YnDaaf7N3k/q5HnTJVuzSyLETjoZjVmHc4AeKAzOvKHEFQKcn64OKBfzHYtE9zGjctNM7V9I0MfnUVLpi7M5g==}
     dev: true
 
+  /date-fns/2.29.3:
+    resolution: {integrity: sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==}
+    engines: {node: '>=0.11'}
+    dev: false
+
   /de-indent/1.0.2:
     resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
     dev: true