feat: request portal — bespoke forms + approval mechanism

This commit is contained in:
Тимур Городецкий
2026-08-03 09:35:14 +05:00
commit bc91c9861d
110 changed files with 30562 additions and 0 deletions
@@ -0,0 +1,40 @@
@import '../../../../styles/design-tokens';
.back {
display: inline-flex;
align-items: center;
gap: $sp-2;
margin-bottom: $sp-4;
padding: 0;
border: 0;
background: transparent;
color: $navy-700;
font-family: $font-sans;
font-size: $fs-sm;
cursor: pointer;
transition: color .18s;
&:hover {
color: $gold-600;
}
}
.statusRow {
display: flex;
justify-content: flex-end;
margin-bottom: $sp-3;
}
.statusPill {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: $r-full;
background: $navy-50;
border: 1px solid $navy-100;
color: $navy-800;
font-family: $font-sans;
font-size: $fs-caption;
font-weight: 600;
letter-spacing: .2px;
}
@@ -0,0 +1,129 @@
import * as React from 'react';
import { useState, useMemo, useCallback } from 'react';
import styles from './RecruitingHireForm.module.scss';
import { Button, Alert, FormCard, FormActions, Icon } from '../../shared/ui';
import {
ApprovalMatrix,
useMatrixEditor,
getPlannedMatrix,
REQUEST_STATUS,
IApproverToWrite
} from '../../shared/approval';
import { IRequestFormProps } from '../../models/types';
import { IFormData, EMPTY_DATA, SetField } from './model';
import { saveHireRequest, hireApprovalService, HIRE_REQUEST_TYPE_ID } from './submit';
import { ApplicationSection } from './sections/ApplicationSection';
import { CandidateSection } from './sections/CandidateSection';
import { PpeSection } from './sections/PpeSection';
import { ConditionsSection } from './sections/ConditionsSection';
import { ResponsibleSection } from './sections/ResponsibleSection';
type ActionStatus = 'idle' | 'saving' | 'success' | 'error';
type ActionKind = 'draft' | 'submit';
const RecruitingHireForm: React.FC<IRequestFormProps> = ({ requestType, context, onCancel, onSaved }) => {
const [data, setData] = useState<IFormData>(EMPTY_DATA);
const [actionStatus, setActionStatus] = useState<ActionStatus>('idle');
const [actionKind, setActionKind] = useState<ActionKind | undefined>(undefined);
const [status, setStatus] = useState<string | undefined>(undefined);
const [error, setError] = useState<string | null>(null);
const set: SetField = (key, value) => {
setData((prev) => ({ ...prev, [key]: value }));
setActionStatus('idle');
};
// Маршрут согласования (планируемый) резолвится по email инициатора — текущего
// пользователя (кандидата ещё нет в системе).
const approval = useMemo(() => hireApprovalService(), []);
const userEmail = context.pageContext.user.email;
const loadMatrix = useCallback(
() => getPlannedMatrix(context, HIRE_REQUEST_TYPE_ID, userEmail, approval),
[context, userEmail, approval]
);
const matrix = useMatrixEditor(loadMatrix, userEmail, true, true, (login) =>
approval.getJobTitle(login)
);
const saving = actionStatus === 'saving';
const isValid = data.CandidateName.trim().length > 0 && data.Position.trim().length > 0;
const matrixApprovers = (): IApproverToWrite[] =>
matrix.rows.map((r) => ({ email: r.email, position: r.position, allowReassign: r.allowReassign }));
async function run(kind: ActionKind, requestStatus: string): Promise<void> {
if (!isValid) {
setError('Заполните обязательные поля: Ф.И.О. кандидата, Должность.');
return;
}
setError(null);
setActionKind(kind);
setActionStatus('saving');
try {
await saveHireRequest(data, matrixApprovers(), requestStatus);
setStatus(requestStatus);
setActionStatus('success');
if (onSaved) {
onSaved();
}
} catch (e) {
setActionStatus('error');
setError(`Ошибка сохранения: ${(e as Error).message}`);
}
}
const handleSaveDraft = (): Promise<void> => run('draft', REQUEST_STATUS.draft);
const handleSubmit = (): Promise<void> => run('submit', REQUEST_STATUS.onApproval);
const sectionProps = { data, set, context };
return (
<div>
<button type="button" className={styles.back} onClick={onCancel}>
<Icon name="arrow-left" size="sm" />
<span>К списку заявок</span>
</button>
<FormCard title={requestType.title} subtitle="Категория: Отдел рекрутинга">
{status && (
<div className={styles.statusRow}>
<span className={styles.statusPill}>{status}</span>
</div>
)}
{actionStatus === 'success' && (
<Alert variant="ok">
{actionKind === 'draft'
? 'Черновик сохранён.'
: 'Заявка отправлена на согласование.'}
</Alert>
)}
{error && <Alert variant="err">{error}</Alert>}
<ApplicationSection {...sectionProps} />
<CandidateSection {...sectionProps} />
<PpeSection {...sectionProps} />
<ConditionsSection {...sectionProps} />
<ResponsibleSection {...sectionProps} />
<ApprovalMatrix editor={matrix} search={(q) => approval.searchUsers(q)} />
<FormActions>
<Button variant="secondary" onClick={onCancel} disabled={saving}>
Отмена
</Button>
<Button variant="secondary" onClick={handleSaveDraft} disabled={!isValid || saving}>
<Icon name="document" size="sm" />
Сохранить черновик
</Button>
<Button variant="accent" onClick={handleSubmit} disabled={!isValid || saving}>
<Icon name="send" size="sm" />
{saving && actionKind === 'submit' ? 'Отправка…' : 'Отправить на согласование'}
</Button>
</FormActions>
</FormCard>
</div>
);
};
export default RecruitingHireForm;
@@ -0,0 +1,12 @@
{
"dataListTitle": "Согласование — Прием на работу",
"columns": [
{ "internalName": "Approver", "title": "Согласующий", "type": "User", "userSelectionMode": "PeopleOnly" },
{ "internalName": "Status", "title": "Статус", "type": "Choice", "choices": ["Черновик", "На согласовании", "Согласовано", "Отклонено", "Возвращена на доработку", "Выполнение", "Закрыта"] },
{ "internalName": "Ticket", "title": "Заявка", "type": "Lookup", "lookupList": "Прием на работу — данные", "lookupShowField": "Title" },
{ "internalName": "Date", "title": "Дата", "type": "DateTime" },
{ "internalName": "Comment", "title": "Комментарий", "type": "Note" },
{ "internalName": "Order", "title": "Порядок", "type": "Number" },
{ "internalName": "AllowReassignToOtherApprovers", "title": "Можно перепоручать", "type": "Boolean" }
]
}
@@ -0,0 +1,78 @@
import { WebPartContext } from '@microsoft/sp-webpart-base';
import { ISelectOption } from '../../shared/ui';
/**
* Данные формы «Заявка на прием». Ключи = internalName колонок SP-списка
* «Прием на работу — данные», чтобы при записи маппинг был 1:1.
*/
export interface IFormData {
// Заявка (шапка)
Phone: string;
HireType: string;
ReplacedEmployee: string;
// Кандидат
CandidateName: string;
HireDate: string;
Position: string;
WorkKind: string;
SiteName: string;
SiteLocation: string;
// СИЗ
PpeHeight: string;
PpeClothingSize: string;
PpeShoeSize: string;
// Условия оплаты и оформления
SalaryProbation: string;
SalaryAfterProbation: string;
WorkSchedule: string;
EmploymentForm: string;
// Ответственные лица
SiteManager: string;
SecuritySpecialist: string;
}
/** Обновление одного поля формы с сохранением типа значения. */
export type SetField = <K extends keyof IFormData>(key: K, value: IFormData[K]) => void;
/** Пропсы каждой секции формы: срез данных + колбэк обновления + контекст (для people picker). */
export interface ISectionProps {
data: IFormData;
set: SetField;
context: WebPartContext;
}
export const EMPTY_DATA: IFormData = {
Phone: '',
HireType: '',
ReplacedEmployee: '',
CandidateName: '',
HireDate: '',
Position: '',
WorkKind: '',
SiteName: '',
SiteLocation: '',
PpeHeight: '',
PpeClothingSize: '',
PpeShoeSize: '',
SalaryProbation: '',
SalaryAfterProbation: '',
WorkSchedule: '',
EmploymentForm: '',
SiteManager: '',
SecuritySpecialist: ''
};
/** Варианты «Тип приёма» — совпадают с choices колонки HireType. */
export const HIRE_TYPE_OPTIONS: ISelectOption[] = [
{ value: 'Новый сотрудник', label: 'Новый сотрудник' },
{ value: 'Вместо уволенного', label: 'Вместо уволенного' }
];
/** Варианты «Вид оформления» — совпадают с choices колонки EmploymentForm. */
export const EMPLOYMENT_FORM_OPTIONS: ISelectOption[] = [
{ value: 'ГПХ', label: 'ГПХ' },
{ value: 'Штат', label: 'Штат' }
];
/** Плейсхолдер для полей-людей. */
export const PERSON_PLACEHOLDER = 'Начните вводить имя сотрудника…';
@@ -0,0 +1,29 @@
{
"dataListTitle": "Прием на работу — данные",
"columns": [
{ "internalName": "Status", "title": "Статус", "type": "Choice", "choices": ["Черновик", "На согласовании", "Согласовано", "Отклонено", "Возвращена на доработку", "Выполнение", "Закрыта"] },
{ "internalName": "Phone", "title": "Телефон", "type": "Text" },
{ "internalName": "HireType", "title": "Тип приёма", "type": "Choice", "choices": ["Новый сотрудник", "Вместо уволенного"] },
{ "internalName": "ReplacedEmployee", "title": "Взамен кого (Ф.И.О. уволенного)", "type": "Text" },
{ "internalName": "CandidateName", "title": "Ф.И.О. кандидата", "type": "Text", "required": true },
{ "internalName": "HireDate", "title": "Дата приёма", "type": "DateTime", "dateOnly": true },
{ "internalName": "Position", "title": "Должность", "type": "Text", "required": true },
{ "internalName": "WorkKind", "title": "Вид работ", "type": "Text" },
{ "internalName": "SiteName", "title": "Наименование участка", "type": "Text" },
{ "internalName": "SiteLocation", "title": "Местоположение участка", "type": "Text" },
{ "internalName": "PpeHeight", "title": "СИЗ: рост", "type": "Number" },
{ "internalName": "PpeClothingSize", "title": "СИЗ: размер одежды", "type": "Text" },
{ "internalName": "PpeShoeSize", "title": "СИЗ: размер обуви", "type": "Number" },
{ "internalName": "SalaryProbation", "title": "Оклад при испытательном сроке", "type": "Number", "decimals": 2 },
{ "internalName": "SalaryAfterProbation", "title": "Оклад по завершении ИС", "type": "Number", "decimals": 2 },
{ "internalName": "WorkSchedule", "title": "График работы", "type": "Text" },
{ "internalName": "EmploymentForm", "title": "Вид оформления", "type": "Choice", "choices": ["ГПХ", "Штат"] },
{ "internalName": "SiteManager", "title": "Руководитель участка", "type": "User", "userSelectionMode": "PeopleOnly" },
{ "internalName": "SecuritySpecialist", "title": "Специалист СБ", "type": "User", "userSelectionMode": "PeopleOnly" }
]
}
@@ -0,0 +1,27 @@
import * as React from 'react';
import { CollapseSection, FormField, TextInput, Select } from '../../../shared/ui';
import { ISectionProps, HIRE_TYPE_OPTIONS } from '../model';
export const ApplicationSection: React.FC<ISectionProps> = ({ data, set }) => (
<CollapseSection title="Заявка" icon="clipboard">
<FormField label="Телефон" htmlFor="Phone">
<TextInput id="Phone" value={data.Phone} onChange={(v) => set('Phone', v)} />
</FormField>
<FormField label="Тип приёма" htmlFor="HireType">
<Select
id="HireType"
value={data.HireType}
onChange={(v) => set('HireType', v)}
options={HIRE_TYPE_OPTIONS}
placeholder="— выберите —"
/>
</FormField>
<FormField label="Взамен кого (Ф.И.О. уволенного)" htmlFor="ReplacedEmployee" full>
<TextInput
id="ReplacedEmployee"
value={data.ReplacedEmployee}
onChange={(v) => set('ReplacedEmployee', v)}
/>
</FormField>
</CollapseSection>
);
@@ -0,0 +1,26 @@
import * as React from 'react';
import { CollapseSection, FormField, TextInput } from '../../../shared/ui';
import { ISectionProps } from '../model';
export const CandidateSection: React.FC<ISectionProps> = ({ data, set }) => (
<CollapseSection title="Кандидат" icon="people">
<FormField label="Ф.И.О. кандидата" htmlFor="CandidateName" required full>
<TextInput id="CandidateName" value={data.CandidateName} onChange={(v) => set('CandidateName', v)} />
</FormField>
<FormField label="Дата приёма" htmlFor="HireDate">
<TextInput id="HireDate" type="date" value={data.HireDate} onChange={(v) => set('HireDate', v)} />
</FormField>
<FormField label="Должность" htmlFor="Position" required>
<TextInput id="Position" value={data.Position} onChange={(v) => set('Position', v)} />
</FormField>
<FormField label="Вид работ" htmlFor="WorkKind">
<TextInput id="WorkKind" value={data.WorkKind} onChange={(v) => set('WorkKind', v)} />
</FormField>
<FormField label="Наименование участка" htmlFor="SiteName">
<TextInput id="SiteName" value={data.SiteName} onChange={(v) => set('SiteName', v)} />
</FormField>
<FormField label="Местоположение участка" htmlFor="SiteLocation">
<TextInput id="SiteLocation" value={data.SiteLocation} onChange={(v) => set('SiteLocation', v)} />
</FormField>
</CollapseSection>
);
@@ -0,0 +1,36 @@
import * as React from 'react';
import { CollapseSection, FormField, TextInput, Select } from '../../../shared/ui';
import { ISectionProps, EMPLOYMENT_FORM_OPTIONS } from '../model';
export const ConditionsSection: React.FC<ISectionProps> = ({ data, set }) => (
<CollapseSection title="Условия оплаты и оформления" icon="calculator">
<FormField label="Оклад при испытательном сроке" htmlFor="SalaryProbation">
<TextInput
id="SalaryProbation"
type="number"
value={data.SalaryProbation}
onChange={(v) => set('SalaryProbation', v)}
/>
</FormField>
<FormField label="Оклад по завершении ИС" htmlFor="SalaryAfterProbation">
<TextInput
id="SalaryAfterProbation"
type="number"
value={data.SalaryAfterProbation}
onChange={(v) => set('SalaryAfterProbation', v)}
/>
</FormField>
<FormField label="График работы" htmlFor="WorkSchedule">
<TextInput id="WorkSchedule" value={data.WorkSchedule} onChange={(v) => set('WorkSchedule', v)} />
</FormField>
<FormField label="Вид оформления" htmlFor="EmploymentForm">
<Select
id="EmploymentForm"
value={data.EmploymentForm}
onChange={(v) => set('EmploymentForm', v)}
options={EMPLOYMENT_FORM_OPTIONS}
placeholder="— выберите —"
/>
</FormField>
</CollapseSection>
);
@@ -0,0 +1,17 @@
import * as React from 'react';
import { CollapseSection, FormField, TextInput } from '../../../shared/ui';
import { ISectionProps } from '../model';
export const PpeSection: React.FC<ISectionProps> = ({ data, set }) => (
<CollapseSection title="СИЗ (спецодежда)" icon="folder">
<FormField label="Рост, см" htmlFor="PpeHeight">
<TextInput id="PpeHeight" type="number" value={data.PpeHeight} onChange={(v) => set('PpeHeight', v)} />
</FormField>
<FormField label="Размер одежды" htmlFor="PpeClothingSize">
<TextInput id="PpeClothingSize" value={data.PpeClothingSize} onChange={(v) => set('PpeClothingSize', v)} />
</FormField>
<FormField label="Размер обуви" htmlFor="PpeShoeSize">
<TextInput id="PpeShoeSize" type="number" value={data.PpeShoeSize} onChange={(v) => set('PpeShoeSize', v)} />
</FormField>
</CollapseSection>
);
@@ -0,0 +1,24 @@
import * as React from 'react';
import { CollapseSection, FormField, PeopleField } from '../../../shared/ui';
import { ISectionProps, PERSON_PLACEHOLDER } from '../model';
export const ResponsibleSection: React.FC<ISectionProps> = ({ data, set, context }) => (
<CollapseSection title="Ответственные лица" icon="check">
<FormField label="Руководитель участка" full>
<PeopleField
context={context}
value={data.SiteManager}
onChange={(v) => set('SiteManager', v)}
placeholder={PERSON_PLACEHOLDER}
/>
</FormField>
<FormField label="Специалист СБ" full>
<PeopleField
context={context}
value={data.SecuritySpecialist}
onChange={(v) => set('SecuritySpecialist', v)}
placeholder={PERSON_PLACEHOLDER}
/>
</FormField>
</CollapseSection>
);
@@ -0,0 +1,74 @@
import { getSP } from '../../shared/pnp/pnpjs';
import { ApprovalListService, IApproverToWrite, writeApprovers } from '../../shared/approval';
import { IFormData } from './model';
const LIST_TITLE = 'Прием на работу — данные';
export const APPROVAL_LIST_TITLE = 'Согласование — Прием на работу';
// Тип заявки «Заявка на прием» во внешнем approval-route API
// (GET /api/request-types → id 5). Захардкожен, как «отпуск = 1» в pto-tracker.
export const HIRE_REQUEST_TYPE_ID = 5;
// Поля-люди (один человек): логин → ensureUser → Id в колонку <Field>Id.
const PERSON_FIELDS: (keyof IFormData)[] = ['SiteManager', 'SecuritySpecialist'];
// Числовые поля: пустая строка → null, иначе Number().
const NUMBER_FIELDS: (keyof IFormData)[] = ['PpeHeight', 'PpeShoeSize', 'SalaryProbation', 'SalaryAfterProbation'];
/** Экземпляр сервиса списка согласования этой формы. */
export function hireApprovalService(): ApprovalListService {
return new ApprovalListService(APPROVAL_LIST_TITLE);
}
/** Логин → числовой Id пользователя на текущем сайте. */
async function resolveUserId(login: string): Promise<number> {
const ensured = await getSP().web.ensureUser(login); // v4: возвращает ISiteUserInfo с .Id
return ensured.Id;
}
/** Осмысленный заголовок элемента списка (системная колонка Title). */
function buildTitle(data: IFormData): string {
return ['Прием', data.CandidateName, data.Position].filter(Boolean).join(' — ');
}
/** Записать контент заявки со статусом. Возвращает Id созданного элемента. */
async function writeContent(data: IFormData, status: string): Promise<number> {
const item: Record<string, unknown> = { Title: buildTitle(data), Status: status };
// Текст/выбор/даты/числа (людей пропускаем — они ниже).
(Object.keys(data) as (keyof IFormData)[]).forEach((key) => {
if (PERSON_FIELDS.indexOf(key) !== -1) {
return;
}
const value = data[key];
if (NUMBER_FIELDS.indexOf(key) !== -1) {
item[key] = value === '' ? null : Number(value);
} else {
item[key] = value === '' ? null : value;
}
});
// Один человек → <Field>Id.
for (let i = 0; i < PERSON_FIELDS.length; i++) {
const login = data[PERSON_FIELDS[i]] as string;
if (login) {
item[`${PERSON_FIELDS[i]}Id`] = await resolveUserId(login);
}
}
const added = await getSP().web.lists.getByTitle(LIST_TITLE).items.add(item);
return (added as { Id: number }).Id;
}
/**
* Сохранить заявку «на прием»: контент + маршрут согласующих со статусом.
* status = «Черновик» (сохранение) или «На согласовании» (отправка).
* Возвращает Id заявки.
*/
export async function saveHireRequest(
data: IFormData,
approvers: IApproverToWrite[],
status: string
): Promise<number> {
const id = await writeContent(data, status);
await writeApprovers(hireApprovalService(), id, approvers, status);
return id;
}