banner order update

src/features/objects/ui/BannersTable.tsx

@@ -9,8 +9,8 @@ import {
   TableHeader,
   TableRow,
 } from "@/shared/ui/table";
-import { Loader2, Trash2 } from "lucide-react";
-import type { Dispatch, SetStateAction } from "react";
+import { Check, Loader2, Trash2 } from "lucide-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"