fix: sh-admin dashboard bugs and UI polish (#56)
This commit is contained in:
Nivedin
GitHub
@@ -1,120 +1,113 @@
|
||||
<template>
|
||||
<div v-if="fetching" class="flex justify-center"><HoppSmartSpinner /></div>
|
||||
<div v-else>
|
||||
<div class="ml-3">
|
||||
<div v-else class="flex flex-col space-y-4">
|
||||
<div>
|
||||
<button
|
||||
class="p-2 mb-2 rounded-3xl bg-zinc-800"
|
||||
class="p-2 mb-2 rounded-3xl bg-divider"
|
||||
@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" 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 class="rounded-md">
|
||||
<div class="grid gap-6 mt-4">
|
||||
<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 left-17 bottom-0 text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
|
||||
>
|
||||
Admin
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<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-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 left-15 bottom-0 text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
|
||||
>
|
||||
Admin
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="user.uid">
|
||||
<label class="text-gray-200" for="username">UID</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.uid }}
|
||||
</div>
|
||||
</div>
|
||||
<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"
|
||||
>
|
||||
<span v-if="user.displayName">
|
||||
{{ user.displayName }}
|
||||
</span>
|
||||
<span v-else> (Unnamed user) </span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="user.email">
|
||||
<label class="text-gray-200" for="username">Email</label>
|
||||
<div
|
||||
class="w-full p-3 mt-2 bg-zinc-800 border-gray-200 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-200" for="username">Created On</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"
|
||||
>
|
||||
{{ getCreatedDateAndTime(user.createdOn) }}
|
||||
</div>
|
||||
</div>
|
||||
</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
|
||||
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 v-if="user.uid">
|
||||
<label class="text-secondaryDark" for="username">UID</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.uid }}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-secondaryDark" 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"
|
||||
>
|
||||
<span v-if="user.displayName">
|
||||
{{ user.displayName }}
|
||||
</span>
|
||||
<span v-else> (Unnamed user) </span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="user.email">
|
||||
<label class="text-secondaryDark" for="username">Email</label>
|
||||
<div
|
||||
class="w-full p-3 mt-2 bg-zinc-800 border-gray-200 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-secondaryDark" for="username">Created On</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"
|
||||
>
|
||||
{{ getCreatedDateAndTime(user.createdOn) }}
|
||||
</div>
|
||||
</div>
|
||||
</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
|
||||
:icon="IconUserMinus"
|
||||
label="Remove Admin Privilege"
|
||||
@click="makeAdminToUser(user.uid)"
|
||||
/>
|
||||
</span>
|
||||
<HoppButtonSecondary
|
||||
v-if="!user.isAdmin"
|
||||
class="mr-4 !bg-red-600 !text-gray-300 !hover:text-gray-100"
|
||||
filled
|
||||
outline
|
||||
label="Delete"
|
||||
:icon="IconTrash"
|
||||
@click="deleteUser(user.uid)"
|
||||
/>
|
||||
|
||||
<HoppButtonSecondary
|
||||
v-if="user.isAdmin"
|
||||
class="mr-4 !bg-red-600 !text-gray-300 !hover:text-gray-100"
|
||||
filled
|
||||
outline
|
||||
:icon="IconTrash"
|
||||
label="Delete"
|
||||
@click="toast.error('Remove admin privilege to delete the user!!')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<HoppSmartConfirmModal
|
||||
@@ -151,6 +144,8 @@ import { useClientHandle } from '@urql/vue';
|
||||
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';
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
|
||||
Reference in New Issue
Block a user