diff --git a/src/features/districts/ui/CategoriesList.tsx b/src/features/districts/ui/CategoriesList.tsx index 7467b59..ba5e74f 100644 --- a/src/features/districts/ui/CategoriesList.tsx +++ b/src/features/districts/ui/CategoriesList.tsx @@ -4,12 +4,14 @@ import FilterCategory from "@/features/districts/ui/Filter"; import TableDistrict from "@/features/districts/ui/TableCategories"; import type { CategoryItem } from "@/features/plans/lib/data"; import Pagination from "@/shared/ui/pagination"; -import { useQuery } from "@tanstack/react-query"; +import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { useState } from "react"; +import { toast } from "sonner"; const CategoriesList = () => { const [currentPage, setCurrentPage] = useState(1); + const queryClient = useQueryClient(); const { data, isLoading, isError } = useQuery({ queryKey: ["categories", currentPage], @@ -33,6 +35,31 @@ const CategoriesList = () => { setOpenDelete(true); }; + const { mutate } = useMutation({ + mutationFn: ({ body, id }: { id: number; body: FormData }) => + categories_api.image_upload({ body, id }), + onSuccess() { + toast.success("Banner tartibi o'zgartilidi", { + richColors: true, + position: "top-center", + }); + queryClient.refetchQueries({ queryKey: ["categories"] }); + }, + onError() { + toast.error("Xatolik yuz berdi", { + richColors: true, + position: "top-center", + }); + }, + }); + + const handleOrderChange = ({ body, id }: { id: number; body: FormData }) => { + mutate({ + body, + id: id, + }); + }; + return (
@@ -42,6 +69,7 @@ const CategoriesList = () => {
>; dialogOpen: boolean; currentPage: number; + handleOrderChange: ({ body, id }: { id: number; body: FormData }) => void; } const TableDistrict = ({ @@ -35,8 +36,35 @@ const TableDistrict = ({ isLoading, dialogOpen, setDialogOpen, + handleOrderChange, }: Props) => { const [initialValues, setEditing] = useState(); + const [localOrders, setLocalOrders] = useState<{ [key: number]: number }>({}); + + useEffect(() => { + const orders = data.reduce( + (acc, item) => { + acc[item.id] = item.order; + return acc; + }, + {} as { [key: number]: number }, + ); + setLocalOrders(orders); + }, [data]); + + const onOrderChange = (id: number, value: string) => { + if (value === "") { + // bo'sh inputni ham qabul qilamiz + setLocalOrders((prev) => ({ ...prev, [id]: 0 })); // yoki null ham bo'lishi mumkin + return; + } + + const num = parseInt(value, 10); + if (!isNaN(num)) { + setLocalOrders((prev) => ({ ...prev, [id]: num })); + } + }; + return (
{isLoading && ( @@ -61,7 +89,8 @@ const TableDistrict = ({ ID Rasmi - Nomi (uz) + Nomi (uz){" "} + Tartib raqami Kategoriya idsi Turi Harakatlar @@ -79,10 +108,41 @@ const TableDistrict = ({ className="w-10 h-10 object-cover rounded-md" /> - {d.name} + {d.name}{" "} + + onOrderChange(d.id, e.target.value)} + onKeyDown={(e) => { + if (e.key === "Enter") { + const formData = new FormData(); + formData.append("order", localOrders[d.id].toString()); + handleOrderChange({ + id: d.id, + body: formData, + }); + } + }} + className="w-24 h-10 border rounded px-2" + /> + + {d.category_id ? d.category_id : "----"} {d.type ? d.type : "----"} -