refactor: updated table and users page to adhere to the new changes

hoppscotch · Mar 1, 2024 · 7a6b792 · 7a6b792
1 parent 1293dd3
commit 7a6b792
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 12 deletions.
diff --git a/packages/hoppscotch-sh-admin/src/components.d.ts b/packages/hoppscotch-sh-admin/src/components.d.ts
@@ -24,12 +24,15 @@ 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/components/users/Table.vue b/packages/hoppscotch-sh-admin/src/components/users/Table.vue
@@ -10,7 +10,7 @@
       />
 
       <div class="flex h-full w-10 items-center justify-center">
-        <p>{{ page }}</p>
+        <span>{{ page }}</span>
       </div>
 
       <HoppButtonSecondary
@@ -23,9 +23,10 @@
     </div>
 
     <div class="overflow-auto rounded-md border border-dividerDark shadow-md">
-      <slot name="options"></slot>
+      <!-- An Extension Slot to extend the table functionality such as search   -->
+      <slot name="extension"></slot>
 
-      <div v-if="spinner" class="mx-auto my-3 h-5 w-5 text-center">
+      <div v-if="loading" class="mx-auto my-3 h-5 w-5 text-center">
         <HoppSmartSpinner />
       </div>
 
@@ -133,8 +134,8 @@ const props = withDefaults(
       totalPages: number;
     };
 
-    /** Whether to show the spinner */
-    spinner?: boolean;
+    /** Whether to show a loading spinner */
+    loading?: boolean;
   }>(),
   {
     showYBorder: false,
@@ -242,20 +243,17 @@ const areAllRowsSelected = computed(() => {
 export type Direction = 'ascending' | 'descending';
 
 const sortList = (key: string, direction: Direction) => {
-  const sortedList = [...workingList.value];
-  sortedList.sort((a, b) => {
+  workingList.value.sort((a, b) => {
     const valueA = a[key] as string;
     const valueB = b[key] as string;
     return direction === 'ascending'
       ? valueA.localeCompare(valueB)
       : valueB.localeCompare(valueA);
   });
-
-  workingList.value = sortedList;
 };
 
 watch(
-  workingList.value,
+  () => props.sort?.direction,
   () => {
     if (props.sort) {
       sortList(props.sort.key, props.sort.direction);

diff --git a/packages/hoppscotch-sh-admin/src/pages/users/index.vue b/packages/hoppscotch-sh-admin/src/pages/users/index.vue
@@ -28,13 +28,13 @@
           :headings="headings"
           :list="usersList"
           :checkbox="true"
-          :spinner="showSpinner"
+          :loading="showSpinner"
           :selected-rows="selectedRows"
           :pagination="{ totalPages }"
           @pageNumber="handlePageChange"
           @onRowClicked="goToUserDetails"
         >
-          <template #options>
+          <template #extension>
             <div class="flex w-full items-center bg-primary">
               <icon-lucide-search class="mx-3 text-xs" />
               <HoppSmartInput