quaik8/sbd2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement pagination for extractions and playlists with updated API responses

Browse Source
This commit is contained in:
JSC
2025-08-17 11:22:02 +02:00
parent 04401092bb
commit 75ecd26e06
5 changed files with 277 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
src/components/AppPagination.tsx Normal file
View File

@@ -0,0 +1,147 @@
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from '@/components/ui/pagination'
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
interface AppPaginationProps {
currentPage: number
totalPages: number
totalCount: number
pageSize: number
pageSizeOptions?: number[]
onPageChange: (page: number) => void
onPageSizeChange: (size: number) => void
itemName?: string // e.g., "items", "extractions", "playlists"
}
export function AppPagination({
currentPage,
totalPages,
totalCount,
pageSize,
pageSizeOptions = [10, 20, 50, 100],
onPageChange,
onPageSizeChange,
itemName = 'items',
}: AppPaginationProps) {
// Don't render if there are no items
if (totalCount === 0) return null
const getVisiblePages = () => {
const delta = 2
const range = []
const rangeWithDots = []
for (
let i = Math.max(2, currentPage - delta);
i <= Math.min(totalPages - 1, currentPage + delta);
i++
) {
range.push(i)
}
if (currentPage - delta > 2) {
rangeWithDots.push(1, '...')
} else {
rangeWithDots.push(1)
}
rangeWithDots.push(...range)
if (currentPage + delta < totalPages - 1) {
rangeWithDots.push('...', totalPages)
} else if (totalPages > 1) {
rangeWithDots.push(totalPages)
}
return rangeWithDots
}
const startItem = Math.min((currentPage - 1) * pageSize + 1, totalCount)
const endItem = Math.min(currentPage * pageSize, totalCount)
return (
<div className="flex items-center justify-between">
<p className="text-sm text-muted-foreground whitespace-nowrap">
Showing {startItem} to {endItem} of {totalCount} {itemName}
</p>
<Pagination>
<PaginationContent>
<PaginationItem>
<PaginationPrevious
href="#"
onClick={(e) => {
e.preventDefault()
if (currentPage > 1) onPageChange(currentPage - 1)
}}
className={currentPage <= 1 ? 'pointer-events-none opacity-50' : ''}
/>
</PaginationItem>
{getVisiblePages().map((page, index) => (
<PaginationItem key={index}>
{page === '...' ? (
<PaginationEllipsis />
) : (
<PaginationLink
href="#"
onClick={(e) => {
e.preventDefault()
onPageChange(page as number)
}}
isActive={currentPage === page}
>
{page}
</PaginationLink>
)}
</PaginationItem>
))}
<PaginationItem>
<PaginationNext
href="#"
onClick={(e) => {
e.preventDefault()
if (currentPage < totalPages) onPageChange(currentPage + 1)
}}
className={currentPage >= totalPages ? 'pointer-events-none opacity-50' : ''}
/>
</PaginationItem>
</PaginationContent>
</Pagination>
<div className="flex items-center gap-2 whitespace-nowrap">
<span className="text-sm text-muted-foreground">Show</span>
<Select
value={pageSize.toString()}
onValueChange={value => onPageSizeChange(parseInt(value, 10))}
>
<SelectTrigger className="w-[75px]">
<SelectValue />
</SelectTrigger>
<SelectContent>
{pageSizeOptions.map(size => (
<SelectItem key={size} value={size.toString()}>
{size}
</SelectItem>
))}
</SelectContent>
</Select>
<span className="text-sm text-muted-foreground">rows</span>
</div>
</div>
)
}

26
src/lib/api/services/extractions.ts
View File

