refactor: updated users table to adhere to removal of search and debo…

…uncer feature from smart table
hoppscotch · Feb 29, 2024 · 6ca6cbd · 6ca6cbd
1 parent cf23d61
commit 6ca6cbd
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 13 deletions.
diff --git a/packages/hoppscotch-sh-admin/src/components.d.ts b/packages/hoppscotch-sh-admin/src/components.d.ts
@@ -24,15 +24,12 @@ declare module '@vue/runtime-core' {
     HoppSmartLink: typeof import('@hoppscotch/ui')['HoppSmartLink']
     HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
     HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
-    HoppSmartPlaceholder: typeof import('@hoppscotch/ui')['HoppSmartPlaceholder']
-    HoppSmartSelectWrapper: typeof import('@hoppscotch/ui')['HoppSmartSelectWrapper']
     HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
     HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
     HoppSmartTabs: typeof import('@hoppscotch/ui')['HoppSmartTabs']
     HoppSmartToggle: typeof import('@hoppscotch/ui')['HoppSmartToggle']
     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']
     IconLucideSearch: typeof import('~icons/lucide/search')['default']
     IconLucideUser: typeof import('~icons/lucide/user')['default']

diff --git a/packages/hoppscotch-sh-admin/src/pages/users/index.vue b/packages/hoppscotch-sh-admin/src/pages/users/index.vue
@@ -28,17 +28,23 @@
           :headings="headings"
           :list="usersList"
           :checkbox="true"
+          :spinner="showSpinner"
           :selected-rows="selectedRows"
-          :search-bar="{
-            debounce: 500,
-            placeholder: t('users.searchbar_placeholder'),
-          }"
-          :spinner="{ enabled: fetching, duration: 500 }"
-          :pagination="{ totalPages: totalPages }"
-          @onRowClicked="goToUserDetails"
-          @search="handleSearch"
+          :pagination="{ totalPages }"
           @pageNumber="handlePageChange"
+          @onRowClicked="goToUserDetails"
         >
+          <template #options>
+            <div class="flex w-full items-center bg-primary">
+              <icon-lucide-search class="mx-3 text-xs" />
+              <HoppSmartInput
+                v-model="searchQuery"
+                styles="w-full bg-primary py-1"
+                input-styles="h-full border-none"
+                placeholder="Search by name or email"
+              />
+            </div>
+          </template>
           <template #head>
             <th class="px-6 py-2">{{ t('users.id') }}</th>
             <th class="px-6 py-2">{{ t('users.name') }}</th>
@@ -206,7 +212,7 @@
 <script setup lang="ts">
 import { useMutation, useQuery } from '@urql/vue';
 import { format } from 'date-fns';
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from '~/composables/i18n';
 import { useToast } from '~/composables/toast';
@@ -248,7 +254,7 @@ const headings = [
 ];
 
 // Get Paginated Results of all the users in the infra
-const usersPerPage = 20;
+const usersPerPage = 2;
 const {
   fetching,
   error,
@@ -264,13 +270,39 @@ const {
 // Selected Rows
 const selectedRows = ref<UsersListQuery['infra']['allUsers']>([]);
 
+// Debounce Function
+const debounce = (func: () => void, delay: number) => {
+  let debounceTimeout: ReturnType<typeof setTimeout> | null = null;
+  if (debounceTimeout) clearTimeout(debounceTimeout);
+  debounceTimeout = setTimeout(func, delay);
+};
+
 // Search
 const searchQuery = ref('');
+
 const handleSearch = async (input: string) => {
   searchQuery.value = input;
   await refetch({ searchString: input, take: usersPerPage, skip: 0 });
 };
 
+watch(searchQuery, () => {
+  debounce(() => {
+    handleSearch(searchQuery.value);
+  }, 500);
+});
+
+// Spinner
+const showSpinner = ref(false);
+
+watch(fetching, (fetching) => {
+  if (fetching) {
+    showSpinner.value = true;
+    debounce(() => {
+      showSpinner.value = false;
+    }, 500);
+  }
+});
+
 // Pagination
 const { data } = useQuery({ query: MetricsDocument });
 const usersCount = computed(() => data?.value?.infra.usersCount);