111 lines
3.3 KiB
TypeScript
111 lines
3.3 KiB
TypeScript
import SidebarLayout from "@/SidebarLayout";
|
|
import type { RegionListResData } from "@/features/region/lib/data";
|
|
import { user_api } from "@/features/users/lib/api";
|
|
import type { UserListData } from "@/features/users/lib/data";
|
|
import DeleteUser from "@/features/users/ui/DeleteUser";
|
|
import Filter from "@/features/users/ui/Filter";
|
|
import UserTable from "@/features/users/ui/UserTable";
|
|
import Pagination from "@/shared/ui/pagination";
|
|
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { useState } from "react";
|
|
|
|
const UsersList = () => {
|
|
const [editingUser, setEditingUser] = useState<UserListData | null>(null);
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [regionValue, setRegionValue] = useState<RegionListResData | null>(
|
|
null,
|
|
);
|
|
const limit = 20;
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [statusFilter, setStatusFilter] = useState<"all" | "true" | "false">(
|
|
"all",
|
|
);
|
|
|
|
const [userDelete, setUserDelete] = useState<UserListData | null>(null);
|
|
const [opneDelete, setOpenDelete] = useState<boolean>(false);
|
|
|
|
const { data, isLoading, isError } = useQuery({
|
|
queryKey: ["user_list", currentPage, statusFilter, regionValue, searchTerm],
|
|
queryFn: () => {
|
|
const params: {
|
|
limit?: number;
|
|
offset?: number;
|
|
search?: string;
|
|
is_active?: boolean | string;
|
|
region_id?: number;
|
|
} = {
|
|
limit,
|
|
offset: (currentPage - 1) * limit,
|
|
search: searchTerm,
|
|
};
|
|
|
|
if (regionValue !== null) {
|
|
params.region_id = Number(regionValue.id);
|
|
}
|
|
|
|
if (statusFilter !== "all") {
|
|
params.is_active = statusFilter;
|
|
}
|
|
|
|
return user_api.list(params);
|
|
},
|
|
});
|
|
|
|
const [dialogOpen, setDialogOpen] = useState(false);
|
|
|
|
const handleDelete = (user: UserListData) => {
|
|
setUserDelete(user);
|
|
setOpenDelete(true);
|
|
};
|
|
|
|
const totalPages = data ? Math.ceil(data.data.data.count / limit) : 1;
|
|
|
|
return (
|
|
<SidebarLayout>
|
|
<div className="flex flex-col h-full p-10 w-full">
|
|
<div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 gap-4">
|
|
<h1 className="text-2xl font-bold">Foydalanuvchilar ro'yxati</h1>
|
|
|
|
<Filter
|
|
searchTerm={searchTerm}
|
|
setSearchTerm={setSearchTerm}
|
|
setStatusFilter={setStatusFilter}
|
|
statusFilter={statusFilter}
|
|
regionValue={regionValue}
|
|
setRegionValue={setRegionValue}
|
|
dialogOpen={dialogOpen}
|
|
setDialogOpen={setDialogOpen}
|
|
editingUser={editingUser}
|
|
setEditingUser={setEditingUser}
|
|
/>
|
|
</div>
|
|
|
|
<UserTable
|
|
data={data}
|
|
isLoading={isLoading}
|
|
setEditingUser={setEditingUser}
|
|
isError={isError}
|
|
setDialogOpen={setDialogOpen}
|
|
handleDelete={handleDelete}
|
|
currentPage={currentPage}
|
|
/>
|
|
<Pagination
|
|
currentPage={currentPage}
|
|
setCurrentPage={setCurrentPage}
|
|
totalPages={totalPages}
|
|
/>
|
|
|
|
<DeleteUser
|
|
opneDelete={opneDelete}
|
|
setOpenDelete={setOpenDelete}
|
|
userDelete={userDelete}
|
|
setUserDelete={setUserDelete}
|
|
/>
|
|
</div>
|
|
</SidebarLayout>
|
|
);
|
|
};
|
|
|
|
export default UsersList;
|