btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor: updated tables to use custom slot implementations

Browse Source
This commit is contained in:
Joel Jacob Stephen
2023-08-22 11:18:52 +05:30
parent 14a3dad013
commit d9bddb1094
5 changed files with 224 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/hoppscotch-sh-admin/locales/en.json
View File

@@ -111,6 +111,7 @@
"team_members_tab": "Team members", "team_members_tab": "Team members",
"teams": "Teams", "teams": "Teams",
"uid": "UID", "uid": "UID",
"unnamed": "(Unnamed Team)",
"valid_name": "Please enter a valid team name", "valid_name": "Please enter a valid team name",
"valid_owner_email": "Please enter a valid owner email" "valid_owner_email": "Please enter a valid owner email"
}, },

5
packages/hoppscotch-sh-admin/src/components.d.ts vendored
View File

@@ -19,14 +19,19 @@ declare module '@vue/runtime-core' {
HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor'] HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete'] HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete']
HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal'] HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput']
HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem'] HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal'] HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture'] HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
HoppSmartPlaceholder: typeof import('@hoppscotch/ui')['HoppSmartPlaceholder']
HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner'] HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab'] HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
HoppSmartTable: typeof import('@hoppscotch/ui')['HoppSmartTable']
IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default'] IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default'] IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default']
IconLucideInbox: typeof import('~icons/lucide/inbox')['default'] IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
IconLucideUser: typeof import('~icons/lucide/user')['default']
TeamsAdd: typeof import('./components/teams/Add.vue')['default'] TeamsAdd: typeof import('./components/teams/Add.vue')['default']
TeamsDetails: typeof import('./components/teams/Details.vue')['default'] TeamsDetails: typeof import('./components/teams/Details.vue')['default']
TeamsInvite: typeof import('./components/teams/Invite.vue')['default'] TeamsInvite: typeof import('./components/teams/Invite.vue')['default']

136
packages/hoppscotch-sh-admin/src/pages/teams/index.vue
View File

