refactor: polish UI of admin dashboard users module (#48)
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
This commit is contained in:
Joel Jacob Stephen
committed by
GitHub
GitHub
parent
e978541bf1
commit
73a0255ae8
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="sm:px-6 p-4">
|
||||
<h3 class="text-3xl font-medium text-gray-200 mb-6">Dashboard</h3>
|
||||
<h3 class="text-3xl font-bold text-gray-200 mb-6">Dashboard</h3>
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
@@ -34,11 +34,11 @@
|
||||
<div
|
||||
class="flex items-center px-5 py-6 bg-zinc-800 rounded-md shadow-sm"
|
||||
>
|
||||
<icon-lucide-lock class="text-2xl text-cyan-400" />
|
||||
<icon-lucide-line-chart class="text-2xl text-cyan-400" />
|
||||
|
||||
<div class="mx-5">
|
||||
<h4 class="text-2xl font-semibold text-gray-200">20</h4>
|
||||
<div class="text-gray-400">Total Roles</div>
|
||||
<div class="text-gray-400">Total Requests</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -47,7 +47,7 @@
|
||||
<div
|
||||
class="flex items-center px-5 py-6 bg-zinc-800 rounded-md shadow-sm"
|
||||
>
|
||||
<icon-lucide-line-chart class="text-2xl text-orange-400" />
|
||||
<icon-lucide-folder-tree class="text-2xl text-orange-400" />
|
||||
|
||||
<div class="mx-5">
|
||||
<h4 class="text-2xl font-semibold text-gray-200">215</h4>
|
||||
|
||||
@@ -1,21 +1,43 @@
|
||||
<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-gray-200">User Details</h3>
|
||||
<div class="ml-3">
|
||||
<button
|
||||
class="p-2 mb-2 rounded-3xl bg-zinc-800"
|
||||
@click="router.push('/users')"
|
||||
>
|
||||
<icon-lucide-arrow-left class="text-xl" />
|
||||
</button>
|
||||
</div>
|
||||
<h3 class="sm:px-6 p-4 text-3xl font-bold 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 v-if="user.photoURL" class="relative h-20 w-20">
|
||||
<img class="object-cover rounded-3xl mb-3" :src="user.photoURL" />
|
||||
<span
|
||||
v-if="user.isAdmin"
|
||||
class="absolute bottom-0 ml-17 rounded-xl p-1 bg-emerald-800 border-1 border-emerald-400 text-xs text-emerald-400 px-2"
|
||||
>
|
||||
Admin
|
||||
</span>
|
||||
</div>
|
||||
<div v-else class="bg-primaryDark w-17 p-3 rounded-2xl mb-3">
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="bg-primaryDark w-17 p-3 rounded-2xl mb-3 relative"
|
||||
>
|
||||
<icon-lucide-user class="text-4xl" />
|
||||
<span
|
||||
v-if="user.isAdmin"
|
||||
class="absolute bottom-0 ml-11 rounded-xl p-1 bg-emerald-800 border-1 border-emerald-400 text-xs text-emerald-400 px-2"
|
||||
>
|
||||
Admin
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="user.uid">
|
||||
<label class="text-gray-200" for="username">UID</label>
|
||||
<div
|
||||
@@ -24,12 +46,15 @@
|
||||
{{ user.uid }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="user.displayName">
|
||||
<div>
|
||||
<label class="text-gray-200" for="username">Name</label>
|
||||
<div
|
||||
class="w-full p-3 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
|
||||
>
|
||||
{{ user.displayName }}
|
||||
<span v-if="user.displayName">
|
||||
{{ user.displayName }}
|
||||
</span>
|
||||
<span v-else> (Unnamed user) </span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="user.email">
|
||||
@@ -51,50 +76,93 @@
|
||||
</div>
|
||||
|
||||
<div class="flex justify-start mt-8">
|
||||
<span v-if="!user.isAdmin">
|
||||
<HoppButtonPrimary
|
||||
class="mr-4"
|
||||
filled
|
||||
outline
|
||||
label="Make Admin"
|
||||
@click="makeUserAdmin(user.uid)"
|
||||
/>
|
||||
</span>
|
||||
<span v-else>
|
||||
<HoppButtonPrimary
|
||||
class="mr-4"
|
||||
filled
|
||||
outline
|
||||
label="Remove Admin Privilege"
|
||||
@click="makeAdminToUser(user.uid)"
|
||||
/>
|
||||
</span>
|
||||
<HoppButtonSecondary
|
||||
class="mr-4"
|
||||
v-if="!user.isAdmin"
|
||||
class="mr-4 !bg-red-600 !text-gray-300 !hover:text-gray-100"
|
||||
filled
|
||||
outline
|
||||
label="Delete"
|
||||
@click="deleteUser(user.uid)"
|
||||
/>
|
||||
|
||||
<HoppButtonSecondary
|
||||
v-if="user.isAdmin"
|
||||
class="mr-4 !bg-red-600 !text-gray-300 !hover:text-gray-100"
|
||||
filled
|
||||
outline
|
||||
label="Delete"
|
||||
@click="
|
||||
toast.error('Remove admin privilege to delete the user!!')
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<HoppSmartConfirmModal
|
||||
:show="confirmDeletion"
|
||||
:title="`Confirm Deletion of User?`"
|
||||
:title="`Confirm deletion of user?`"
|
||||
@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(userToAdminUID)"
|
||||
/>
|
||||
<HoppSmartConfirmModal
|
||||
:show="confirmAdminToUser"
|
||||
:title="`Do you want to remove admin status from this user?`"
|
||||
@hide-modal="confirmAdminToUser = false"
|
||||
@resolve="makeAdminToUserMutation(adminToUserUID)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useMutation } from '@urql/vue';
|
||||
import {
|
||||
MakeUserAdminDocument,
|
||||
UserInfoDocument,
|
||||
RemoveUserAccountByAdminDocument,
|
||||
RemoveUserAsAdminDocument,
|
||||
} 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';
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
// 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);
|
||||
const route = useRoute();
|
||||
|
||||
onMounted(async () => {
|
||||
fetching.value = true;
|
||||
@@ -103,7 +171,7 @@ onMounted(async () => {
|
||||
.toPromise();
|
||||
|
||||
if (result.error) {
|
||||
toast.error('Unable to Load User Info..');
|
||||
toast.error('Unable to load user info..');
|
||||
}
|
||||
user.value = result.data?.admin.userInfo ?? {};
|
||||
fetching.value = false;
|
||||
@@ -123,19 +191,77 @@ const deleteUser = (id: string) => {
|
||||
const deleteUserMutation = async (id: string | null) => {
|
||||
if (!id) {
|
||||
confirmDeletion.value = false;
|
||||
toast.error('User Deletion Failed');
|
||||
toast.error('User deletion failed!!');
|
||||
return;
|
||||
}
|
||||
const variables = { uid: id };
|
||||
await userDeletion.executeMutation(variables).then((result) => {
|
||||
if (result.error) {
|
||||
toast.error('User Deletion Failed');
|
||||
toast.error('User deletion failed!!');
|
||||
} else {
|
||||
toast.success('User Deleted Successfully');
|
||||
toast.success('User deleted successfully!!');
|
||||
}
|
||||
});
|
||||
confirmDeletion.value = false;
|
||||
deleteUserUID.value = null;
|
||||
router.push('/users');
|
||||
};
|
||||
|
||||
// Make User Admin
|
||||
const userToAdmin = useMutation(MakeUserAdminDocument);
|
||||
const confirmUserToAdmin = ref(false);
|
||||
const userToAdminUID = ref<string | null>(null);
|
||||
|
||||
const makeUserAdmin = (id: string) => {
|
||||
confirmUserToAdmin.value = true;
|
||||
userToAdminUID.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 {
|
||||
user.value.isAdmin = true;
|
||||
toast.success('User is now an admin!!');
|
||||
}
|
||||
});
|
||||
confirmUserToAdmin.value = false;
|
||||
userToAdminUID.value = null;
|
||||
};
|
||||
|
||||
// Remove Admin Status from a current admin user
|
||||
const adminToUser = useMutation(RemoveUserAsAdminDocument);
|
||||
const confirmAdminToUser = ref(false);
|
||||
const adminToUserUID = ref<string | null>(null);
|
||||
|
||||
const makeAdminToUser = (id: string) => {
|
||||
confirmAdminToUser.value = true;
|
||||
adminToUserUID.value = id;
|
||||
};
|
||||
|
||||
const makeAdminToUserMutation = async (id: string | null) => {
|
||||
if (!id) {
|
||||
confirmAdminToUser.value = false;
|
||||
toast.error('Failed to remove admin status!!');
|
||||
return;
|
||||
}
|
||||
const variables = { uid: id };
|
||||
await adminToUser.executeMutation(variables).then((result) => {
|
||||
if (result.error) {
|
||||
toast.error('Failed to remove admin status!!');
|
||||
} else {
|
||||
user.value.isAdmin = false;
|
||||
toast.success('Admin status removed!!');
|
||||
}
|
||||
});
|
||||
confirmAdminToUser.value = false;
|
||||
adminToUserUID.value = null;
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
<template>
|
||||
<div>
|
||||
<h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">Users</h3>
|
||||
<h3 class="sm:px-6 p-4 text-3xl font-bold text-gray-200">Users</h3>
|
||||
|
||||
<!-- Table List View for All Users -->
|
||||
<!-- Table 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="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 p-4">
|
||||
<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 User"
|
||||
label="Invite a User"
|
||||
@click="showInviteUserModal = true"
|
||||
/>
|
||||
|
||||
<HoppButtonSecondary
|
||||
filled
|
||||
outline
|
||||
label="Invite Users"
|
||||
label="Invited Users"
|
||||
:to="'/users/invited'"
|
||||
/>
|
||||
</div>
|
||||
@@ -36,13 +36,13 @@
|
||||
>
|
||||
<thead>
|
||||
<tr
|
||||
class="text-gray-200 border-b border-gray-600 text-sm text-center"
|
||||
class="text-gray-200 border-b border-gray-600 text-sm font-bold"
|
||||
>
|
||||
<th class="font-normal px-3 pt-0 pb-3">User ID</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>
|
||||
<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>
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
<tr
|
||||
v-for="user in usersList"
|
||||
:key="user.uid"
|
||||
class="border-b border-gray-600 hover:bg-zinc-800 rounded-xl"
|
||||
class="border-b border-gray-600 hover:bg-zinc-800 hover:cursor-pointer rounded-xl"
|
||||
>
|
||||
<td
|
||||
@click="goToUserDetails(user)"
|
||||
@@ -62,57 +62,56 @@
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td
|
||||
@click="goToUserDetails(user)"
|
||||
class="sm:p-3 py-2 px-1 0"
|
||||
>
|
||||
<div
|
||||
v-if="user.displayName"
|
||||
class="flex items-center justify-center"
|
||||
class="flex items-center ml-2"
|
||||
>
|
||||
{{ user.displayName }}
|
||||
<span
|
||||
v-if="user.isAdmin"
|
||||
class="rounded-xl p-1 border-1 border-emerald-600 text-xs text-emerald-600 ml-2"
|
||||
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 justify-center text-center"
|
||||
>
|
||||
<span v-if="!user.isAdmin"> - </span>
|
||||
<div v-else class="flex items-center">
|
||||
<span class="ml-2"> (Unnamed user) </span>
|
||||
<span
|
||||
v-if="user.isAdmin"
|
||||
class="rounded-xl p-1 border-1 border-emerald-600 text-xs text-emerald-600 ml-2"
|
||||
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 text-sky-300 text-center"
|
||||
>
|
||||
{{ user.email }}
|
||||
</td>
|
||||
|
||||
<td @click="goToUserDetails(user)" class="sm:p-3 py-2 px-1">
|
||||
<div class="flex items-center justify-center">
|
||||
<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 text-center">
|
||||
<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-right text-gray-400"
|
||||
class="w-8 h-8 dropdown inline-flex items-center justify-end text-gray-400"
|
||||
>
|
||||
<icon-lucide-more-horizontal />
|
||||
</button>
|
||||
@@ -127,21 +126,29 @@
|
||||
>
|
||||
<div
|
||||
v-show="activeUserId && activeUserId == user.uid"
|
||||
class="absolute right-0 z-20 w-28 mt-5 bg-zinc-800 rounded-md shadow-xl"
|
||||
class="absolute right-0 z-20 bg-zinc-800 rounded-md shadow-xl"
|
||||
>
|
||||
<button
|
||||
<HoppSmartItem
|
||||
v-if="!user.isAdmin"
|
||||
:icon="IconUserCheck"
|
||||
:label="'Make Admin'"
|
||||
class="!hover:bg-emerald-600 w-full"
|
||||
@click="makeUserAdmin(user.uid)"
|
||||
class="block w-full h-10 px-4 py-2 text-sm 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-200 hover:bg-red-700 hover:text-white rounded-md"
|
||||
/>
|
||||
<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)"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
@@ -150,14 +157,15 @@
|
||||
</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
|
||||
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>
|
||||
@@ -204,33 +212,42 @@
|
||||
|
||||
<HoppSmartConfirmModal
|
||||
:show="confirmDeletion"
|
||||
:title="`Confirm User Deletion?`"
|
||||
: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?`"
|
||||
:title="`Do you want to make this user into an admin?`"
|
||||
@hide-modal="confirmUserToAdmin = false"
|
||||
@resolve="makeUserAdminMutation(adminUserUID)"
|
||||
@resolve="makeUserAdminMutation(userToAdminUID)"
|
||||
/>
|
||||
<HoppSmartConfirmModal
|
||||
:show="confirmAdminToUser"
|
||||
:title="`Do you want to remove admin status from this user?`"
|
||||
@hide-modal="confirmAdminToUser = false"
|
||||
@resolve="makeAdminToUserMutation(adminToUserUID)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onBeforeUnmount, ref } from 'vue';
|
||||
import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
||||
import { useMutation } from '@urql/vue';
|
||||
import {
|
||||
UsersListDocument,
|
||||
InviteUserToSignInDocument,
|
||||
RemoveUserAccountByAdminDocument,
|
||||
MakeUserAdminDocument,
|
||||
RemoveUserAccountByAdminDocument,
|
||||
RemoveUserAsAdminDocument,
|
||||
UsersListDocument,
|
||||
} from '../../helpers/backend/graphql';
|
||||
import { usePagedQuery } from '../../composables/usePagedQuery';
|
||||
import { format } from 'date-fns';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useToast } from '../../composables/toast';
|
||||
import { HoppButtonSecondary, HoppSmartSpinner } from '@hoppscotch/ui';
|
||||
import IconTrash from '~icons/lucide/trash';
|
||||
import IconUserMinus from '~icons/lucide/user-minus';
|
||||
import IconUserCheck from '~icons/lucide/user-check';
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
@@ -244,6 +261,7 @@ const {
|
||||
error,
|
||||
goToNextPage: fetchNextUsers,
|
||||
list: usersList,
|
||||
hasNextPage,
|
||||
} = usePagedQuery(
|
||||
UsersListDocument,
|
||||
(x) => x.admin.allUsers,
|
||||
@@ -260,14 +278,16 @@ const sendInvite = async () => {
|
||||
const variables = { inviteeEmail: email.value.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;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Go to Individual User Details Page
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const goToUserDetails = (user: any) => {
|
||||
router.push('/users/' + user.uid);
|
||||
@@ -294,6 +314,12 @@ const close = (e: any) => {
|
||||
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()
|
||||
);
|
||||
|
||||
// User Deletion
|
||||
const userDeletion = useMutation(RemoveUserAccountByAdminDocument);
|
||||
const confirmDeletion = ref(false);
|
||||
@@ -307,15 +333,15 @@ const deleteUser = (id: string) => {
|
||||
const deleteUserMutation = async (id: string | null) => {
|
||||
if (!id) {
|
||||
confirmDeletion.value = false;
|
||||
toast.error('User Deletion Failed');
|
||||
toast.error('User deletion failed!!');
|
||||
return;
|
||||
}
|
||||
const variables = { uid: id };
|
||||
await userDeletion.executeMutation(variables).then((result) => {
|
||||
if (result.error) {
|
||||
toast.error('User Deletion Failed');
|
||||
toast.error('User deletion failed!!');
|
||||
} else {
|
||||
toast.success('User Deleted Successfully');
|
||||
toast.success('User deleted successfully!!');
|
||||
usersList.value = usersList.value.filter((user) => user.uid !== id);
|
||||
toggleDropdown(id);
|
||||
}
|
||||
@@ -327,25 +353,25 @@ const deleteUserMutation = async (id: string | null) => {
|
||||
// Make User Admin
|
||||
const userToAdmin = useMutation(MakeUserAdminDocument);
|
||||
const confirmUserToAdmin = ref(false);
|
||||
const adminUserUID = ref<string | null>(null);
|
||||
const userToAdminUID = ref<string | null>(null);
|
||||
|
||||
const makeUserAdmin = (id: string) => {
|
||||
confirmUserToAdmin.value = true;
|
||||
adminUserUID.value = id;
|
||||
userToAdminUID.value = id;
|
||||
};
|
||||
|
||||
const makeUserAdminMutation = async (id: string | null) => {
|
||||
if (!id) {
|
||||
confirmUserToAdmin.value = false;
|
||||
toast.error('User Deletion Failed');
|
||||
toast.error('Failed to make user an admin!!');
|
||||
return;
|
||||
}
|
||||
const variables = { uid: id };
|
||||
await userToAdmin.executeMutation(variables).then((result) => {
|
||||
if (result.error) {
|
||||
toast.error('Failed to make user an admin');
|
||||
toast.error('Failed to make user an admin!!');
|
||||
} else {
|
||||
toast.success('User is now an Admin');
|
||||
toast.success('User is now an admin!!');
|
||||
usersList.value = usersList.value.map((user) => {
|
||||
if (user.uid === id) {
|
||||
user.isAdmin = true;
|
||||
@@ -355,6 +381,40 @@ const makeUserAdminMutation = async (id: string | null) => {
|
||||
}
|
||||
});
|
||||
confirmUserToAdmin.value = false;
|
||||
adminUserUID.value = null;
|
||||
userToAdminUID.value = null;
|
||||
};
|
||||
|
||||
// Remove Admin Status from a current Admin
|
||||
const adminToUser = useMutation(RemoveUserAsAdminDocument);
|
||||
const confirmAdminToUser = ref(false);
|
||||
const adminToUserUID = ref<string | null>(null);
|
||||
|
||||
const makeAdminToUser = (id: string) => {
|
||||
confirmAdminToUser.value = true;
|
||||
adminToUserUID.value = id;
|
||||
};
|
||||
|
||||
const makeAdminToUserMutation = async (id: string | null) => {
|
||||
if (!id) {
|
||||
confirmAdminToUser.value = false;
|
||||
toast.error('Failed to remove admin status!!');
|
||||
return;
|
||||
}
|
||||
const variables = { uid: id };
|
||||
await adminToUser.executeMutation(variables).then((result) => {
|
||||
if (result.error) {
|
||||
toast.error('Failed to remove admin status!!');
|
||||
} else {
|
||||
toast.success('Admin status removed!!');
|
||||
usersList.value = usersList.value.map((user) => {
|
||||
if (user.uid === id) {
|
||||
user.isAdmin = false;
|
||||
}
|
||||
return user;
|
||||
});
|
||||
}
|
||||
});
|
||||
confirmAdminToUser.value = false;
|
||||
adminToUserUID.value = null;
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,6 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">
|
||||
<div class="ml-3">
|
||||
<button
|
||||
class="p-2 mb-2 rounded-3xl bg-zinc-800"
|
||||
@click="router.push('/users')"
|
||||
>
|
||||
<icon-lucide-arrow-left class="text-xl" />
|
||||
</button>
|
||||
</div>
|
||||
<h3 class="sm:px-6 p-4 text-3xl font-bold text-gray-200 mb-2">
|
||||
Invited Users
|
||||
</h3>
|
||||
|
||||
@@ -13,18 +21,18 @@
|
||||
<HoppSmartSpinner />
|
||||
</div>
|
||||
<div v-else-if="error">
|
||||
<p class="text-xl">No Invited Users Found</p>
|
||||
<p class="text-xl">No Invited Users Found..</p>
|
||||
</div>
|
||||
|
||||
<table v-else class="w-full text-left">
|
||||
<thead>
|
||||
<tr
|
||||
class="text-gray-200 border-b border-gray-600 text-sm text-center"
|
||||
class="text-gray-200 border-b border-gray-600 text-sm font-bold"
|
||||
>
|
||||
<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">Invitee Email</th>
|
||||
<th class="font-normal px-3 pt-0 pb-3">Invited On</th>
|
||||
<th class="px-3 pt-0 pb-3">Admin ID</th>
|
||||
<th class="px-3 pt-0 pb-3">Admin Email</th>
|
||||
<th class="px-3 pt-0 pb-3">Invitee Email</th>
|
||||
<th class="px-3 pt-0 pb-3">Invited On</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
@@ -35,27 +43,29 @@
|
||||
<tr
|
||||
class="border-b border-gray-600 hover:bg-zinc-800 rounded-xl"
|
||||
>
|
||||
<td class="sm:p-3 py-2 px-3 max-w-30">
|
||||
<div class="flex justify-center">
|
||||
<span class="ml-3 truncate">
|
||||
<td class="sm:p-3 py-2 px-3 max-w-30 ml-2">
|
||||
<div>
|
||||
<span class="truncate">
|
||||
{{ user?.adminUid }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="sm:p-3 py-2 px-1 text-sky-300">
|
||||
<div class="flex items-center justify-center">
|
||||
<td class="sm:p-3 py-2 px-1">
|
||||
<span class="flex items-center ml-2">
|
||||
{{ user?.adminEmail }}
|
||||
</div>
|
||||
</span>
|
||||
</td>
|
||||
<td class="sm:p-3 py-2 px-1 text-sky-300 text-center">
|
||||
{{ user?.inviteeEmail }}
|
||||
<td class="sm:p-3 py-2 px-1 ml-4">
|
||||
<span class="ml-2">
|
||||
{{ user?.inviteeEmail }}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td class="sm:p-3 py-2 px-1">
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="flex items-center ml-2">
|
||||
<div class="flex flex-col">
|
||||
{{ getCreatedDate(user?.invitedOn) }}
|
||||
<div class="text-gray-400 text-xs text-center">
|
||||
<div class="text-gray-400 text-xs">
|
||||
{{ getCreatedTime(user?.invitedOn) }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -78,6 +88,9 @@ import { useQuery } from '@urql/vue';
|
||||
import { InvitedUsersDocument } from '../../helpers/backend/graphql';
|
||||
import { format } from 'date-fns';
|
||||
import { HoppSmartSpinner } from '@hoppscotch/ui';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// Get Proper Date Formats
|
||||
const getCreatedDate = (date: string) => format(new Date(date), 'dd-MM-yyyy');
|
||||
|
||||
Reference in New Issue
Block a user