fix: подпись «Суммы к списанию» над сеткой — «Обучение» больше не дублируется визуально

Без заголовка группы «Обучение» (WriteOffTrainingAmount, любой согласующий)
читалось продолжением «Обучение: сумма» чуть выше (TrainingAmount, поле КДП) —
два разных поля выглядели одним и тем же. Добавлена overline-подпись «Суммы к
списанию» перед сеткой из 6 сумм — теперь понятно, что это отдельная группа.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
gorbenko.pavel
2026-08-26 14:13:07 +05:00
parent eacf4baeb1
commit b010e3ec4a
2 changed files with 47 additions and 23 deletions
@@ -0,0 +1,16 @@
@import '../../../../../styles/design-tokens';
// Заголовок группы полей ВНУТРИ секции (не отдельная CollapseSection) — нужен
// только затем, чтобы 6 сумм к списанию не читались продолжением полей выше
// (в частности — не путались с «Обучение: сумма», отдельным полем КДП чуть
// выше по форме: без подписи оба «Обучение» рядом выглядели одним и тем же).
.writeOffLabel {
grid-column: 1 / -1;
margin-top: $sp-2;
color: $gray-500;
font-family: $font-sans;
font-size: $fs-overline;
font-weight: 600;
letter-spacing: 1.4px;
text-transform: uppercase;
}
@@ -1,6 +1,7 @@
import * as React from 'react';
import { CollapseSection, FormField, TextInput, MoneyInput, Toggle, PeopleField, OrganizationField, LinkField } from '../../../shared/ui';
import { ISectionProps, EMPLOYEE_PLACEHOLDER, WRITE_OFF_CATEGORIES } from '../model';
import styles from './RequestSection.module.scss';
// Подразделение подтягивается автоматически при выборе сотрудника (см.
// ClearanceForm.handleEmployeeChange — SharePoint User Profile) — свободный
@@ -100,29 +101,36 @@ export const RequestSection: React.FC<IRequestSectionProps> = ({
/>
</FormField>
{/* Суммы к списанию — 6 независимых сумм, компактной сеткой (обычная
2-колоночная сетка секции, короткие подписи — без full). Каждую может
заполнить ЛЮБОЙ активный согласующий (не только профильный, в отличие
от отметок выше) — но как только сумма указана, блокируется навсегда
для всех, поэтому у незаблокированных (writeOffEditableKeys.has(cat.key))
есть readOnly={false}, у остальных — обычное поведение FormMode
(просмотр — заблокировано и так). «За что конкретно» — своего поля
здесь нет: заполнил хоть одну сумму — обязательным становится
СТАНДАРТНЫЙ комментарий решения в DecisionPanel («Ваше решение»), см.
ClearanceView (commentRequired/commentPlaceholder). */}
{writeOffEditableKeys &&
WRITE_OFF_CATEGORIES.map((cat) => {
const editable = writeOffEditableKeys.has(cat.key);
return (
<FormField key={cat.key} label={cat.label} htmlFor={cat.amountField}>
<MoneyInput
id={cat.amountField}
value={data[cat.amountField]}
onChange={(v) => set(cat.amountField, v)}
readOnly={editable ? false : undefined}
/>
</FormField>
);
})}
2-колоночная сетка секции, короткие подписи — без full). Заголовок
группы ОБЯЗАТЕЛЕН: без него «Обучение» здесь читается продолжением
«Обучение: сумма» чуть выше (разные поля — то принадлежит КДП, это
любому согласующему, см. README «Отдельный механизм от TrainingAmount»).
Каждую сумму может заполнить ЛЮБОЙ активный согласующий (не только
профильный, в отличие от отметок выше) — но как только сумма указана,
блокируется навсегда для всех, поэтому у незаблокированных
(writeOffEditableKeys.has(cat.key)) есть readOnly={false}, у остальных
— обычное поведение FormMode (просмотр — заблокировано и так). «За что
конкретно» — своего поля здесь нет: заполнил хоть одну сумму —
обязательным становится СТАНДАРТНЫЙ комментарий решения в DecisionPanel
(«Ваше решение»), см. ClearanceView (commentRequired/commentPlaceholder). */}
{writeOffEditableKeys && (
<>
<div className={styles.writeOffLabel}>Суммы к списанию</div>
{WRITE_OFF_CATEGORIES.map((cat) => {
const editable = writeOffEditableKeys.has(cat.key);
return (
<FormField key={cat.key} label={cat.label} htmlFor={cat.amountField}>
<MoneyInput
id={cat.amountField}
value={data[cat.amountField]}
onChange={(v) => set(cat.amountField, v)}
readOnly={editable ? false : undefined}
/>
</FormField>
);
})}
</>
)}
{/* Есть только у листов, созданных автоматически по согласованному заявлению
на увольнение (см. forms/Dismissal/createClearance.ts). */}
<LinkField