Merge pull request 'fixes-front-sort-order' (#39) from fixes-front-sort-order into test

Reviewed-on: #39

web/src/components/RealtimeTable/RealtimeTable.jsx

@@ -134,6 +134,11 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
     return () => document.removeEventListener('mousedown', handleDocumentClick);
   }, [selectedColumnId]);
 
+  const handleCellUpdateError = useCallback((rowId, columnId, error) => {
+    console.error(`Error updating cell ${rowId}_${columnId}:`, error);
+    toast.error('Ошибка обновления ячейки');
+  }, []);
+
   const columns = useMemo(() => {
     if (!columnsConfig || !columnsConfig.columns) return [];
     try {
@@ -143,128 +148,160 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
         columnsConfig,
         onCellUpdate: handleUpdateCell,
         onCellNumberClick: handleClickRowCell,
-        onCellUpdateError: (rowId, columnId, error) => {
+        onCellUpdateError: handleCellUpdateError,
-          console.error(`Error updating cell ${rowId}_${columnId}:`, error);
-          toast.error('Ошибка обновления ячейки')
-        }
       });
     } catch (error) {
       console.error('Error creating columns:', error);
       return [];
     }
-  }, [columnsConfig, handleUpdateCell, handleClickRowCell]);
+  }, [columnsConfig, handleUpdateCell, handleClickRowCell, handleCellUpdateError]);
+
+  const selectedColumnIdRef = useRef(selectedColumnId);
+
+  useEffect(() => {
+    selectedColumnIdRef.current = selectedColumnId;
+  }, [selectedColumnId]);
 
   const tableMeta = useMemo(() => ({
     updateCell: handleUpdateCell,
-    selectedColumnId,
+    getSelectedColumnId: () => selectedColumnIdRef.current,
-  }), [handleUpdateCell, selectedColumnId]);
+  }), [handleUpdateCell]);
 