@@ -27,36 +27,87 @@
</p> </p>
</div> </div>
<div v-else class="m-5"> <div v-else>
<HoppSmartTable <HoppSmartTable>
:list="newTeamsList" <template #head>
:headings="headings" <tr
@on-row-clicked="goToTeamDetails" class="text-secondary border-b border-dividerDark text-sm text-left bg-primaryLight"
> >
<template #action="{ item }"> <th class="px-6 py-2">{{ t('teams.id') }}</th>
<div class="relative"> <th class="px-6 py-3">{{ t('teams.name') }}</th>
<tippy interactive trigger="click" theme="popover"> <th class="px-6 py-2">{{ t('teams.members') }}</th>
<HoppButtonSecondary <th class="px-6 py-2"></th>
v-tippy="{ theme: 'tooltip' }" </tr>
:icon="IconMoreHorizontal" </template>
/> <template #body>
<template #content="{ hide }"> <tr
<div v-for="team in teamsList"
ref="tippyActions" :key="team.id"
class="flex flex-col focus:outline-none" class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"
tabindex="0" >
@keyup.escape="hide()" <td
> @click="goToTeamDetails(team.id)"
<HoppSmartItem class="py-4 px-3 max-w-50"
:icon="IconTrash" >
:label="t('teams.delete_team')" <div class="flex">
class="!hover:bg-red-600 w-full" <span class="truncate">
@click="deleteTeam(item)" {{ team.id }}
</span>
</div>
</td>
<td
@click="goToTeamDetails(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">
{{ t('teams.unnamed') }}
</span>
</td>
<td @click="goToTeamDetails(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"
/> />
</div> <template #content="{ hide }">
</template> <div
</tippy> ref="tippyActions"
</div> class="flex flex-col focus:outline-none"
tabindex="0"
@keyup.escape="hide()"
>
<HoppSmartItem
:icon="IconTrash"
:label="t('teams.delete_team')"
class="!hover:bg-red-600 w-full"
@click="
() => {
deleteTeam(team.id);
hide();
}
"
/>
</div>
</template>
</tippy>
</div>
</td>
</tr>
</template> </template>
</HoppSmartTable> </HoppSmartTable>
</div> </div>
@@ -140,26 +191,6 @@ const {
{ cursor: undefined, take: teamsPerPage } { cursor: undefined, take: teamsPerPage }
); );
// The new teams list that is used in the table
const newTeamsList = computed(() => {
return teamsList.value.map((team) => {
return {
id: team.id,
name: team.name,
members: team.members.length,
action: '',
};
});
});
// Table Headings
const headings = [
{ key: 'id', label: t('teams.id') },
{ key: 'name', label: t('teams.name') },
{ key: 'members', label: t('teams.members') },
{ key: 'action', label: '', preventClick: true },
];
// Create Team // Create Team
const createTeamMutation = useMutation(CreateTeamDocument); const createTeamMutation = useMutation(CreateTeamDocument);
const showCreateTeamModal = ref(false); const showCreateTeamModal = ref(false);
@@ -197,8 +228,7 @@ const createTeam = async (newTeamName: string, ownerEmail: string) => {
// Go To Individual Team Details Page // Go To Individual Team Details Page
const router = useRouter(); const router = useRouter();
const goToTeamDetails = (team: { id: string }) => const goToTeamDetails = (teamId: string) => router.push('/teams/' + teamId);
router.push('/teams/' + team.id);
// Reload Teams Page when routed back to the teams page // Reload Teams Page when routed back to the teams page
const route = useRoute(); const route = useRoute();
@@ -212,9 +242,9 @@ const teamDeletion = useMutation(RemoveTeamDocument);
const confirmDeletion = ref(false); const confirmDeletion = ref(false);
const deleteTeamID = ref<string | null>(null); const deleteTeamID = ref<string | null>(null);
const deleteTeam = (team: { id: string }) => { const deleteTeam = (id: string) => {
confirmDeletion.value = true; confirmDeletion.value = true;
deleteTeamID.value = team.id; deleteTeamID.value = id;
}; };
const deleteTeamMutation = async (id: string | null) => { const deleteTeamMutation = async (id: string | null) => {

258
packages/hoppscotch-sh-admin/src/pages/users/index.vue
View File

@@ -31,96 +31,138 @@
<div v-else-if="error">{{ t('users.load_list_error') }}</div> <div v-else-if="error">{{ t('users.load_list_error') }}</div>
<div v-else-if="usersList.length > 0" class="m-5"> <div v-else-if="usersList.length > 0">
<HoppSmartTable <HoppSmartTable>
:list="newUsersList" <template #head>
:headings="headings" <tr
@on-row-clicked="goToUserDetails" class="text-secondary border-b border-dividerDark text-sm text-left bg-primaryLight"
> >
<template #name="{ item }"> <th class="px-6 py-2">{{ t('users.id') }}</th>
<div> <th class="px-6 py-2">{{ t('users.name') }}</th>
<div class="flex flex-col truncate justify-center"> <th class="px-6 py-2">{{ t('users.email') }}</th>
<span <th class="px-6 py-2">{{ t('users.date') }}</th>
v-if="item.name.length" <th class="px-6 py-2"></th>
class="my-1 truncate whitespace-normal" </tr>
>
{{ item.name }}
</span>
<span v-if="item.name.length === 0 && !isUserAdmin(item)"
>-</span
>
<span
v-if="isUserAdmin(item)"
class="text-xs font-medium px-3 py-1 my-1 rounded-full bg-green-900 text-green-300 w-min"
>
Admin
</span>
</div>
</div>
</template> </template>
<template #createdOn="{ item }"> <template #body>
<div class="flex flex-col truncate"> <tr
<span v-if="item" class="truncate"> v-for="user in usersList"
{{ getCreatedDate(item.createdOn) }} :key="user.uid"
</span> class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"
<span v-else> - </span> >
<td
<div> @click="goToUserDetails(user.uid)"
<div class="text-gray-400 text-tiny"> class="py-2 px-3 max-w-30"
<span> >
<span> <div class="flex">
{{ getCreatedTime(item.createdOn) }} <span class="truncate">
</span> {{ user.uid }}
</span> </span>
</div> </div>
</div> </td>
</div>
</template>
<template #action="{ item }"> <td @click="goToUserDetails(user.uid)" class="py-2 px-3">
<div class="relative"> <div
<span> v-if="user.displayName"
<tippy interactive trigger="click" theme="popover"> class="flex items-center space-x-3"
<HoppButtonSecondary >
v-tippy="{ theme: 'tooltip' }" <span>
:icon="IconMoreHorizontal" {{ user.displayName }}
/> </span>
<template #content="{ hide }"> <span
<div v-if="user.isAdmin"
ref="tippyActions" class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
class="flex flex-col focus:outline-none" >
tabindex="0" {{ t('users.admin') }}
@keyup.escape="hide()" </span>
> </div>
<HoppSmartItem <div v-else class="flex items-center space-x-3">
v-if="!isUserAdmin(item)" <span> {{ t('users.unnamed') }} </span>
:icon="IconUserCheck" <span
:label="t('users.make_admin')" v-if="user.isAdmin"
class="!hover:bg-emerald-600" class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
@click="makeUserAdmin(item)" >
/> {{ t('users.admin') }}
<HoppSmartItem </span>
v-else </div>
:icon="IconUserMinus" </td>
:label="t('users.remove_admin_status')"
class="!hover:bg-emerald-600" <td @click="goToUserDetails(user.uid)" class="py-2 px-3">
@click="makeAdminToUser(item)" <span>
/> {{ user.email }}
<HoppSmartItem </span>
v-if="!isUserAdmin(item)" </td>
:icon="IconTrash"
:label="t('users.delete_user')" <td @click="goToUserDetails(user.uid)" class="py-2 px-3">
class="!hover:bg-red-600" <div class="flex items-center">
@click="deleteUser(item)" <div class="flex flex-col">
/> {{ getCreatedDate(user.createdOn) }}
<div class="text-gray-400 text-tiny">
{{ getCreatedTime(user.createdOn) }}
</div> </div>
</template> </div>
</tippy> </div>
</span> </td>
</div>
<td>
<div class="relative">
<span>
<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
v-if="!user.isAdmin"
:icon="IconUserCheck"
:label="t('users.make_admin')"
class="!hover:bg-emerald-600"
@click="
() => {
makeUserAdmin(user.uid);
hide();
}
"
/>
<HoppSmartItem
v-else
:icon="IconUserMinus"
:label="t('users.remove_admin_status')"
class="!hover:bg-emerald-600"
@click="
() => {
makeAdminToUser(user.uid);
hide();
}
"
/>
<HoppSmartItem
v-if="!user.isAdmin"
:icon="IconTrash"
:label="t('users.delete_user')"
class="!hover:bg-red-600"
@click="
() => {
deleteUser(user.uid);
hide();
}
"
/>
</div>
</template>
</tippy>
</span>
</div>
</td>
</tr>
</template> </template>
</HoppSmartTable> </HoppSmartTable>
</div> </div>
@@ -166,7 +208,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { format } from 'date-fns'; import { format } from 'date-fns';
import { computed, ref, watch } from 'vue'; import { ref, watch } from 'vue';
import { useMutation } from '@urql/vue'; import { useMutation } from '@urql/vue';
import { import {
InviteNewUserDocument, InviteNewUserDocument,
@@ -174,7 +216,6 @@ import {
RemoveUserByAdminDocument, RemoveUserByAdminDocument,
RemoveUserAsAdminDocument, RemoveUserAsAdminDocument,
UsersListDocument, UsersListDocument,
UsersListQuery,
} from '../../helpers/backend/graphql'; } from '../../helpers/backend/graphql';
import { usePagedQuery } from '~/composables/usePagedQuery'; import { usePagedQuery } from '~/composables/usePagedQuery';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
@@ -211,36 +252,6 @@ const {
{ cursor: undefined, take: usersPerPage } { cursor: undefined, take: usersPerPage }
); );
// The new users list that is used in the table
const newUsersList = computed(() => {
return usersList.value.map((user) => {
return {
uid: user.uid,
name: user.displayName ?? '',
email: user.email ?? '',
createdOn: user.createdOn,
action: '',
};
});
});
const isUserAdmin = (
selectedUser: UsersListQuery['admin']['allUsers'][number]
) => {
return usersList.value.filter((user) => {
return user.uid === selectedUser.uid;
})[0].isAdmin;
};
// Table Headings
const headings = [
{ key: 'uid', label: t('users.id') },
{ key: 'name', label: t('users.name') },
{ key: 'email', label: t('users.email') },
{ key: 'createdOn', label: t('users.date') },
{ key: 'action', label: '', preventClick: true },
];
// Send Invitation through Email // Send Invitation through Email
const sendInvitation = useMutation(InviteNewUserDocument); const sendInvitation = useMutation(InviteNewUserDocument);
const showInviteUserModal = ref(false); const showInviteUserModal = ref(false);
@@ -264,8 +275,7 @@ const sendInvite = async (email: string) => {
// Go to Individual User Details Page // Go to Individual User Details Page
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const goToUserDetails = (user: { uid: string }) => const goToUserDetails = (uid: string) => router.push('/users/' + uid);
router.push('/users/' + user.uid);
watch( watch(
() => route.params.id, () => route.params.id,
@@ -301,9 +311,9 @@ const userToAdmin = useMutation(MakeUserAdminDocument);
const confirmUserToAdmin = ref(false); const confirmUserToAdmin = ref(false);
const userToAdminUID = ref<string | null>(null); const userToAdminUID = ref<string | null>(null);
const makeUserAdmin = (user: { uid: string }) => { const makeUserAdmin = (id: string) => {
confirmUserToAdmin.value = true; confirmUserToAdmin.value = true;
userToAdminUID.value = user.uid; userToAdminUID.value = id;
}; };
const makeUserAdminMutation = async (id: string | null) => { const makeUserAdminMutation = async (id: string | null) => {
@@ -335,14 +345,14 @@ const adminToUser = useMutation(RemoveUserAsAdminDocument);
const confirmAdminToUser = ref(false); const confirmAdminToUser = ref(false);
const adminToUserUID = ref<string | null>(null); const adminToUserUID = ref<string | null>(null);
const makeAdminToUser = (user: { uid: string }) => { const makeAdminToUser = (id: string) => {
confirmAdminToUser.value = true; confirmAdminToUser.value = true;
adminToUserUID.value = user.uid; adminToUserUID.value = id;
}; };
const deleteUser = (user: { uid: string }) => { const deleteUser = (id: string) => {
confirmDeletion.value = true; confirmDeletion.value = true;
deleteUserUID.value = user.uid; deleteUserUID.value = id;
}; };
const makeAdminToUserMutation = async (id: string | null) => { const makeAdminToUserMutation = async (id: string | null) => {

2
packages/hoppscotch-sh-admin/src/pages/users/invited.vue
View File

@@ -24,7 +24,7 @@
<p class="text-xl">{{ t('users.no_invite') }}</p> <p class="text-xl">{{ t('users.no_invite') }}</p>
</div> </div>
<div v-else class="m-5"> <div v-else>
<HoppSmartTable :list="newInvitedUsersList" :headings="headings"> <HoppSmartTable :list="newInvitedUsersList" :headings="headings">
<template #invitedOn="{ item }"> <template #invitedOn="{ item }">
<div class="flex flex-col truncate"> <div class="flex flex-col truncate">