feat: update query option

app/datasets/[dataset]/filter.tsx

@@ -5,7 +5,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { useExtractDocuments } from '@/hooks/useExtractDocuments';
 import { DatasetAPI } from '@/lib/api/dataset';
-import { useFilterStore } from '@/states/filter';
+import { useQueryOptionsState } from '@/states/filter';
 import { useQuery } from '@tanstack/react-query';
 import { useParams } from 'next/navigation';
 import { type ChangeEvent, useCallback } from 'react';
@@ -19,7 +19,12 @@ export function DatasetFilter() {
     queryFn: () => DatasetAPI.getSchema(dataset)
   });
 
-  const { filter, setDate, setNumber, setString } = useFilterStore();
+  const {
+    filter,
+    setFilterDate: setDate,
+    setFilterNumber: setNumber,
+    setFilterString: setString
+  } = useQueryOptionsState();
 
   const { refetch: fetchDocuments } = useExtractDocuments(dataset);
 

hooks/useExtractDocuments.ts

@@ -1,13 +1,33 @@
 import { DatasetAPI } from '@/lib/api/dataset';
-import { useFilterStore } from '@/states/filter';
+import { useQueryOptionsState } from '@/states/filter';
 import { useQuery } from '@tanstack/react-query';
 
 export function useExtractDocuments(dataset: string) {
-  const filter = useFilterStore((state) => state.filter);
+  const queryOptions = useQueryOptionsState();
 
   return useQuery({
     queryKey: [`/datasets/${dataset}/documents`],
-    queryFn: () => DatasetAPI.getDocuments(dataset, filter),
+    queryFn: () => {
+      const filter: Record<string, unknown> = {};
+      const filterEntries = Object.entries(queryOptions.filter);
+      for (const [key, value] of filterEntries) {
+        if (typeof value === 'object') {
+          if ('from' in value) filter[key] = { min: value.from, max: value.to };
+          else filter[key] = value;
+        } else if (typeof value === 'string') {
+          if (value.length === 0) continue;
+          filter[key] = value;
+        } else {
+          filter[key] = value;
+        }
+      }
+      const options = {
+        filter: filter,
+        sort: queryOptions.sort,
+        pagination: queryOptions.pagination
+      };
+      return DatasetAPI.getDocuments(dataset, options);
+    },
     enabled: false
   });
 }

lib/api/dataset.ts

@@ -1,11 +1,9 @@
-import type { DatasetFilter } from '@/states/filter';
 import { api } from './http';
 
 export type Dataset = {
   name: string;
   description: string;
 };
-
 export type FieldSchema = {
   type: 'keyword' | 'text' | 'long' | 'double' | 'date' | string;
   name: string;
@@ -31,8 +29,8 @@ type Document = {
   [key: string]: unknown;
 };
 
-async function getDocuments<T = Document>(dataset: string, filter: DatasetFilter): Promise<T[]> {
-  const resp = await api.post(`/api/datasets/${dataset}/documents`, filter);
+async function getDocuments<T = Document>(dataset: string, options: unknown): Promise<T[]> {
+  const resp = await api.post(`/api/datasets/${dataset}/documents`, options);
   return resp.data;
 }
 

states/filter.ts

@@ -2,27 +2,54 @@ import type { DateRange } from 'react-day-picker';
 import { create } from 'zustand';
 
 type NumberRange = { min: number; max: number };
-
 export type DatasetFilter = Record<string, NumberRange | DateRange | string | boolean>;
+export type DatasetSort = {
+  field: string;
+  order: 'asc' | 'desc';
+};
+export type DatasetPagination = {
+  limit: number;
+  offset: number;
+};
+export type DatasetQueryOptions = {
+  filter?: DatasetFilter;
+  sort?: DatasetSort[];
+  pagination?: DatasetPagination;
+};
 
-type FilterState = {
+type QueryOptionState = {
   filter: DatasetFilter;
-  setString(fieldName: string, value: string): void;
-  setNumber(fieldName: string, type: 'min' | 'max', value: number): void;
-  setDate(fieldName: string, range?: DateRange): void;
+  sort: DatasetSort[];
+  pagination: DatasetPagination;
+  setFilterString(fieldName: string, value: string): void;
+  setFilterNumber(fieldName: string, type: 'min' | 'max', value: number): void;
+  setFilterDate(fieldName: string, range?: DateRange): void;
+  setPagination(pagination: DatasetPagination): void;
 };
 
-export const useFilterStore = create<FilterState>((set) => ({
+export const useQueryOptionsState = create<QueryOptionState>((set) => ({
   filter: {},
-  setDate(fieldName, range) {
-    if (range) {
-      set((state) => ({ filter: { ...state.filter, [fieldName]: range } }));
-    }
+  sort: [],
+  pagination: {
+    limit: 100,
+    offset: 0
+  },
+  setPagination(pagination) {
+    set({ pagination });
+  },
+  setFilterDate(fieldName, range) {
+    if (range)
+      set((state) => ({
+        filter: {
+          ...state.filter,
+          [fieldName]: range
+        }
+      }));
   },
-  setString(fieldName, value) {
+  setFilterString(fieldName, value) {
     set((state) => ({ filter: { ...state.filter, [fieldName]: value } }));
   },
-  setNumber(fieldName, type, value) {
+  setFilterNumber(fieldName, type, value) {
     set((state) => {
       const rangeFilter = (state.filter[fieldName] as NumberRange) ?? {};
       const parseValue = Number.isNaN(value) ? undefined : value;