-  // Конфигурация таблицы
+  const ROW_VIRTUALIZER_OPTIONS = {
-  const tableConfig = useMemo(
+    overscan: 30,
-    () => ({
+    scrollPaddingStart: 0,
-      ...BASE_TABLE_CONFIG,
+    scrollPaddingEnd: 0,
-      columns,
+    estimateSize: () => TABLE_ROW_HEIGHT,
-      data: data,
+    measureElement: (el) => el?.offsetHeight || TABLE_ROW_HEIGHT,
-      enableRowVirtualization: true,
+  };
-      enableColumnVirtualization: true,
+
-      rowVirtualizerInstanceRef: rowVirtualizerRef,
+  const createTableConfig = ({
-      rowVirtualizerOptions: {
+    columns,
-        overscan: 30,
+    data,
-        scrollPaddingStart: 0,
+    columnSizing,
-        scrollPaddingEnd: 0,
+    columnPinning,
-        estimateSize: () => TABLE_ROW_HEIGHT,
+    columnVisibility,
-        measureElement: (el) => el?.offsetHeight || TABLE_ROW_HEIGHT,
+    globalFilter,
-      },
+    showColumnFilters,
-      onEditingCellChange: (cell) => {
+    rowSelection,
-        if (cell) {
+    containerRef,
-          if (editingCell) return;
+    tableMeta,
-          contextStartEditing?.(cell.row, cell.column);
+    setColumnSizing,
+    setColumnPinning,
+    editingCell,
+    contextStartEditing,
+  }) => ({
+    ...BASE_TABLE_CONFIG,
+    columns,
+    data,
+    enableRowVirtualization: true,
+    enableColumnVirtualization: true,
+    rowVirtualizerInstanceRef: rowVirtualizerRef,
+    rowVirtualizerOptions: ROW_VIRTUALIZER_OPTIONS,
+    onEditingCellChange: (cell) => {
+      if (cell && !editingCell) {
+        contextStartEditing?.(cell.row, cell.column);
+      }
+    },
+    columnVirtualizerOptions: ({ table }) => ({
+      overscan: 10,
+      measureElement: (el) => {
+        if (!el) return 150;
+        const index = Number(el?.getAttribute?.('data-index'));
+        const isPinned = Boolean(el?.getAttribute?.('data-pinned'));
+        if (isPinned) {
+          const colId = table.getState().columnPinning.left[index];
+          const column = table.getColumn(colId);
+          return column?.getSize() ?? 150;
         }
-      },
+        const allCols = [...table.getLeftVisibleLeafColumns(), ...table.getCenterVisibleLeafColumns()]
-      columnVirtualizerOptions: ({ table }) => ({
+        return allCols[index]?.getSize() ?? 150;
-        overscan: 10,
-        measureElement: (el) => {
-          if (!el) return 150;
-          const index = Number(el?.getAttribute?.('data-index'));
-          const isPinned = Boolean(el?.getAttribute?.('data-pinned'));
-          if (isPinned) {
-            const colId = table.getState().columnPinning.left[index];
-            const column = table.getColumn(colId);
-            return column?.getSize() ?? 150;
-          }
-          const allCols = [...table.getLeftVisibleLeafColumns(), ...table.getCenterVisibleLeafColumns()]
-          return allCols[index]?.getSize() ?? 150;
-
-        },
-      }),
-      enableRowSelection: true,
-      onRowSelectionChange: setRowSelection,
-      onColumnSizingChange: setColumnSizing,
-      onColumnPinningChange: setColumnPinning,
-      onGlobalFilterChange: handleGlobalFilterChange,
-      state: {
-        columnSizing,
-        columnPinning,
-        columnVisibility,
-        globalFilter,
-        showColumnFilters,
-        rowSelection,
-        editingCell,
-      },
-      initialState: {
-        expanded: true,
-      },
-      meta: tableMeta,
-      muiTableHeadCellProps: {
-        sx: { boxSizing: 'border-box' },
-      },
-      muiTableBodyCellProps: getTableBodyCellProps,
-      muiTableHeadProps: {
-        sx: {
-          display: 'table-header-group',
-          height: '1px',
-          minHeight: '1px',
-          maxHeight: '1px',
-          visibility: 'hidden',
-          '& svg': {
-            height: '1px',
-            minHeight: '1px',
-            maxHeight: '1px',
-            visibility: 'hidden',
-          }
-        },
-      },
-      muiTablePaperProps: getTablePaperStyles(),
-      muiTableContainerProps: {
-        ref: containerRef,
-        sx: {
-          position: 'relative',
-          contain: 'layout',
-          minHeight: '100%',
-          '& .MuiTable-root': { position: 'relative' },
-        },
-      },
-      muiTableHeadCellFilterTextFieldProps: {
-        placeholder: 'Поиск...',
-        size: 'small',
       },
     }),
-    [
+    enableRowSelection: true,
-      columns,
+    onRowSelectionChange: setRowSelection,
-      data,
+    onColumnSizingChange: setColumnSizing,
-      setColumnSizing,
+    onColumnPinningChange: setColumnPinning,
-      setColumnPinning,
+    onGlobalFilterChange: handleGlobalFilterChange,
+    state: {
       columnSizing,
       columnPinning,
       columnVisibility,
       globalFilter,
       showColumnFilters,
-      containerRef,
-      tableMeta,
       rowSelection,
-      editingCell
+      editingCell,
-    ],
+    },
-  );
+    initialState: {
+      expanded: true,
+    },
+    meta: tableMeta,
+    muiTableHeadCellProps: {
+      sx: { boxSizing: 'border-box' },
+    },
+    muiTableBodyCellProps: getTableBodyCellProps,
+    muiTableHeadProps: {
+      sx: {
+        display: 'table-header-group',
+        height: '1px',
+        minHeight: '1px',
+        maxHeight: '1px',
+        visibility: 'hidden',
+        '& svg': {
+          height: '1px',
+          minHeight: '1px',
+          maxHeight: '1px',
+          visibility: 'hidden',
+        }
+      },
+    },
+    muiTablePaperProps: getTablePaperStyles(),
+    muiTableContainerProps: {
+      ref: containerRef,
+      sx: {
+        position: 'relative',
+        contain: 'layout',
+        minHeight: '100%',
+        '& .MuiTable-root': { position: 'relative' },
+      },
+    },
+    muiTableHeadCellFilterTextFieldProps: {
+      placeholder: 'Поиск...',
+      size: 'small',
+    },
+  });
+
+  // Конфигурация таблицы
+  const tableConfig = useMemo(() => createTableConfig({
+    columns,
+    data,
+    columnSizing,
+    columnPinning,
+    columnVisibility,
+    globalFilter,
+    showColumnFilters,
+    rowSelection,
+    containerRef,
+    tableMeta,
+    setColumnSizing,
+    setColumnPinning,
+    editingCell,
+    contextStartEditing,
+  }), [
+    columns,
+    data,
+    columnSizing,
+    columnPinning,
+    columnVisibility,
+    globalFilter,
+    showColumnFilters,
+    rowSelection,
+    containerRef,
+    tableMeta,
+    setColumnSizing,
+    setColumnPinning,
+    editingCell,
+  ]);
 
   const table = useMaterialReactTable(tableConfig);
 
@@ -342,6 +379,17 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
     setRowSelection({});
   }, [rowSelection, table])
 
+  useEffect(() => {
+    return () => {
+      setData([]);
+      setRowSelection({});
+      setEditingCell(null);
+      if (rowVirtualizerRef.current) {
+        rowVirtualizerRef.current = null;
+      }
+    };
+  }, []);
+
   return (
     <>
       <SettingsPanel

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

@@ -84,7 +84,6 @@ export function updateCells(data, newRows) {
             Object.keys(newData).forEach((key) => {
               if (row.data && row.data[key]) {
                 if (typeof row.data[key] === "object") {
-                  console.log(newData[key], row.data[key], key, newData);
                   row.data[key] = deepMerge(row.data[key], newData[key]);
                 } else {
                   row.data[key] = newData[key];
@@ -132,24 +131,30 @@ export function insertCell(data, newRow, expense_item_id) {
     return updatedRows;
   }
 
+  let adding = false;
   function findAndUpdate(rows) {
     for (let i = 0; i < rows.length; i++) {
       const row = rows[i];
 
-      if (row.data.header.expense_item_id === expense_item_id) {
+      if (
+        (row.sort_order >= newRowObject.sort_order) &
+        (row.data.line_id != newRowObject.data.line_id)
+      ) {
+        row.sort_order = row.sort_order + 1;
+      }
+
+      if (!adding & (row.data.header.expense_item_id === expense_item_id)) {
         if (!("subRows" in row)) {
           row.subRows = [];
         }
         row.subRows.push(newRowObject);
-        return true;
+        adding = true;
       }
 
       if (row.subRows && Array.isArray(row.subRows) && row.subRows.length > 0) {
         const found = findAndUpdate(row.subRows);
-        if (found) return true;
       }
     }
-    return false;
   }
   findAndUpdate(updatedRows);
   return updatedRows;
@@ -158,21 +163,25 @@ export function insertCell(data, newRow, expense_item_id) {
 export function deleteRow(data, lineId) {
   const updatedRows = JSON.parse(JSON.stringify(data));
 
+  let rowDeleteSortOrder = false;
   function findAndDelete(rows) {
     for (let i = 0; i < rows.length; i++) {
       const row = rows[i];
 
       if (row.data.line_id == lineId) {
+        rowDeleteSortOrder = row.sort_order;
         rows.splice(i, 1);
-        return true;
+        i--;
+      }
+      
+      if ((rowDeleteSortOrder > 0) & (row.sort_order >= rowDeleteSortOrder)) {
+        row.sort_order = row.sort_order - 1;
       }
 
       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;

web/src/pages/AdminPanel/AuditLogsPage/AuditLogsPage.jsx

@@ -71,8 +71,8 @@ const AuditLogsPage = () => {
         user_id: selectedUser?.id,
         org_unit_id: selectedSsp?.id,
         event: selectedEventType?.id,
-        date_from: dateFrom ? dateFrom.toISOString() : undefined,
+        date_from: dateFrom ? dateFrom.toISOString().slice(0, 10) : undefined,
-        date_to: dateTo ? dateTo.toISOString() : undefined,
+        date_to: dateTo ? dateTo.toISOString().slice(0, 10) : undefined,
         task_id: taskId ? taskId : undefined,
         form_id: formId ? formId : undefined,
       };