109 lines
3.5 KiB
TypeScript
109 lines
3.5 KiB
TypeScript
import { plans_api } from "@/features/plans/lib/api";
|
|
import type { PlanListData } from "@/features/plans/lib/data";
|
|
import DeletePlan from "@/features/plans/ui/DeletePlan";
|
|
import FilterPlans from "@/features/plans/ui/FilterPlans";
|
|
import PalanTable from "@/features/plans/ui/PalanTable";
|
|
import PlanDetail from "@/features/plans/ui/PlanDetail";
|
|
import formatDate from "@/shared/lib/formatDate";
|
|
import Pagination from "@/shared/ui/pagination";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { useState } from "react";
|
|
|
|
const PlansList = () => {
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [statusFilter, setStatusFilter] = useState<string>("all");
|
|
const [dateFilter, setDateFilter] = useState<Date | undefined>(undefined);
|
|
const [open, setOpen] = useState<boolean>(false);
|
|
const [searchUser, setSearchUser] = useState<string>("");
|
|
const limit = 20;
|
|
const { data, isLoading, isError, isFetching } = useQuery({
|
|
queryKey: ["plan_list", dateFilter, searchUser, statusFilter, currentPage],
|
|
queryFn: () => {
|
|
const params: {
|
|
limit?: number;
|
|
offset?: number;
|
|
status?: boolean;
|
|
date?: string;
|
|
user?: string;
|
|
} = {
|
|
date: dateFilter && formatDate.format(dateFilter, "YYYY-MM-DD"),
|
|
user: searchUser,
|
|
limit,
|
|
offset: (currentPage - 1) * limit,
|
|
};
|
|
|
|
if (statusFilter !== "all") {
|
|
params.status = statusFilter === "true" ? true : false;
|
|
}
|
|
|
|
return plans_api.list(params);
|
|
},
|
|
select(data) {
|
|
return data.data.data;
|
|
},
|
|
});
|
|
|
|
const totalPages = data ? Math.ceil(data.count / limit) : 1;
|
|
const [editingPlan, setEditingPlan] = useState<PlanListData | null>(null);
|
|
const [dialogOpen, setDialogOpen] = useState(false);
|
|
const [detail, setDetail] = useState<boolean>(false);
|
|
|
|
const [openDelete, setOpenDelete] = useState<boolean>(false);
|
|
const [planDelete, setPlanDelete] = useState<PlanListData | null>(null);
|
|
|
|
const handleDelete = (id: PlanListData) => {
|
|
setOpenDelete(true);
|
|
setPlanDelete(id);
|
|
};
|
|
|
|
return (
|
|
<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">Rejalarni boshqarish</h1>
|
|
<FilterPlans
|
|
dateFilter={dateFilter}
|
|
dialogOpen={dialogOpen}
|
|
editingPlan={editingPlan}
|
|
open={open}
|
|
searchUser={searchUser}
|
|
setDateFilter={setDateFilter}
|
|
setDialogOpen={setDialogOpen}
|
|
setEditingPlan={setEditingPlan}
|
|
setOpen={setOpen}
|
|
setSearchUser={setSearchUser}
|
|
setStatusFilter={setStatusFilter}
|
|
statusFilter={statusFilter}
|
|
/>
|
|
|
|
<PlanDetail detail={detail} setDetail={setDetail} plan={editingPlan} />
|
|
</div>
|
|
|
|
<PalanTable
|
|
filteredPlans={data ? data.results : []}
|
|
handleDelete={handleDelete}
|
|
setDetail={setDetail}
|
|
setDialogOpen={setDialogOpen}
|
|
setEditingPlan={setEditingPlan}
|
|
isError={isError}
|
|
isFetching={isFetching}
|
|
isLoading={isLoading}
|
|
/>
|
|
|
|
<Pagination
|
|
currentPage={currentPage}
|
|
setCurrentPage={setCurrentPage}
|
|
totalPages={totalPages}
|
|
/>
|
|
|
|
<DeletePlan
|
|
opneDelete={openDelete}
|
|
planDelete={planDelete}
|
|
setOpenDelete={setOpenDelete}
|
|
setPlanDelete={setPlanDelete}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PlansList;
|