Skip to content

Commit

Permalink
fix(next/web): search pagination
Browse files Browse the repository at this point in the history
  • Loading branch information
sdjdd committed Apr 12, 2024
1 parent 7eb75a2 commit f40eee8
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 92 deletions.
38 changes: 7 additions & 31 deletions next/web/src/App/Admin/Tickets/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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;
Expand All @@ -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,
Expand All @@ -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,
},
});

Expand All @@ -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',
};
Expand Down
75 changes: 14 additions & 61 deletions next/web/src/api/ticket.ts
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,9 @@ export interface FetchTicketFilters {
tagValue?: string;
privateTagKey?: string;
privateTagValue?: string;
fieldName?: string;
fieldId?: string;
fieldValue?: string;
keyword?: string;
where?: Record<string, any>;
}

Expand All @@ -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(',');
Expand Down Expand Up @@ -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}`,
Expand Down Expand Up @@ -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,
});

Expand Down Expand Up @@ -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<TicketSchema[]>('/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<FetchTicketsResult, Error>
) {
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;
Expand Down

0 comments on commit f40eee8

Please sign in to comment.