From 2fa672a2fb6907295ac936b59c08c898dfea49cd Mon Sep 17 00:00:00 2001
From: Andrey Epifancev <andrey.epifancev@ssi-solutions.ru>
Date: Fri, 23 Oct 2026 01:15:55 +0400
Subject: [PATCH] =?UTF-8?q?fix(web):=20=C2=AB=D0=9D=D0=BE=D0=B2=D0=B0?=
 =?UTF-8?q?=D1=8F=20=D0=BA=D0=BE=D0=BD=D1=81=D0=BE=D0=BB=D0=B8=D0=B4=D0=B0?=
 =?UTF-8?q?=D1=86=D0=B8=D1=8F=C2=BB=20=E2=80=94=20=C2=AB+=20=D0=A1=D0=BE?=
 =?UTF-8?q?=D0=B7=D0=B4=D0=B0=D1=82=D1=8C=C2=BB=20=D0=BE=D1=82=20=D0=B4?=
 =?UTF-8?q?=D0=B2=D1=83=D1=85=20=D0=AE=D0=9B,=20=D1=81=D1=82=D1=80=D0=BE?=
 =?UTF-8?q?=D0=BA=D0=B0=20=D0=AE=D0=9B=20=E2=80=94=20=D1=84=D0=BB=D0=B0?=
 =?UTF-8?q?=D0=B6=D0=BE=D0=BA=20antd=20(AURORA-1589,=20PR=20#166)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Сервер отвечает 422 PERIMETER_TOO_SMALL при одном ЮЛ — кнопка неактивна раньше, у поля
«Выберите не меньше двух ЮЛ». Строка ЮЛ — сам Checkbox (label на всю строку) вместо
div role="checkbox" (biome useSemanticElements). Предупреждение браузера при начатой форме.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../NewConsoleModal/CompanyOptionRow.tsx      | 56 +++++++------------
 .../NewConsoleModal/NewConsoleModal.tsx       | 21 +++++--
 2 files changed, 37 insertions(+), 40 deletions(-)

diff --git a/web/src/widgets/NewConsoleModal/CompanyOptionRow.tsx b/web/src/widgets/NewConsoleModal/CompanyOptionRow.tsx
index ab95355..ab9f4d5 100644
--- a/web/src/widgets/NewConsoleModal/CompanyOptionRow.tsx
+++ b/web/src/widgets/NewConsoleModal/CompanyOptionRow.tsx
@@ -1,52 +1,36 @@
-import { memo, useCallback, useMemo, useState } from 'react';
-import { LegalEntityBrief } from '../../types/api';
 import { Checkbox, Empty, Input, Spin } from 'antd';
+import { memo, useCallback, useMemo, useState } from 'react';
+import type { LegalEntityBrief } from '../../types/api';
 
 type RowProps = {
 	entity: LegalEntityBrief;
 	checked: boolean;
 	onToggle: (id: string) => void;
 };
+// Вся строка — флажок antd (<label>): клик по наименованию или ИНН переключает, клавиатура — как у флажка.
+// Подпись растянута на ширину строки: наименование с многоточием слева, ИНН — колонкой справа.
 const CompanyOptionRow = memo(({ entity, checked, onToggle }: RowProps) => (
-	<div
-		role='checkbox'
-		aria-checked={checked}
-		tabIndex={0}
-		onClick={() => onToggle(entity.id)}
-		onKeyDown={(e) => {
-			if (e.key === ' ' || e.key === 'Enter') {
-				e.preventDefault();
-				onToggle(entity.id);
-			}
-		}}
-		style={{
-			display: 'flex',
-			alignItems: 'center',
-			justifyContent: 'space-between',
-			width: '100%',
-			minWidth: 0,
-			gap: 12,
-			padding: '10px 8px',
-			borderRadius: 4,
-			borderBottom: '1px solid rgba(0, 0, 0, 0.05)',
-			cursor: 'pointer',
-			boxSizing: 'border-box',
-		}}>
-		<span
-			style={{
+	<Checkbox
+		checked={checked}
+		onChange={() => onToggle(entity.id)}
+		styles={{
+			root: {
 				display: 'flex',
 				alignItems: 'center',
-				gap: 8,
-				flex: 1,
+				width: '100%',
 				minWidth: 0,
-				overflow: 'hidden',
-			}}>
-			<Checkbox checked={checked} tabIndex={-1} style={{ pointerEvents: 'none' }} />
-			<span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{entity.name}</span>
+				padding: '10px 8px',
+				borderRadius: 4,
+				borderBottom: '1px solid rgba(0, 0, 0, 0.05)',
+				boxSizing: 'border-box',
+			},
+			label: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flex: 1, minWidth: 0 },
+		}}>
+		<span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0 }} title={entity.name}>
+			{entity.name}
 		</span>
