chore: admin-dashboard team page UI polish (#75)
This commit is contained in:
Nivedin
GitHub
93
packages/hoppscotch-sh-admin/src/components/teams/Add.vue
Normal file
93
packages/hoppscotch-sh-admin/src/components/teams/Add.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<HoppSmartModal
|
||||
v-if="show"
|
||||
dialog
|
||||
title="Create team"
|
||||
@close="$emit('hide-modal')"
|
||||
>
|
||||
<template #body>
|
||||
<div class="flex flex-col space-y-4 relative">
|
||||
<div class="flex flex-col relaive">
|
||||
<label for="teamName" class="py-2"> Team owner email </label>
|
||||
<HoppSmartAutoComplete
|
||||
styles="w-full p-2 bg-transparent border border-divider rounded-md "
|
||||
class="flex-1 !flex"
|
||||
:source="allUsersEmail"
|
||||
:spellcheck="true"
|
||||
placeholder=""
|
||||
@input="(email: string) => getOwnerEmail(email)"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label for="teamName" class="py-2">Team name</label>
|
||||
<input
|
||||
id="teamName"
|
||||
v-model="teamName"
|
||||
v-focus
|
||||
class="input relative"
|
||||
placeholder=""
|
||||
type="email"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<span class="flex space-x-2">
|
||||
<HoppButtonPrimary
|
||||
label="Create team"
|
||||
:loading="loadingState"
|
||||
@click="createTeam"
|
||||
/>
|
||||
<HoppButtonSecondary label="Cancel" outline filled @click="hideModal" />
|
||||
</span>
|
||||
</template>
|
||||
</HoppSmartModal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useToast } from '~/composables/toast';
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
show: boolean;
|
||||
loadingState: boolean;
|
||||
allUsersEmail: string[];
|
||||
}>(),
|
||||
{
|
||||
show: false,
|
||||
loadingState: false,
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'hide-modal'): void;
|
||||
(event: 'create-team', teamName: string, ownerEmail: string): void;
|
||||
}>();
|
||||
|
||||
const teamName = ref('');
|
||||
const ownerEmail = ref('');
|
||||
|
||||
const getOwnerEmail = (email: string) => (ownerEmail.value = email);
|
||||
|
||||
const createTeam = () => {
|
||||
if (teamName.value.trim() === '') {
|
||||
toast.error('Please enter a valid team name');
|
||||
return;
|
||||
}
|
||||
if (ownerEmail.value.trim() === '') {
|
||||
toast.error('Please enter a valid owner email');
|
||||
return;
|
||||
}
|
||||
emit('create-team', teamName.value, ownerEmail.value);
|
||||
teamName.value = '';
|
||||
ownerEmail.value = '';
|
||||
};
|
||||
|
||||
const hideModal = () => {
|
||||
emit('hide-modal');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-col space-y-8">
|
||||
<div v-if="team.id" class="flex flex-col space-y-3">
|
||||
<label class="text-accentContrast" for="username">Team ID</label>
|
||||
<div class="w-full p-3 bg-divider rounded-md">
|
||||
{{ team.id }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="teamName" class="flex flex-col space-y-3">
|
||||
<label class="text-accentContrast" for="teamname">Team Name </label>
|
||||
<div
|
||||
class="flex bg-divider rounded-md items-stretch flex-1 border border-divider"
|
||||
:class="{
|
||||
'!border-accent': showRenameInput,
|
||||
}"
|
||||
>
|
||||
<input
|
||||
class="bg-transparent flex-1 p-3 rounded-md !rounded-r-none disabled:select-none border-r-0 disabled:cursor-default disabled:opacity-50"
|
||||
type="text"
|
||||
v-model="newTeamName"
|
||||
placeholder="Team Name"
|
||||
autofocus
|
||||
:disabled="!showRenameInput"
|
||||
v-focus
|
||||
/>
|
||||
<HoppButtonPrimary
|
||||
class="!rounded-l-none"
|
||||
filled
|
||||
:icon="showRenameInput ? IconSave : IconEdit"
|
||||
:label="showRenameInput ? 'Rename' : 'Edit'"
|
||||
@click="handleNameEdit()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="team.teamMembers.length" class="flex flex-col space-y-3">
|
||||
<label class="text-accentContrast" for="username"
|
||||
>Number of Members</label
|
||||
>
|
||||
<div class="w-full p-3 bg-divider rounded-md">
|
||||
{{ team.teamMembers.length }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-start mt-8">
|
||||
<HoppButtonPrimary
|
||||
class="!bg-red-600 !hover:opacity-80"
|
||||
filled
|
||||
label="Delete Team"
|
||||
@click="team && $emit('delete-team', team.id)"
|
||||
:icon="IconTrash"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { useToast } from '~/composables/toast';
|
||||
import { TeamInfoQuery } from '~/helpers/backend/graphql';
|
||||
import IconEdit from '~icons/lucide/edit';
|
||||
import IconSave from '~icons/lucide/save';
|
||||
import IconTrash from '~icons/lucide/trash-2';
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
const props = defineProps<{
|
||||
team: TeamInfoQuery['admin']['teamInfo'];
|
||||
teamName: string;
|
||||
showRenameInput: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'delete-team', teamID: string): void;
|
||||
(event: 'rename-team', teamName: string): void;
|
||||
(event: 'update:showRenameInput', showRenameInput: boolean): void;
|
||||
}>();
|
||||
|
||||
const newTeamName = ref(props.teamName);
|
||||
|
||||
const handleNameEdit = () => {
|
||||
if (props.showRenameInput) {
|
||||
renameTeam();
|
||||
} else {
|
||||
emit('update:showRenameInput', true);
|
||||
}
|
||||
};
|
||||
|
||||
const renameTeam = () => {
|
||||
if (newTeamName.value.trim() === '') {
|
||||
toast.error('Team name cannot be empty');
|
||||
return;
|
||||
}
|
||||
emit('rename-team', newTeamName.value);
|
||||
};
|
||||
</script>
|
||||
@@ -1,19 +1,16 @@
|
||||
<template>
|
||||
<div class="my-6">
|
||||
<h3 class="text-2xl font-bold text-gray-200">Team Members</h3>
|
||||
<div class="flex flex-col mb-6">
|
||||
<div class="flex items-center justify-end flex-1 pt-4 mb-4">
|
||||
<div class="flex">
|
||||
<HoppButtonPrimary
|
||||
:icon="IconUserPlus"
|
||||
label="Add Members"
|
||||
filled
|
||||
@click="showInvite = !showInvite"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex">
|
||||
<HoppButtonPrimary
|
||||
:icon="IconUserPlus"
|
||||
label="Add Members"
|
||||
filled
|
||||
@click="showInvite = !showInvite"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="border rounded border-divider">
|
||||
<div class="border rounded border-divider my-8">
|
||||
<div
|
||||
v-if="team?.teamMembers?.length === 0"
|
||||
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
|
||||
@@ -38,7 +35,7 @@
|
||||
class="flex divide-x divide-dividerLight"
|
||||
>
|
||||
<input
|
||||
class="flex flex-1 px-4 py-2 bg-transparent"
|
||||
class="flex flex-1 px-4 py-3 bg-transparent"
|
||||
placeholder="Email"
|
||||
:name="'param' + index"
|
||||
:value="member.email"
|
||||
@@ -51,14 +48,19 @@
|
||||
theme="popover"
|
||||
:on-shown="() => tippyActions![index].focus()"
|
||||
>
|
||||
<span class="select-wrapper">
|
||||
<span class="relative">
|
||||
<input
|
||||
class="flex flex-1 px-4 py-2 bg-transparent cursor-pointer"
|
||||
class="flex flex-1 px-4 py-3 bg-transparent cursor-pointer"
|
||||
placeholder="Permissions"
|
||||
:name="'value' + index"
|
||||
:value="member.role"
|
||||
readonly
|
||||
/>
|
||||
<span
|
||||
class="absolute right-4 top-1/2 transform !-translate-y-1/2"
|
||||
>
|
||||
<IconChevronDown />
|
||||
</span>
|
||||
</span>
|
||||
<template #content="{ hide }">
|
||||
<div
|
||||
@@ -136,18 +138,20 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<HoppButtonPrimary label="Save" outline @click="saveUpdatedTeam" />
|
||||
<div class="flex">
|
||||
<HoppButtonPrimary label="Save" outline @click="saveUpdatedTeam" />
|
||||
</div>
|
||||
<TeamsInvite
|
||||
:show="showInvite"
|
||||
:editingTeamID="route.params.id.toString()"
|
||||
@member="updateMembers"
|
||||
@hide-modal="
|
||||
() => {
|
||||
showInvite = false;
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<TeamsInvite
|
||||
:show="showInvite"
|
||||
:editingTeamID="route.params.id.toString()"
|
||||
@member="updateMembers"
|
||||
@hide-modal="
|
||||
() => {
|
||||
showInvite = false;
|
||||
}
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -156,6 +160,7 @@ import IconCircle from '~icons/lucide/circle';
|
||||
import IconUserPlus from '~icons/lucide/user-plus';
|
||||
import IconUserMinus from '~icons/lucide/user-minus';
|
||||
import IconHelpCircle from '~icons/lucide/help-circle';
|
||||
import IconChevronDown from '~icons/lucide/chevron-down';
|
||||
import { useClientHandle, useMutation } from '@urql/vue';
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
@@ -171,6 +176,10 @@ import { HoppButtonPrimary, HoppButtonSecondary } from '@hoppscotch/ui';
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update-team'): void;
|
||||
}>();
|
||||
|
||||
// Used to Invoke the Invite Members Modal
|
||||
const showInvite = ref(false);
|
||||
|
||||
@@ -195,15 +204,14 @@ const getTeamInfo = async () => {
|
||||
fetching.value = false;
|
||||
};
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update-team'): void;
|
||||
}>();
|
||||
|
||||
onMounted(async () => await getTeamInfo());
|
||||
onUnmounted(() => emit('update-team'));
|
||||
|
||||
// Update members tab after a change in the members list or member roles
|
||||
const updateMembers = () => getTeamInfo();
|
||||
const updateMembers = () => {
|
||||
getTeamInfo();
|
||||
emit('update-team');
|
||||
};
|
||||
|
||||
// Template refs
|
||||
const tippyActions = ref<any | null>(null);
|
||||
@@ -295,8 +303,10 @@ const saveUpdatedTeam = async () => {
|
||||
);
|
||||
if (updateMemberRoleResult.error) {
|
||||
toast.error('Role updation has failed!!');
|
||||
roleUpdates.value = [];
|
||||
} else {
|
||||
toast.success('Roles updated successfully!!');
|
||||
roleUpdates.value = [];
|
||||
}
|
||||
isLoading.value = false;
|
||||
});
|
||||
@@ -333,5 +343,6 @@ const removeExistingTeamMember = async (userID: string, index: number) => {
|
||||
toast.success('Member removed successfully!!');
|
||||
}
|
||||
isLoadingIndex.value = null;
|
||||
emit('update-team');
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
<template>
|
||||
<h3 class="text-2xl font-bold text-gray-200 mb-5">Pending Invites</h3>
|
||||
|
||||
<div class="border rounded divide-y divide-dividerLight border-divider">
|
||||
<div class="border rounded divide-y divide-dividerLight border-divider my-8">
|
||||
<div v-if="fetching" class="flex items-center justify-center p-4">
|
||||
<HoppSmartSpinner />
|
||||
</div>
|
||||
|
||||
102
packages/hoppscotch-sh-admin/src/components/teams/Table.vue
Normal file
102
packages/hoppscotch-sh-admin/src/components/teams/Table.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="text-secondary border-b border-dividerDark text-sm text-left">
|
||||
<th class="px-3 pb-3">Team ID</th>
|
||||
<th class="px-3 pb-3">Team Name</th>
|
||||
<th class="px-3 pb-3">Number of Members</th>
|
||||
<th class="px-3 pb-3"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody class="divide-y divide-divider">
|
||||
<tr v-if="teamList.length === 0">
|
||||
<div class="py-6 px-3">No teams found ...</div>
|
||||
</tr>
|
||||
<tr
|
||||
v-else
|
||||
v-for="team in teamList"
|
||||
:key="team.id"
|
||||
class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"
|
||||
>
|
||||
<td
|
||||
@click="$emit('go-to-team-details', team.id)"
|
||||
class="py-4 px-3 max-w-50"
|
||||
>
|
||||
<div class="flex">
|
||||
<span class="truncate">
|
||||
{{ team.id }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td
|
||||
@click="$emit('go-to-team-details', team.id)"
|
||||
class="py-4 px-3 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="$emit('go-to-team-details', team.id)" class="py-4 px-3">
|
||||
<span class="ml-7">
|
||||
{{ team.members?.length }}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div class="relative">
|
||||
<tippy interactive trigger="click" theme="popover">
|
||||
<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="
|
||||
() => {
|
||||
$emit('delete-team', team.id);
|
||||
hide();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</tippy>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { TippyComponent } from 'vue-tippy';
|
||||
import { ref } from 'vue';
|
||||
import IconTrash from '~icons/lucide/trash';
|
||||
import IconMoreHorizontal from '~icons/lucide/more-horizontal';
|
||||
import { TeamListQuery } from '~/helpers/backend/graphql';
|
||||
|
||||
// Template refs
|
||||
const tippyActions = ref<TippyComponent | null>(null);
|
||||
|
||||
defineProps<{
|
||||
teamList: TeamListQuery['admin']['allTeams'];
|
||||
}>();
|
||||
|
||||
defineEmits<{
|
||||
(event: 'go-to-team-details', teamID: string): void;
|
||||
(event: 'delete-team', teamID: string): void;
|
||||
}>();
|
||||
</script>
|
||||
Reference in New Issue
Block a user