@@ -22,6 +22,10 @@ export interface CreateExtractionResponse {
export interface GetExtractionsResponse {
extractions: ExtractionInfo[]
total: number
page: number
limit: number
total_pages: number
}
export type ExtractionSortField = 'title' | 'status' | 'service' | 'created_at' | 'updated_at'
@@ -33,6 +37,8 @@ export interface GetExtractionsParams {
sort_by?: ExtractionSortField
sort_order?: ExtractionSortOrder
status_filter?: ExtractionStatus
page?: number
limit?: number
}
export class ExtractionsService {
@@ -59,7 +65,7 @@ export class ExtractionsService {
/**
* Get all extractions
*/
async getAllExtractions(params?: GetExtractionsParams): Promise<ExtractionInfo[]> {
async getAllExtractions(params?: GetExtractionsParams): Promise<GetExtractionsResponse> {
const searchParams = new URLSearchParams()
if (params?.search) {
@@ -74,18 +80,24 @@ export class ExtractionsService {
if (params?.status_filter) {
searchParams.append('status_filter', params.status_filter)
}
if (params?.page) {
searchParams.append('page', params.page.toString())
}
if (params?.limit) {
searchParams.append('limit', params.limit.toString())
}
const queryString = searchParams.toString()
const url = queryString ? `/api/v1/extractions/?${queryString}` : '/api/v1/extractions/'
const response = await apiClient.get<GetExtractionsResponse>(url)
return response.extractions
return response
}
/**
* Get user's extractions
*/
async getUserExtractions(params?: GetExtractionsParams): Promise<ExtractionInfo[]> {
async getUserExtractions(params?: GetExtractionsParams): Promise<GetExtractionsResponse> {
const searchParams = new URLSearchParams()
if (params?.search) {
@@ -100,12 +112,18 @@ export class ExtractionsService {
if (params?.status_filter) {
searchParams.append('status_filter', params.status_filter)
}
if (params?.page) {
searchParams.append('page', params.page.toString())
}
if (params?.limit) {
searchParams.append('limit', params.limit.toString())
}
const queryString = searchParams.toString()
const url = queryString ? `/api/v1/extractions/user?${queryString}` : '/api/v1/extractions/user'
const response = await apiClient.get<GetExtractionsResponse>(url)
return response.extractions
return response
}
}

20
src/lib/api/services/playlists.ts
View File

@@ -45,16 +45,24 @@ export interface GetPlaylistsParams {
search?: string
sort_by?: PlaylistSortField
sort_order?: SortOrder
page?: number
limit?: number
offset?: number
favorites_only?: boolean
}
export interface GetPlaylistsResponse {
playlists: Playlist[]
total: number
page: number
limit: number
total_pages: number
}
export class PlaylistsService {
/**
* Get all playlists with optional filtering, searching, and sorting
*/
async getPlaylists(params?: GetPlaylistsParams): Promise<Playlist[]> {
async getPlaylists(params?: GetPlaylistsParams): Promise<GetPlaylistsResponse> {
const searchParams = new URLSearchParams()
// Handle parameters
@@ -67,12 +75,12 @@ export class PlaylistsService {
if (params?.sort_order) {
searchParams.append('sort_order', params.sort_order)
}
if (params?.page) {
searchParams.append('page', params.page.toString())
}
if (params?.limit) {
searchParams.append('limit', params.limit.toString())
}
if (params?.offset) {
searchParams.append('offset', params.offset.toString())
}
if (params?.favorites_only) {
searchParams.append('favorites_only', 'true')
}
@@ -80,7 +88,7 @@ export class PlaylistsService {
const url = searchParams.toString()
? `/api/v1/playlists/?${searchParams.toString()}`
: '/api/v1/playlists/'
return apiClient.get<Playlist[]>(url)
return apiClient.get<GetPlaylistsResponse>(url)
}
/**

51
src/pages/ExtractionsPage.tsx
View File

@@ -1,4 +1,5 @@
import { AppLayout } from '@/components/AppLayout'
import { AppPagination } from '@/components/AppPagination'
import { CreateExtractionDialog } from '@/components/extractions/CreateExtractionDialog'
import { ExtractionsHeader } from '@/components/extractions/ExtractionsHeader'
import {
@@ -28,6 +29,12 @@ export function ExtractionsPage() {
const [sortOrder, setSortOrder] = useState<ExtractionSortOrder>('desc')
const [statusFilter, setStatusFilter] = useState<ExtractionStatus | 'all'>('all')
// Pagination state
const [currentPage, setCurrentPage] = useState(1)
const [totalPages, setTotalPages] = useState(1)
const [totalCount, setTotalCount] = useState(0)
const [pageSize, setPageSize] = useState(10)
// Create extraction dialog state
const [showCreateDialog, setShowCreateDialog] = useState(false)
const [createLoading, setCreateLoading] = useState(false)
@@ -48,13 +55,17 @@ export function ExtractionsPage() {
try {
setLoading(true)
setError(null)
const data = await extractionsService.getAllExtractions({
const response = await extractionsService.getAllExtractions({
search: debouncedSearchQuery.trim() || undefined,
sort_by: sortBy,
sort_order: sortOrder,
status_filter: statusFilter !== 'all' ? statusFilter : undefined,
page: currentPage,
limit: pageSize,
})
setExtractions(data)
setExtractions(response.extractions)
setTotalPages(response.total_pages)
setTotalCount(response.total)
} catch (err) {
const errorMessage =
err instanceof Error ? err.message : 'Failed to fetch extractions'
@@ -67,7 +78,24 @@ export function ExtractionsPage() {
useEffect(() => {
fetchExtractions()
}, [debouncedSearchQuery, sortBy, sortOrder, statusFilter])
}, [debouncedSearchQuery, sortBy, sortOrder, statusFilter, currentPage, pageSize])
// Reset to page 1 when filters change
useEffect(() => {
if (currentPage !== 1) {
setCurrentPage(1)
}
}, [debouncedSearchQuery, sortBy, sortOrder, statusFilter, pageSize])
const handlePageChange = (page: number) => {
setCurrentPage(page)
}
const handlePageSizeChange = (size: number) => {
setPageSize(size)
setCurrentPage(1) // Reset to first page when changing page size
}
const handleCreateExtraction = async () => {
if (!url.trim()) {
@@ -113,7 +141,20 @@ export function ExtractionsPage() {
return <ExtractionsEmpty searchQuery={searchQuery} statusFilter={statusFilter} />
}
return <ExtractionsTable extractions={extractions} />
return (
<div className="space-y-4">
<ExtractionsTable extractions={extractions} />
<AppPagination
currentPage={currentPage}
totalPages={totalPages}
totalCount={totalCount}
pageSize={pageSize}
onPageChange={handlePageChange}
onPageSizeChange={handlePageSizeChange}
itemName="extractions"
/>
</div>
)
}
return (
@@ -136,7 +177,7 @@ export function ExtractionsPage() {
onCreateClick={() => setShowCreateDialog(true)}
loading={loading}
error={error}
extractionCount={extractions.length}
extractionCount={totalCount}
/>
<CreateExtractionDialog

58
src/pages/PlaylistsPage.tsx
View File

@@ -1,4 +1,5 @@
import { AppLayout } from '@/components/AppLayout'
import { AppPagination } from '@/components/AppPagination'
import { CreatePlaylistDialog } from '@/components/playlists/CreatePlaylistDialog'
import { PlaylistsHeader } from '@/components/playlists/PlaylistsHeader'
import {
@@ -30,6 +31,12 @@ export function PlaylistsPage() {
const [sortOrder, setSortOrder] = useState<SortOrder>('asc')
const [showFavoritesOnly, setShowFavoritesOnly] = useState(false)
// Pagination state
const [currentPage, setCurrentPage] = useState(1)
const [totalPages, setTotalPages] = useState(1)
const [totalCount, setTotalCount] = useState(0)
const [pageSize, setPageSize] = useState(10)
// Create playlist dialog state
const [showCreateDialog, setShowCreateDialog] = useState(false)
const [createLoading, setCreateLoading] = useState(false)
@@ -54,13 +61,17 @@ export function PlaylistsPage() {
try {
setLoading(true)
setError(null)
const playlistData = await playlistsService.getPlaylists({
const response = await playlistsService.getPlaylists({
search: debouncedSearchQuery.trim() || undefined,
sort_by: sortBy,
sort_order: sortOrder,
favorites_only: showFavoritesOnly,
page: currentPage,
limit: pageSize,
})
setPlaylists(playlistData)
setPlaylists(response.playlists)
setTotalPages(response.total_pages)
setTotalCount(response.total)
} catch (err) {
const errorMessage =
err instanceof Error ? err.message : 'Failed to fetch playlists'
@@ -73,7 +84,23 @@ export function PlaylistsPage() {
useEffect(() => {
fetchPlaylists()
}, [debouncedSearchQuery, sortBy, sortOrder, showFavoritesOnly])
}, [debouncedSearchQuery, sortBy, sortOrder, showFavoritesOnly, currentPage, pageSize])
// Reset to page 1 when filters change
useEffect(() => {
if (currentPage !== 1) {
setCurrentPage(1)
}
}, [debouncedSearchQuery, sortBy, sortOrder, showFavoritesOnly, pageSize])
const handlePageChange = (page: number) => {
setCurrentPage(page)
}
const handlePageSizeChange = (size: number) => {
setPageSize(size)
setCurrentPage(1) // Reset to first page when changing page size
}
const handleCreatePlaylist = async () => {
if (!newPlaylist.name.trim()) {
@@ -176,12 +203,23 @@ export function PlaylistsPage() {
}
return (
<PlaylistTable
playlists={playlists}
onEdit={handleEditPlaylist}
onSetCurrent={handleSetCurrent}
onFavoriteToggle={handleFavoriteToggle}
/>
<div className="space-y-4">
<PlaylistTable
playlists={playlists}
onEdit={handleEditPlaylist}
onSetCurrent={handleSetCurrent}
onFavoriteToggle={handleFavoriteToggle}
/>
<AppPagination
currentPage={currentPage}
totalPages={totalPages}
totalCount={totalCount}
pageSize={pageSize}
onPageChange={handlePageChange}
onPageSizeChange={handlePageSizeChange}
itemName="playlists"
/>
</div>
)
}
@@ -203,7 +241,7 @@ export function PlaylistsPage() {
onCreateClick={() => setShowCreateDialog(true)}
loading={loading}
error={error}
playlistCount={playlists.length}
playlistCount={totalCount}
showFavoritesOnly={showFavoritesOnly}
onFavoritesToggle={setShowFavoritesOnly}
/>