refactor: remove badges and subtitle implementation from table and used slots instead
This commit is contained in:
Joel Jacob Stephen
@@ -23,11 +23,9 @@ declare module '@vue/runtime-core' {
|
||||
HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
|
||||
HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
|
||||
HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
|
||||
HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
|
||||
HoppSmartTable: typeof import('@hoppscotch/ui')['HoppSmartTable']
|
||||
IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
|
||||
IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
|
||||
IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default']
|
||||
IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
|
||||
IconLucideUser: typeof import('~icons/lucide/user')['default']
|
||||
TeamsAdd: typeof import('./components/teams/Add.vue')['default']
|
||||
|
||||
@@ -27,41 +27,42 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<HoppSmartTable
|
||||
v-else
|
||||
:list="newTeamsList"
|
||||
:headings="headings"
|
||||
@goToDetails="goToTeamDetails"
|
||||
cell-styles="px-6 py-3"
|
||||
>
|
||||
<template #action="{ item }">
|
||||
<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="t('teams.delete_team')"
|
||||
class="!hover:bg-red-600 w-full"
|
||||
@click="deleteTeam(item)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</tippy>
|
||||
</div>
|
||||
</td>
|
||||
</template>
|
||||
</HoppSmartTable>
|
||||
<div v-else class="m-5">
|
||||
<HoppSmartTable
|
||||
:list="newTeamsList"
|
||||
:headings="headings"
|
||||
@goToDetails="goToTeamDetails"
|
||||
cell-styles="px-6 py-3"
|
||||
>
|
||||
<template #action="{ item }">
|
||||
<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="t('teams.delete_team')"
|
||||
class="!hover:bg-red-600 w-full"
|
||||
@click="deleteTeam(item)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</tippy>
|
||||
</div>
|
||||
</td>
|
||||
</template>
|
||||
</HoppSmartTable>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="hasNextPage && teamsList.length >= teamsPerPage"
|
||||
|
||||
@@ -31,62 +31,105 @@
|
||||
|
||||
<div v-else-if="error">{{ t('users.load_list_error') }}</div>
|
||||
|
||||
<HoppSmartTable
|
||||
v-else-if="usersList.length >= 1"
|
||||
cell-styles="px-6 py-2"
|
||||
:list="newUsersList"
|
||||
:headings="headings"
|
||||
@goToDetails="goToUserDetails"
|
||||
:badge-name="t('users.admin')"
|
||||
:badge-row-indices="adminUsersIndices"
|
||||
badge-col-name="name"
|
||||
:subtitles="subtitles"
|
||||
>
|
||||
<template #action="{ item }">
|
||||
<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="!isUserAdmin(item)"
|
||||
:icon="IconUserCheck"
|
||||
:label="t('users.make_admin')"
|
||||
class="!hover:bg-emerald-600"
|
||||
@click="makeUserAdmin(item)"
|
||||
/>
|
||||
<HoppSmartItem
|
||||
v-else
|
||||
:icon="IconUserMinus"
|
||||
:label="t('users.remove_admin_status')"
|
||||
class="!hover:bg-emerald-600"
|
||||
@click="makeAdminToUser(item)"
|
||||
/>
|
||||
<HoppSmartItem
|
||||
v-if="!isUserAdmin(item)"
|
||||
:icon="IconTrash"
|
||||
:label="t('users.delete_user')"
|
||||
class="!hover:bg-red-600"
|
||||
@click="deleteUser(item)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</tippy>
|
||||
</span>
|
||||
<div v-else-if="usersList.length >= 1" class="m-5">
|
||||
<HoppSmartTable
|
||||
cell-styles="px-6 py-1"
|
||||
:list="newUsersList"
|
||||
:headings="headings"
|
||||
:modify-col-names="colNames"
|
||||
@goToDetails="goToUserDetails"
|
||||
>
|
||||
<template #name="{ item }">
|
||||
<div>
|
||||
<div class="flex flex-col truncate justify-center">
|
||||
<span
|
||||
v-if="item.name.length"
|
||||
class="my-1 truncate whitespace-normal"
|
||||
>
|
||||
{{ item.name }}
|
||||
</span>
|
||||
|
||||
<span
|
||||
v-if="item.name.length === 0 && !isUserAdmin(item)"
|
||||
class="mx-auto justify-center"
|
||||
>-</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>
|
||||
</td>
|
||||
</template>
|
||||
</HoppSmartTable>
|
||||
</template>
|
||||
|
||||
<template #createdOn="{ item }">
|
||||
<div class="flex flex-col truncate">
|
||||
<span v-if="item" class="truncate">
|
||||
{{ getCreatedDate(item.createdOn) }}
|
||||
</span>
|
||||
<span v-else> - </span>
|
||||
|
||||
<div>
|
||||
<div class="text-gray-400 text-tiny">
|
||||
<span>
|
||||
<span>
|
||||
{{ getCreatedTime(item.createdOn) }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #action="{ item }">
|
||||
<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="!isUserAdmin(item)"
|
||||
:icon="IconUserCheck"
|
||||
:label="t('users.make_admin')"
|
||||
class="!hover:bg-emerald-600"
|
||||
@click="makeUserAdmin(item)"
|
||||
/>
|
||||
<HoppSmartItem
|
||||
v-else
|
||||
:icon="IconUserMinus"
|
||||
:label="t('users.remove_admin_status')"
|
||||
class="!hover:bg-emerald-600"
|
||||
@click="makeAdminToUser(item)"
|
||||
/>
|
||||
<HoppSmartItem
|
||||
v-if="!isUserAdmin(item)"
|
||||
:icon="IconTrash"
|
||||
:label="t('users.delete_user')"
|
||||
class="!hover:bg-red-600"
|
||||
@click="deleteUser(item)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</tippy>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</template>
|
||||
</HoppSmartTable>
|
||||
</div>
|
||||
|
||||
<div v-else class="flex justify-center">{{ t('users.no_users') }}</div>
|
||||
|
||||
@@ -181,7 +224,7 @@ const newUsersList = computed(() => {
|
||||
uid: user.uid,
|
||||
name: user.displayName ?? '',
|
||||
email: user.email ?? '',
|
||||
createdOn: getCreatedDate(user.createdOn),
|
||||
createdOn: user.createdOn,
|
||||
};
|
||||
});
|
||||
});
|
||||
@@ -194,19 +237,6 @@ const isUserAdmin = (
|
||||
})[0].isAdmin;
|
||||
};
|
||||
|
||||
// Returns index of all the admin users
|
||||
const adminUsersIndices = computed(() => {
|
||||
const indices = [];
|
||||
for (let index = 0; index < usersList.value.length; index++)
|
||||
if (usersList.value[index].isAdmin) indices.push(index);
|
||||
return indices;
|
||||
});
|
||||
|
||||
// Returns created time of all the users
|
||||
const createdTime = computed(() =>
|
||||
usersList.value.map((user) => getCreatedTime(user.createdOn))
|
||||
);
|
||||
|
||||
// Headers that are used in the table
|
||||
const headings = [
|
||||
t('users.id'),
|
||||
@@ -216,13 +246,8 @@ const headings = [
|
||||
'',
|
||||
];
|
||||
|
||||
// Subtitles that are used in the table
|
||||
const subtitles = reactive([
|
||||
{
|
||||
colName: 'createdOn',
|
||||
subtitle: createdTime,
|
||||
},
|
||||
]);
|
||||
//Names of the columns to be modified by this component
|
||||
const colNames = ['name', 'createdOn'];
|
||||
|
||||
// Send Invitation through Email
|
||||
const sendInvitation = useMutation(InviteNewUserDocument);
|
||||
|
||||
@@ -24,13 +24,33 @@
|
||||
<p class="text-xl">{{ t('users.no_invite') }}</p>
|
||||
</div>
|
||||
|
||||
<HoppSmartTable
|
||||
v-else
|
||||
cell-styles="px-6 py-2"
|
||||
:list="newInvitedUsersList"
|
||||
:headings="headings"
|
||||
:subtitles="subtitles"
|
||||
/>
|
||||
<div v-else class="m-5">
|
||||
<HoppSmartTable
|
||||
cell-styles="px-6 py-1"
|
||||
:list="newInvitedUsersList"
|
||||
:headings="headings"
|
||||
:modify-col-names="colNames"
|
||||
>
|
||||
<template #invitedOn="{ item }">
|
||||
<div class="flex flex-col truncate">
|
||||
<span v-if="item" class="truncate">
|
||||
{{ getCreatedDate(item.invitedOn) }}
|
||||
</span>
|
||||
<span v-else> - </span>
|
||||
|
||||
<div>
|
||||
<div class="text-gray-400 text-tiny">
|
||||
<span>
|
||||
<span>
|
||||
{{ getCreatedTime(item.invitedOn) }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</HoppSmartTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -38,7 +58,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import { useQuery } from '@urql/vue';
|
||||
import { InvitedUsersDocument } from '../../helpers/backend/graphql';
|
||||
import { format } from 'date-fns';
|
||||
@@ -65,18 +85,11 @@ const newInvitedUsersList = computed(() => {
|
||||
adminUid: user.adminUid,
|
||||
adminEmail: user.adminEmail,
|
||||
inviteeEmail: user.inviteeEmail,
|
||||
invitedOn: getCreatedDate(user.invitedOn),
|
||||
invitedOn: user.invitedOn,
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
// Returns the created time of all the invited user
|
||||
const createdTime = computed(() => {
|
||||
return invitedUsers.value?.map((user) => {
|
||||
return getCreatedTime(user.invitedOn);
|
||||
});
|
||||
});
|
||||
|
||||
// Headings used in the table
|
||||
const headings = [
|
||||
t('users.admin_id'),
|
||||
@@ -85,11 +98,5 @@ const headings = [
|
||||
t('users.invited_on'),
|
||||
];
|
||||
|
||||
// Subtitles used in the table
|
||||
const subtitles = reactive([
|
||||
{
|
||||
colName: 'invitedOn',
|
||||
subtitle: createdTime,
|
||||
},
|
||||
]);
|
||||
const colNames = ['invitedOn'];
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user