diff --git 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<typeof UseEntityQueryPropsSchema>
+export interface SortableEntitySortQueryProps {
+ sortBy: string
+ desc: boolean
+}
+
+export type UseEntityQueryProps = z.infer<typeof UseEntityQueryPropsSchema & SortableEntitySortQueryProps>
+
+export type QueryKey = [string, number, number, string]
+export type SortableQueryKey = [string, number, number, string, string, boolean]
+
+export interface QueryKeyType<QT> {
+ queryKey: QT
+}
-export type EntityQueryKeyType = { queryKey: [string, number, number, string] }
+export type EntityQueryKeyType = QueryKeyType<SortableQueryKey | QueryKey>
interface FetchEntityResult<T> {
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
@@ -10,7 +10,7 @@ import {
import {
UseRowSelectionReturn,
UseSortingReturn,
- UseVisibilityReturn
+ UseVisibilityReturn,
} from ".";
interface UseEntityTableProps<TData, TValue> {
@@ -22,6 +22,7 @@ interface UseEntityTableProps<TData, TValue> {
sorting: UseSortingReturn
visibility: UseVisibilityReturn
rowSelection?: UseRowSelectionReturn
+ manualSorting?: boolean
pageIndex: number
pageSize: number
onPaginationChange: OnChangeFn<PaginationState>
@@ -32,6 +33,7 @@ export const useEntityTable = <TData, TValue>(
columns,
data,
sorting,
+ manualSorting = false,
visibility,
rowSelection,
pageIndex,
@@ -42,6 +44,7 @@ export const useEntityTable = <TData, TValue>(
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
@@ -13,10 +13,12 @@ import {
useDialog,
usePagination,
FetchEntityReturn,
- EntityQueryKeyType,
useEntityTable,
useVisibility,
- useSorting
+ useSorting,
+ SortableQueryKey,
+ QueryKey,
+ EntityQueryKeyType,
} from "./hooks";
interface EntityTableProps<T> {
@@ -28,6 +30,7 @@ interface EntityTableProps<T> {
filteredColumn: string;
entityKey: string
rowSelection?: UseRowSelectionReturn
+ manualSorting?: boolean
}
export function EntityTable<T>({
@@ -39,6 +42,7 @@ export function EntityTable<T>({
filteredColumn,
rowSelection,
entityKey,
+ manualSorting = false
}: EntityTableProps<T>) {
const [mutationDialogOpen, setMutationDialogOpen] = useDialog();
const [deleteDialogOpen, setDeleteDialogOpen] = useDialog();
@@ -70,10 +74,18 @@ export function EntityTable<T>({
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
@@ -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<UserType> {
- 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
@@ -14,6 +14,7 @@ export const UsersTable: FC = () => {
return (
<EntityTable
fetchEntity={fetchUsers}
+ manualSorting={true}
MutationDialog={UsersMutationDialog}
DeleteConfirmationDialog={UsersDeleteConfirmationDialog}
SettingsDialog={UsersSettingsDialog}