2701-как будто ок днд работает

rmser-view/src/pages/InvoiceDraftPage.tsx

@@ -33,7 +33,9 @@ import { DraftItemRow } from "../components/invoices/DraftItemRow";
 import type {
   UpdateDraftItemRequest,
   CommitDraftRequest,
+  ReorderDraftItemsRequest,
 } from "../services/types";
+import { DragDropContext, Droppable, type DropResult } from "@hello-pangea/dnd";
 
 const { Text } = Typography;
 const { TextArea } = Input;
@@ -46,6 +48,9 @@ export const InvoiceDraftPage: React.FC = () => {
   const [form] = Form.useForm();
 
   const [updatingItems, setUpdatingItems] = useState<Set<string>>(new Set());
+  const [itemsOrder, setItemsOrder] = useState<Record<string, number>>({});
+  const [enabled, setEnabled] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
 
   // Состояние для просмотра фото чека
   const [previewVisible, setPreviewVisible] = useState(false);
@@ -68,6 +73,7 @@ export const InvoiceDraftPage: React.FC = () => {
     queryFn: () => api.getDraft(id!),
     enabled: !!id,
     refetchInterval: (query) => {
+      if (isDragging) return false;
       const status = query.state.data?.status;
       return status === "PROCESSING" ? 3000 : false;
     },
@@ -150,7 +156,25 @@ export const InvoiceDraftPage: React.FC = () => {
     },
   });
 
+  const reorderItemsMutation = useMutation({
+    mutationFn: ({
+      draftId,
+      payload,
+    }: {
+      draftId: string;
+      payload: ReorderDraftItemsRequest;
+    }) => api.reorderDraftItems(draftId, payload),
+    onError: (error) => {
+      message.error("Не удалось изменить порядок элементов");
+      console.error("Reorder error:", error);
+    },
+  });
+
   // --- ЭФФЕКТЫ ---
+  useEffect(() => {
+    setEnabled(true);
+  }, []);
+
   useEffect(() => {
     if (draft) {
       const currentValues = form.getFieldsValue();
@@ -241,6 +265,64 @@ export const InvoiceDraftPage: React.FC = () => {
     });
   };
 
+  const handleDragStart = () => {
+    setIsDragging(true);
+  };
+
+  const handleDragEnd = async (result: DropResult) => {
+    setIsDragging(false);
+    const { source, destination } = result;
+
+    // Если нет назначения или позиция не изменилась
+    if (
+      !destination ||
+      (source.droppableId === destination.droppableId &&
+        source.index === destination.index)
+    ) {
+      return;
+    }
+
+    if (!draft) return;
+
+    // Сохраняем предыдущее состояние для отката
+    const previousItems = [...draft.items];
+    const previousOrder = { ...itemsOrder };
+
+    // Создаём новый массив с изменённым порядком
+    const newItems = [...draft.items];
+    const [removed] = newItems.splice(source.index, 1);
+    newItems.splice(destination.index, 0, removed);
+
+    // Обновляем локальное состояние немедленно для быстрого UI
+    queryClient.setQueryData(["draft", id], {
+      ...draft,
+      items: newItems,
+    });
+
+    // Подготавливаем payload для API
+    const reorderPayload: ReorderDraftItemsRequest = {
+      items: newItems.map((item, index) => ({
+        id: item.id,
+        order: index,
+      })),
+    };
+
+    // Отправляем запрос на сервер
+    try {
+      await reorderItemsMutation.mutateAsync({
+        draftId: draft.id,
+        payload: reorderPayload,
+      });
+    } catch {
+      // При ошибке откатываем локальное состояние
+      queryClient.setQueryData(["draft", id], {
+        ...draft,
+        items: previousItems,
+      });
+      setItemsOrder(previousOrder);
+    }
+  };
+
   // --- RENDER ---
   const showSpinner =
     draftQuery.isLoading ||
@@ -444,19 +526,65 @@ export const InvoiceDraftPage: React.FC = () => {
       </div>
 
       {/* Items List */}
-      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
-        {draft.items.map((item) => (
-          <DraftItemRow
-            key={item.id}
-            item={item}
-            onUpdate={handleItemUpdate}
-            // Передаем обработчик удаления
-            onDelete={(itemId) => deleteItemMutation.mutate(itemId)}
-            isUpdating={updatingItems.has(item.id)}
-            recommendations={recommendationsQuery.data || []}
-          />
-        ))}
-      </div>
+      {enabled ? (
+        <DragDropContext
+          onDragStart={handleDragStart}
+          onDragEnd={handleDragEnd}
+        >
+          <Droppable droppableId="draft-items">
+            {(provided, snapshot) => (
+              <div
+                {...provided.droppableProps}
+                ref={provided.innerRef}
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 8,
+                  backgroundColor: snapshot.isDraggingOver
+                    ? "#f0f0f0"
+                    : "transparent",
+                  borderRadius: "4px",
+                  padding: snapshot.isDraggingOver ? "8px" : "0",
+                  transition: "background-color 0.2s ease",
+                }}
+              >
+                {draft.items.map((item, index) => (
+                  <DraftItemRow
+                    key={item.id}
+                    item={item}
+                    index={index}
+                    onUpdate={handleItemUpdate}
+                    onDelete={(itemId) => deleteItemMutation.mutate(itemId)}
+                    isUpdating={updatingItems.has(item.id)}
+                    recommendations={recommendationsQuery.data || []}
+                  />
+                ))}
+                {provided.placeholder}
+              </div>
+            )}
+          </Droppable>
+        </DragDropContext>
+      ) : (
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: 8,
+          }}
+        >
+          {draft.items.map((item, index) => (
+            <DraftItemRow
+              key={item.id}
+              item={item}
+              index={index}
+              onUpdate={handleItemUpdate}
+              onDelete={(itemId) => deleteItemMutation.mutate(itemId)}
+              isUpdating={updatingItems.has(item.id)}
+              recommendations={recommendationsQuery.data || []}
+            />
+          ))}
+        </div>
+      )}
 
       {/* Кнопка добавления позиции */}
       <Button