Merge pull request 'готово' (#78) from color-smeta into test

Reviewed-on: #78

web/src/components/RealtimeTable/Cell/Cell/Cell.jsx

@@ -68,7 +68,9 @@ const INTEGER_COLUMN_IDS = new Set([
 const getColorBrightness = (hexColor) => {
 	if (!hexColor) return 255;
 	const color = hexColor.replace('#', '');
-	let r, g, b;
+	let r;
+	let g;
+	let b;
 	if (color.length === 3) {
 		r = Number.parseInt(color[0] + color[0], 16);
 		g = Number.parseInt(color[1] + color[1], 16);
@@ -86,7 +88,7 @@ const getColorBrightness = (hexColor) => {
 const formatNumber = (value, asInteger = false) => {
 	if (value === null || value === undefined || value === '') return String(value || '');
 	const num = Number(value);
-	if (isNaN(num)) return String(value);
+	if (Number.isNaN(num)) return String(value);
 	return num.toLocaleString('ru-RU', {
 		minimumFractionDigits: asInteger ? 0 : 1,
 		maximumFractionDigits: asInteger ? 0 : 1,
@@ -146,7 +148,7 @@ const CellComponent = ({
 	// Мемоизация значения
 	const { rawValue, displayValue, isNumeric } = useMemo(() => {
 		const value = cell.getValue();
-		const isNum = !isNaN(Number(value)) && value !== null && value !== undefined && value !== '';
+		const isNum = value !== null && value !== undefined && value !== '' && !Number.isNaN(Number(value));
 		let display = String(value || '');
 
 		if (isNum) {
@@ -191,7 +193,8 @@ const CellComponent = ({
 	}, [isLocked, onClick]);
 
 	return (
-		<div className='cell' style={cellStyles} onClick={handleClick}>
+		// biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
+		<div type="button" className='cell' style={cellStyles} onClick={handleClick}>
 			<span style={CONTAINER_STYLES}>{highlightedContent}</span>
 			{lockBadge}
 		</div>

web/src/components/RealtimeTable/constants/columnConfig.js

@@ -1,6 +1,10 @@
+import { blueColumn, greenColumn, orangeColumn } from "./columnColors";
+
 export const columnPinningDefault = {
 	left: ['mrt-row-expand', 'sort_order'],
 	right: [],
 };
 
 export const columnVisibilityDefault = { 'mrt-row-select': false };
+
+export const sectionCodeColor = { 1: greenColumn, 3: orangeColumn, 4: blueColumn}

web/src/components/RealtimeTable/tableColumns.jsx

@@ -2,6 +2,8 @@ import React, { useEffect, useRef, useState, useMemo, useCallback } from 'react'
 import { createPortal } from 'react-dom';
 import { useParams } from 'react-router';
 import { useRealtime } from './contexts/RealtimeContext';
+import { sectionCodeColor } from './constants/columnConfig';
+import { blueColumn, greenColumn } from './constants/columnColors';
 
 const EditCellPortal = React.memo(({
 	cell,
@@ -76,6 +78,13 @@ const EditCellPortal = React.memo(({
 	);
 });
 
+function getColorCell(colors, column, row) {
+	if (row.original.data.section_code){
+		const section_code = row.original.data.section_code[0];
+		return (sectionCodeColor[section_code] || blueColumn)[row.original?.row_type || row.row_type];
+	}
+	return colors[column.id]?.color_type?.[row.original?.row_type || row.row_type];
+}
 
 export const getTableColumns = ({
 	Cell,
@@ -121,7 +130,7 @@ export const getTableColumns = ({
 			globalFilter,
 			columnFilter,
 			isEditable: row.original?.row_type === 'INPUT' || false,
-			backgroundColor: columnColors[column.id]?.color_type?.[row.original?.row_type || row.row_type],
+			backgroundColor: getColorCell(columnColors, column, row),
 			isUpdating: table.options.meta?.updatingCells?.[`${row.id}_${column.id}`],
 			isInvalid,
 			value,
@@ -154,7 +163,7 @@ export const getTableColumns = ({
 
 	// Оптимизированная функция processColumns
 	const processColumns = (columns) => {
-		columns.forEach((col) => {
+		for (const col of columns) {
 			col.Cell = ({ cell, table, column, row }) => {
 				const props = getCachedCellProps(row, column, table);
 
@@ -163,7 +172,7 @@ export const getTableColumns = ({
 					column,
 					cell,
 					...props,
-				}), [row.id, column.id, cell.getValue(), props._hash]);
+				}), [row, column, cell, props]);
 
 				return <Cell {...cellProps} />;
 			};
@@ -187,7 +196,7 @@ export const getTableColumns = ({
 			if (col.columns?.length) {
 				processColumns(col.columns);
 			}
-		});
+		}
 	};
 
 	processColumns(columns);
@@ -201,8 +210,7 @@ export const getTableColumns = ({
 			const handleClick = useCallback(() => {
 				onCellNumberClick(row.id);
 			}, [row.id, onCellNumberClick]);
-
-			return <button onClick={handleClick}>{cell.getValue() + '   '}</button>;
+			return <button type="button" onClick={handleClick}>{`${cell.getValue()}   `}</button>;
 		},
 	};
 

web/src/components/Stages/AddStagesModal.jsx

@@ -1,6 +1,6 @@
 import { Box, Button, Divider, FormControl, FormLabel, IconButton, MenuItem, Select, Stack, TextField } from '@mui/material';
 import { useEffect, useState } from 'react';
-import { STAGE_ROLE_RUSSIAN_NAME } from '../../constants/constants';
+import { STAGE_ROLE_RUSSIAN_NAME, DIRECTION_TRANSLATE } from '../../constants/constants';
 import { formatDateForApi } from '../../utils/formatDate';
 import { collectLeafColumns } from '../RealtimeTable/utils/columnUtils';
 import CollapsibleTree from '../common/CollapsibleTree';
@@ -27,6 +27,7 @@ export const AddStagesModal = ({
 	const [endDate, setEndDate] = useState(null);
 	const [stageName, setStageName] = useState('');
 	const [selectedSheet, setSelectedSheet] = useState(defaultSheet);
+	const [selectedDirection, setSelectedDirection] = useState('');
 	const [selectedRole, setSelectedRole] = useState();
 	const [columnsConfig, setColumnsConfig] = useState({ columns: [], colors: {} });
 	const [selectedColumns, setSelectedColumns] = useState([]);
@@ -34,7 +35,7 @@ export const AddStagesModal = ({
 	useEffect(() => {
 		const loadColumnsConfig = async () => {
 			if (!selectedSheet) return;
-			const sheetObj = sheetOptions.find((s) => s.value == selectedSheet);
+			const sheetObj = sheetOptions.find((s) => s.value === selectedSheet);
 
 			try {
 				const { config } = await import(`../RealtimeTable/constants/${formType}/${sheetObj.sheet}.js`);
@@ -54,13 +55,15 @@ export const AddStagesModal = ({
 			setEndDate(stage.closes_at ?? null);
 			setStageName(stage.phase_code ?? '');
 			setSelectedSheet(stage.sheet ?? null);
+			setSelectedDirection(stage.direction ?? '');
 			setSelectedRole(stage.role ?? null);
-			setSelectedColumns(stage.column_keys.map((c) => 'data.' + c));
+			setSelectedColumns(stage.column_keys.map((c) => `data.${c}`));
 		} else {
 			setStartDate(null);
 			setEndDate(null);
 			setStageName('');
 			setSelectedSheet(defaultSheet);
+			setSelectedDirection('');
 			setSelectedRole();
 			setSelectedColumns([]);
 		}
@@ -69,12 +72,12 @@ export const AddStagesModal = ({
 	const handleSave = () => {
 		const opensAt = formatDateForApi(startDate);
 		const closesAt = formatDateForApi(endDate);
-		const sheetObj = sheetOptions.find((s) => s.value == selectedSheet);
+		const sheetObj = sheetOptions.find((s) => s.value === selectedSheet);
 
 		const stageData = {
 			phase_code: stageName,
 			sheet: sheetObj.sheet,
-			direction: sheetObj.direction,
+			direction: selectedDirection,
 			role: selectedRole,
 			opens_at: opensAt,
 			closes_at: closesAt,
@@ -101,6 +104,7 @@ export const AddStagesModal = ({
 		setEndDate(null);
 		setStageName('');
 		setSelectedSheet(defaultSheet);
+		setSelectedDirection('');
 		setSelectedRole();
 		setSelectedColumns([]);
 		onClose();
@@ -115,6 +119,7 @@ export const AddStagesModal = ({
 	const handleSheetChange = (event) => {
 		setSelectedSheet(event.target.value);
 		setSelectedColumns([]);
+		setSelectedDirection(''); // Сбрасываем direction при смене листа
 	};
 
 	const handleColumnsSelect = (column, isSelect) => {
@@ -129,7 +134,7 @@ export const AddStagesModal = ({
 		}
 	};
 
-	const isFormValid = startDate && endDate && stageName.trim() && selectedSheet;
+	const isFormValid = startDate && endDate && stageName.trim() && selectedSheet && selectedDirection;
 
 	if (!isOpen) return null;
 
@@ -138,6 +143,10 @@ export const AddStagesModal = ({
 
 	const columnTree = columnsConfig.columns || [];
 
+	// Проверяем, нужно ли показывать выбор направления (для AHR CAP)
+	const sheetObj = sheetOptions.find((s) => s.value === selectedSheet);
+	const showDirectionSelect = sheetObj?.direction;
+
 	return (
 		<ModalBackdrop isOpen={isOpen} onClick={handleBackdropClick}>
 			<ModalContainer>
@@ -187,6 +196,31 @@ export const AddStagesModal = ({
 							</Select>
 						</FormControl>
 					</Stack>
+
+					{/* Выбор направления (только для AHR CAP) */}
+					{showDirectionSelect && (
+						<Stack sx={{ marginBottom: '0.75rem', width: '100%' }}>
+							<FormControl fullWidth>
+								<FormLabel>Направление</FormLabel>
+								<Select
+									value={selectedDirection}
+									onChange={(e) => setSelectedDirection(e.target.value)}
+									displayEmpty
+									size='small'
+								>
+									<MenuItem value='' disabled>
+										Выберите направление
+									</MenuItem>
+									{Object.entries(DIRECTION_TRANSLATE).map(([key, label]) => (
+										<MenuItem key={key} value={key}>
+											{label}
+										</MenuItem>
+									))}
+								</Select>
+							</FormControl>
+						</Stack>
+					)}
+
 					{selectedSheet && columnTree.length > 0 && (
 						<Stack sx={{ marginBottom: '0.75rem', width: '100%' }}>
 							<FormControl fullWidth>

web/src/components/Stages/constants.js

@@ -7,5 +7,5 @@ export const stageColumnsHiddenFromPicker = [
 	'data.header.internal_order',
 	'data.header.vsp_id',
 	'data.header.section_code',
-	'data.header.justification',
+	// 'data.header.justification',
 ];