feat: примечание для согласующих в заявке на приём

Инициатору нужно передать согласующим важную информацию так, чтобы её не пропустили. Новый раздел «6. Примечание для согласующих» (текст + «Важное»); у согласующих и исполнителей заполненное примечание показывается плашкой над разделами заявки, важное выделено цветом и иконкой. Сделано общим модулем shared/approverNote, чтобы подключать в другие формы. Колонки HireApproverNote (Note) и HireApproverNoteImportant (Boolean). Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
2026-10-08 15:02:11 +05:00
parent 8a22767dd3
commit 545db1aee6
14 changed files with 307 additions and 3 deletions
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import styles from './ApproverNote.module.scss';
+import { CollapseSection, FormField, TextArea, Toggle, useFormReadOnly } from '../ui';
+import { APPROVER_NOTE_TEXT } from './approverNoteTexts';
+
+/** Примечание: текст + признак «Важное». */
+export interface IApproverNote {
+  text: string;
+  important: boolean;
+}
+
+/** Ключи полей формы (= internalName колонок) — для подсветки правок и прокрутки к полю. */
+export interface IApproverNoteFieldKeys {
+  text: string;
+  important: string;
+}
+
+interface Props {
+  /** Заголовок раздела с номером по порядку формы, напр. «6. Примечание для согласующих». */
+  title: string;
+  value: IApproverNote;
+  onChange: (value: IApproverNote) => void;
+  fieldKeys: IApproverNoteFieldKeys;
+}
+
+/**
+ * Раздел «Примечание для согласующих» — общий для форм. Сама форма решает, в
+ * какие колонки писать (fieldKeys) и где показывать плашку ApproverNoteBanner.
+ * В режиме чтения (FormModeProvider readOnly) поля только показываются.
+ */
+export const ApproverNoteSection: React.FC<Props> = ({ title, value, onChange, fieldKeys }) => {
+  const readOnly = useFormReadOnly();
+
+  return (
+    <CollapseSection title={title} icon="info">
+      <FormField label={APPROVER_NOTE_TEXT.fieldLabel} htmlFor={fieldKeys.text} full>
+        <TextArea
+          id={fieldKeys.text}
+          value={value.text}
+          onChange={(text) => onChange({ ...value, text })}
+          placeholder={APPROVER_NOTE_TEXT.placeholder}
+        />
+        {!readOnly && <div className={styles.hint}>{APPROVER_NOTE_TEXT.fieldHint}</div>}
+      </FormField>
+      <FormField label={APPROVER_NOTE_TEXT.importantLabel} fieldKey={fieldKeys.important}>
+        <Toggle
+          checked={value.important}
+          onChange={(important) => onChange({ ...value, important })}
+          onLabel={APPROVER_NOTE_TEXT.importantOn}
+        />
+      </FormField>
+    </CollapseSection>
+  );
+};