From f40eee829cbc9445b45fbfb03752a11fdbe7547a Mon Sep 17 00:00:00 2001 From: sdjdd Date: Fri, 12 Apr 2024 17:17:58 +0800 Subject: [PATCH] fix(next/web): search pagination --- next/web/src/App/Admin/Tickets/index.tsx | 38 +++--------- next/web/src/api/ticket.ts | 75 +++++------------------- 2 files changed, 21 insertions(+), 92 deletions(-) diff --git a/next/web/src/App/Admin/Tickets/index.tsx b/next/web/src/App/Admin/Tickets/index.tsx index bf1ed0dae..707e86347 100644 --- a/next/web/src/App/Admin/Tickets/index.tsx +++ b/next/web/src/App/Admin/Tickets/index.tsx @@ -2,16 +2,10 @@ import { useEffect, useState } from 'react'; import { Route, Routes } from 'react-router-dom'; import _ from 'lodash'; -import { - useSearchTicketCustomField, - useSearchTickets, - useTickets, - UseTicketsOptions, -} from '@/api/ticket'; +import { useSearchTickets, useTickets, UseTicketsOptions } from '@/api/ticket'; import { usePage, usePageSize } from '@/utils/usePage'; import { Topbar, useOrderBy } from './Topbar'; import { - FieldFilters, FilterForm, Filters, LocalFiltersProvider, @@ -27,7 +21,6 @@ import { useTicketSwitchType, } from './useTicketSwitchType'; import { useViewTickets } from '@/api/view'; -import { decodeDateRange } from '@/utils/date-range'; import { useTicketTableColumn } from './hooks/useTicketTableColumns'; const DEFAULT_PAGE_SIZE = 20; @@ -51,8 +44,6 @@ function useSmartSearchTickets({ const isFieldSearch = filters.type === 'field' && !isProcessableSearch; const isKeywordSearch = filters.type === 'normal' && !!filters.keyword && !isProcessableSearch; - const dateRange = filters.createdAt && decodeDateRange(filters.createdAt); - const useTicketResult = useTickets({ filters: _.omit(filters, ['type', 'fieldId', 'fieldValue']), ...options, @@ -62,12 +53,14 @@ function useSmartSearchTickets({ }, }); - const useSearchTicketsResult = useSearchTickets((filters as NormalFilters).keyword!, { - filters: _.omit(filters, ['keyword', 'type', 'fieldId', 'fieldValue']) as NormalFilters, + const useSearchTicketsResult = useSearchTickets({ + filters: (isKeywordSearch + ? _.omit(filters, ['type', 'fieldId', 'fieldValue']) + : _.pick(filters, ['createdAt', 'fieldId', 'fieldValue'])) as NormalFilters, ...options, queryOptions: { ...queryOptions, - enabled: isKeywordSearch, + enabled: isKeywordSearch || isFieldSearch, }, }); @@ -79,28 +72,11 @@ function useSmartSearchTickets({ }, }); - const { fieldId, fieldValue } = filters as FieldFilters; - - const useFieldSearchResult = useSearchTicketCustomField( - { - fieldId, - fieldValue, - createdAt: dateRange ? [dateRange.from, dateRange.to] : undefined, - orderKey: options.orderKey, - orderType: options.orderType, - }, - { - enabled: isFieldSearch, - } - ); - return { ...(isProcessableSearch ? useProcessableTicketsResult - : isKeywordSearch + : isKeywordSearch || isFieldSearch ? useSearchTicketsResult - : isFieldSearch - ? useFieldSearchResult : useTicketResult), mode: isProcessableSearch ? 'view' : isKeywordSearch || isFieldSearch ? 'search' : 'normal', }; diff --git a/next/web/src/api/ticket.ts b/next/web/src/api/ticket.ts index 357b67328..b4a8fe6f3 100644 --- a/next/web/src/api/ticket.ts +++ b/next/web/src/api/ticket.ts @@ -60,8 +60,9 @@ export interface FetchTicketFilters { tagValue?: string; privateTagKey?: string; privateTagValue?: string; - fieldName?: string; + fieldId?: string; fieldValue?: string; + keyword?: string; where?: Record; } @@ -74,8 +75,9 @@ export function encodeTicketFilters(filters: FetchTicketFilters) { tagValue: filters.tagValue, privateTagKey: filters.privateTagKey, privateTagValue: filters.privateTagValue, - fieldName: filters.fieldName, + fieldId: filters.fieldId, fieldValue: filters.fieldValue, + keyword: filters.keyword, }; if (filters.assigneeId) { params.assigneeId = castArray(filters.assigneeId).join(','); @@ -158,19 +160,15 @@ async function fetchTickets({ return { tickets: data, totalCount: parseInt(headers['x-total-count']) }; } -async function searchTickets( - keyword: string, - { - page = 1, - pageSize = 10, - orderKey = 'createdAt', - orderType = 'desc', - filters = {}, - }: FetchTicketsOptions = {} -) { +async function searchTickets({ + page = 1, + pageSize = 10, + orderKey = 'createdAt', + orderType = 'desc', + filters = {}, +}: FetchTicketsOptions = {}) { const params: any = { ...encodeTicketFilters(filters), - keyword, page, pageSize, orderBy: `${orderKey}-${orderType}`, @@ -270,13 +268,10 @@ export function useTickets({ queryOptions, ...options }: UseTicketsOptions = {}) }; } -export function useSearchTickets( - keyword: string, - { queryOptions, ...options }: UseTicketsOptions = {} -) { +export function useSearchTickets({ queryOptions, ...options }: UseTicketsOptions = {}) { const { data, ...rest } = useQuery({ - queryKey: ['searchTicketsResult', keyword, options], - queryFn: () => searchTickets(keyword, options), + queryKey: ['searchTicketsResult', options], + queryFn: () => searchTickets(options), ...queryOptions, }); @@ -323,48 +318,6 @@ export function useOperateTicket( }); } -interface SearchTicketCustomFieldOptions { - fieldId?: string; - fieldValue?: string; - createdAt?: [Date | undefined, Date | undefined]; - orderKey?: string; - orderType?: string; -} - -async function searchTicketCustomField({ - fieldId, - fieldValue, - createdAt, - orderKey = 'createdAt', - orderType = 'desc', -}: SearchTicketCustomFieldOptions) { - const res = await http.get('/api/2/tickets/search/v2', { - params: { - fieldId, - fieldValue, - createdAt: createdAt?.map((d) => (d ? d.toISOString() : '*')).join('..'), - orderBy: `${orderKey}-${orderType}`, - }, - }); - return { tickets: res.data, totalCount: Number(res.headers['x-total-count']) }; -} - -export function useSearchTicketCustomField( - searchOptions: SearchTicketCustomFieldOptions, - options?: UseQueryOptions -) { - const { data, ...rest } = useQuery({ - queryKey: ['searchTicketCustomField', searchOptions], - queryFn: () => searchTicketCustomField(searchOptions), - ...options, - }); - - return { - ...rest, - data: data?.tickets, - totalCount: data?.totalCount, - }; -} type exportType = 'json' | 'csv'; interface ExportParams extends FetchTicketsOptions { type: exportType;