fix: sh-admin dashboard bugs and UI polish (#56)
This commit is contained in:
Nivedin
GitHub
@@ -1,215 +1,62 @@
|
||||
<template>
|
||||
<div>
|
||||
<h3 class="sm:px-6 p-4 text-3xl font-bold text-gray-200">Users</h3>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<!-- Table View for All Users -->
|
||||
<div class="flex flex-col">
|
||||
<div class="pt-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 px-4 pt-4 pb-1">
|
||||
<div class="flex w-full items-center mb-7">
|
||||
<HoppButtonPrimary
|
||||
class="mr-4"
|
||||
label="Invite a User"
|
||||
@click="showInviteUserModal = true"
|
||||
/>
|
||||
<h1 class="text-lg font-bold text-secondaryDark">Users</h1>
|
||||
<div class="flex items-center space-x-4 py-10">
|
||||
<HoppButtonPrimary
|
||||
label="Invite a user"
|
||||
@click="showInviteUserModal = true"
|
||||
:icon="IconAddUser"
|
||||
/>
|
||||
|
||||
<HoppButtonSecondary
|
||||
filled
|
||||
outline
|
||||
label="Invited Users"
|
||||
:to="'/users/invited'"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
<div class="flex">
|
||||
<HoppButtonSecondary
|
||||
outline
|
||||
filled
|
||||
label="Invited users"
|
||||
:to="'/users/invited'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<div
|
||||
v-if="fetching && !error && usersList.length === 0"
|
||||
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-gray-200 border-b border-gray-600 text-sm font-bold"
|
||||
>
|
||||
<th class="px-3 pt-0 pb-3">User ID</th>
|
||||
<th class="px-3 pt-0 pb-3">Name</th>
|
||||
<th class="px-3 pt-0 pb-3">Email</th>
|
||||
<th class="px-3 pt-0 pb-3">Date</th>
|
||||
<th class="px-3 pt-0 pb-3"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<UsersTable
|
||||
v-else-if="usersList.length >= 1"
|
||||
:usersList="usersList"
|
||||
:fetching="fetching"
|
||||
:error="error"
|
||||
@goToUserDetails="goToUserDetails"
|
||||
@makeUserAdmin="makeUserAdmin"
|
||||
@makeAdminToUser="makeAdminToUser"
|
||||
@deleteUser="deleteUser"
|
||||
/>
|
||||
|
||||
<tbody class="text-gray-300">
|
||||
<tr
|
||||
v-for="user in usersList"
|
||||
:key="user.uid"
|
||||
class="border-b border-gray-600 hover:bg-zinc-800 hover:cursor-pointer rounded-xl"
|
||||
>
|
||||
<td
|
||||
@click="goToUserDetails(user)"
|
||||
class="sm:p-3 py-2 px-1 max-w-30"
|
||||
>
|
||||
<div class="flex">
|
||||
<span class="ml-3 truncate">
|
||||
{{ user.uid }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<div v-else class="flex justify-center">No Users Found</div>
|
||||
|
||||
<td
|
||||
@click="goToUserDetails(user)"
|
||||
class="sm:p-3 py-2 px-1 0"
|
||||
>
|
||||
<div
|
||||
v-if="user.displayName"
|
||||
class="flex items-center ml-2"
|
||||
>
|
||||
{{ user.displayName }}
|
||||
<span
|
||||
v-if="user.isAdmin"
|
||||
class="rounded-xl p-1 bg-emerald-300 bg-opacity-15 border-1 border-emerald-400 text-xs text-emerald-400 px-2 ml-2"
|
||||
>
|
||||
Admin
|
||||
</span>
|
||||
</div>
|
||||
<div v-else class="flex items-center">
|
||||
<span class="ml-2"> (Unnamed user) </span>
|
||||
<span
|
||||
v-if="user.isAdmin"
|
||||
class="rounded-xl p-1 bg-emerald-300 bg-opacity-15 border-1 border-emerald-400 text-xs text-emerald-400 px-2 ml-2"
|
||||
>
|
||||
Admin
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td @click="goToUserDetails(user)" class="sm:p-3 py-2 px-1">
|
||||
<span class="ml-2">
|
||||
{{ user.email }}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td @click="goToUserDetails(user)" class="sm:p-3 py-2 px-1">
|
||||
<div class="flex items-center ml-2">
|
||||
<div class="flex flex-col">
|
||||
{{ getCreatedDate(user.createdOn) }}
|
||||
<div class="text-gray-400 text-xs">
|
||||
{{ getCreatedTime(user.createdOn) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div class="relative">
|
||||
<button
|
||||
@click.stop="toggleDropdown(user.uid)"
|
||||
class="w-8 h-8 dropdown inline-flex items-center justify-end 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 bg-zinc-800 rounded-md shadow-xl"
|
||||
>
|
||||
<HoppSmartItem
|
||||
v-if="!user.isAdmin"
|
||||
:icon="IconUserCheck"
|
||||
:label="'Make Admin'"
|
||||
class="!hover:bg-emerald-600 w-full"
|
||||
@click="makeUserAdmin(user.uid)"
|
||||
/>
|
||||
<HoppSmartItem
|
||||
v-else
|
||||
:icon="IconUserMinus"
|
||||
:label="'Remove Admin Status'"
|
||||
class="!hover:bg-emerald-600 w-full"
|
||||
@click="makeAdminToUser(user.uid)"
|
||||
/>
|
||||
<HoppSmartItem
|
||||
v-if="!user.isAdmin"
|
||||
:icon="IconTrash"
|
||||
:label="'Delete User'"
|
||||
class="!hover:bg-red-600 w-full"
|
||||
@click="deleteUser(user.uid)"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div
|
||||
v-if="hasNextPage"
|
||||
class="flex justify-center mt-5 p-2 font-semibold rounded-3xl bg-zinc-800 hover:bg-zinc-700 mx-auto w-32 text-light-500"
|
||||
@click="fetchNextUsers"
|
||||
>
|
||||
<span>Show more </span>
|
||||
<icon-lucide-chevron-down class="ml-2 text-lg" />
|
||||
</div>
|
||||
<div v-else class="mb-12 p-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="hasNextPage && usersList.length >= usersPerPage"
|
||||
class="flex justify-center my-5 px-3 py-2 cursor-pointer font-semibold rounded-3xl bg-dividerDark hover:bg-divider transition mx-auto w-38 text-secondaryDark"
|
||||
@click="fetchNextUsers"
|
||||
>
|
||||
<span>Show more </span>
|
||||
<icon-lucide-chevron-down class="ml-2 text-lg" />
|
||||
</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-200" for="emailAddress">
|
||||
Email Address
|
||||
</label>
|
||||
<input
|
||||
class="w-full p-3 mt-3 bg-zinc-800 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>
|
||||
|
||||
<UsersInviteModal
|
||||
:show="showInviteUserModal"
|
||||
@hide-modal="showInviteUserModal = false"
|
||||
@send-invite="sendInvite"
|
||||
/>
|
||||
<HoppSmartConfirmModal
|
||||
:show="confirmDeletion"
|
||||
:title="`Confirm user deletion?`"
|
||||
@@ -232,7 +79,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
||||
import { ref, watch } from 'vue';
|
||||
import { useMutation } from '@urql/vue';
|
||||
import {
|
||||
InviteNewUserDocument,
|
||||
@@ -242,19 +89,13 @@ import {
|
||||
UsersListDocument,
|
||||
} from '../../helpers/backend/graphql';
|
||||
import { usePagedQuery } from '../../composables/usePagedQuery';
|
||||
import { format } from 'date-fns';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useToast } from '../../composables/toast';
|
||||
import IconTrash from '~icons/lucide/trash';
|
||||
import IconUserMinus from '~icons/lucide/user-minus';
|
||||
import IconUserCheck from '~icons/lucide/user-check';
|
||||
import { HoppButtonSecondary } from '@hoppscotch/ui';
|
||||
import IconAddUser from '~icons/lucide/user-plus';
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
// 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');
|
||||
|
||||
// Get Paginated Results of all the users in the infra
|
||||
const usersPerPage = 20;
|
||||
const {
|
||||
@@ -272,17 +113,20 @@ const {
|
||||
);
|
||||
|
||||
// Send Invitation through Email
|
||||
const email = ref('');
|
||||
const sendInvitation = useMutation(InviteNewUserDocument);
|
||||
const showInviteUserModal = ref(false);
|
||||
|
||||
const sendInvite = async () => {
|
||||
const variables = { inviteeEmail: email.value.trim() };
|
||||
const sendInvite = async (email: string) => {
|
||||
if (!email.trim()) {
|
||||
toast.error('Please enter a valid email address');
|
||||
return;
|
||||
}
|
||||
const variables = { inviteeEmail: email.trim() };
|
||||
await sendInvitation.executeMutation(variables).then((result) => {
|
||||
if (result.error) {
|
||||
toast.error('Failed to send invitation!!');
|
||||
toast.error('Failed to send invitation');
|
||||
} else {
|
||||
toast.success('Email invitation sent successfully!!');
|
||||
toast.success('Email invitation sent successfully');
|
||||
showInviteUserModal.value = false;
|
||||
}
|
||||
});
|
||||
@@ -291,32 +135,10 @@ const sendInvite = async () => {
|
||||
// Go to Individual User Details Page
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const goToUserDetails = (user: any) => {
|
||||
router.push('/users/' + user.uid);
|
||||
const goToUserDetails = (uid: string) => {
|
||||
router.push('/users/' + uid);
|
||||
};
|
||||
|
||||
// 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));
|
||||
|
||||
// Reload Users Page when routed back to the users page
|
||||
watch(
|
||||
() => route.params.id,
|
||||
() => window.location.reload()
|
||||
@@ -327,11 +149,6 @@ const userDeletion = useMutation(RemoveUserByAdminDocument);
|
||||
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;
|
||||
@@ -345,7 +162,6 @@ const deleteUserMutation = async (id: string | null) => {
|
||||
} else {
|
||||
toast.success('User deleted successfully!!');
|
||||
usersList.value = usersList.value.filter((user) => user.uid !== id);
|
||||
toggleDropdown(id);
|
||||
}
|
||||
});
|
||||
confirmDeletion.value = false;
|
||||
@@ -396,6 +212,11 @@ const makeAdminToUser = (id: string) => {
|
||||
adminToUserUID.value = id;
|
||||
};
|
||||
|
||||
const deleteUser = (id: string) => {
|
||||
confirmDeletion.value = true;
|
||||
deleteUserUID.value = id;
|
||||
};
|
||||
|
||||
const makeAdminToUserMutation = async (id: string | null) => {
|
||||
if (!id) {
|
||||
confirmAdminToUser.value = false;
|
||||
|
||||
Reference in New Issue
Block a user