TheFurya/nuzlocke-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add filter controls to admin tables

Browse Source 
Pokemon (type), Evolutions (trigger), Games (region/generation),
and Runs (status/game) now have dropdown filters alongside search.
Server-side filtering for paginated tables, client-side for small datasets.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Julian Tabel
2026-02-08 20:29:55 +01:00
parent 5d444f0c91
commit c6521dd206
9 changed files with 188 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/api/admin.ts
View File

@@ -50,9 +50,10 @@ export const reorderRoutes = (gameId: number, routes: RouteReorderItem[]) =>
api.put<Route[]>(`/games/${gameId}/routes/reorder`, { routes })
// Pokemon
export const listPokemon = (search?: string, limit = 50, offset = 0) => {
export const listPokemon = (search?: string, limit = 50, offset = 0, type?: string) => {
const params = new URLSearchParams()
if (search) params.set('search', search)
if (type) params.set('type', type)
params.set('limit', String(limit))
params.set('offset', String(offset))
return api.get<PaginatedPokemon>(`/pokemon?${params}`)
@@ -80,9 +81,10 @@ export const bulkImportBosses = (gameId: number, items: unknown[]) =>
api.post<BulkImportResult>(`/games/${gameId}/bosses/bulk-import`, items)
// Evolutions
export const listEvolutions = (search?: string, limit = 50, offset = 0) => {
export const listEvolutions = (search?: string, limit = 50, offset = 0, trigger?: string) => {
const params = new URLSearchParams()
if (search) params.set('search', search)
if (trigger) params.set('trigger', trigger)
params.set('limit', String(limit))
params.set('offset', String(offset))
return api.get<PaginatedEvolutions>(`/evolutions?${params}`)

12
frontend/src/hooks/useAdmin.ts
View File

@@ -21,10 +21,10 @@ import type {
// --- Queries ---
export function usePokemonList(search?: string, limit = 50, offset = 0) {
export function usePokemonList(search?: string, limit = 50, offset = 0, type?: string) {
return useQuery({
queryKey: ['pokemon', { search, limit, offset }],
queryFn: () => adminApi.listPokemon(search, limit, offset),
queryKey: ['pokemon', { search, limit, offset, type }],
queryFn: () => adminApi.listPokemon(search, limit, offset, type),
})
}
@@ -213,10 +213,10 @@ export function useBulkImportBosses(gameId: number) {
// --- Evolution Queries & Mutations ---
export function useEvolutionList(search?: string, limit = 50, offset = 0) {
export function useEvolutionList(search?: string, limit = 50, offset = 0, trigger?: string) {
return useQuery({
queryKey: ['evolutions', { search, limit, offset }],
queryFn: () => adminApi.listEvolutions(search, limit, offset),
queryKey: ['evolutions', { search, limit, offset, trigger }],
queryFn: () => adminApi.listEvolutions(search, limit, offset, trigger),
})
}

34
frontend/src/pages/admin/AdminEvolutions.tsx
View File

@@ -15,11 +15,20 @@ import type { EvolutionAdmin, CreateEvolutionInput, UpdateEvolutionInput } from
const PAGE_SIZE = 50
const EVOLUTION_TRIGGERS = [
{ value: 'level-up', label: 'Level Up' },
{ value: 'trade', label: 'Trade' },
{ value: 'use-item', label: 'Use Item' },
{ value: 'shed', label: 'Shed' },
{ value: 'other', label: 'Other' },
]
export function AdminEvolutions() {
const [search, setSearch] = useState('')
const [triggerFilter, setTriggerFilter] = useState('')
const [page, setPage] = useState(0)
const offset = page * PAGE_SIZE
const { data, isLoading } = useEvolutionList(search || undefined, PAGE_SIZE, offset)
const { data, isLoading } = useEvolutionList(search || undefined, PAGE_SIZE, offset, triggerFilter || undefined)
const evolutions = data?.items ?? []
const total = data?.total ?? 0
const totalPages = Math.ceil(total / PAGE_SIZE)
@@ -101,7 +110,28 @@ export function AdminEvolutions() {
placeholder="Search by pokemon name, trigger, or item..."
className="w-full max-w-sm px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
/>
<span className="text-sm text-gray-500 dark:text-gray-400">
<select
value={triggerFilter}
onChange={(e) => {
setTriggerFilter(e.target.value)
setPage(0)
}}
className="px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
>
<option value="">All triggers</option>
{EVOLUTION_TRIGGERS.map((t) => (
<option key={t.value} value={t.value}>{t.label}</option>
))}
</select>
{(search || triggerFilter) && (
<button
onClick={() => { setSearch(''); setTriggerFilter(''); setPage(0) }}
className="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
>
Clear filters
</button>
)}
<span className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
{total} evolutions
</span>
</div>

58
frontend/src/pages/admin/AdminGames.tsx
View File

@@ -1,4 +1,4 @@
import { useState } from 'react'
import { useState, useMemo } from 'react'
import { AdminTable, type Column } from '../../components/admin/AdminTable'
import { GameFormModal } from '../../components/admin/GameFormModal'
import { useGames } from '../../hooks/useGames'
@@ -15,6 +15,24 @@ export function AdminGames() {
const [showCreate, setShowCreate] = useState(false)
const [editing, setEditing] = useState<Game | null>(null)
const [regionFilter, setRegionFilter] = useState('')
const [genFilter, setGenFilter] = useState('')
const regions = useMemo(
() => [...new Set(games.map((g) => g.region))].sort(),
[games],
)
const generations = useMemo(
() => [...new Set(games.map((g) => g.generation))].sort((a, b) => a - b),
[games],
)
const filteredGames = useMemo(() => {
let result = games
if (regionFilter) result = result.filter((g) => g.region === regionFilter)
if (genFilter) result = result.filter((g) => g.generation === Number(genFilter))
return result
}, [games, regionFilter, genFilter])
const columns: Column<Game>[] = [
{ header: 'Name', accessor: (g) => g.name },
@@ -47,11 +65,45 @@ export function AdminGames() {
</div>
</div>
<div className="mb-4 flex items-center gap-4">
<select
value={regionFilter}
onChange={(e) => setRegionFilter(e.target.value)}
className="px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
>
<option value="">All regions</option>
{regions.map((r) => (
<option key={r} value={r}>{r}</option>
))}
</select>
<select
value={genFilter}
onChange={(e) => setGenFilter(e.target.value)}
className="px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
>
<option value="">All generations</option>
{generations.map((g) => (
<option key={g} value={g}>Gen {g}</option>
))}
</select>
{(regionFilter || genFilter) && (
<button
onClick={() => { setRegionFilter(''); setGenFilter('') }}
className="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
>
Clear filters
</button>
)}
<span className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
{filteredGames.length} games
</span>
</div>
<AdminTable
columns={columns}
data={games}
data={filteredGames}
isLoading={isLoading}
emptyMessage="No games yet. Add one to get started."
emptyMessage="No games found."
onRowClick={(g) => setEditing(g)}
keyFn={(g) => g.id}
/>

34
frontend/src/pages/admin/AdminPokemon.tsx
View File

@@ -15,11 +15,18 @@ import type { Pokemon, CreatePokemonInput, UpdatePokemonInput } from '../../type
const PAGE_SIZE = 50
const POKEMON_TYPES = [
'bug', 'dark', 'dragon', 'electric', 'fairy', 'fighting', 'fire', 'flying',
'ghost', 'grass', 'ground', 'ice', 'normal', 'poison', 'psychic', 'rock',
'steel', 'water',
]
export function AdminPokemon() {
const [search, setSearch] = useState('')
const [typeFilter, setTypeFilter] = useState('')
const [page, setPage] = useState(0)
const offset = page * PAGE_SIZE
const { data, isLoading } = usePokemonList(search || undefined, PAGE_SIZE, offset)
const { data, isLoading } = usePokemonList(search || undefined, PAGE_SIZE, offset, typeFilter || undefined)
const pokemon = data?.items ?? []
const total = data?.total ?? 0
const totalPages = Math.ceil(total / PAGE_SIZE)
@@ -83,12 +90,33 @@ export function AdminPokemon() {
value={search}
onChange={(e) => {
setSearch(e.target.value)
setPage(0) // Reset to first page on search
setPage(0)
}}
placeholder="Search by name..."
className="w-full max-w-sm px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
/>
<span className="text-sm text-gray-500 dark:text-gray-400">
<select
value={typeFilter}
onChange={(e) => {
setTypeFilter(e.target.value)
setPage(0)
}}
className="px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
>
<option value="">All types</option>
{POKEMON_TYPES.map((t) => (
<option key={t} value={t}>{t.charAt(0).toUpperCase() + t.slice(1)}</option>
))}
</select>
{(search || typeFilter) && (
<button
onClick={() => { setSearch(''); setTypeFilter(''); setPage(0) }}
className="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
>
Clear filters
</button>
)}
<span className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
{total} pokemon
</span>
</div>

52
frontend/src/pages/admin/AdminRuns.tsx
View File

@@ -11,12 +11,26 @@ export function AdminRuns() {
const deleteRun = useDeleteRun()
const [deleting, setDeleting] = useState<NuzlockeRun | null>(null)
const [statusFilter, setStatusFilter] = useState('')
const [gameFilter, setGameFilter] = useState('')
const gameMap = useMemo(
() => new Map(games.map((g) => [g.id, g.name])),
[games],
)
const filteredRuns = useMemo(() => {
let result = runs
if (statusFilter) result = result.filter((r) => r.status === statusFilter)
if (gameFilter) result = result.filter((r) => r.gameId === Number(gameFilter))
return result
}, [runs, statusFilter, gameFilter])
const runGames = useMemo(
() => [...new Map(runs.map((r) => [r.gameId, gameMap.get(r.gameId) ?? `Game #${r.gameId}`])).entries()].sort((a, b) => a[1].localeCompare(b[1])),
[runs, gameMap],
)
const columns: Column<NuzlockeRun>[] = [
{ header: 'Run Name', accessor: (r) => r.name, sortKey: (r) => r.name },
{
@@ -54,11 +68,45 @@ export function AdminRuns() {
<h2 className="text-xl font-semibold">Runs</h2>
</div>
<div className="mb-4 flex items-center gap-4">
<select
value={statusFilter}
onChange={(e) => setStatusFilter(e.target.value)}
className="px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
>
<option value="">All statuses</option>
<option value="active">Active</option>
<option value="completed">Completed</option>
<option value="failed">Failed</option>
</select>
<select
value={gameFilter}
onChange={(e) => setGameFilter(e.target.value)}
className="px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
>
<option value="">All games</option>
{runGames.map(([id, name]) => (
<option key={id} value={id}>{name}</option>
))}
</select>
{(statusFilter || gameFilter) && (
<button
onClick={() => { setStatusFilter(''); setGameFilter('') }}
className="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
>
Clear filters
</button>
)}
<span className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
{filteredRuns.length} runs
</span>
</div>
<AdminTable
columns={columns}
data={runs}
data={filteredRuns}
isLoading={runsLoading || gamesLoading}
emptyMessage="No runs yet."
emptyMessage="No runs found."
keyFn={(r) => r.id}
onRowClick={(r) => setDeleting(r)}
/>