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

feat: introducing a new smart table hoppscotch ui component (#3178)

Browse Source 
Co-authored-by: Anwarul Islam <anwaarulislaam@gmail.com>
This commit is contained in:
Joel Jacob Stephen
2023-11-06 11:31:55 +05:30
committed by GitHub
parent 6daa043a1b
commit 23e3739718
11 changed files with 441 additions and 401 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,71 +12,34 @@
<div class="flex flex-col">
<div class="py-2 overflow-x-auto">
<div>
<div v-if="fetching" class="flex justify-center">
<HoppSmartSpinner />
</div>
<div v-else-if="error || invitedUsers === undefined">
<p class="text-xl">{{ t('users.no_invite') }}</p>
</div>
<table v-else class="w-full text-left">
<thead>
<tr
class="text-secondary border-b border-dividerDark text-sm text-left"
>
<th class="px-3 pb-3">{{ t('users.admin_id') }}</th>
<th class="px-3 pb-3">{{ t('users.admin_email') }}</th>
<th class="px-3 pb-3">{{ t('users.invitee_email') }}</th>
<th class="px-3 pb-3">{{ t('users.invited_on') }}</th>
</tr>
</thead>
<tbody class="divide-y divide-divider">
<tr
v-if="invitedUsers.length === 0"
class="text-secondaryDark py-4"
>
<div class="py-6 px-3">{{ t('users.no_invite') }}</div>
</tr>
<tr
v-else
v-for="(user, index) in invitedUsers"
:key="index"
class="text-secondaryDark hover:bg-zinc-800 hover:cursor-pointer rounded-xl"
>
<td class="py-2 px-3 max-w-36">
<div class="flex">
<span class="truncate">
{{ user?.adminUid }}
</span>
</div>
</td>
<td class="py-2 px-3">
<span class="flex items-center">
{{ user?.adminEmail }}
</span>
</td>
<td class="py-2 px-3 max-w-52">
<div class="flex">
<span class="truncate">
{{ user?.inviteeEmail }}
</span>
</div>
</td>
<td class="py-2 px-3">
<div class="flex items-center">
<div class="flex flex-col">
{{ getCreatedDate(user?.invitedOn) }}
<div class="text-gray-400 text-xs">
{{ getCreatedTime(user?.invitedOn) }}
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div v-if="fetching" class="flex justify-center">
<HoppSmartSpinner />
</div>
<div v-else-if="error" class="text-xl">
{{ t('users.invite_load_list_error') }}
</div>
<HoppSmartTable
v-else-if="invitedUsers?.length"
:list="invitedUsers"
:headings="headings"
>
<template #invitedOn="{ item }">
<div v-if="item" class="pr-2 truncate">
<span class="truncate">
{{ getCreatedDate(item.invitedOn) }}
</span>
<div class="text-gray-400 text-tiny">
{{ getCreatedTime(item.invitedOn) }}
</div>
</div>
<span v-else> - </span>
</template>
</HoppSmartTable>
<div v-else class="text-lg">{{ t('users.no_invite') }}</div>
</div>
</div>
</div>
@@ -102,4 +65,12 @@ const getCreatedTime = (date: string) => format(new Date(date), 'hh:mm a');
// Get Invited Users
const { fetching, error, data } = useQuery({ query: InvitedUsersDocument });
const invitedUsers = computed(() => data?.value?.infra.invitedUsers);
// Table Headings
const headings = [
{ key: 'adminUid', label: t('users.admin_id') },
{ key: 'adminEmail', label: t('users.admin_email') },
{ key: 'inviteeEmail', label: t('users.invitee_email') },
{ key: 'invitedOn', label: t('users.invited_on') },
];
</script>