-
 		<span style={{ color: '#8c8c8c', flexShrink: 0 }}>{entity.inn}</span>
-	</div>
+	</Checkbox>
 ));
 
 type CompanyMultiSelectProps = {
diff --git a/web/src/widgets/NewConsoleModal/NewConsoleModal.tsx b/web/src/widgets/NewConsoleModal/NewConsoleModal.tsx
index e11c0b7..80882ec 100644
--- a/web/src/widgets/NewConsoleModal/NewConsoleModal.tsx
+++ b/web/src/widgets/NewConsoleModal/NewConsoleModal.tsx
@@ -1,14 +1,16 @@
+import { PlusOutlined } from '@ant-design/icons';
 import { Col, Form, Modal, Row, Select, message } from 'antd';
 import type React from 'react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { ApiError } from '../../api/client';
+import { useBeforeUnload } from '../../hooks/useBeforeUnload';
 import { fetchAllLegalEntities, fetchRelatedGroup, fetchRelatedGroups } from '../../services/api/directories/company_groups';
 import { getCompanyGroupsThunk } from '../../store/slices/companyGroupsSlice/thunks';
 import { useAppDispatch, useAppSelector } from '../../store/store';
 import type { ConsolidationCreate, LegalEntityBrief, Quarter, RelatedGroupOut } from '../../types/api';
-import { membersFirst, preselectMembers } from './preselect';
-import { PlusOutlined } from '@ant-design/icons';
+import { MIN_PERIMETER } from '../../utils/consolidations';
 import { CompanyMultiSelect } from './CompanyOptionRow';
+import { membersFirst, preselectMembers } from './preselect';
 
 type Props = {
 	open: boolean;
@@ -50,7 +52,10 @@ export const NewConsolidationModal: React.FC<Props> = ({ open, onCancel, onOk })
 		}
 	}, [open, raw_rows.length, loading, dispatch]);
 
-	const isSubmitDisabled = !company_group_id || !related_group_id || !year || !semester || !legEntIds?.length;
+	// не меньше двух ЮЛ: иначе сервер ответит 422 PERIMETER_TOO_SMALL
+	const isSubmitDisabled = !company_group_id || !related_group_id || !year || !semester || legEntIds.length < MIN_PERIMETER;
+	// начатая форма — несохранённые правки: браузер предупредит при закрытии вкладки
+	useBeforeUnload(open && !!(company_group_id || related_group_id || year || semester));
 
 	const yearOptions = useMemo(() => {
 		const y = new Date().getFullYear();
@@ -196,7 +201,15 @@ export const NewConsolidationModal: React.FC<Props> = ({ open, onCancel, onOk })
 					{/* ROW 3 - full width block, only after subgroup is selected */}
 					{related_group_id && (
 						<Col span={24}>
-							<Form.Item name='legal_entity_ids' label='ЮЛ консолидации' rules={[{ required: true, message: 'Выберите хотя бы одно ЮЛ' }]}>
+							<Form.Item
+								name='legal_entity_ids'
+								label='ЮЛ консолидации'
+								rules={[
+									{
+										validator: (_, v: string[] | undefined) =>
+											(v?.length ?? 0) >= MIN_PERIMETER ? Promise.resolve() : Promise.reject(new Error('Выберите не меньше двух ЮЛ')),
+									},
+								]}>
 								<CompanyMultiSelect loading={loadingEntities} companies={legEntities} />
 							</Form.Item>
 						</Col>