chore: admin-dashboard team page UI polish (#75)
This commit is contained in:
Nivedin
GitHub
@@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<div v-if="fetching" class="flex justify-center">
|
||||
<h1 class="text-lg font-bold text-secondaryDark">Dashboard</h1>
|
||||
|
||||
<div v-if="fetching" class="flex justify-center py-6">
|
||||
<HoppSmartSpinner />
|
||||
</div>
|
||||
|
||||
@@ -9,7 +11,6 @@
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<h1 class="text-lg font-bold text-secondaryDark">Dashboard</h1>
|
||||
<div class="py-10 grid lg:grid-cols-2 gap-6">
|
||||
<DashboardMetricsCard
|
||||
:count="metrics.usersCount"
|
||||
|
||||
@@ -1,139 +1,62 @@
|
||||
<template>
|
||||
<div v-if="fetching" class="flex justify-center"><HoppSmartSpinner /></div>
|
||||
<div v-if="team">
|
||||
<div class="flex">
|
||||
<button
|
||||
class="p-2 mb-2 mr-5 rounded-3xl bg-zinc-800"
|
||||
@click="router.push('/teams')"
|
||||
>
|
||||
<icon-lucide-arrow-left class="text-xl" />
|
||||
</button>
|
||||
<div class="">
|
||||
<h3 class="mx-auto text-3xl font-bold text-gray-200 mt-1">
|
||||
{{ team.name }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="team" class="flex !rounded-none justify-center mb-5 sm:px-6 p-4">
|
||||
<HoppButtonSecondary
|
||||
class="!rounded-none"
|
||||
:class="{ '!bg-primaryDark': showTeamDetails }"
|
||||
filled
|
||||
outline
|
||||
label="Details"
|
||||
@click="switchToTeamDetailsTab"
|
||||
/>
|
||||
|
||||
<HoppButtonSecondary
|
||||
class="!rounded-none"
|
||||
:class="{ '!bg-primaryDark': showMembers }"
|
||||
filled
|
||||
outline
|
||||
label="Members"
|
||||
@click="switchToMembersTab"
|
||||
/>
|
||||
|
||||
<HoppButtonSecondary
|
||||
class="!rounded-none"
|
||||
:class="{ '!bg-primaryDark': showPendingInvites }"
|
||||
filled
|
||||
outline
|
||||
label="Invites"
|
||||
@click="switchToPendingInvitesTab"
|
||||
/>
|
||||
<div class="flex flex-col">
|
||||
<div v-if="fetching" class="flex justify-center">
|
||||
<HoppSmartSpinner />
|
||||
</div>
|
||||
|
||||
<div v-if="team && showTeamDetails">
|
||||
<h3 class="sm:px-6 px-4 text-2xl font-bold text-gray-200">
|
||||
Team Details
|
||||
</h3>
|
||||
|
||||
<div class="px-6 rounded-md mt-5">
|
||||
<div class="grid gap-6">
|
||||
<div v-if="team.id">
|
||||
<label class="text-gray-200" for="username">Team ID</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"
|
||||
>
|
||||
{{ team.id }}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-gray-200" for="username">Team Name</label>
|
||||
|
||||
<div v-if="!showRenameInput" class="flex">
|
||||
<div
|
||||
class="flex-1 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"
|
||||
>
|
||||
{{ teamName }}
|
||||
</div>
|
||||
|
||||
<HoppButtonPrimary
|
||||
class="cursor-pointer mt-2 ml-2"
|
||||
filled
|
||||
:icon="IconEdit"
|
||||
label="Edit"
|
||||
@click="showRenameInput = true"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="flex">
|
||||
<input
|
||||
class="flex-1 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"
|
||||
type="text"
|
||||
v-model="teamName"
|
||||
placeholder="Team Name"
|
||||
autofocus
|
||||
v-focus
|
||||
/>
|
||||
<div>
|
||||
<HoppButtonPrimary
|
||||
class="cursor-pointer mt-2 ml-2 min-h-11"
|
||||
:icon="IconSave"
|
||||
filled
|
||||
label="Rename"
|
||||
@click="renameTeamName()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="team.teamMembers.length">
|
||||
<label class="text-gray-200" for="username"
|
||||
>Number of Members</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"
|
||||
>
|
||||
{{ team.teamMembers.length }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-start mt-8">
|
||||
<HoppButtonSecondary
|
||||
class="mr-4 !bg-red-600 !text-gray-300 !hover:text-gray-100"
|
||||
filled
|
||||
label="Delete Team"
|
||||
@click="team && deleteTeam(team.id)"
|
||||
/>
|
||||
<div v-if="team" class="flex flex-col">
|
||||
<div class="flex items-center space-x-4">
|
||||
<button
|
||||
class="p-2 rounded-3xl bg-divider hover:bg-dividerDark transition flex justify-center items-center"
|
||||
@click="router.push('/teams')"
|
||||
>
|
||||
<icon-lucide-arrow-left class="text-xl" />
|
||||
</button>
|
||||
<div class="flex justify-center items-center space-x-3">
|
||||
<h1 class="text-lg text-accentContrast">
|
||||
{{ team.name }}
|
||||
</h1>
|
||||
<span>/</span>
|
||||
<h2 class="text-lg text-accentContrast">
|
||||
{{ currentTabName }}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="team" class="sm:px-6 px-4">
|
||||
<TeamsMembers v-if="showMembers" @updateTeam="updateTeam()" />
|
||||
<TeamsPendingInvites v-if="showPendingInvites" :editingTeamID="team.id" />
|
||||
<HoppSmartConfirmModal
|
||||
:show="confirmDeletion"
|
||||
:title="`Confirm Deletion of ${team.name} team?`"
|
||||
@hide-modal="confirmDeletion = false"
|
||||
@resolve="deleteTeamMutation(deleteTeamUID)"
|
||||
/>
|
||||
<div class="py-8">
|
||||
<HoppSmartTabs v-model="selectedOptionTab" render-inactive-tabs>
|
||||
<HoppSmartTab :id="'details'" label="Details">
|
||||
<TeamsDetails
|
||||
:team="team"
|
||||
:teamName="teamName"
|
||||
v-model:showRenameInput="showRenameInput"
|
||||
@rename-team="renameTeamName"
|
||||
@delete-team="deleteTeam"
|
||||
class="py-8 px-4"
|
||||
/>
|
||||
</HoppSmartTab>
|
||||
<HoppSmartTab :id="'members'" label="Members">
|
||||
<TeamsMembers @update-team="updateTeam()" class="py-8 px-4" />
|
||||
</HoppSmartTab>
|
||||
<HoppSmartTab :id="'invites'" label="Invites">
|
||||
<TeamsPendingInvites :editingTeamID="team.id" class="py-8 px-4" />
|
||||
</HoppSmartTab>
|
||||
</HoppSmartTabs>
|
||||
|
||||
<HoppSmartConfirmModal
|
||||
:show="confirmDeletion"
|
||||
:title="`Confirm Deletion of ${team.name} team?`"
|
||||
@hide-modal="confirmDeletion = false"
|
||||
@resolve="deleteTeamMutation(deleteTeamUID)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useClientHandle, useMutation } from '@urql/vue';
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useToast } from '../../composables/toast';
|
||||
import {
|
||||
@@ -143,33 +66,26 @@ import {
|
||||
TeamMemberRole,
|
||||
TeamInfoQuery,
|
||||
} from '../../helpers/backend/graphql';
|
||||
import IconEdit from '~icons/lucide/edit';
|
||||
import IconSave from '~icons/lucide/save';
|
||||
import { HoppSmartTabs } from '@hoppscotch/ui';
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
// Switch between team details, members and invites tab
|
||||
const showMembers = ref(false);
|
||||
const showPendingInvites = ref(false);
|
||||
const showTeamDetails = ref(true);
|
||||
type OptionTabs = 'details' | 'members' | 'invites';
|
||||
|
||||
const switchToMembersTab = () => {
|
||||
showMembers.value = true;
|
||||
showTeamDetails.value = false;
|
||||
showPendingInvites.value = false;
|
||||
};
|
||||
const selectedOptionTab = ref<OptionTabs>('details');
|
||||
|
||||
const switchToPendingInvitesTab = () => {
|
||||
showTeamDetails.value = false;
|
||||
showMembers.value = false;
|
||||
showPendingInvites.value = true;
|
||||
};
|
||||
|
||||
const switchToTeamDetailsTab = () => {
|
||||
showTeamDetails.value = true;
|
||||
showMembers.value = false;
|
||||
showPendingInvites.value = false;
|
||||
};
|
||||
const currentTabName = computed(() => {
|
||||
switch (selectedOptionTab.value) {
|
||||
case 'details':
|
||||
return 'Team details';
|
||||
case 'members':
|
||||
return 'Team members';
|
||||
case 'invites':
|
||||
return 'Pending invites';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
});
|
||||
|
||||
// Get the details of the team
|
||||
const team = ref<TeamInfoQuery['admin']['teamInfo'] | undefined>();
|
||||
@@ -194,27 +110,28 @@ const getTeamInfo = async () => {
|
||||
};
|
||||
|
||||
onMounted(async () => await getTeamInfo());
|
||||
|
||||
const updateTeam = async () => await getTeamInfo();
|
||||
|
||||
// Rename the team name
|
||||
const showRenameInput = ref(false);
|
||||
const teamRename = useMutation(RenameTeamDocument);
|
||||
|
||||
const renameTeamName = async () => {
|
||||
const renameTeamName = async (teamName: string) => {
|
||||
if (!team.value) return;
|
||||
|
||||
if (team.value.name === teamName.value) {
|
||||
if (team.value.name === teamName) {
|
||||
showRenameInput.value = false;
|
||||
return;
|
||||
}
|
||||
const variables = { uid: team.value.id, name: teamName.value };
|
||||
const variables = { uid: team.value.id, name: teamName };
|
||||
await teamRename.executeMutation(variables).then((result) => {
|
||||
if (result.error) {
|
||||
toast.error('Failed to rename team!!');
|
||||
} else {
|
||||
showRenameInput.value = false;
|
||||
if (team.value) {
|
||||
team.value.name = teamName.value;
|
||||
team.value.name = teamName;
|
||||
toast.success('Team renamed successfully!!');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,182 +1,53 @@
|
||||
<template>
|
||||
<div>
|
||||
<h3 class="sm:px-6 p-4 text-3xl font-bold text-gray-200">Teams</h3>
|
||||
<div class="flex flex-col">
|
||||
<h1 class="text-lg font-bold text-secondaryDark">Teams</h1>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<div class="py-2 overflow-x-auto">
|
||||
<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">
|
||||
<HoppButtonPrimary
|
||||
class="mr-4"
|
||||
label="Create Team"
|
||||
@click="showCreateTeamModal = true"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex py-10">
|
||||
<HoppButtonPrimary
|
||||
:icon="IconAddUsers"
|
||||
label="Create team"
|
||||
@click="showCreateTeamModal = true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div
|
||||
v-if="fetching && !error && !(teamList.length >= 1)"
|
||||
class="flex justify-center"
|
||||
>
|
||||
<HoppSmartSpinner />
|
||||
</div>
|
||||
<div v-else-if="error">Unable to Load Teams List..</div>
|
||||
<div class="overflow-x-auto">
|
||||
<div
|
||||
v-if="fetching && !error && teamList.length === 0"
|
||||
class="flex justify-center"
|
||||
>
|
||||
<HoppSmartSpinner />
|
||||
</div>
|
||||
|
||||
<table v-if="teamList.length >= 1" class="w-full text-left">
|
||||
<thead>
|
||||
<tr
|
||||
class="text-gray-200 border-b border-dividerDark text-sm font-bold"
|
||||
>
|
||||
<th class="px-3 pt-0 pb-3">Team ID</th>
|
||||
<th class="px-3 pt-0 pb-3">Team Name</th>
|
||||
<th class="px-3 pt-0 pb-3">Number of Members</th>
|
||||
<th class="px-3 pt-0 pb-3"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<div v-else-if="error">Unable to Load Teams List..</div>
|
||||
|
||||
<tbody class="text-gray-300">
|
||||
<tr
|
||||
v-for="team in teamList"
|
||||
:key="team.id"
|
||||
class="border-b border-divider hover:bg-zinc-800 hover:cursor-pointer rounded-xl p-3"
|
||||
>
|
||||
<td
|
||||
@click="goToTeamDetails(team.id)"
|
||||
class="sm:p-3 py-5 px-1 min-w-30 max-w-50"
|
||||
>
|
||||
<div class="flex">
|
||||
<span class="ml-3 truncate">
|
||||
{{ team.id }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<TeamsTable
|
||||
v-else
|
||||
:teamList="teamList"
|
||||
@goToTeamDetails="goToTeamDetails"
|
||||
@deleteTeam="deleteTeam"
|
||||
class=""
|
||||
/>
|
||||
|
||||
<td
|
||||
@click="goToTeamDetails(team.id)"
|
||||
class="sm:p-3 py-5 px-1 min-w-80"
|
||||
>
|
||||
<span
|
||||
v-if="team.name"
|
||||
class="flex items-center ml-4 truncate"
|
||||
>
|
||||
{{ team.name }}
|
||||
</span>
|
||||
<span v-else class="flex items-center ml-4">
|
||||
(Unnamed team)
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td
|
||||
@click="goToTeamDetails(team.id)"
|
||||
class="sm:p-3 py-5 px-1"
|
||||
>
|
||||
<span class="ml-7">
|
||||
{{ team.members?.length }}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div class="relative">
|
||||
<tippy
|
||||
interactive
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
:on-shown="() => tippyActions!.focus()"
|
||||
>
|
||||
<HoppButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:icon="IconMoreHorizontal"
|
||||
/>
|
||||
<template #content="{ hide }">
|
||||
<div
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
@keyup.escape="hide()"
|
||||
>
|
||||
<HoppSmartItem
|
||||
:icon="IconTrash"
|
||||
:label="'Delete Team'"
|
||||
class="!hover:bg-red-600 w-full"
|
||||
@click="deleteTeam(team.id)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</tippy>
|
||||
</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="fetchNextTeams"
|
||||
>
|
||||
<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 && teamList.length >= teamsPerPage"
|
||||
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="fetchNextTeams"
|
||||
>
|
||||
<span>Show more </span>
|
||||
<icon-lucide-chevron-down class="ml-2 text-lg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<HoppSmartModal
|
||||
v-if="showCreateTeamModal"
|
||||
dialog
|
||||
title="Create Team"
|
||||
@close="showCreateTeamModal = false"
|
||||
>
|
||||
<template #body>
|
||||
<div>
|
||||
<div>
|
||||
<div class="px-6 rounded-md">
|
||||
<div>
|
||||
<div class="my-4">
|
||||
<div>
|
||||
<label class="text-gray-200" for="emailAddress">
|
||||
Enter Team Name
|
||||
</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"
|
||||
v-model="teamName"
|
||||
placeholder="Team Name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-6">
|
||||
<div>
|
||||
<label class="text-gray-200" for="emailAddress">
|
||||
Enter Email Address of Team Owner
|
||||
</label>
|
||||
|
||||
<HoppSmartAutoComplete
|
||||
placeholder="Enter Email"
|
||||
:source="allUsersEmail"
|
||||
:spellcheck="true"
|
||||
styles="
|
||||
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
|
||||
"
|
||||
class="flex-1 !flex"
|
||||
@input="(email: string) => getOwnerEmail(email)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end my-2 pt-3">
|
||||
<HoppButtonPrimary label="Create Team" @click="createTeam" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</HoppSmartModal>
|
||||
|
||||
<TeamsAdd
|
||||
:show="showCreateTeamModal"
|
||||
:allUsersEmail="allUsersEmail"
|
||||
:loading-state="createTeamLoading"
|
||||
@hide-modal="showCreateTeamModal = false"
|
||||
@create-team="createTeam"
|
||||
/>
|
||||
<HoppSmartConfirmModal
|
||||
:show="confirmDeletion"
|
||||
:title="`Confirm Deletion of the team?`"
|
||||
@@ -198,14 +69,9 @@ import { usePagedQuery } from '../../composables/usePagedQuery';
|
||||
import { ref, watch, computed } from 'vue';
|
||||
import { useMutation, useQuery } from '@urql/vue';
|
||||
import { useToast } from '../../composables/toast';
|
||||
import { TippyComponent } from 'vue-tippy';
|
||||
import IconTrash from '~icons/lucide/trash';
|
||||
import IconMoreHorizontal from '~icons/lucide/more-horizontal';
|
||||
import IconAddUsers from '~icons/lucide/plus';
|
||||
|
||||
const toast = useToast();
|
||||
// Template refs
|
||||
const tippyActions = ref<TippyComponent | null>(null);
|
||||
|
||||
// Get Users List
|
||||
const { data } = useQuery({ query: MetricsDocument });
|
||||
const usersPerPage = computed(() => data.value?.admin.usersCount || 10000);
|
||||
@@ -238,24 +104,23 @@ const {
|
||||
);
|
||||
|
||||
// Create Team
|
||||
const teamName = ref('');
|
||||
const ownerEmail = ref('');
|
||||
const createTeamMutation = useMutation(CreateTeamDocument);
|
||||
const showCreateTeamModal = ref(false);
|
||||
const getOwnerEmail = (email: string) => (ownerEmail.value = email);
|
||||
const createTeamLoading = ref(false);
|
||||
|
||||
const createTeam = async () => {
|
||||
if (teamName.value.length < 6) {
|
||||
const createTeam = async (newTeamName: string, ownerEmail: string) => {
|
||||
if (newTeamName.length < 6) {
|
||||
toast.error('Team name should be atleast 6 characters long!!');
|
||||
return;
|
||||
}
|
||||
if (ownerEmail.value.length == 0) {
|
||||
if (ownerEmail.length == 0) {
|
||||
toast.error('Please enter email of team owner!!');
|
||||
return;
|
||||
}
|
||||
createTeamLoading.value = true;
|
||||
const userUid =
|
||||
usersList.value.find((user) => user.email === ownerEmail.value)?.uid || '';
|
||||
const variables = { name: teamName.value.trim(), userUid: userUid };
|
||||
usersList.value.find((user) => user.email === ownerEmail)?.uid || '';
|
||||
const variables = { name: newTeamName.trim(), userUid: userUid };
|
||||
await createTeamMutation.executeMutation(variables).then((result) => {
|
||||
if (result.error) {
|
||||
if (result.error.toString() == '[GraphQL] user/not_found') {
|
||||
@@ -263,13 +128,11 @@ const createTeam = async () => {
|
||||
} else {
|
||||
toast.error('Failed to create team!!');
|
||||
}
|
||||
teamName.value = '';
|
||||
ownerEmail.value = '';
|
||||
createTeamLoading.value = false;
|
||||
} else {
|
||||
toast.success('Team created successfully!!');
|
||||
showCreateTeamModal.value = false;
|
||||
teamName.value = '';
|
||||
ownerEmail.value = '';
|
||||
createTeamLoading.value = false;
|
||||
refetch();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -26,6 +26,7 @@
|
||||
>
|
||||
<HoppSmartSpinner />
|
||||
</div>
|
||||
|
||||
<div v-else-if="error">Unable to Load Users List..</div>
|
||||
|
||||
<UsersTable
|
||||
|
||||
Reference in New Issue
Block a user