diff --git a/dashboard/src/components/entity-table/hooks/use-entity-query.ts b/dashboard/src/components/entity-table/hooks/use-entity-query.ts index 76167c0..d550b1c 100644 --- a/dashboard/src/components/entity-table/hooks/use-entity-query.ts +++ b/dashboard/src/components/entity-table/hooks/use-entity-query.ts @@ -6,9 +6,21 @@ const UseEntityQueryPropsSchema = z.object({ search: z.string().optional() }) -export type UseEntityQueryProps = z.infer +export interface SortableEntitySortQueryProps { + sortBy: string + desc: boolean +} + +export type UseEntityQueryProps = z.infer + +export type QueryKey = [string, number, number, string] +export type SortableQueryKey = [string, number, number, string, string, boolean] + +export interface QueryKeyType { + queryKey: QT +} -export type EntityQueryKeyType = { queryKey: [string, number, number, string] } +export type EntityQueryKeyType = QueryKeyType interface FetchEntityResult { pageCount: number diff --git a/dashboard/src/components/entity-table/hooks/use-entity-table.ts b/dashboard/src/components/entity-table/hooks/use-entity-table.ts index 74692c2..ac79957 100644 --- a/dashboard/src/components/entity-table/hooks/use-entity-table.ts +++ b/dashboard/src/components/entity-table/hooks/use-entity-table.ts @@ -10,7 +10,7 @@ import { import { UseRowSelectionReturn, UseSortingReturn, - UseVisibilityReturn + UseVisibilityReturn, } from "."; interface UseEntityTableProps { @@ -22,6 +22,7 @@ interface UseEntityTableProps { sorting: UseSortingReturn visibility: UseVisibilityReturn rowSelection?: UseRowSelectionReturn + manualSorting?: boolean pageIndex: number pageSize: number onPaginationChange: OnChangeFn @@ -32,6 +33,7 @@ export const useEntityTable = ( columns, data, sorting, + manualSorting = false, visibility, rowSelection, pageIndex, @@ -42,6 +44,7 @@ export const useEntityTable = ( data: data.entity, columns, manualPagination: true, + manualSorting, pageCount: data.pageCount + 1, autoResetPageIndex: false, onPaginationChange, diff --git a/dashboard/src/components/entity-table/index.tsx b/dashboard/src/components/entity-table/index.tsx index 05575b3..b11934e 100644 --- a/dashboard/src/components/entity-table/index.tsx +++ b/dashboard/src/components/entity-table/index.tsx @@ -13,10 +13,12 @@ import { useDialog, usePagination, FetchEntityReturn, - EntityQueryKeyType, useEntityTable, useVisibility, - useSorting + useSorting, + SortableQueryKey, + QueryKey, + EntityQueryKeyType, } from "./hooks"; interface EntityTableProps { @@ -28,6 +30,7 @@ interface EntityTableProps { filteredColumn: string; entityKey: string rowSelection?: UseRowSelectionReturn + manualSorting?: boolean } export function EntityTable({ @@ -39,6 +42,7 @@ export function EntityTable({ filteredColumn, rowSelection, entityKey, + manualSorting = false }: EntityTableProps) { const [mutationDialogOpen, setMutationDialogOpen] = useDialog(); const [deleteDialogOpen, setDeleteDialogOpen] = useDialog(); @@ -70,10 +74,18 @@ export function EntityTable({ const sorting = useSorting() const visibility = useVisibility() const { onPaginationChange, pageIndex, pageSize } = usePagination(); + const sortedQuery: SortableQueryKey = [ + entityKey, + pageIndex, + pageSize, + filtering.columnFilters, + sorting.sorting[0]?.id ? sorting.sorting[0].id : "created_at", + sorting.sorting[0]?.desc] + const query: QueryKey = [entityKey, pageIndex, pageSize, filtering.columnFilters] const { data, isLoading } = useQuery({ queryFn: fetchEntity, - queryKey: [entityKey, pageIndex, pageSize, filtering.columnFilters], + queryKey: manualSorting ? sortedQuery : query, initialData: { entity: [], pageCount: 1 } }); diff --git a/dashboard/src/features/users/services/users.query.ts b/dashboard/src/features/users/services/users.query.ts index 7220aa4..bcb86b8 100644 --- a/dashboard/src/features/users/services/users.query.ts +++ b/dashboard/src/features/users/services/users.query.ts @@ -1,7 +1,14 @@ import { useQuery } from "@tanstack/react-query"; import { fetch } from "@marzneshin/utils"; import { UserType } from "../types"; -import { EntityQueryKeyType, FetchEntityReturn, UseEntityQueryProps } from "@marzneshin/components"; +import { + FetchEntityReturn, + UseEntityQueryProps, + SortableEntitySortQueryProps, + EntityQueryKeyType +} from "@marzneshin/components"; + +export type SortUserBy = "username" | "used_traffic" | "data_limit" | "expire" | "created_at" interface UserResponse extends UserType { service_ids: number[] @@ -9,7 +16,15 @@ interface UserResponse extends UserType { } export async function fetchUsers({ queryKey }: EntityQueryKeyType): FetchEntityReturn { - return fetch(`/users?page=${queryKey[1]}&size=${queryKey[2]}&username=${queryKey[3]}`).then((result) => { + return fetch(`/users`, { + query: { + page: queryKey[1], + size: queryKey[2], + username: queryKey[3], + descending: queryKey[5], + order_by: queryKey[4] + } + }).then((result) => { const users: UserType[] = result.items.map((fetchedUser: UserResponse) => { const user: UserType = fetchedUser; user.services = fetchedUser.service_ids @@ -24,9 +39,11 @@ export async function fetchUsers({ queryKey }: EntityQueryKeyType): FetchEntityR export const UsersQueryFetchKey = "users"; -export const useUsersQuery = ({ page, size, search }: UseEntityQueryProps) => { +export const useUsersQuery = ({ + page, size, search = "", sortBy = "created_at", desc = false +}: UseEntityQueryProps & SortableEntitySortQueryProps) => { return useQuery({ - queryKey: [UsersQueryFetchKey, page, size, search ? search : ""], + queryKey: [UsersQueryFetchKey, page, size, search, sortBy, desc], queryFn: fetchUsers, initialData: { entity: [], pageCount: 0 } }) diff --git a/dashboard/src/features/users/tables/users/index.tsx b/dashboard/src/features/users/tables/users/index.tsx index 00518c2..ec893e8 100644 --- a/dashboard/src/features/users/tables/users/index.tsx +++ b/dashboard/src/features/users/tables/users/index.tsx @@ -14,6 +14,7 @@ export const UsersTable: FC = () => { return (