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

feat(sh-admin): introducing last active status to users table and individual user's page in dashboard (#4077)

Browse Source 
Co-authored-by: jamesgeorge007 <25279263+jamesgeorge007@users.noreply.github.com>
This commit is contained in:
Joel Jacob Stephen
2024-06-26 12:30:40 +05:30
committed by GitHub
parent 25fd35770a
commit b3e42bf7c3
6 changed files with 23 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -62,10 +62,10 @@
</div>
</template>
<template #head>
<th class="px-6 py-2">{{ t('users.id') }}</th>
<th class="px-6 py-2">{{ t('users.name') }}</th>
<th class="px-6 py-2">{{ t('users.email') }}</th>
<th class="px-6 py-2">{{ t('users.date') }}</th>
<th class="px-6 py-2">{{ t('users.created_on') }}</th>
<th class="px-6 py-2">{{ t('users.last_active_on') }}</th>
<!-- Empty header for Action Button -->
<th class="w-20 px-6 py-2"></th>
</template>
@@ -79,10 +79,6 @@
</template>
<template #body="{ row: user }">
<td class="py-2 px-7 max-w-[8rem] truncate">
{{ user.uid }}
</td>
<td class="py-2 px-7">
<div class="flex items-center space-x-2">
<span>
@@ -109,6 +105,8 @@
</div>
</td>
<td class="py-2 px-7">{{ getLastActiveOn(user.lastActiveOn) }}</td>
<td @click.stop class="flex justify-end w-20">
<div class="mt-2 mr-5">
<tippy interactive trigger="click" theme="popover">
@@ -245,6 +243,7 @@
<script setup lang="ts">
import { useMutation, useQuery } from '@urql/vue';
import { useTimeAgo } from '@vueuse/core';
import { format } from 'date-fns';
import { computed, onUnmounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
@@ -277,15 +276,18 @@ import IconX from '~icons/lucide/x';
const t = useI18n();
const toast = useToast();
// Time and Date Helpers
const getCreatedDate = (date: string) => format(new Date(date), 'dd-MM-yyyy');
const getCreatedTime = (date: string) => format(new Date(date), 'hh:mm a');
const getLastActiveOn = (date: string | null) =>
date ? useTimeAgo(date).value : t('users.not_available');
// Table Headings
const headings = [
{ key: 'uid', label: t('users.id') },
{ key: 'displayName', label: t('users.name') },
{ key: 'email', label: t('users.email') },
{ key: 'createdOn', label: t('users.date') },
{ key: 'createdOn', label: t('users.created_on') },
{ key: 'lastActiveOn', label: t('users.last_active_on') },
{ key: '', label: '' },
];