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

refactor: remove badges and subtitle implementation from table and used slots instead

Browse Source
This commit is contained in:
Joel Jacob Stephen
2023-07-20 17:07:26 +05:30
parent f48083ca7e
commit 24f32d79b3
5 changed files with 177 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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']

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

@@ -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"

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

@@ -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);

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

@@ -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>

81
packages/hoppscotch-ui/src/components/smart/Table.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="overflow-auto rounded-md border border-dividerDark shadow-md m-5">
<div class="overflow-auto rounded-md border border-dividerDark shadow-md">
<table class="w-full">
<thead class="bg-primaryLight">
<tr
@@ -25,57 +25,18 @@
class="max-w-40"
:class="cellStyles"
>
<!-- Custom implementation of the particular column -->
<div class="flex items-center">
<!-- Column with Badge -->
<div
v-if="
colIndex.toString() === badgeColName &&
badgeRowIndices?.includes(rowIndex)
"
>
<div class="flex flex-col truncate">
<span v-if="data" class="mt-1 truncate whitespace-normal">
{{ data }}
</span>
<span
class="text-xs font-medium px-3 py-1 my-1 rounded-full bg-green-900 text-green-300 w-min"
>
{{ badgeName }}
</span>
</div>
<div v-if="modifyColNames?.includes(colIndex.toString())">
<slot :name="colIndex.toString()" :item="item"></slot>
</div>
<!-- Column with Subtitles -->
<div
v-else-if="subtitleColumns.includes(colIndex.toString())"
class="flex flex-col truncate"
>
<!-- Generic implementation of the column -->
<div v-else class="flex flex-col truncate text-center">
<span v-if="data" class="truncate">
{{ data }}
</span>
<span v-else> - </span>
<div v-for="item in subtitles">
<div
v-if="item.colName === colIndex.toString()"
class="text-gray-400 text-tiny"
>
<span>
<span>
{{ itemSubtitle(item.subtitle, rowIndex) }}
</span>
</span>
</div>
</div>
</div>
<!-- Column with no subtitle or badge -->
<div v-else class="flex flex-col truncate">
<span v-if="data" class="truncate">
{{ data }}
</span>
<span v-else> - </span>
<span v-else class=""> - </span>
</div>
</div>
</td>
@@ -88,9 +49,7 @@
</template>
<script lang="ts" setup generic="Item extends Record<string, unknown>">
import { computed } from "vue"
const props = defineProps<{
defineProps<{
/** Whether to show the vertical border between columns */
yBorder?: boolean
/** The list of items to be displayed in the table */
@@ -99,31 +58,11 @@ const props = defineProps<{
headings: string[]
/** The styles to be applied to the table cells */
cellStyles?: string
/** The name of the badge */
badgeName?: string
/** The indices of the rows that needs to have a badge */
badgeRowIndices?: (number | undefined)[]
/** The index of the column that needs to have a badge */
badgeColName?: string
/** The subtitles to be displayed for the columns */
subtitles?: Array<{
/** The name of the column that needs to have a subtitle */
colName: string
/** The subtitle to be displayed for the column */
subtitle: string | string[]
}>
/** The names of the columns which have to modified using slots */
modifyColNames?: string[]
}>()
defineEmits<{
(event: "goToDetails", item: Item): void
}>()
// Returns all the columns that needs to have a subtitle
const subtitleColumns = computed(() =>
props.subtitles ? props.subtitles.map((item) => item.colName) : []
)
// Returns the subtitle for the given column and row
const itemSubtitle = (subtitle: string | string[], rowIndex: number) =>
typeof subtitle === "object" ? subtitle[rowIndex] : subtitle
</script>