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

feat: introducing smart table to hopp ui

Browse Source
This commit is contained in:
Joel Jacob Stephen
2023-06-22 09:37:51 +03:00
parent 008eb6b77b
commit cdbc580ada
8 changed files with 506 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,13 +21,42 @@
<div v-else-if="error">{{ t('teams.load_list_error') }}</div>
<TeamsTable
<HoppSmartTable
v-else
:teamList="teamList"
@goToTeamDetails="goToTeamDetails"
@deleteTeam="deleteTeam"
class=""
/>
:list="teamList"
:headings="headings"
@goToDetails="goToTeamDetails"
padding="px-6 py-3"
item-style="!hover:bg-red-600"
>
<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="'Delete Team'"
class="!hover:bg-red-600 w-full"
@click="deleteTeam(item)"
/>
</div>
</template>
</tippy>
</div>
</td>
</template>
</HoppSmartTable>
<div
v-if="hasNextPage && teamList.length >= teamsPerPage"
@@ -66,10 +95,12 @@ import {
UsersListDocument,
} from '../../helpers/backend/graphql';
import { usePagedQuery } from '~/composables/usePagedQuery';
import { ref, watch, computed } from 'vue';
import { computed, ref, watch } from 'vue';
import { useMutation, useQuery } from '@urql/vue';
import { useToast } from '~/composables/toast';
import IconAddUsers from '~icons/lucide/plus';
import IconTrash from '~icons/lucide/trash';
import IconMoreHorizontal from '~icons/lucide/more-horizontal';
import { useI18n } from '~/composables/i18n';
const t = useI18n();
@@ -96,7 +127,7 @@ const {
error,
goToNextPage: fetchNextTeams,
refetch,
list: teamList,
list: list,
hasNextPage,
} = usePagedQuery(
TeamListDocument,
@@ -106,6 +137,18 @@ const {
{ cursor: undefined, take: teamsPerPage }
);
const teamList = computed(() => {
return list.value.map((team) => {
return {
id: team.id || '',
name: team.name || '',
members: team.members.length,
};
});
});
const headings = ['Team ID', 'Team Name', 'Number of Members'];
// Create Team
const createTeamMutation = useMutation(CreateTeamDocument);
const showCreateTeamModal = ref(false);
@@ -143,9 +186,7 @@ const createTeam = async (newTeamName: string, ownerEmail: string) => {
// Go To Individual Team Details Page
const router = useRouter();
const goToTeamDetails = (teamId: string) => {
router.push('/teams/' + teamId);
};
const goToTeamDetails = (team: any) => router.push('/teams/' + team.id);
// Reload Teams Page when routed back to the teams page
const route = useRoute();
@@ -159,9 +200,9 @@ const teamDeletion = useMutation(RemoveTeamDocument);
const confirmDeletion = ref(false);
const deleteTeamID = ref<string | null>(null);
const deleteTeam = (id: string) => {
const deleteTeam = (team: any) => {
confirmDeletion.value = true;
deleteTeamID.value = id;
deleteTeamID.value = team.id;
};
const deleteTeamMutation = async (id: string | null) => {
@@ -175,7 +216,7 @@ const deleteTeamMutation = async (id: string | null) => {
if (result.error) {
toast.error(`${t('state.delete_team_failure')}`);
} else {
teamList.value = teamList.value.filter((team) => team.id !== id);
list.value = list.value.filter((team) => team.id !== id);
toast.success(`${t('state.delete_team_success')}`);
}
});

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

@@ -31,7 +31,7 @@
<div v-else-if="error">{{ t('users.load_list_error') }}</div>
<UsersTable
<!-- <UsersTable
v-else-if="usersList.length >= 1"
:usersList="usersList"
:fetching="fetching"
@@ -40,7 +40,65 @@
@makeUserAdmin="makeUserAdmin"
@makeAdminToUser="makeAdminToUser"
@deleteUser="deleteUser"
/>
/> -->
<HoppSmartTable
v-else-if="usersList.length >= 1"
:list="newUsersList"
:headings="headings"
@goToDetails="goToUserDetails"
:subtitle="{
index: 'name',
label: 'Admin',
}"
hide-col="isAdmin"
padding="px-6 py-3"
>
<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="'Make Admin'"
class="!hover:bg-emerald-600"
@click="makeUserAdmin(item)"
/>
<HoppSmartItem
v-else
:icon="IconUserMinus"
:label="'Remove Admin Status'"
class="!hover:bg-emerald-600"
@click="makeAdminToUser(item)"
/>
<HoppSmartItem
v-if="!isUserAdmin(item)"
:icon="IconTrash"
:label="'Delete User'"
class="!hover:bg-red-600"
@click="deleteUser(item)"
/>
</div>
</template>
</tippy>
</span>
</div>
</td>
</template>
</HoppSmartTable>
<div v-else class="flex justify-center">{{ t('users.no_users') }}</div>
@@ -82,7 +140,8 @@
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { format } from 'date-fns';
import { computed, ref, watch } from 'vue';
import { useMutation } from '@urql/vue';
import {
InviteNewUserDocument,
@@ -96,12 +155,26 @@ import { useRoute, useRouter } from 'vue-router';
import { useToast } from '~/composables/toast';
import { HoppButtonSecondary } from '@hoppscotch/ui';
import IconAddUser from '~icons/lucide/user-plus';
import IconTrash from '~icons/lucide/trash';
import IconUserMinus from '~icons/lucide/user-minus';
import IconUserCheck from '~icons/lucide/user-check';
import IconMoreHorizontal from '~icons/lucide/more-horizontal';
import { useI18n } from '~/composables/i18n';
// Get Proper Date Formats
const getCreatedDate = (date: string) => format(new Date(date), 'dd-MM-yyyy');
const getCreatedTime = (date: string) => format(new Date(date), 'hh:mm a');
const t = useI18n();
const toast = useToast();
const isUserAdmin = (selectedUser: any) => {
return usersList.value.filter((user) => {
return user.uid === selectedUser.uid;
})[0].isAdmin;
};
// Get Paginated Results of all the users in the infra
const usersPerPage = 20;
const {
@@ -118,6 +191,19 @@ const {
{ cursor: undefined, take: usersPerPage }
);
const newUsersList = computed(() => {
return usersList.value.map((user) => {
return {
uid: user.uid || '',
name: user.displayName || '',
email: user.email || '',
createdOn: getCreatedDate(user.createdOn) || '',
};
});
});
const headings = ['User UID', 'Name', 'Email', 'Created On'];
// Send Invitation through Email
const sendInvitation = useMutation(InviteNewUserDocument);
const showInviteUserModal = ref(false);
@@ -141,9 +227,7 @@ const sendInvite = async (email: string) => {
// Go to Individual User Details Page
const route = useRoute();
const router = useRouter();
const goToUserDetails = (uid: string) => {
router.push('/users/' + uid);
};
const goToUserDetails = (user: any) => router.push('/users/' + user.uid);
watch(
() => route.params.id,
@@ -179,9 +263,9 @@ const userToAdmin = useMutation(MakeUserAdminDocument);
const confirmUserToAdmin = ref(false);
const userToAdminUID = ref<string | null>(null);
const makeUserAdmin = (id: string) => {
const makeUserAdmin = (user: any) => {
confirmUserToAdmin.value = true;
userToAdminUID.value = id;
userToAdminUID.value = user.uid;
};
const makeUserAdminMutation = async (id: string | null) => {
@@ -213,14 +297,14 @@ const adminToUser = useMutation(RemoveUserAsAdminDocument);
const confirmAdminToUser = ref(false);
const adminToUserUID = ref<string | null>(null);
const makeAdminToUser = (id: string) => {
const makeAdminToUser = (user: any) => {
confirmAdminToUser.value = true;
adminToUserUID.value = id;
adminToUserUID.value = user.uid;
};
const deleteUser = (id: string) => {
const deleteUser = (user: any) => {
confirmDeletion.value = true;
deleteUserUID.value = id;
deleteUserUID.value = user.uid;
};
const makeAdminToUserMutation = async (id: string | null) => {