удаление строки

web/src/components/RealtimeTable/RealtimeTable.jsx

@@ -21,6 +21,7 @@ import {
   getTablePaperStyles,
 } from './constants/tableConfig';
 import { useRealtime } from './contexts/RealtimeContext';
+import { toast } from 'react-toastify';
 
 const RealtimeTable = ({ formType, formId, sheetName, direction }) => {
   const { data, setData } = useRealtimeData(formId, sheetName, direction);
@@ -40,6 +41,7 @@ const RealtimeTable = ({ formType, formId, sheetName, direction }) => {
     error: wsError,
     updateCell: contextUpdateCell,
     addRow: contextAddRow,
+    deleteRow: contextDeleteRow,
   } = useRealtime();
 
   const {
@@ -85,7 +87,7 @@ const RealtimeTable = ({ formType, formId, sheetName, direction }) => {
     }));
   }, [rowSelection])
 
-  // Создание колонок с интеграцией WebSocket
+
   const columns = useMemo(() => {
     if (!columnsConfig || !columnsConfig.columns) return [];
     try {
@@ -106,7 +108,7 @@ const RealtimeTable = ({ formType, formId, sheetName, direction }) => {
     }
   }, [columnsConfig, handleUpdateCell]);
 
-  // Метаданные для таблицы
+
   const tableMeta = useMemo(() => ({
     updateCell: handleUpdateCell,
   }), [handleUpdateCell]);
@@ -199,18 +201,30 @@ const RealtimeTable = ({ formType, formId, sheetName, direction }) => {
   const handleAddRow = useCallback(() => {
     const allRows = table.getRowModel().rows;
 
-    // Фильтруем выделенные строки
     const selectedRows = allRows.filter(row => rowSelection[row.id]);
     if (selectedRows.length === 0) {
-      toasr.error('Выделите строку для вставки');
+      toast.error('Выделите строку для вставки');
       return;
     }
     const row = selectedRows[0];
     const expense_item_id = row.original.data.header.expense_item_id;
-    contextAddRow({expense_item_id:expense_item_id})
+    contextAddRow({ expense_item_id: expense_item_id })
+  }, [rowSelection, table])
+
+  const handleDeleteRow = useCallback(() => {
+    const allRows = table.getRowModel().rows;
+
+    const selectedRows = allRows.filter(row => rowSelection[row.id]);
+    if (selectedRows.length === 0) {
+      toast.error('Выделите строку для удаления');
+      return;
+    }
+    const row = selectedRows[0];
+    const expense_item_id = row.original.data.line_id;
+    contextDeleteRow(expense_item_id)
   }, [rowSelection, table])
   if (!data) {
-    return <div>Loading...</div>;
+    return <div>Загрузка...</div>;
   }
 
   return (
@@ -227,6 +241,7 @@ const RealtimeTable = ({ formType, formId, sheetName, direction }) => {
         sizeMult={sizeMult}
         onChangeShowColumnFilters={setShowColumnFilters}
         onAddRow={handleAddRow}
+        onDeleteRow={handleDeleteRow}
       />
 
       <div style={tableWrapperStyle}>

web/src/components/RealtimeTable/SettingPanel/SettingPanel.jsx

@@ -30,6 +30,7 @@ const SettingPanel = ({
   sizeMult,
   onChangeShowColumnFilters,
   onAddRow,
+  onDeleteRow,
 }) => {
   const [isPinned, setIsPinned] = useState(false);
   const [columnTree, setColumnTree] = useState();
@@ -55,6 +56,7 @@ const SettingPanel = ({
     );
   }, [columnVisibility]);
 
+  //TO DO: сделать
   const { addColorForCells, addFormulaForCells, deleteFormula } = {};
 
   const handleChangeShowColumnFilters = () => {
@@ -100,7 +102,7 @@ const SettingPanel = ({
             </Tooltip>
 
             <Tooltip title="Удалить строку">
-              <IconButton variant="outlined">
+              <IconButton onClick={onDeleteRow} variant="outlined">
                 <Minus />
                 <RemoveLine />
               </IconButton>

web/src/components/RealtimeTable/contexts/RealtimeContext.js

@@ -57,7 +57,7 @@ export const RealtimeProvider = ({
 
       case "row_deleted":
         if (data.result && onRowDeleteRef.current) {
-          onRowDeleteRef.current(data.result);
+          onRowDeleteRef.current(data);
         }
         break;
 
@@ -194,6 +194,9 @@ export const RealtimeProvider = ({
       const message = {
         event: "row_deleted",
         data: { row_id: rowId },
+        sheet: sheetName,
+        form_id: formId,
+        direction: direction,
       };
 
       return sendMessage(message);

web/src/components/RealtimeTable/hooks/useRealtimeData.js

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback, useRef } from "react";
 import { FormsSheetApi } from "../../../api/form_sheet";
 import { useRealtime } from "../contexts/RealtimeContext";
-import { insertCell, updateCells } from "../utils/cellUtils";
+import { deleteRow, insertCell, updateCells } from "../utils/cellUtils";
 
 const useRealtimeData = (formId, sheetName, direction) => {
   const [data, setData] = useState([]);
@@ -132,34 +132,35 @@ const useRealtimeData = (formId, sheetName, direction) => {
     });
 
     const unsubscribeRowAdds = subscribeToRowAdds((data) => {
-      const updates = data.result;
+      const updates = data.result.data;
       const expense_item_id = data.data.expense_item_id;
-      const updatedCells = updates.slice(0, -1);
+      const newLineId = data.result.new_line_id;
-      const newRow = updates.at(-1);
+      const [updatedCells, newRow] = updates.reduce(
+        (res, row) => {
+          if (row[3]?.line_id === newLineId) {
+            res[1] = row;
+          } else {
+            res[0].push(row);
+          }
+          return res;
+        },
+        [[], null],
+      );
       setData((prevData) => {
         const updateData = updateCells(prevData, updatedCells);
-        
         const newData = insertCell(updateData, newRow, expense_item_id);
-        console.log(newData)
         return newData;
       });
     });
 
-    const unsubscribeRowDeletes = subscribeToRowDeletes((deletedRowId) => {
+    const unsubscribeRowDeletes = subscribeToRowDeletes((data) => {
+      const updatedCells = data.result;
+      const lineIdForDelete = data.data.row_id;
       setData((prevData) => {
-        // Функция для удаления строки из иерархии
+        const updateData = updateCells(prevData, updatedCells);
-        const deleteInHierarchy = (items) => {
+        const newData = deleteRow(updateData, lineIdForDelete);
-          return items
+        console.log(newData);
-            .filter((item) => (item.id || item.line_id) !== deletedRowId)
+        return newData;
-            .map((item) => {
-              if (item.subRows && item.subRows.length > 0) {
-                return { ...item, subRows: deleteInHierarchy(item.subRows) };
-              }
-              return item;
-            });
-        };
-
-        return deleteInHierarchy(prevData);
       });
     });
 

web/src/components/RealtimeTable/utils/cellUtils.js

@@ -71,7 +71,7 @@ export function updateCells(data, newRows) {
               }
             });
           }
-          return true; // Нашли и обновили
+          return true;
         }
 
         if (
@@ -125,3 +125,26 @@ export function insertCell(data, newRow, expense_item_id) {
   findAndUpdate(updatedRows);
   return updatedRows;
 }
+
+export function deleteRow(data, lineId) {
+  const updatedRows = JSON.parse(JSON.stringify(data));
+
+  function findAndDelete(rows) {
+    for (let i = 0; i < rows.length; i++) {
+      const row = rows[i];
+
+      if (row.data.line_id == lineId) {
+        rows.splice(i, 1);
+        return true;
+      }
+
+      if (row.subRows && Array.isArray(row.subRows) && row.subRows.length > 0) {
+        const found = findAndDelete(row.subRows);
+        if (found) return true;
+      }
+    }
+    return false;
+  }
+  findAndDelete(updatedRows);
+  return updatedRows;
+}