Merge pull request 'hedden rows : модернизивовала кнопку скрытия колонок (теперь можно скрывать и раскрывать колонки до любой вложенности)' (#115) from hidden-rows-button into test

Reviewed-on: #115

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 [showOnlyDepth2, setShowOnlyDepth2] = useState(false);
+	const [expenseItemsVisibilityAction, setExpenseItemsVisibilityAction] = useState('hide');
 
 	const [isOpenModalSelectVsp, setIsOpenModalSelectVsp] = useState(false);
 	const [isOpenModalSelectExpenseItem, setIsOpenModalSelectExpenseItem] = useState(false);
@@ -485,10 +485,6 @@ 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);
 
@@ -716,29 +712,38 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 	}, []);
 
 	const handleToggleDepthVisibility = useCallback(() => {
-		setShowOnlyDepth2((prev) => {
+		const expandableRows = table.getCoreRowModel().flatRows.filter((row) => row.getCanExpand());
-			const newState = !prev;
+		if (!expandableRows.length) return;
 
-			if (newState) {
+		const expandedByRowId = Object.fromEntries(expandableRows.map((row) => [row.id, expanded === true || expanded[row.id] === true]));
-				const allRows = table.getRowModel().flatRows;
+		const rowsForCurrentAction = expandableRows.filter((row) =>
-				const newExpanded = {};
+			expenseItemsVisibilityAction === 'hide' ? expandedByRowId[row.id] : !expandedByRowId[row.id],
+		);
 
-				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;
 
-					if (depth < 2 && row.getCanExpand()) {
+		const targetDepth =
-						newExpanded[row.id] = true;
+			action === 'hide' ? Math.max(...rowsForAction.map((row) => row.depth)) : Math.min(...rowsForAction.map((row) => row.depth));
-					}
+
+		for (const row of expandableRows) {
+			if (row.depth === targetDepth) expandedByRowId[row.id] = action === 'show';
 		}
 
-				setExpanded(newExpanded);
+		const hasExpandedRows = expandableRows.some((row) => expandedByRowId[row.id]);
-			} else {
+		const hasCollapsedRows = expandableRows.some((row) => !expandedByRowId[row.id]);
-				setExpanded(true);
+		let nextAction = action;
-			}
+		if (hasExpandedRows && !hasCollapsedRows) nextAction = 'hide';
-
+		if (hasCollapsedRows && !hasExpandedRows) nextAction = 'show';
-			return newState;
+		setExpenseItemsVisibilityAction(nextAction);
-		});
+		setExpanded(hasCollapsedRows ? Object.fromEntries(Object.entries(expandedByRowId).filter(([, isExpanded]) => isExpanded)) : true);
-	}, [table]);
+	}, [expanded, expenseItemsVisibilityAction, table]);
 
 	return (
 		<>
@@ -775,7 +780,7 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 				formType={formType}
 				validationErrors={validationErrors}
 				onNavigateToColumn={handleNavigateToColumn}
-				showOnlyDepth2={showOnlyDepth2}
+				expenseItemsVisibilityAction={expenseItemsVisibilityAction}
 				onToggleDepthVisibility={handleToggleDepthVisibility}
 			/>
 

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

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