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 * as React from 'react';
import { CollapseSection, FormField, TextInput, MoneyInput, Toggle, PeopleField, OrganizationField, LinkField } from '../../../shared/ui'; import { CollapseSection, FormField, TextInput, MoneyInput, Toggle, PeopleField, OrganizationField, LinkField } from '../../../shared/ui';
import { ISectionProps, EMPLOYEE_PLACEHOLDER, WRITE_OFF_CATEGORIES } from '../model'; import { ISectionProps, EMPLOYEE_PLACEHOLDER, WRITE_OFF_CATEGORIES } from '../model';
import styles from './RequestSection.module.scss';
// Подразделение подтягивается автоматически при выборе сотрудника (см. // Подразделение подтягивается автоматически при выборе сотрудника (см.
// ClearanceForm.handleEmployeeChange — SharePoint User Profile) — свободный // ClearanceForm.handleEmployeeChange — SharePoint User Profile) — свободный
@@ -100,29 +101,36 @@ export const RequestSection: React.FC<IRequestSectionProps> = ({
/> />
</FormField> </FormField>
{/* Суммы к списанию — 6 независимых сумм, компактной сеткой (обычная {/* Суммы к списанию — 6 независимых сумм, компактной сеткой (обычная
2-колоночная сетка секции, короткие подписи — без full). Каждую может 2-колоночная сетка секции, короткие подписи — без full). Заголовок
заполнить ЛЮБОЙ активный согласующий (не только профильный, в отличие группы ОБЯЗАТЕЛЕН: без него «Обучение» здесь читается продолжением
от отметок выше) — но как только сумма указана, блокируется навсегда «Обучение: сумма» чуть выше (разные поля — то принадлежит КДП, это
для всех, поэтому у незаблокированных (writeOffEditableKeys.has(cat.key)) любому согласующему, см. README «Отдельный механизм от TrainingAmount»).
есть readOnly={false}, у остальных — обычное поведение FormMode Каждую сумму может заполнить ЛЮБОЙ активный согласующий (не только
(просмотр — заблокировано и так). «За что конкретно» — своего поля профильный, в отличие от отметок выше) — но как только сумма указана,
здесь нет: заполнил хоть одну сумму — обязательным становится блокируется навсегда для всех, поэтому у незаблокированных
СТАНДАРТНЫЙ комментарий решения в DecisionPanel («Ваше решение»), см. (writeOffEditableKeys.has(cat.key)) есть readOnly={false}, у остальных
ClearanceView (commentRequired/commentPlaceholder). */} — обычное поведение FormMode (просмотр — заблокировано и так). «За что
{writeOffEditableKeys && конкретно» — своего поля здесь нет: заполнил хоть одну сумму —
WRITE_OFF_CATEGORIES.map((cat) => { обязательным становится СТАНДАРТНЫЙ комментарий решения в DecisionPanel
const editable = writeOffEditableKeys.has(cat.key); («Ваше решение»), см. ClearanceView (commentRequired/commentPlaceholder). */}
return ( {writeOffEditableKeys && (
<FormField key={cat.key} label={cat.label} htmlFor={cat.amountField}> <>
<MoneyInput <div className={styles.writeOffLabel}>Суммы к списанию</div>
id={cat.amountField} {WRITE_OFF_CATEGORIES.map((cat) => {
value={data[cat.amountField]} const editable = writeOffEditableKeys.has(cat.key);
onChange={(v) => set(cat.amountField, v)} return (
readOnly={editable ? false : undefined} <FormField key={cat.key} label={cat.label} htmlFor={cat.amountField}>
/> <MoneyInput
</FormField> id={cat.amountField}
); value={data[cat.amountField]}
})} onChange={(v) => set(cat.amountField, v)}
readOnly={editable ? false : undefined}
/>
</FormField>
);
})}
</>
)}
{/* Есть только у листов, созданных автоматически по согласованному заявлению {/* Есть только у листов, созданных автоматически по согласованному заявлению
на увольнение (см. forms/Dismissal/createClearance.ts). */} на увольнение (см. forms/Dismissal/createClearance.ts). */}
<LinkField <LinkField