diff --git a/web/src/components/RealtimeTable/RealtimeTable.jsx b/web/src/components/RealtimeTable/RealtimeTable.jsx index 4ca025c..1a26774 100644 --- a/web/src/components/RealtimeTable/RealtimeTable.jsx +++ b/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 newState = !prev; + const expandableRows = table.getCoreRowModel().flatRows.filter((row) => row.getCanExpand()); + if (!expandableRows.length) return; - if (newState) { - const allRows = table.getRowModel().flatRows; - const newExpanded = {}; + const expandedByRowId = Object.fromEntries(expandableRows.map((row) => [row.id, expanded === true || expanded[row.id] === true])); + const rowsForCurrentAction = expandableRows.filter((row) => + 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()) { - newExpanded[row.id] = true; - } - } + const targetDepth = + action === 'hide' ? Math.max(...rowsForAction.map((row) => row.depth)) : Math.min(...rowsForAction.map((row) => row.depth)); - setExpanded(newExpanded); - } else { - setExpanded(true); - } + for (const row of expandableRows) { + if (row.depth === targetDepth) expandedByRowId[row.id] = action === 'show'; + } - return newState; - }); - }, [table]); + const hasExpandedRows = expandableRows.some((row) => expandedByRowId[row.id]); + const hasCollapsedRows = expandableRows.some((row) => !expandedByRowId[row.id]); + let nextAction = action; + if (hasExpandedRows && !hasCollapsedRows) nextAction = 'hide'; + if (hasCollapsedRows && !hasExpandedRows) nextAction = 'show'; + setExpenseItemsVisibilityAction(nextAction); + setExpanded(hasCollapsedRows ? Object.fromEntries(Object.entries(expandedByRowId).filter(([, isExpanded]) => isExpanded)) : true); + }, [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} /> diff --git a/web/src/components/RealtimeTable/SettingPanel/SettingPanel.jsx b/web/src/components/RealtimeTable/SettingPanel/SettingPanel.jsx index 57025c7..2975c43 100644 --- a/web/src/components/RealtimeTable/SettingPanel/SettingPanel.jsx +++ b/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 = ({ )} )} - - - {showOnlyDepth2 ? : } + + + {expenseItemsVisibilityAction === 'show' ? : }