From 5702939b52a589a6d4726c8a45794c7304287acb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A2=D0=B8=D0=BC=D1=83=D1=80=20=D0=93=D0=BE=D1=80=D0=BE?= =?UTF-8?q?=D0=B4=D0=B5=D1=86=D0=BA=D0=B8=D0=B9?= Date: Wed, 30 Sep 2026 17:15:16 +0500 Subject: [PATCH] =?UTF-8?q?feat:=20=D0=BF=D0=BE=D0=B4=D1=81=D0=B2=D0=B5?= =?UTF-8?q?=D1=82=D0=BA=D0=B0=20=D0=BD=D0=B5=D0=B7=D0=B0=D0=BF=D0=BE=D0=BB?= =?UTF-8?q?=D0=BD=D0=B5=D0=BD=D0=BD=D1=8B=D1=85=20=D0=BF=D0=BE=D0=BB=D0=B5?= =?UTF-8?q?=D0=B9=20=D0=B8=20=D0=BF=D0=B5=D1=80=D0=B5=D1=85=D0=BE=D0=B4=20?= =?UTF-8?q?=D0=BA=20=D0=BD=D0=B8=D0=BC=20=D0=B2=20=D0=BF=D1=80=D0=B8=D1=91?= =?UTF-8?q?=D0=BC=D0=B5=20=D0=B8=20=D0=BF=D0=BE=D0=B4=D0=B1=D0=BE=D1=80?= =?UTF-8?q?=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Пользователи не понимали, почему кнопка «Отправить на согласование» серая. Теперь в заявках на приём и подбор кнопки активны: нажатие при незаполненных или неверных полях ничего не сохраняет, а подсвечивает эти поля с подсказкой под ними и прокручивает к первому. Над кнопками — список проблем, пункты ведут к полю. Механизм общий (FieldIssuesProvider + FormField), остальные формы пока работают по-старому и переводятся по тому же паттерну. Co-Authored-By: Claude Opus 5.5 (1M context) --- .../RecruitingHire/RecruitingHireForm.tsx | 38 ++---- .../RecruitingHire/RecruitingHireView.tsx | 9 +- .../forms/RecruitingHire/validation.test.ts | 44 ++++++ .../forms/RecruitingHire/validation.ts | 77 ++++++++--- .../RecruitingSelectionForm.tsx | 36 ++--- .../forms/RecruitingSelection/validation.ts | 127 +++++++++++++----- .../ui/FieldIssues/FieldIssuesContext.tsx | 70 ++++++++++ .../shared/ui/FieldIssues/fieldIssues.ts | 53 ++++++++ .../shared/ui/FormField/FormField.module.scss | 16 +++ .../shared/ui/FormField/FormField.tsx | 39 ++++-- .../shared/ui/SubmitActions/SubmitActions.tsx | 35 ++++- .../ui/SubmitActions/SubmitIssues.module.scss | 24 ++++ .../shared/ui/SubmitActions/SubmitIssues.tsx | 39 ++++++ src/webparts/requestPortal/shared/ui/index.ts | 3 + 14 files changed, 485 insertions(+), 125 deletions(-) create mode 100644 src/webparts/requestPortal/forms/RecruitingHire/validation.test.ts create mode 100644 src/webparts/requestPortal/shared/ui/FieldIssues/FieldIssuesContext.tsx create mode 100644 src/webparts/requestPortal/shared/ui/FieldIssues/fieldIssues.ts create mode 100644 src/webparts/requestPortal/shared/ui/SubmitActions/SubmitIssues.module.scss create mode 100644 src/webparts/requestPortal/shared/ui/SubmitActions/SubmitIssues.tsx diff --git a/src/webparts/requestPortal/forms/RecruitingHire/RecruitingHireForm.tsx b/src/webparts/requestPortal/forms/RecruitingHire/RecruitingHireForm.tsx index 22e01f7..be642be 100644 --- a/src/webparts/requestPortal/forms/RecruitingHire/RecruitingHireForm.tsx +++ b/src/webparts/requestPortal/forms/RecruitingHire/RecruitingHireForm.tsx @@ -8,6 +8,8 @@ import { FormModeProvider, FieldChangesProvider, FieldChangesBanner, + FieldIssuesProvider, + issueLabels, FileDropzone, AttachmentList, CollapseSection, @@ -52,7 +54,7 @@ import { dataListTitleForListId } from '../../shared/listTitles'; import { FORM_ID, IFormData, EMPTY_DATA, SetField } from './model'; -import { missingRequiredFields } from './validation'; +import { draftIssues, submitIssues } from './validation'; import { saveHireRequest, hireApprovalService } from './submit'; import { loadHireRequest } from './load'; import { @@ -210,32 +212,18 @@ const RecruitingHireForm: React.FC = ({ resolveApproverOrgInfo(context) ); - // При совмещении (2+ компании в «Организация») нужно явно указать, какая из них основная. - const mainCompanyMissing = data.Companies.length >= 2 && !data.MainCompanyId; - // ProjectId обязателен (а не просто текст Project): маршрут резолвится ПО - // ПРОЕКТУ (ByProject, см. projectId выше), и без выбранного из списка - // варианта (id) approval-route вернёт 404 — форма должна не пускать на - // отправку раньше, чем выяснится, что маршрут вообще некому строить (баг: - // раньше это не проверялось, и заявка молча уходила на согласование с - // пустой матрицей). - const isValid = - data.HireCandidateName.trim().length > 0 && - data.Position.trim().length > 0 && - !!data.ProjectId && - !mainCompanyMissing; + // Черновику нужны лишь несколько полей, отправке — все обязательные (см. validation.ts). + const draftMissing = draftIssues(data); + const submitMissing = submitIssues(data); + const isValid = draftMissing.length === 0; + const isSubmitValid = submitMissing.length === 0; const validate = (): string | undefined => { - if (mainCompanyMissing) return 'Выбрано несколько организаций — укажите, какая из них основное место работы.'; - if (!isValid) return 'Заполните обязательные поля: Ф.И.О. кандидата, Должность, Проект (выберите вариант из списка).'; + if (!isValid) return `Заполните обязательные поля: ${issueLabels(draftMissing)}.`; if (requestTypeIdState.error) return `Не удалось определить тип заявки: ${requestTypeIdState.error}`; if (!requestTypeId) return 'Тип заявки ещё определяется — подождите немного и повторите.'; return undefined; }; - // Остальные поля формы обязательны только для ОТПРАВКИ на согласование — - // черновик по-прежнему можно сохранить не заполнив их (см. validation.ts). - const missingFields = missingRequiredFields(data); - const isSubmitValid = isValid && missingFields.length === 0; - const toApprovers = (rows: typeof matrix.rows): IApproverToWrite[] => // order обязателен: параллельные шаги делят один номер, по позиции в // массиве его не восстановить (см. useMatrixEditor/withOrders). @@ -327,8 +315,8 @@ const RecruitingHireForm: React.FC = ({ const validateSubmit = (): string | undefined => { const formError = validate(); if (formError) return formError; - if (missingFields.length > 0) { - return `Заполните обязательные поля: ${missingFields.join(', ')}.`; + if (!isSubmitValid) { + return `Заполните обязательные поля: ${issueLabels(submitMissing)}.`; } if (matrix.error) { return `Не удалось определить маршрут согласования: ${matrix.error}. Попробуйте ещё раз или обратитесь к администратору.`; @@ -381,7 +369,7 @@ const RecruitingHireForm: React.FC = ({ }); return ( -
+
+ ); }; diff --git a/src/webparts/requestPortal/forms/RecruitingHire/RecruitingHireView.tsx b/src/webparts/requestPortal/forms/RecruitingHire/RecruitingHireView.tsx index 55013da..3ad3142 100644 --- a/src/webparts/requestPortal/forms/RecruitingHire/RecruitingHireView.tsx +++ b/src/webparts/requestPortal/forms/RecruitingHire/RecruitingHireView.tsx @@ -14,7 +14,8 @@ import { Icon, PrintButton, FieldChangesProvider, - FieldChangesBanner + FieldChangesBanner, + issueLabels } from '../../shared/ui'; import { IFieldChange, mergeFieldChanges, toChangeMap } from '../../shared/fieldChanges/fieldChanges'; import { HIRE_CHANGE_TRACKING } from './changeTracking'; @@ -51,7 +52,7 @@ import { loadHireRequest } from './load'; import { ATT_CATEGORY_ID, ATT_CATEGORY_RESUME, attachmentsOfCategory, uncategorizedAttachments } from './attachmentCategories'; import { confirmDiscardFormChanges } from '../../shared/unsavedChanges'; import { hireApprovalService, updateApproverFields, updateAllHireFields, IApproverEditableFields } from './submit'; -import { missingRequiredFields } from './validation'; +import { submitIssues } from './validation'; import { canEditPayrollFields } from './approverRights'; import { ApplicationSection } from './sections/ApplicationSection'; import { CandidateSection } from './sections/CandidateSection'; @@ -230,8 +231,8 @@ const RecruitingHireView: React.FC = ({ context, itemI throw new Error(HIRE_DATE_REQUIRED_MESSAGE); } if (fullEditable && decision === 'approve') { - const missing = missingRequiredFields(data); - if (missing.length > 0) throw new Error(`заполните обязательные поля: ${missing.join(', ')}.`); + const missing = submitIssues(data); + if (missing.length > 0) throw new Error(`заполните обязательные поля: ${issueLabels(missing)}.`); } await saveApproverFields(); }; diff --git a/src/webparts/requestPortal/forms/RecruitingHire/validation.test.ts b/src/webparts/requestPortal/forms/RecruitingHire/validation.test.ts new file mode 100644 index 0000000..7e8c31c --- /dev/null +++ b/src/webparts/requestPortal/forms/RecruitingHire/validation.test.ts @@ -0,0 +1,44 @@ +import { EMPTY_DATA, IFormData } from './model'; +import { draftIssues, submitIssues } from './validation'; + +const DRAFT_READY: IFormData = { + ...EMPTY_DATA, + HireCandidateName: 'Иванов Иван Иванович', + Position: 'Инженер', + ProjectId: '42' +}; + +const labels = (issues: { label: string }[]): string[] => issues.map((i) => i.label); + +describe('RecruitingHire validation', () => { + it('пустая форма: черновику не хватает проекта, ФИО и должности', () => { + expect(labels(draftIssues(EMPTY_DATA))).toEqual(['1.3 Проект', '2.1 Ф.И.О. кандидата', '2.3 Должность']); + }); + + it('черновик готов, но для отправки остаются поля — в порядке формы', () => { + expect(draftIssues(DRAFT_READY)).toEqual([]); + expect(labels(submitIssues(DRAFT_READY))).toEqual([ + '1.2 Организация', + '1.4 Телефон', + '1.5 Тип приёма', + '2.2 Дата приёма', + '4.1 Испытательный срок', + '4.2 Оклад при испытательном сроке', + '4.3 Оклад по завершении ИС', + '4.4 График работы' + ]); + }); + + it('ключ поля совпадает с htmlFor у FormField — по нему подсветка и прокрутка', () => { + expect(submitIssues(DRAFT_READY)[0]).toEqual({ field: 'Companies', label: '1.2 Организация', message: undefined }); + expect(draftIssues(EMPTY_DATA)[0]).toEqual({ + field: 'Project', + label: '1.3 Проект', + message: 'выберите вариант из списка' + }); + }); + + it('«По приезду на объект» снимает обязательность даты приёма', () => { + expect(labels(submitIssues({ ...DRAFT_READY, HireOnArrival: true }))).not.toContain('2.2 Дата приёма'); + }); +}); diff --git a/src/webparts/requestPortal/forms/RecruitingHire/validation.ts b/src/webparts/requestPortal/forms/RecruitingHire/validation.ts index 177c801..0b54f51 100644 --- a/src/webparts/requestPortal/forms/RecruitingHire/validation.ts +++ b/src/webparts/requestPortal/forms/RecruitingHire/validation.ts @@ -1,29 +1,66 @@ +import type { IFieldIssue } from '../../shared/ui'; import { IFormData } from './model'; +interface IRequiredRule extends IFieldIssue { + ok: (d: IFormData) => boolean; + /** true — без этого поля не сохранить даже черновик. */ + draft?: boolean; +} + /** - * Поля формы, обязательные для ОТПРАВКИ на согласование (черновик по-прежнему - * можно сохранить не заполнив их). Исключения по требованию заказчика: 2.4 - * «Отдел/Участок» (Department), 2.5 «Местоположение» (SiteLocation), 3.1–3.3 - * СИЗ (PpeHeight/PpeClothingSize/PpeShoeSize). 1.1 «Заявка на подбор» - * оставлена опциональной — приём иногда - * идёт через рекрутинговое агентство (см. AgencySection), без внутреннего - * подбора. Toggle-поле 5.1 «Рекрутинговое агентство» в проверку не входит — у - * булевых нет пустого состояния. + * Обязательные поля в порядке формы. field — ключ FormField (htmlFor/fieldKey): + * по нему поле подсвечивается и к нему прокручивается форма. Большинство полей + * нужны только для ОТПРАВКИ на согласование; draft — нужны уже черновику. + * + * Исключения по требованию заказчика: 2.4 «Отдел/Участок» (Department), 2.5 + * «Местоположение» (SiteLocation), 3.1–3.3 СИЗ. 1.1 «Заявка на подбор» + * опциональна — приём иногда идёт через рекрутинговое агентство (см. + * AgencySection), без внутреннего подбора. Toggle 5.1 «Рекрутинговое + * агентство» не проверяется — у булевых нет пустого состояния. * 2.2 «Дата приёма» не нужна, если отмечено «По приезду на объект» * (HireOnArrival) — тогда дату проставляет исполнитель на своём шаге. + * + * 1.3 «Проект» проверяется по ProjectId, а не по тексту: маршрут резолвится + * ПО ПРОЕКТУ (ByProject), и без выбранного из списка варианта approval-route + * вернёт 404 — заявка ушла бы на согласование с пустой матрицей. */ -const REQUIRED_FIELDS: ReadonlyArray<{ label: string; ok: (d: IFormData) => boolean }> = [ - { label: '1.2 организация', ok: (d) => d.Companies.length > 0 }, - { label: '1.4 телефон', ok: (d) => !!d.Phone.trim() }, - { label: '1.5 тип приёма', ok: (d) => !!d.HireType }, - { label: '2.2 дата приёма', ok: (d) => !!d.HireHireDate || d.HireOnArrival }, - { label: '4.1 испытательный срок', ok: (d) => !!d.ProbationPeriod }, - { label: '4.2 оклад при испытательном сроке', ok: (d) => !!d.SalaryProbation.trim() }, - { label: '4.3 оклад по завершении ИС', ok: (d) => !!d.SalaryAfterProbation.trim() }, - { label: '4.4 график работы', ok: (d) => !!d.WorkSchedule } +const REQUIRED_RULES: ReadonlyArray = [ + { field: 'Companies', label: '1.2 Организация', ok: (d) => d.Companies.length > 0 }, + { + field: 'MainCompanyId', + label: '1.2 Основное место работы', + message: 'выбрано несколько организаций — укажите основную', + ok: (d) => d.Companies.length < 2 || !!d.MainCompanyId, + draft: true + }, + { + field: 'Project', + label: '1.3 Проект', + message: 'выберите вариант из списка', + ok: (d) => !!d.ProjectId, + draft: true + }, + { field: 'Phone', label: '1.4 Телефон', ok: (d) => !!d.Phone.trim() }, + { field: 'HireType', label: '1.5 Тип приёма', ok: (d) => !!d.HireType }, + { field: 'HireCandidateName', label: '2.1 Ф.И.О. кандидата', ok: (d) => !!d.HireCandidateName.trim(), draft: true }, + { field: 'HireHireDate', label: '2.2 Дата приёма', ok: (d) => !!d.HireHireDate || d.HireOnArrival }, + { field: 'Position', label: '2.3 Должность', ok: (d) => !!d.Position.trim(), draft: true }, + { field: 'ProbationPeriod', label: '4.1 Испытательный срок', ok: (d) => !!d.ProbationPeriod }, + { field: 'SalaryProbation', label: '4.2 Оклад при испытательном сроке', ok: (d) => !!d.SalaryProbation.trim() }, + { field: 'SalaryAfterProbation', label: '4.3 Оклад по завершении ИС', ok: (d) => !!d.SalaryAfterProbation.trim() }, + { field: 'WorkSchedule', label: '4.4 График работы', ok: (d) => !!d.WorkSchedule } ]; -/** Подписи незаполненных обязательных-для-отправки полей (пусто — всё заполнено). */ -export function missingRequiredFields(data: IFormData): string[] { - return REQUIRED_FIELDS.filter((f) => !f.ok(data)).map((f) => f.label); +function toIssue({ field, label, message }: IRequiredRule): IFieldIssue { + return { field, label, message }; +} + +/** Что мешает сохранить черновик (пусто — сохранить можно). */ +export function draftIssues(data: IFormData): IFieldIssue[] { + return REQUIRED_RULES.filter((r) => r.draft && !r.ok(data)).map(toIssue); +} + +/** Всё, что мешает отправке на согласование, в порядке формы (пусто — отправлять можно). */ +export function submitIssues(data: IFormData): IFieldIssue[] { + return REQUIRED_RULES.filter((r) => !r.ok(data)).map(toIssue); } diff --git a/src/webparts/requestPortal/forms/RecruitingSelection/RecruitingSelectionForm.tsx b/src/webparts/requestPortal/forms/RecruitingSelection/RecruitingSelectionForm.tsx index f15cb44..b9e826d 100644 --- a/src/webparts/requestPortal/forms/RecruitingSelection/RecruitingSelectionForm.tsx +++ b/src/webparts/requestPortal/forms/RecruitingSelection/RecruitingSelectionForm.tsx @@ -8,6 +8,8 @@ import { FormModeProvider, FieldChangesProvider, FieldChangesBanner, + FieldIssuesProvider, + issueLabels, FileDropzone, AttachmentList, CollapseSection, @@ -53,7 +55,7 @@ import { dataListTitleForListId } from '../../shared/listTitles'; import { FORM_ID, IFormData, EMPTY_DATA, SetField, todayIso } from './model'; -import { submitBlocker } from './validation'; +import { draftIssues, submitBlocker, submitIssues } from './validation'; import { saveSelectionRequest, selectionApprovalService } from './submit'; import { loadSelectionRequest } from './load'; import { ApplicationSection } from './sections/ApplicationSection'; @@ -239,33 +241,18 @@ const RecruitingSelectionForm: React.FC = ({ resolveApproverOrgInfo(context) ); - // ObjectProjectId обязателен (а не просто текст ObjectProject): маршрут - // согласования резолвится ПО ПРОЕКТУ (ByProject, см. projectId выше), и без - // выбранного из списка варианта (id) approval-route вернёт 404 — форма - // должна не пускать на отправку раньше, чем выяснится, что маршрут вообще - // некому строить (баг: раньше это не проверялось, и заявка молча уходила - // на согласование с пустой матрицей). - const isValid = !!( - data.Responsible && - data.DepartmentName.trim() && - data.Position.trim() && - data.Residence && - data.ObjectProjectId - ); + // Черновику нужны лишь несколько полей, отправке — все обязательные (см. validation.ts). + const draftMissing = draftIssues(data); + const submitProblems = submitIssues(data); + const isValid = draftMissing.length === 0; + const isSubmitValid = submitProblems.length === 0; const validate = (): string | undefined => { - if (!isValid) { - return 'Заполните обязательные поля: ответственный за подачу, название отдела, должность, проживание, объект/проект (выберите вариант из списка).'; - } + if (!isValid) return `Заполните обязательные поля: ${issueLabels(draftMissing)}.`; if (requestTypeIdState.error) return `Не удалось определить тип заявки: ${requestTypeIdState.error}`; if (!requestTypeId) return 'Тип заявки ещё определяется — подождите немного и повторите.'; return undefined; }; - // Остальные поля формы обязательны только для ОТПРАВКИ на согласование — - // черновик по-прежнему можно сохранить не заполнив их (см. validation.ts). - const blocker = submitBlocker(data); - const isSubmitValid = isValid && !blocker; - const toApprovers = (rows: typeof matrix.rows): IApproverToWrite[] => rows.map((r) => ({ email: r.email, @@ -344,6 +331,7 @@ const RecruitingSelectionForm: React.FC = ({ const validateSubmit = (): string | undefined => { const formError = validate(); if (formError) return formError; + const blocker = submitBlocker(data); if (blocker) return blocker; if (matrix.error) { return `Не удалось определить маршрут согласования: ${matrix.error}. Попробуйте ещё раз или обратитесь к администратору.`; @@ -387,7 +375,7 @@ const RecruitingSelectionForm: React.FC = ({ }); return ( -
+
+ ); }; diff --git a/src/webparts/requestPortal/forms/RecruitingSelection/validation.ts b/src/webparts/requestPortal/forms/RecruitingSelection/validation.ts index e43d2e6..312af64 100644 --- a/src/webparts/requestPortal/forms/RecruitingSelection/validation.ts +++ b/src/webparts/requestPortal/forms/RecruitingSelection/validation.ts @@ -1,54 +1,107 @@ +import type { IFieldIssue } from '../../shared/ui'; import { IFormData } from './model'; import { parseVacanciesCount, vacancyReasonsError } from './vacancyReasons'; +interface IRequiredRule extends IFieldIssue { + ok: (d: IFormData) => boolean; + /** true — без этого поля не сохранить даже черновик. */ + draft?: boolean; +} + /** - * Поля формы, обязательные для ОТПРАВКИ на согласование (черновик по-прежнему - * можно сохранить не заполнив их). Исключения по требованию заказчика: 3.8 - * «Необходимые знания в программах» (Programs), 3.9 «Иностранные языки» - * (Languages), 3.11 «Водительские права, стаж вождения» (DrivingLicense). - * Toggle-поля (BusinessTrips, PieceworkPay, MaterialResponsibility, - * ReferralProgram) и условные «другое»-подполя в проверку не входят — у - * булевых нет пустого состояния, а «другое» раскрывается только при выборе - * соответствующего варианта в уже обязательном родительском поле. + * Обязательные поля в порядке формы. field — ключ FormField (htmlFor/fieldKey): + * по нему поле подсвечивается и к нему прокручивается форма. Большинство полей + * нужны только для ОТПРАВКИ на согласование; draft — нужны уже черновику. + * + * Исключения по требованию заказчика: 3.8 «Необходимые знания в программах» + * (Programs), 3.9 «Иностранные языки» (Languages), 3.11 «Водительские права, + * стаж вождения» (DrivingLicense). Toggle-поля (BusinessTrips, PieceworkPay, + * MaterialResponsibility, ReferralProgram) и условные «другое»-подполя в + * проверку не входят — у булевых нет пустого состояния, а «другое» + * раскрывается только при выборе соответствующего варианта в уже обязательном + * родительском поле. * 5.10 «Предполагаемый наставник» (ProposedMentor) сделан необязательным * по просьбе Тимура (2026-09-24) — не всегда есть кого назначить заранее. * 5.1 «Испытательный срок» добавлен 2026-09-24 — нумерация раздела 5 сдвинута на 1. + * + * 1.6 «Объект/Проект» проверяется по ObjectProjectId, а не по тексту: маршрут + * резолвится ПО ПРОЕКТУ (ByProject), и без выбранного из списка варианта + * approval-route вернёт 404 — заявка ушла бы на согласование с пустой матрицей. */ -const REQUIRED_FIELDS: ReadonlyArray<{ label: string; ok: (d: IFormData) => boolean }> = [ - { label: '1.3 дата подачи заявки', ok: (d) => !!d.SubmitDate }, - { label: '1.4 крайний срок закрытия', ok: (d) => !!d.ClosingDeadline }, - { label: '1.5 организация', ok: (d) => d.Companies.length > 0 }, - { label: '2.1 подразделение', ok: (d) => !!d.Department.trim() }, - { label: '2.2 количество открытых вакансий', ok: (d) => !!d.OpenVacanciesCount.trim() }, - { label: '2.3 причина открытия вакансии', ok: (d) => d.VacancyReasons.length > 0 }, - { label: '3.2 характер занятости', ok: (d) => !!d.EmploymentType }, - { label: '3.3 функционал', ok: (d) => !!d.JobFunction.trim() }, - { label: '3.4 компетенции', ok: (d) => !!d.Competencies.trim() }, - { label: '3.5 личностные характеристики', ok: (d) => !!d.PersonalTraits.trim() }, - { label: '3.6 образование', ok: (d) => !!d.Education }, - { label: '3.7 опыт работы', ok: (d) => !!d.WorkExperience }, - { label: '5.1 испытательный срок', ok: (d) => !!d.SelectionProbationPeriod }, - { label: '5.2 ставка на ИС', ok: (d) => !!d.RateProbation.trim() }, - { label: '5.3 ставка после ИС', ok: (d) => !!d.RateAfterProbation.trim() }, - { label: '5.5 график работы', ok: (d) => !!d.WorkSchedule }, - { label: '5.6 время работы', ok: (d) => !!d.WorkHours }, - { label: '5.8 обеспечение рабочего места', ok: (d) => d.WorkplaceProvision.length > 0 }, - { label: '5.11 непосредственный руководитель', ok: (d) => !!d.DirectManager }, - { label: '5.12 кто принимает решение о приёме', ok: (d) => d.HiringDecisionMaker.length > 0 } +const REQUIRED_RULES: ReadonlyArray = [ + { field: 'Responsible', label: '1.1 Ответственный за подачу заявки', ok: (d) => !!d.Responsible, draft: true }, + { + field: 'DepartmentName', + label: '1.2 Подразделение ответственного за подачу', + ok: (d) => !!d.DepartmentName.trim(), + draft: true + }, + { field: 'SubmitDate', label: '1.3 Дата подачи заявки', ok: (d) => !!d.SubmitDate }, + { field: 'ClosingDeadline', label: '1.4 Крайний срок закрытия', ok: (d) => !!d.ClosingDeadline }, + { field: 'Companies', label: '1.5 Организация', ok: (d) => d.Companies.length > 0 }, + { + field: 'ObjectProject', + label: '1.6 Объект/Проект', + message: 'выберите вариант из списка', + ok: (d) => !!d.ObjectProjectId, + draft: true + }, + { field: 'Department', label: '2.1 Подразделение', ok: (d) => !!d.Department.trim() }, + { field: 'OpenVacanciesCount', label: '2.2 Количество открытых вакансий', ok: (d) => !!d.OpenVacanciesCount.trim() }, + { field: 'VacancyReasons', label: '2.3 Причина открытия вакансии', ok: (d) => d.VacancyReasons.length > 0 }, + { field: 'Position', label: '3.1 Должность', ok: (d) => !!d.Position.trim(), draft: true }, + { field: 'EmploymentType', label: '3.2 Характер занятости', ok: (d) => !!d.EmploymentType }, + { field: 'JobFunction', label: '3.3 Функционал', ok: (d) => !!d.JobFunction.trim() }, + { field: 'Competencies', label: '3.4 Компетенции', ok: (d) => !!d.Competencies.trim() }, + { field: 'PersonalTraits', label: '3.5 Личностные характеристики', ok: (d) => !!d.PersonalTraits.trim() }, + { field: 'Education', label: '3.6 Образование', ok: (d) => !!d.Education }, + { field: 'WorkExperience', label: '3.7 Опыт работы', ok: (d) => !!d.WorkExperience }, + { field: 'Residence', label: '3.10 Проживание', ok: (d) => !!d.Residence, draft: true }, + { field: 'SelectionProbationPeriod', label: '5.1 Испытательный срок', ok: (d) => !!d.SelectionProbationPeriod }, + { field: 'RateProbation', label: '5.2 Ставка на ИС', ok: (d) => !!d.RateProbation.trim() }, + { field: 'RateAfterProbation', label: '5.3 Ставка после ИС', ok: (d) => !!d.RateAfterProbation.trim() }, + { field: 'WorkSchedule', label: '5.5 График работы', ok: (d) => !!d.WorkSchedule }, + { field: 'WorkHours', label: '5.6 Время работы', ok: (d) => !!d.WorkHours }, + { field: 'WorkplaceProvision', label: '5.8 Обеспечение рабочего места', ok: (d) => d.WorkplaceProvision.length > 0 }, + { field: 'DirectManager', label: '5.11 Непосредственный руководитель', ok: (d) => !!d.DirectManager }, + { field: 'HiringDecisionMaker', label: '5.12 Кто принимает решение о приёме', ok: (d) => d.HiringDecisionMaker.length > 0 } ]; -/** Подписи незаполненных обязательных-для-отправки полей (пусто — всё заполнено). */ -export function missingRequiredFields(data: IFormData): string[] { - return REQUIRED_FIELDS.filter((f) => !f.ok(data)).map((f) => f.label); +function missingFields(data: IFormData, draftOnly: boolean): IFieldIssue[] { + return REQUIRED_RULES.filter((r) => (!draftOnly || r.draft) && !r.ok(data)).map(({ field, label, message }) => ({ + field, + label, + message + })); +} + +/** Несогласованность причин (2.3) с количеством вакансий (2.2) — заполнено, но неверно. */ +function vacancyReasonsIssue(data: IFormData): IFieldIssue | undefined { + const error = vacancyReasonsError(data.VacancyReasons, parseVacanciesCount(data.OpenVacanciesCount)); + if (!error) return undefined; + // Текст ошибки — готовое предложение с заглавной; в списке после тире нужна строчная. + const message = error.charAt(0).toLowerCase() + error.slice(1); + return { field: 'VacancyReasons', label: '2.3 Причина открытия вакансии', message }; +} + +/** Что мешает сохранить черновик (пусто — сохранить можно). */ +export function draftIssues(data: IFormData): IFieldIssue[] { + return missingFields(data, true); } /** - * Всё, что мешает отправке/согласованию, одной строкой: сначала незаполненные - * обязательные поля, затем согласованность причин с количеством вакансий. - * undefined — отправлять можно. + * Всё, что мешает отправке на согласование: незаполненные поля в порядке формы, + * затем несогласованность причин с количеством вакансий (пусто — отправлять можно). */ +export function submitIssues(data: IFormData): IFieldIssue[] { + const reasonsIssue = vacancyReasonsIssue(data); + const missing = missingFields(data, false); + return reasonsIssue ? [...missing, reasonsIssue] : missing; +} + +/** Причина, по которой нельзя отправить/согласовать, одной строкой (undefined — можно). */ export function submitBlocker(data: IFormData): string | undefined { - const missing = missingRequiredFields(data); - if (missing.length > 0) return `Заполните обязательные поля: ${missing.join(', ')}.`; + const missing = missingFields(data, false); + if (missing.length > 0) return `Заполните обязательные поля: ${missing.map((m) => m.label).join(', ')}.`; return vacancyReasonsError(data.VacancyReasons, parseVacanciesCount(data.OpenVacanciesCount)); } diff --git a/src/webparts/requestPortal/shared/ui/FieldIssues/FieldIssuesContext.tsx b/src/webparts/requestPortal/shared/ui/FieldIssues/FieldIssuesContext.tsx new file mode 100644 index 0000000..b8e22bb --- /dev/null +++ b/src/webparts/requestPortal/shared/ui/FieldIssues/FieldIssuesContext.tsx @@ -0,0 +1,70 @@ +import * as React from 'react'; +import { useContext, useState } from 'react'; +import { IFieldIssue, issueFieldText, scrollToField } from './fieldIssues'; + +/** Какую кнопку нажимали: от этого зависит, какие поля подсвечивать. */ +export type RevealMode = 'draft' | 'submit'; + +interface IFieldIssuesContext { + draftIssues: IFieldIssue[]; + submitIssues: IFieldIssue[]; + /** Подсвечиваемые сейчас поля: ключ поля → текст под ним. */ + visible: Map; + /** Показать проблемы под полями и прокрутить к полю (по умолчанию — к первому). */ + reveal: (mode: RevealMode, field?: string) => void; +} + +const FieldIssuesContext = React.createContext(undefined); + +interface IFieldIssuesProviderProps { + /** Что мешает сохранить черновик (обычно подмножество submitIssues). */ + draftIssues: IFieldIssue[]; + /** Что мешает отправке на согласование. */ + submitIssues: IFieldIssue[]; + children: React.ReactNode; +} + +function toVisibleMap(issues: IFieldIssue[]): Map { + const map = new Map(); + issues.forEach((issue) => { + // Первое сообщение по полю важнее: правила идут в порядке формы. + if (!map.has(issue.field)) map.set(issue.field, issueFieldText(issue)); + }); + return map; +} + +/** + * Подсветка незаполненных/неверных полей формы. До первого нажатия кнопки + * поля не краснеют (пустая форма не должна пугать); после — подсвечиваются + * и гаснут сами, как только поле исправлено: списки пересчитываются из данных. + */ +export const FieldIssuesProvider: React.FC = ({ draftIssues, submitIssues, children }) => { + const [mode, setMode] = useState(undefined); + + const reveal = (nextMode: RevealMode, field?: string): void => { + // Раз показали проблемы отправки — не сужаем обратно до черновика. + setMode((prev) => (prev === 'submit' ? prev : nextMode)); + const issues = nextMode === 'draft' ? draftIssues : submitIssues; + const target = field || (issues.length > 0 ? issues[0].field : undefined); + if (target) scrollToField(target); + }; + + let shown: IFieldIssue[] = []; + if (mode === 'submit') shown = submitIssues; + if (mode === 'draft') shown = draftIssues; + + const value: IFieldIssuesContext = { draftIssues, submitIssues, visible: toVisibleMap(shown), reveal }; + return {children}; +}; + +/** Управление подсветкой для кнопок формы; undefined — форма без FieldIssuesProvider. */ +export function useFieldIssuesControl(): IFieldIssuesContext | undefined { + return useContext(FieldIssuesContext); +} + +/** Текст проблемы под полем, если его сейчас надо подсветить. */ +export function useFieldIssue(field: string | undefined): string | undefined { + const context = useContext(FieldIssuesContext); + if (!context || !field) return undefined; + return context.visible.get(field); +} diff --git a/src/webparts/requestPortal/shared/ui/FieldIssues/fieldIssues.ts b/src/webparts/requestPortal/shared/ui/FieldIssues/fieldIssues.ts new file mode 100644 index 0000000..a7d3200 --- /dev/null +++ b/src/webparts/requestPortal/shared/ui/FieldIssues/fieldIssues.ts @@ -0,0 +1,53 @@ +/** Проблема с полем формы, из-за которой заявку нельзя сохранить/отправить. */ +export interface IFieldIssue { + /** Ключ поля — тот же, что fieldKey/htmlFor у FormField: по нему подсветка и прокрутка. */ + field: string; + /** Подпись в списке над кнопками — как у поля на форме, с номером. */ + label: string; + /** Уточнение со строчной буквы («выберите вариант из списка»). Не задано — «заполните поле». */ + message?: string; +} + +const DEFAULT_ISSUE_MESSAGE = 'заполните поле'; + +/** Атрибут-метка обёртки поля в FormField — по нему ищем поле для прокрутки. */ +export const FIELD_ANCHOR_ATTR = 'data-rp-field'; +/** Атрибут-метка списка проблем над кнопками — запасная цель прокрутки. */ +export const ISSUES_ANCHOR_ATTR = 'data-rp-issues'; + +const FOCUSABLE = 'input:not([type="hidden"]):not([disabled]), select, textarea, button:not([disabled])'; + +/** Строка для списка над кнопками: «1.3 Проект — выберите вариант из списка». */ +export function issueListText(issue: IFieldIssue): string { + return issue.message ? `${issue.label} — ${issue.message}` : issue.label; +} + +/** Текст под полем: «Выберите вариант из списка» / «Заполните поле». */ +export function issueFieldText(issue: IFieldIssue): string { + const text = issue.message || DEFAULT_ISSUE_MESSAGE; + return text.charAt(0).toUpperCase() + text.slice(1); +} + +/** Подписи проблем одной строкой — для текста ошибки: «1.4 Телефон, 1.5 Тип приёма». */ +export function issueLabels(issues: IFieldIssue[]): string { + return issues.map((i) => i.label).join(', '); +} + +/** + * Прокрутить к полю и поставить в него курсор. Поле может отсутствовать в DOM — + * CollapseSection из ui-kit убирает тело свёрнутой секции целиком; тогда + * прокручиваем к списку проблем над кнопками, там поле названо. + */ +export function scrollToField(field: string): void { + const anchor = + document.querySelector(`[${FIELD_ANCHOR_ATTR}="${field}"]`) || + document.querySelector(`[${ISSUES_ANCHOR_ATTR}]`); + if (!anchor) return; + + anchor.scrollIntoView({ behavior: 'smooth', block: 'center' }); + const focusable = anchor.querySelector(FOCUSABLE); + if (focusable) { + // preventScroll: иначе фокус мгновенно дёрнет страницу и собьёт плавную прокрутку. + focusable.focus({ preventScroll: true }); + } +} diff --git a/src/webparts/requestPortal/shared/ui/FormField/FormField.module.scss b/src/webparts/requestPortal/shared/ui/FormField/FormField.module.scss index cd913eb..c846279 100644 --- a/src/webparts/requestPortal/shared/ui/FormField/FormField.module.scss +++ b/src/webparts/requestPortal/shared/ui/FormField/FormField.module.scss @@ -20,6 +20,22 @@ font-weight: 600; } +// Незаполненное/неверное поле после нажатия «Отправить» (см. FieldIssuesProvider). +// Полоса слева, а не рамка контрола: у пикеров, мультивыборов и переключателей +// своей рамки нет или она во Fluent — полоса одинаково видна у любого поля. +.invalid { + padding-left: $sp-2; + border-left: 3px solid $red-500; + border-radius: $r-sm; +} + +.issue { + margin-top: $sp-1; + font-size: $fs-caption; + color: $red-500; + overflow-wrap: anywhere; +} + // На печати подсветка не нужна — бумажная форма показывает итоговые значения. @media print { .changed { diff --git a/src/webparts/requestPortal/shared/ui/FormField/FormField.tsx b/src/webparts/requestPortal/shared/ui/FormField/FormField.tsx index 892dde9..3a5059c 100644 --- a/src/webparts/requestPortal/shared/ui/FormField/FormField.tsx +++ b/src/webparts/requestPortal/shared/ui/FormField/FormField.tsx @@ -3,6 +3,8 @@ import { FormField as KitFormField } from '@tnsu/ui-kit'; import styles from './FormField.module.scss'; import { useFieldChange } from '../FieldChanges/FieldChangesContext'; import { formatDateTime } from '../FieldChanges/formatDateTime'; +import { useFieldIssue } from '../FieldIssues/FieldIssuesContext'; +import { FIELD_ANCHOR_ATTR } from '../FieldIssues/fieldIssues'; interface IFormFieldProps { label: string; @@ -11,30 +13,43 @@ interface IFormFieldProps { /** Занять обе колонки сетки. */ full?: boolean; /** - * Ключ поля в журнале правок (internalName колонки). По умолчанию — htmlFor; - * задаётся явно у полей без htmlFor (люди, мультивыбор, переключатели). + * Ключ поля в журнале правок (internalName колонки) и в списке проблем формы + * (FieldIssuesProvider). По умолчанию — htmlFor; задаётся явно у полей без + * htmlFor (люди, мультивыбор, переключатели). */ fieldKey?: string; children: React.ReactNode; } /** - * FormField из ui-kit + подсветка правки согласующего: если поле есть в - * журнале (см. FieldChangesProvider), контрол подсвечивается, а под ним — - * прежнее значение. Без журнала ведёт себя ровно как FormField из ui-kit. + * FormField из ui-kit + две подсветки: + * - правка согласующего (см. FieldChangesProvider): контрол выделен, под ним — прежнее значение; + * - проблема поля (см. FieldIssuesProvider): красная полоса и текст под контролом. + * + * Обёртка с меткой поля есть всегда, а не только при ошибке: иначе при появлении + * и исчезновении ошибки React пересоздавал бы контрол и сбрасывал фокус посреди ввода. */ export const FormField: React.FC = ({ fieldKey, children, ...fieldProps }) => { - const change = useFieldChange(fieldKey ?? fieldProps.htmlFor); - if (!change) { - return {children}; - } + const key = fieldKey ?? fieldProps.htmlFor; + const change = useFieldChange(key); + const issue = useFieldIssue(key); + const anchorProps = key ? { [FIELD_ANCHOR_ATTR]: key } : {}; return ( -
{children}
-
- Было: {change.before} +
+ {change ?
{children}
: children}
+ {change && ( +
+ Было: {change.before} +
+ )} + {issue && ( +
+ {issue} +
+ )} ); }; diff --git a/src/webparts/requestPortal/shared/ui/SubmitActions/SubmitActions.tsx b/src/webparts/requestPortal/shared/ui/SubmitActions/SubmitActions.tsx index 653ca17..82f0efb 100644 --- a/src/webparts/requestPortal/shared/ui/SubmitActions/SubmitActions.tsx +++ b/src/webparts/requestPortal/shared/ui/SubmitActions/SubmitActions.tsx @@ -2,6 +2,8 @@ import * as React from 'react'; import { Button, Icon, FormActions, Alert } from '@tnsu/ui-kit'; import { IRequestSubmit } from '../useRequestSubmit'; import { isCurrentUserTester } from './testerGroupAccess'; +import { SubmitIssues } from './SubmitIssues'; +import { useFieldIssuesControl } from '../FieldIssues/FieldIssuesContext'; /** * ВРЕМЕННАЯ ЗАМОРОЗКА (включена 2026-09-21 по просьбе Тимура Городецкого): @@ -65,6 +67,11 @@ export interface ISubmitActionsProps { // Логика доступности — здесь, в одном месте, чтобы все формы вели себя одинаково: // • сохранять/отправлять нельзя, пока идёт сохранение или заявка уже read-only; // • «Отмена» доступна всегда (возврат к списку), кроме момента сохранения. +// +// Форма внутри FieldIssuesProvider (см. shared/ui/FieldIssues) ведёт себя иначе: +// кнопки сохранения не гаснут из-за незаполненных полей — нажатие при проблемах +// ничего не сохраняет, а подсвечивает поля и прокручивает к первому. Над кнопками +// список проблем со ссылками на поля. Формы без провайдера — как раньше, по isValid. export const SubmitActions: React.FC = ({ submit, isValid, @@ -98,11 +105,33 @@ export const SubmitActions: React.FC = ({ const frozen = SUBMISSION_FROZEN && !unfrozenForm && !isTester; const locked = saving || readOnly || frozen; - const canSubmit = submitValid ?? isValid; + const issuesControl = useFieldIssuesControl(); + // С провайдером кнопки не гаснут по полям: проблемы показываются по нажатию. + const canSaveDraft = issuesControl ? true : isValid; + const canSubmit = issuesControl ? true : submitValid ?? isValid; + + const handleSaveDraft = (): void => { + if (issuesControl && issuesControl.draftIssues.length > 0) { + issuesControl.reveal('draft'); + return; + } + onSaveDraft(); + }; + const handleSubmit = (): void => { + if (issuesControl && issuesControl.submitIssues.length > 0) { + issuesControl.reveal('submit'); + return; + } + onSubmit(); + }; return ( <> {frozen && !readOnly && Подача заявок временно недоступна.} + {/* При заморозке кнопки неактивны не из-за полей — список только сбил бы с толку. */} + {issuesControl && !frozen && !readOnly && ( + issuesControl.reveal('submit', field)} /> + )} {onDelete && ( - - diff --git a/src/webparts/requestPortal/shared/ui/SubmitActions/SubmitIssues.module.scss b/src/webparts/requestPortal/shared/ui/SubmitActions/SubmitIssues.module.scss new file mode 100644 index 0000000..4736e13 --- /dev/null +++ b/src/webparts/requestPortal/shared/ui/SubmitActions/SubmitIssues.module.scss @@ -0,0 +1,24 @@ +@import '../../../../../styles/design-tokens'; + +.title { + font-weight: 600; +} + +.list { + margin: $sp-1 0 0; + padding-left: $sp-5; +} + +// Пункт списка — ссылка на поле: выглядит как текст с подчёркиванием, без рамки кнопки. +.link { + padding: 0; + border: 0; + background: none; + color: inherit; + font: inherit; + text-align: left; + text-decoration: underline; + text-underline-offset: 2px; + cursor: pointer; + overflow-wrap: anywhere; +} diff --git a/src/webparts/requestPortal/shared/ui/SubmitActions/SubmitIssues.tsx b/src/webparts/requestPortal/shared/ui/SubmitActions/SubmitIssues.tsx new file mode 100644 index 0000000..9f725f9 --- /dev/null +++ b/src/webparts/requestPortal/shared/ui/SubmitActions/SubmitIssues.tsx @@ -0,0 +1,39 @@ +import * as React from 'react'; +import { Alert } from '@tnsu/ui-kit'; +import styles from './SubmitIssues.module.scss'; +import { IFieldIssue, ISSUES_ANCHOR_ATTR, issueListText } from '../FieldIssues/fieldIssues'; + +interface ISubmitIssuesProps { + /** Что мешает отправке — в порядке формы. */ + issues: IFieldIssue[]; + /** Клик по пункту — прокрутка к полю. */ + onSelect: (field: string) => void; +} + +const TITLE = 'Чтобы отправить на согласование, заполните или исправьте:'; + +/** + * Список причин, по которым заявку пока нельзя отправить. Пункт кликабелен — + * ведёт к полю: на длинной форме иначе пришлось бы искать его самому. + */ +export const SubmitIssues: React.FC = ({ issues, onSelect }) => { + if (issues.length === 0) return null; + + const anchorProps = { [ISSUES_ANCHOR_ATTR]: '' }; + return ( +
+ +
{TITLE}
+
    + {issues.map((issue) => ( +
  • + +
    • + ))} +
+ +
+ ); +}; diff --git a/src/webparts/requestPortal/shared/ui/index.ts b/src/webparts/requestPortal/shared/ui/index.ts index 35fa453..9ecb6da 100644 --- a/src/webparts/requestPortal/shared/ui/index.ts +++ b/src/webparts/requestPortal/shared/ui/index.ts @@ -52,6 +52,9 @@ export { OrgLetterhead } from './OrgLetterhead/OrgLetterhead'; export { LinkField } from './LinkField/LinkField'; export { ErrorOverlay } from './ErrorOverlay/ErrorOverlay'; export { SubmitActions } from './SubmitActions/SubmitActions'; +export { FieldIssuesProvider } from './FieldIssues/FieldIssuesContext'; +export type { IFieldIssue } from './FieldIssues/fieldIssues'; +export { issueLabels } from './FieldIssues/fieldIssues'; export { getDraftDeleteHandler } from './SubmitActions/getDraftDeleteHandler'; export { InitiatorLine } from './InitiatorLine/InitiatorLine'; export type { IInitiatorLineProps } from './InitiatorLine/InitiatorLine';