add server-side sorting support for database grid
This commit is contained in:
parent
0f68e0d2e8
commit
828c70a07e
3 changed files with 55 additions and 1 deletions
|
|
@ -28,6 +28,10 @@ export interface SearchParams {
|
||||||
per?: number
|
per?: number
|
||||||
/** Search filters */
|
/** Search filters */
|
||||||
filters?: SearchFilters
|
filters?: SearchFilters
|
||||||
|
/** Sort by column name */
|
||||||
|
sortBy?: string
|
||||||
|
/** Sort order */
|
||||||
|
sortOrder?: 'asc' | 'desc'
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -161,6 +165,14 @@ export class SearchAdapter extends BaseAdapter {
|
||||||
body.exclude = params.exclude
|
body.exclude = params.exclude
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Include sort parameters if provided
|
||||||
|
if (params.sortBy) {
|
||||||
|
body.sort = params.sortBy
|
||||||
|
}
|
||||||
|
if (params.sortOrder) {
|
||||||
|
body.order = params.sortOrder
|
||||||
|
}
|
||||||
|
|
||||||
// Build filters based on what's allowed for this search type
|
// Build filters based on what's allowed for this search type
|
||||||
if (params.filters) {
|
if (params.filters) {
|
||||||
const filters: any = {}
|
const filters: any = {}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
import { RestDataProvider } from 'wx-grid-data-provider'
|
import { RestDataProvider } from 'wx-grid-data-provider'
|
||||||
import { searchAdapter } from '$lib/api/adapters/search.adapter'
|
import { searchAdapter } from '$lib/api/adapters/search.adapter'
|
||||||
import type { SearchParams } from '$lib/api/adapters/search.adapter'
|
import type { SearchParams } from '$lib/api/adapters/search.adapter'
|
||||||
|
import type { SearchFilters } from '$lib/api/adapters/types'
|
||||||
|
|
||||||
interface DatabaseProviderOptions {
|
interface DatabaseProviderOptions {
|
||||||
resource: 'weapons' | 'characters' | 'summons'
|
resource: 'weapons' | 'characters' | 'summons'
|
||||||
|
|
@ -24,6 +25,9 @@ export class DatabaseProvider extends RestDataProvider<any> {
|
||||||
private totalCount: number = 0
|
private totalCount: number = 0
|
||||||
private totalPages: number = 1
|
private totalPages: number = 1
|
||||||
private searchQuery: string = ''
|
private searchQuery: string = ''
|
||||||
|
private sortColumn: string | null = null
|
||||||
|
private sortOrder: 'asc' | 'desc' = 'asc'
|
||||||
|
private filters: SearchFilters = {}
|
||||||
|
|
||||||
constructor(options: DatabaseProviderOptions) {
|
constructor(options: DatabaseProviderOptions) {
|
||||||
// Pass a dummy URL to parent since we'll override getData
|
// Pass a dummy URL to parent since we'll override getData
|
||||||
|
|
@ -50,7 +54,10 @@ export class DatabaseProvider extends RestDataProvider<any> {
|
||||||
const searchParams: SearchParams = {
|
const searchParams: SearchParams = {
|
||||||
page: page,
|
page: page,
|
||||||
per: perPage,
|
per: perPage,
|
||||||
...(this.searchQuery && this.searchQuery.length >= 2 && { query: this.searchQuery })
|
...(this.searchQuery && this.searchQuery.length >= 2 && { query: this.searchQuery }),
|
||||||
|
...(this.sortColumn && { sortBy: this.sortColumn }),
|
||||||
|
...(this.sortColumn && { sortOrder: this.sortOrder }),
|
||||||
|
...(Object.keys(this.filters).length > 0 && { filters: this.filters })
|
||||||
}
|
}
|
||||||
|
|
||||||
// Use the appropriate search method based on resource type
|
// Use the appropriate search method based on resource type
|
||||||
|
|
@ -120,4 +127,23 @@ export class DatabaseProvider extends RestDataProvider<any> {
|
||||||
this.searchQuery = ''
|
this.searchQuery = ''
|
||||||
this.currentPage = 1
|
this.currentPage = 1
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Set sort column and order
|
||||||
|
setSort(column: string | null, order: 'asc' | 'desc') {
|
||||||
|
this.sortColumn = column
|
||||||
|
this.sortOrder = order
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set filters
|
||||||
|
setFilters(filters: SearchFilters) {
|
||||||
|
this.filters = filters
|
||||||
|
// Reset to first page when filters change
|
||||||
|
this.currentPage = 1
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clear filters
|
||||||
|
clearFilters() {
|
||||||
|
this.filters = {}
|
||||||
|
this.currentPage = 1
|
||||||
|
}
|
||||||
}
|
}
|
||||||
16
src/lib/types/declarations.d.ts
vendored
16
src/lib/types/declarations.d.ts
vendored
|
|
@ -50,9 +50,25 @@ declare module 'wx-svelte-grid' {
|
||||||
export class Grid extends SvelteComponent<{
|
export class Grid extends SvelteComponent<{
|
||||||
data?: IRow[]
|
data?: IRow[]
|
||||||
columns?: IColumn[]
|
columns?: IColumn[]
|
||||||
|
sortMarks?: Record<string, { order: 'asc' | 'desc'; index?: number }>
|
||||||
[key: string]: any
|
[key: string]: any
|
||||||
}> {}
|
}> {}
|
||||||
|
|
||||||
|
export class Willow extends SvelteComponent<{
|
||||||
|
fonts?: boolean
|
||||||
|
children?: any
|
||||||
|
}> {}
|
||||||
|
|
||||||
|
export class WillowDark extends SvelteComponent<{
|
||||||
|
fonts?: boolean
|
||||||
|
children?: any
|
||||||
|
}> {}
|
||||||
|
|
||||||
|
export class Material extends SvelteComponent<{
|
||||||
|
fonts?: boolean
|
||||||
|
children?: any
|
||||||
|
}> {}
|
||||||
|
|
||||||
export class RestDataProvider<T = any> {
|
export class RestDataProvider<T = any> {
|
||||||
constructor(url: string, options?: any)
|
constructor(url: string, options?: any)
|
||||||
getData(): Promise<T[]>
|
getData(): Promise<T[]>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue