feat(frontend): add pagination and search to admin teams view

Lasim · Lasim · commit 576915678480 · 2025-12-28T20:08:44.000+01:00
- Add pagination types to match backend response structure
- Implement TeamService.getTeamsAdminPaginated() method
- Implement TeamService.searchTeamsAdmin() method
- Replace client-side filtering with backend search API
- Add skeleton loading states for better UX
- Add PaginationControls component below teams table
- Support name-based search with Enter key trigger
- Fix breadcrumb navigation to use RouterLink for client-side routing
diff --git a/services/frontend/src/i18n/locales/en/adminTeams.ts b/services/frontend/src/i18n/locales/en/adminTeams.ts
@@ -20,6 +20,7 @@ export default {
       },
       search: {
         placeholder: 'Search teams by name, slug, or description...',
+        button: 'Search',
       },
       actions: {
         view: 'View',
diff --git a/services/frontend/src/services/teamService.ts b/services/frontend/src/services/teamService.ts
@@ -1,6 +1,11 @@
 import { getEnv } from '@/utils/env'
 import { z } from 'zod'
-import type { UpdateTeamAdminRequest } from '@/views/admin/teams/types'
+import type {
+  UpdateTeamAdminRequest,
+  PaginationParams,
+  PaginatedTeamsResponse,
+  TeamSearchParams
+} from '@/views/admin/teams/types'
 
 // Zod schemas for validation
 export const TeamSchema = z.object({
@@ -510,4 +515,101 @@ export class TeamService {
       throw error
     }
   }
+
+  /**
+   * Get teams as global admin with pagination support
+   */
+  static async getTeamsAdminPaginated(
+    pagination?: PaginationParams
+  ): Promise<PaginatedTeamsResponse> {
+    try {
+      const apiUrl = this.getApiUrl()
+      const url = new URL(`${apiUrl}/api/admin/teams`)
+
+      if (pagination) {
+        if (pagination.limit !== undefined) {
+          url.searchParams.append('limit', String(pagination.limit))
+        }
+        if (pagination.offset !== undefined) {
+          url.searchParams.append('offset', String(pagination.offset))
+        }
+      }
+
+      const response = await fetch(url.toString(), {
+        method: 'GET',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+      })
+
+      if (!response.ok) {
+        if (response.status === 401) {
+          throw new Error('Unauthorized - please log in')
+        }
+        if (response.status === 403) {
+          throw new Error('Forbidden - Global admin access required')
+        }
+        throw new Error(`Failed to fetch teams: ${response.status}`)
+      }
+
+      const data = await response.json()
+
+      if (data.success && data.data) {
+        return {
+          teams: data.data.teams,
+          pagination: data.data.pagination,
+        }
+      } else {
+        throw new Error('Invalid response format')
+      }
+    } catch (error) {
+      console.error('Error fetching teams as admin (paginated):', error)
+      throw error
+    }
+  }
+
+  /**
+   * Search teams as global admin with pagination
+   */
+  static async searchTeamsAdmin(
+    params: TeamSearchParams
+  ): Promise<PaginatedTeamsResponse> {
+    try {
+      const apiUrl = this.getApiUrl()
+      const url = new URL(`${apiUrl}/api/admin/teams/search`)
+
+      if (params.name) url.searchParams.append('name', params.name)
+      if (params.limit !== undefined) url.searchParams.append('limit', String(params.limit))
+      if (params.offset !== undefined) url.searchParams.append('offset', String(params.offset))
+
+      const response = await fetch(url.toString(), {
+        method: 'GET',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+      })
+
+      if (!response.ok) {
+        if (response.status === 401) {
+          throw new Error('Unauthorized - please log in')
+        }
+        if (response.status === 403) {
+          throw new Error('Forbidden - Global admin access required')
+        }
+        throw new Error(`Failed to search teams: ${response.status}`)
+      }
+
+      const data = await response.json()
+
+      if (data.success && data.data) {
+        return {
+          teams: data.data.teams,
+          pagination: data.data.pagination,
+        }
+      } else {
+        throw new Error('Invalid response format')
+      }
+    } catch (error) {
+      console.error('Error searching teams as admin:', error)
+      throw error
+    }
+  }
 }
diff --git a/services/frontend/src/views/admin/teams/[id].vue b/services/frontend/src/views/admin/teams/[id].vue
@@ -102,8 +102,10 @@ const handleTeamUpdated = (updatedTeam: Team) => {
       <Breadcrumb>
         <BreadcrumbList>
           <BreadcrumbItem>
-            <BreadcrumbLink href="/admin/teams">
-              {{ t('adminTeams.title') }}
+            <BreadcrumbLink as-child>
+              <RouterLink to="/admin/teams">
+                {{ t('adminTeams.title') }}
+              </RouterLink>
             </BreadcrumbLink>
           </BreadcrumbItem>
           <BreadcrumbSeparator />
diff --git a/services/frontend/src/views/admin/teams/index.vue b/services/frontend/src/views/admin/teams/index.vue
@@ -1,14 +1,24 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { useBreadcrumbs } from '@/composables/useBreadcrumbs'
-import { Input } from '@/components/ui/input'
+import { Search } from 'lucide-vue-next'
 import { DsPageHeading } from '@/components/ui/ds-page-heading'
 import NavbarLayout from '@/components/NavbarLayout.vue'
-import { getEnv } from '@/utils/env'
+import { TeamService } from '@/services/teamService'
 import TeamTableColumns from './TeamTableColumns.vue'
-import type { Team, TeamsApiResponse } from './types'
+import PaginationControls from '@/components/ui/pagination/PaginationControls.vue'
+import { Skeleton } from '@/components/ui/skeleton'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import type { Team, PaginationMeta } from './types'
 
 const { t } = useI18n()
 const router = useRouter()
@@ -19,63 +29,110 @@ const isLoading = ref(true)
 const error = ref<string | null>(null)
 const searchQuery = ref('')
 
-const apiUrl = getEnv('VITE_DEPLOYSTACK_BACKEND_URL') || ''
-
-// Filter teams based on search query
-const filteredTeams = computed(() => {
-  if (!searchQuery.value) {
-    return teams.value
-  }
-  const query = searchQuery.value.toLowerCase()
-  return teams.value.filter(team => {
-    return team.name.toLowerCase().includes(query) ||
-           team.slug.toLowerCase().includes(query) ||
-           (team.description && team.description.toLowerCase().includes(query))
-  })
+// Pagination state
+const currentPage = ref(1)
+const pageSize = ref(20)
+const totalItems = ref(0)
+const pagination = ref<PaginationMeta>({
+  total: 0,
+  limit: 20,
+  offset: 0,
+  has_more: false
 })
 
 // Navigation function for viewing team details
 const handleViewTeam = (teamId: string) => {
   router.push(`/admin/teams/${teamId}`)
 }
 
-// Fetch teams from API
-async function fetchTeams(): Promise<Team[]> {
-  if (!apiUrl) {
-    throw new Error('VITE_DEPLOYSTACK_BACKEND_URL is not configured.')
-  }
+// Check if text search is active
+const hasTextSearch = () => {
+  return !!searchQuery.value && searchQuery.value.trim().length > 0
+}
 
-  const response = await fetch(`${apiUrl}/api/admin/teams`, {
-    credentials: 'include'
-  })
+// Search via backend API
+const searchTeams = async (): Promise<void> => {
+  try {
+    isLoading.value = true
+    error.value = null
+    const offset = (currentPage.value - 1) * pageSize.value
 
-  if (!response.ok) {
-    const errorData = await response.json().catch(() => ({}))
-    throw new Error(errorData.error || `Failed to fetch teams: ${response.statusText} (status: ${response.status})`)
-  }
+    const response = await TeamService.searchTeamsAdmin({
+      name: searchQuery.value.trim(),
+      limit: pageSize.value,
+      offset
+    })
 
-  const result: TeamsApiResponse = await response.json()
-  if (!result.success || !Array.isArray(result.data)) {
-    throw new Error('API response for teams was not successful or data format is incorrect.')
+    teams.value = response.teams
+    pagination.value = response.pagination
+    totalItems.value = response.pagination.total
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'An unknown error occurred'
+    teams.value = []
+    totalItems.value = 0
+  } finally {
+    isLoading.value = false
   }
-
-  return result.data
 }
 
-// Load teams on component mount
-onMounted(async () => {
-  setBreadcrumbs([{ label: t('adminTeams.title') }])
-
+// Fetch all teams with pagination
+const fetchTeams = async (): Promise<void> => {
   try {
     isLoading.value = true
-    teams.value = await fetchTeams()
     error.value = null
+    const offset = (currentPage.value - 1) * pageSize.value
+
+    const response = await TeamService.getTeamsAdminPaginated({
+      limit: pageSize.value,
+      offset
+    })
+
+    teams.value = response.teams
+    pagination.value = response.pagination
+    totalItems.value = response.pagination.total
   } catch (err) {
     error.value = err instanceof Error ? err.message : 'An unknown error occurred'
     teams.value = []
+    totalItems.value = 0
   } finally {
     isLoading.value = false
   }
+}
+
+// Execute search or fetch
+const executeSearch = async () => {
+  currentPage.value = 1
+  if (hasTextSearch()) {
+    await searchTeams()
+  } else {
+    await fetchTeams()
+  }
+}
+
+// Pagination handlers
+const handlePageChange = async (page: number) => {
+  currentPage.value = page
+  if (hasTextSearch()) {
+    await searchTeams()
+  } else {
+    await fetchTeams()
+  }
+}
+
+const handlePageSizeChange = async (newPageSize: number) => {
+  pageSize.value = newPageSize
+  currentPage.value = 1
+  if (hasTextSearch()) {
+    await searchTeams()
+  } else {
+    await fetchTeams()
+  }
+}
+
+// Load teams on component mount
+onMounted(async () => {
+  setBreadcrumbs([{ label: t('adminTeams.title') }])
+  await fetchTeams()
 })
 </script>
 
@@ -84,32 +141,70 @@ onMounted(async () => {
     <DsPageHeading :title="t('adminTeams.title')" />
 
     <div class="space-y-6">
-      <!-- Loading State -->
-      <div v-if="isLoading" class="text-muted-foreground">
-        {{ t('adminTeams.table.loading') }}
-      </div>
-
       <!-- Error State -->
-      <div v-else-if="error" class="text-red-500">
+      <div v-if="error" class="text-red-500">
         {{ t('adminTeams.table.error', { error }) }}
       </div>
 
-      <!-- Data Table -->
+      <!-- Data Table with Search -->
       <div v-else class="space-y-4">
         <!-- Search Input -->
         <div class="flex items-center py-4">
-          <Input
-            :placeholder="t('adminTeams.table.search.placeholder')"
-            v-model="searchQuery"
-            class="max-w-sm"
-          />
+          <div class="flex items-center rounded-md border border-input bg-transparent shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px] has-[input:disabled]:opacity-50 has-[input:disabled]:cursor-not-allowed max-w-sm">
+            <input
+              type="text"
+              :placeholder="t('adminTeams.table.search.placeholder')"
+              v-model="searchQuery"
+              @keyup.enter="executeSearch"
+              class="flex-1 h-9 min-w-0 bg-transparent px-3 py-1 text-base outline-none placeholder:text-muted-foreground md:text-sm disabled:pointer-events-none disabled:cursor-not-allowed"
+            />
+            <div class="flex items-center justify-center text-muted-foreground order-last pr-3">
+              <Search class="h-4 w-4" />
+            </div>
+          </div>
+        </div>
+
+        <!-- Loading State with Skeleton -->
+        <div v-if="isLoading" class="rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{{ t('adminTeams.table.columns.name') }}</TableHead>
+                <TableHead>{{ t('adminTeams.table.columns.slug') }}</TableHead>
+                <TableHead>{{ t('adminTeams.table.columns.type') }}</TableHead>
+                <TableHead>{{ t('adminTeams.table.columns.createdAt') }}</TableHead>
+                <TableHead class="w-[100px]">{{ t('adminTeams.table.columns.actions') }}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              <TableRow v-for="i in 5" :key="i">
+                <TableCell><Skeleton class="h-4 w-32" /></TableCell>
+                <TableCell><Skeleton class="h-4 w-24" /></TableCell>
+                <TableCell><Skeleton class="h-5 w-16" /></TableCell>
+                <TableCell><Skeleton class="h-4 w-20" /></TableCell>
+                <TableCell><Skeleton class="h-8 w-16" /></TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
         </div>
 
         <!-- Teams Table Component -->
         <TeamTableColumns
-          :teams="filteredTeams"
+          v-else
+          :teams="teams"
           :on-view-team="handleViewTeam"
         />
+
+        <!-- Pagination Controls -->
+        <PaginationControls
+          v-if="totalItems > 0"
+          :current-page="currentPage"
+          :page-size="pageSize"
+          :total-items="totalItems"
+          :is-loading="isLoading"
+          @page-change="handlePageChange"
+          @page-size-change="handlePageSizeChange"
+        />
       </div>
     </div>
   </NavbarLayout>
diff --git a/services/frontend/src/views/admin/teams/types.ts b/services/frontend/src/views/admin/teams/types.ts
