diff --git a/packages/hoppscotch-sh-admin/src/pages/users/index.vue b/packages/hoppscotch-sh-admin/src/pages/users/index.vue index 4c19cbfd301..63507ee8827 100644 --- a/packages/hoppscotch-sh-admin/src/pages/users/index.vue +++ b/packages/hoppscotch-sh-admin/src/pages/users/index.vue @@ -26,7 +26,7 @@ { searchQuery.value = input; - await refetch({ searchString: input, take: usersPerPage, skip: 0 }); + if (input.length === 0) { + await refetch({ + searchString: '', + take: usersPerPage, + skip: (pageNumber.value - 1) * usersPerPage, + }); + } else { + // If search query is present, fetch all the users filtered by the search query + await refetch({ searchString: input, take: usersCount.value!, skip: 0 }); + } }; +// Final Users List after Search and Pagination operations +const finalUsersList = computed(() => + // If search query is present, filter the list based on the search query and return the paginated results + // Else just return the paginated results directly + searchQuery.value.length > 0 + ? usersList.value.slice( + (pageNumber.value - 1) * usersPerPage, + pageNumber.value * usersPerPage + ) + : usersList.value +); + watch(searchQuery, () => { debounce(() => { handleSearch(searchQuery.value); @@ -312,23 +333,29 @@ watch(fetching, (fetching) => { }); // Pagination +const pageNumber = ref(1); const { data } = useQuery({ query: MetricsDocument }); const usersCount = computed(() => data?.value?.infra.usersCount); const totalPages = computed(() => { if (!usersCount.value) return 0; if (searchQuery.value.length > 0) { - return usersList.value.length; + return Math.ceil(usersList.value.length / usersPerPage); } return Math.ceil(usersCount.value / usersPerPage); }); const handlePageChange = async (page: number) => { + pageNumber.value = page; if (page < 1 || page > totalPages.value) { return; + } else if (searchQuery.value.length > 0) { + // Simulate fetching state + fetching.value = true; + debounce(() => (fetching.value = false), 500); } else { await refetch({ - searchString: searchQuery.value, + searchString: '', take: usersPerPage, skip: (page - 1) * usersPerPage, });