web/src/components/RealtimeTable/RealtimeTable.jsx

@@ -114,7 +114,7 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 	const { errors: validationErrors, isCellInvalid } = useValidationRules(data, columnsConfig?.columns, formType, sheetName);
 
 	const [expanded, setExpanded] = useState(true);
-	const [expenseItemsVisibilityAction, setExpenseItemsVisibilityAction] = useState('hide');
+	const [showOnlyDepth2, setShowOnlyDepth2] = useState(false);
 
 	const [isOpenModalSelectVsp, setIsOpenModalSelectVsp] = useState(false);
 	const [isOpenModalSelectExpenseItem, setIsOpenModalSelectExpenseItem] = useState(false);
@@ -485,6 +485,10 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 	const handleNavigateToColumn = useCallback(
 		(columnId) => {
 			if (!columnId) return;
+			console.log(columnId);
+			console.log(columnId);
+			console.log(columnId);
+			console.log(columnId);
 
 			setSelectedColumnId(columnId);
 
@@ -712,38 +716,29 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 	}, []);
 
 	const handleToggleDepthVisibility = useCallback(() => {
-		const expandableRows = table.getCoreRowModel().flatRows.filter((row) => row.getCanExpand());
+		setShowOnlyDepth2((prev) => {
-		if (!expandableRows.length) return;
+			const newState = !prev;
 
-		const expandedByRowId = Object.fromEntries(expandableRows.map((row) => [row.id, expanded === true || expanded[row.id] === true]));
+			if (newState) {
-		const rowsForCurrentAction = expandableRows.filter((row) =>
+				const allRows = table.getRowModel().flatRows;
-			expenseItemsVisibilityAction === 'hide' ? expandedByRowId[row.id] : !expandedByRowId[row.id],
+				const newExpanded = {};
-		);
 
-		// Состояние могло измениться через стандартные контролы таблицы.
+				for (const row of allRows) {
-		// В таком случае сразу продолжаем в доступном направлении.
+					const depth = row.original.depth || 0;
-		let action = expenseItemsVisibilityAction;
-		if (!rowsForCurrentAction.length) action = expenseItemsVisibilityAction === 'hide' ? 'show' : 'hide';
-		const rowsForAction = rowsForCurrentAction.length
-			? rowsForCurrentAction
-			: expandableRows.filter((row) => (action === 'hide' ? expandedByRowId[row.id] : !expandedByRowId[row.id]));
-		if (!rowsForAction.length) return;
 
-		const targetDepth =
+					if (depth < 2 && row.getCanExpand()) {
-			action === 'hide' ? Math.max(...rowsForAction.map((row) => row.depth)) : Math.min(...rowsForAction.map((row) => row.depth));
+						newExpanded[row.id] = true;
-
+					}
-		for (const row of expandableRows) {
-			if (row.depth === targetDepth) expandedByRowId[row.id] = action === 'show';
 				}
 
-		const hasExpandedRows = expandableRows.some((row) => expandedByRowId[row.id]);
+				setExpanded(newExpanded);
-		const hasCollapsedRows = expandableRows.some((row) => !expandedByRowId[row.id]);
+			} else {
-		let nextAction = action;
+				setExpanded(true);
-		if (hasExpandedRows && !hasCollapsedRows) nextAction = 'hide';
+			}
-		if (hasCollapsedRows && !hasExpandedRows) nextAction = 'show';
+
-		setExpenseItemsVisibilityAction(nextAction);
+			return newState;
-		setExpanded(hasCollapsedRows ? Object.fromEntries(Object.entries(expandedByRowId).filter(([, isExpanded]) => isExpanded)) : true);
+		});
-	}, [expanded, expenseItemsVisibilityAction, table]);
+	}, [table]);
 
 	return (
 		<>
@@ -780,7 +775,7 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 				formType={formType}
 				validationErrors={validationErrors}
 				onNavigateToColumn={handleNavigateToColumn}
-				expenseItemsVisibilityAction={expenseItemsVisibilityAction}
+				showOnlyDepth2={showOnlyDepth2}
 				onToggleDepthVisibility={handleToggleDepthVisibility}
 			/>
 

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

@@ -93,7 +93,7 @@ const SettingPanel = ({
 	formType,
 	validationErrors = [],
 	onNavigateToColumn,
-	expenseItemsVisibilityAction,
+	showOnlyDepth2,
 	onToggleDepthVisibility,
 }) => {
 	const [isExporting, setIsExporting] = useState(false);
@@ -213,18 +213,9 @@ const SettingPanel = ({
 								)}
 							</>
 						)}
-						<Tooltip
+						<Tooltip title={showOnlyDepth2 ? 'Показать статьи расходов' : 'Скрыть статьи расходов'}>
-							title={
+							<IconButton onClick={onToggleDepthVisibility} variant='outlined' data-active={showOnlyDepth2} sx={controlSx}>
-								expenseItemsVisibilityAction === 'show'
+								{showOnlyDepth2 ? <VisibleExpenseItems /> : <HiddenExpenseItems />}
-									? 'Показать следующий уровень статей расходов'
-									: 'Скрыть нижний уровень статей расходов'
-							}>
-							<IconButton
-								onClick={onToggleDepthVisibility}
-								variant='outlined'
-								data-active={expenseItemsVisibilityAction === 'show'}
-								sx={controlSx}>
-								{expenseItemsVisibilityAction === 'show' ? <VisibleExpenseItems /> : <HiddenExpenseItems />}
 							</IconButton>
 						</Tooltip>
 					</GroupByObject>