banner order update

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 (
     <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">
@@ -42,6 +69,7 @@ const CategoriesList = () => {
       </div>
 
       <TableDistrict
+        handleOrderChange={handleOrderChange}
         data={data ? data.results : []}
         isError={isError}
         dialogOpen={dialogOpen}

src/features/districts/ui/TableCategories.tsx

@@ -16,8 +16,8 @@ import {
   TableHeader,
   TableRow,
 } from "@/shared/ui/table";
-import { Image, Loader2 } from "lucide-react";
+import { Check, Image, Loader2 } from "lucide-react";
-import { useState, type Dispatch, type SetStateAction } from "react";
+import { useEffect, useState, type Dispatch, type SetStateAction } from "react";
 
 interface Props {
   data: CategoryItem[] | [];
@@ -27,6 +27,7 @@ interface Props {
   setDialogOpen: Dispatch<SetStateAction<boolean>>;
   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<CategoryItem>();
+  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 (
     <div className="flex-1 overflow-auto">
       {isLoading && (
@@ -61,7 +89,8 @@ const TableDistrict = ({
             <TableRow>
               <TableHead>ID</TableHead>
               <TableHead>Rasmi</TableHead>
-              <TableHead>Nomi (uz)</TableHead>
+              <TableHead>Nomi (uz)</TableHead>{" "}
+              <TableHead>Tartib raqami</TableHead>
               <TableHead>Kategoriya idsi</TableHead>
               <TableHead>Turi</TableHead>
               <TableHead className="text-right">Harakatlar</TableHead>
@@ -79,10 +108,41 @@ const TableDistrict = ({
                     className="w-10 h-10 object-cover rounded-md"
                   />
                 </TableCell>
-                <TableCell>{d.name}</TableCell>
+                <TableCell>{d.name}</TableCell>{" "}
+                <TableCell className="font-medium flex items-center gap-2">
+                  <input
+                    type="number"
+                    value={localOrders[d.id] ?? ""}
+                    onChange={(e) => 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"
+                  />
+                  <Button
+                    size="icon"
+                    variant="outline"
+                    onClick={() => {
+                      const formData = new FormData();
+                      formData.append("order", localOrders[d.id].toString());
+                      handleOrderChange({
+                        id: d.id,
+                        body: formData,
+                      });
+                    }}
+                  >
+                    <Check size={18} />
+                  </Button>
+                </TableCell>
                 <TableCell>{d.category_id ? d.category_id : "----"}</TableCell>
                 <TableCell>{d.type ? d.type : "----"}</TableCell>
-
                 <TableCell className="flex gap-2 justify-end">
                   <Button
                     variant="outline"

src/features/objects/lib/api.ts

@@ -17,10 +17,10 @@ export const banner_api = {
     return res;
   },
 
-  // async update({ body, id }: { id: number; body: ObjectUpdate }) {
+  async update({ body, id }: { id: number; body: FormData }) {
-  //   const res = await httpClient.patch(`${API_URLS.OBJECT}${id}/update/`, body);
+    const res = await httpClient.patch(`${API_URLS.BannerUpdate(id)}`, body);
-  //   return res;
+    return res;
-  // },
+  },
 
   async delete(id: string) {
     const res = await httpClient.delete(`${API_URLS.BannerDelete(id)}`);

src/features/objects/lib/data.ts

@@ -9,6 +9,7 @@ export interface BannersListData {
 }
 
 export interface BannerListItem {
-  id: string;
+  id: number;
   banner: string;
+  order: number;
 }

src/features/objects/ui/BannersList.tsx

@@ -4,14 +4,16 @@ import ObjectFilter from "@/features/objects/ui/BannersFilter";
 import ObjectTable from "@/features/objects/ui/BannersTable";
 import DeleteObject from "@/features/objects/ui/DeleteBanners";
 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";
 
 export default function BannersList() {
   const [editingPlan, setEditingPlan] = useState<BannerListItem | null>(null);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [currentPage, setCurrentPage] = useState(1);
   const limit = 20;
+  const queryClient = useQueryClient();
 
   const [disricDelete, setDiscritDelete] = useState<BannerListItem | null>(
     null,
@@ -39,6 +41,31 @@ export default function BannersList() {
     },
   });
 
+  const { mutate } = useMutation({
+    mutationFn: ({ body, id }: { id: number; body: FormData }) =>
+      banner_api.update({ body, id }),
+    onSuccess() {
+      toast.success("Banner tartibi o'zgartilidi", {
+        richColors: true,
+        position: "top-center",
+      });
+      queryClient.refetchQueries({ queryKey: ["banner_list"] });
+    },
+    onError() {
+      toast.error("Xatolik yuz berdi", {
+        richColors: true,
+        position: "top-center",
+      });
+    },
+  });
+
+  const handleOrderChange = ({ body, id }: { id: number; body: FormData }) => {
+    mutate({
+      body,
+      id: 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">
@@ -52,6 +79,7 @@ export default function BannersList() {
       </div>
 
       <ObjectTable
+        handleOrderChange={handleOrderChange}
         filteredData={object ? object.results : []}
         handleDelete={handleDelete}
         isError={isError}

src/features/objects/ui/BannersTable.tsx

@@ -9,8 +9,8 @@ import {
   TableHeader,
   TableRow,
 } from "@/shared/ui/table";
-import { Loader2, Trash2 } from "lucide-react";
+import { Check, Loader2, Trash2 } from "lucide-react";
-import type { Dispatch, SetStateAction } from "react";
+import { useEffect, useState, type Dispatch, type SetStateAction } from "react";
 
 interface Props {
   filteredData: BannerListItem[] | [];
@@ -19,6 +19,7 @@ interface Props {
   handleDelete: (object: BannerListItem) => void;
   isLoading: boolean;
   isError: boolean;
+  handleOrderChange: ({ body, id }: { id: number; body: FormData }) => void; // tartib raqamini update qilish uchun
 }
 
 const ObjectTable = ({
@@ -26,7 +27,35 @@ const ObjectTable = ({
   handleDelete,
   isError,
   isLoading,
+  handleOrderChange,
 }: Props) => {
+  // Mahsulotlar tartibini local state orqali boshqaramiz
+  const [localOrders, setLocalOrders] = useState<{ [key: number]: number }>({});
+
+  useEffect(() => {
+    const orders = filteredData.reduce(
+      (acc, item) => {
+        acc[item.id] = item.order;
+        return acc;
+      },
+      {} as { [key: number]: number },
+    );
+    setLocalOrders(orders);
+  }, [filteredData]);
+
+  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 (
     <div className="flex-1 overflow-auto">
       {isLoading && (
@@ -44,12 +73,14 @@ const ObjectTable = ({
           </span>
         </div>
       )}
+
       {!isError && !isLoading && (
         <Table>
           <TableHeader>
             <TableRow>
               <TableHead>#</TableHead>
               <TableHead>Banner</TableHead>
+              <TableHead>Tartib raqami</TableHead>
               <TableHead className="text-right">Amallar</TableHead>
             </TableRow>
           </TableHeader>
@@ -61,11 +92,48 @@ const ObjectTable = ({
                   <TableCell className="font-medium">
                     <img
                       src={API_URLS.BASE_URL + item.banner}
-                      alt={item.id}
+                      alt={item.id.toString()}
                       className="w-16 h-16"
                     />
                   </TableCell>
-
+                  <TableCell className="font-medium flex items-center gap-2">
+                    <input
+                      type="number"
+                      value={localOrders[item.id] ?? ""}
+                      onChange={(e) => onOrderChange(item.id, e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") {
+                          const formData = new FormData();
+                          formData.append(
+                            "order",
+                            localOrders[item.id].toString(),
+                          );
+                          handleOrderChange({
+                            id: item.id,
+                            body: formData,
+                          });
+                        }
+                      }}
+                      className="w-24 h-10 border rounded px-2"
+                    />
+                    <Button
+                      size="icon"
+                      variant="outline"
+                      onClick={() => {
+                        const formData = new FormData();
+                        formData.append(
+                          "order",
+                          localOrders[item.id].toString(),
+                        );
+                        handleOrderChange({
+                          id: item.id,
+                          body: formData,
+                        });
+                      }}
+                    >
+                      <Check size={18} />
+                    </Button>
+                  </TableCell>
                   <TableCell className="text-right space-x-2 gap-2">
                     <Button
                       variant="destructive"

src/shared/config/api/URLs.ts

@@ -15,6 +15,7 @@ export const API_URLS = {
   UnitsDelete: (id: string) => `${API_V}admin/unity/${id}/delete/`,
   BannersList: `${API_V}admin/banner/list/`,
   BannerCreate: `${API_V}admin/banner/create/`,
+  BannerUpdate: (id: number) => `${API_V}admin/banner/${id}/update/`,
   BannerDelete: (id: string) => `${API_V}admin/banner/${id}/delete/`,
   OrdersList: `${API_V}admin/order/list/`,
   OrdersDelete: (id: string | number) => `${API_V}admin/order/${id}/delete/`,