Add URL-based filtering to admin list page #111
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: d765703 The changes in this PR will be included in the next version bump. This PR includes changesets to release 10 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
Coverage Report for CLI Package Coverage (./packages/cli)
File CoverageNo changed files found. |
Contributor
Coverage Report for Storage Package Coverage (./packages/storage)
File CoverageNo changed files found. |
Contributor
Coverage Report for Storage S3 Package Coverage (./packages/storage-s3)
File CoverageNo changed files found. |
Contributor
Coverage Report for Core Package Coverage (./packages/core)
File CoverageNo changed files found. |
Contributor
Coverage Report for UI Package Coverage (./packages/ui)
File CoverageNo changed files found. |
Contributor
Coverage Report for Storage Vercel Package Coverage (./packages/storage-vercel)
File CoverageNo changed files found. |
Contributor
Coverage Report for RAG Package Coverage (./packages/rag)
File CoverageNo changed files found. |
Contributor
Coverage Report for Auth Package Coverage (./packages/auth)
File CoverageNo changed files found. |
This commit implements a complete filtering system for the admin UI list pages with all state stored in URL query parameters. The system supports all field types and provides both ready-to-use components and composable primitives for developers. Features: - URL-based filter state management (filters[field][operator]=value format) - Field type-specific filters (text, integer, checkbox, timestamp, select, relationship) - Operator support per field type (contains, equals, gt, gte, lt, lte, in, etc.) - FilterBar component with add/remove/clear functionality - Primitive filter input components for custom implementations - Server-side Prisma where clause generation - Client-side URL navigation and state updates - Full TypeScript type safety Components Added: - FilterBar: Main filter UI with field/operator selection - FilterInput components: TextFilterInput, NumberFilterInput, BooleanFilterInput, DateFilterInput, SelectFilterInput, RelationshipFilterInput Utilities Added: - parseFiltersFromURL: Parse filter state from URL search params - serializeFiltersToURL: Serialize filters to URL string - filtersToPrismaWhere: Convert filters to Prisma where clauses - addFilter, removeFilter, clearFilters: Filter state management Integration: - ListView: Server-side filter parsing and Prisma query building - ListViewClient: Client-side FilterBar integration - AdminUI: Pass searchParams to ListView All primitives and utilities are exported from @opensaas/stack-ui for developer customization.
borisno2
force-pushed
the
claude/admin-list-filtering-url-state-01Wj7FAfADcK36HD7sgkb8nP
branch
from
800961e to
b9f0be6
Compare
Fixed Next.js error 'Functions cannot be passed directly to Client Components' by extracting only serializable field metadata instead of passing the entire config object (which contains methods) to client components. Changes: - Created FilterableField type with serializable field data (name, type, options) - Updated FilterBar to accept fields array instead of full config - Updated ListView to extract and serialize field metadata - Updated ListViewClient to pass serialized data to FilterBar - Ensured all data crossing server/client boundary is JSON-serializable This maintains the same functionality while respecting Next.js server/client component boundaries.
Fixed blank filter dropdown by using proper Radix UI Select structure with SelectTrigger, SelectContent, and SelectItem instead of HTML option tags. Changes: - Updated FilterBar to use SelectTrigger, SelectContent, SelectItem - Updated FilterInput components to use proper Radix UI Select structure - Imported missing Select subcomponents from primitives The filter bar now displays properly with working dropdowns for field and operator selection.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This commit implements a complete filtering system for the admin UI list pages with all state stored in URL query parameters. The system supports all field types and provides both ready-to-use components and composable primitives for developers.
Features:
Components Added:
Utilities Added:
Integration:
All primitives and utilities are exported from @opensaas/stack-ui for developer customization.