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;
}
@@ -0,0 +1,20 @@
@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;
}
}
@@ -0,0 +1,83 @@
import * as React from 'react';
import { useState } from 'react';
import styles from './RecruitingSelectionForm.module.scss';
import { Button, Alert, FormCard, FormActions, Icon } from '../../shared/ui';
import { IRequestFormProps } from '../../models/types';
import { IFormData, EMPTY_DATA, SetField } from './model';
import { submitRecruitingSelection } from './submit';
import { ApplicationSection } from './sections/ApplicationSection';
import { DepartmentSection } from './sections/DepartmentSection';
import { VacancySection } from './sections/VacancySection';
import { HealthTripsSection } from './sections/HealthTripsSection';
import { ConditionsSection } from './sections/ConditionsSection';
const RecruitingSelectionForm: React.FC<IRequestFormProps> = ({ requestType, context, onCancel, onSaved }) => {
const [data, setData] = useState<IFormData>(EMPTY_DATA);
const [saving, setSaving] = useState<boolean>(false);
const [saved, setSaved] = useState<boolean>(false);
const [error, setError] = useState<string | null>(null);
const set: SetField = (key, value) => {
setData((prev) => ({ ...prev, [key]: value }));
setSaved(false);
};
async function handleSave(): Promise<void> {
const missing: string[] = [];
if (!data.Responsible) missing.push('Ответственный за подачу заявки');
if (!data.DepartmentName) missing.push('Название отдела/департамента');
if (!data.Position) missing.push('Должность');
if (missing.length > 0) {
setError(`Заполните обязательные поля: ${missing.join(', ')}`);
return;
}
setError(null);
setSaving(true);
try {
await submitRecruitingSelection(data);
setSaved(true);
if (onSaved) {
onSaved();
}
} catch (e) {
setError(`Ошибка сохранения: ${(e as Error).message}`);
} finally {
setSaving(false);
}
}
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="Категория: Отдел рекрутинга">
{saved && <Alert variant="ok">Заявка сохранена в SharePoint.</Alert>}
{error && <Alert variant="err">{error}</Alert>}
<ApplicationSection {...sectionProps} />
<DepartmentSection {...sectionProps} />
<VacancySection {...sectionProps} />
<HealthTripsSection {...sectionProps} />
<ConditionsSection {...sectionProps} />
<FormActions>
<Button variant="secondary" onClick={onCancel} disabled={saving}>
Отмена
</Button>
<Button variant="accent" onClick={handleSave} disabled={saving}>
<Icon name="check" size="sm" />
{saving ? 'Сохранение…' : 'Сохранить заявку'}
</Button>
</FormActions>
</FormCard>
</div>
);
};
export default RecruitingSelectionForm;
@@ -0,0 +1,120 @@
import { WebPartContext } from '@microsoft/sp-webpart-base';
import { ISelectOption } from '../../shared/ui';
/**
* Данные формы «Заявка на подбор». Ключи = internalName колонок SP-списка
* «Заявка на подбор — данные», чтобы при записи маппинг был 1:1.
*/
export interface IFormData {
// Заявка
Responsible: string;
SubmitDate: string;
ClosingDeadline: string;
OpenReason: string;
IsRegistered: boolean;
IsApproved: boolean;
CompletionMark: boolean;
// Отдел
DepartmentName: string;
DepartmentHeadcount: string;
DepartmentGoals: string;
RelatedDepartments: string;
// Вакансия
Position: string;
ClassifierCode: string;
EmploymentType: string;
MainFunction: string;
AdditionalFunction: string;
Competencies: string;
PersonalTraits: string;
Education: string;
WorkExperience: string;
AdditionalEducation: string;
EvaluationCriteria: string;
PcSkills: string;
ForeignLanguages: string;
Residence: string;
DrivingLicense: string;
// Здоровье / командировки
HealthRestrictions: string;
BusinessTrips: string;
// Условия работы
RateProbation: string;
RateAfterProbation: string;
Awards: string;
Bonuses: string;
CompensationPackage: string;
WorkSchedule: string;
Location: string;
MaterialResponsibility: boolean;
WorkplaceProvision: string;
ProposedMentor: string;
DirectManager: string;
DevelopmentPrograms: string;
DesiredTraining: string;
HiringDecisionMaker: 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 = {
Responsible: '',
SubmitDate: '',
ClosingDeadline: '',
OpenReason: '',
IsRegistered: false,
IsApproved: false,
CompletionMark: false,
DepartmentName: '',
DepartmentHeadcount: '',
DepartmentGoals: '',
RelatedDepartments: '',
Position: '',
ClassifierCode: '',
EmploymentType: '',
MainFunction: '',
AdditionalFunction: '',
Competencies: '',
PersonalTraits: '',
Education: '',
WorkExperience: '',
AdditionalEducation: '',
EvaluationCriteria: '',
PcSkills: '',
ForeignLanguages: '',
Residence: '',
DrivingLicense: '',
HealthRestrictions: '',
BusinessTrips: '',
RateProbation: '',
RateAfterProbation: '',
Awards: '',
Bonuses: '',
CompensationPackage: '',
WorkSchedule: '',
Location: '',
MaterialResponsibility: false,
WorkplaceProvision: '',
ProposedMentor: '',
DirectManager: '',
DevelopmentPrograms: '',
DesiredTraining: '',
HiringDecisionMaker: []
};
/** Варианты «Характер занятости» — совпадают с choices колонки EmploymentType. */
export const EMPLOYMENT_TYPE_OPTIONS: ISelectOption[] = [
{ value: 'Постоянная', label: 'Постоянная' },
{ value: 'Временная', label: 'Временная' }
];
/** Плейсхолдер для полей-людей. */
export const PERSON_PLACEHOLDER = 'Начните вводить имя сотрудника…';
@@ -0,0 +1,51 @@
{
"dataListTitle": "Заявка на подбор — данные",
"columns": [
{ "internalName": "Responsible", "title": "Ответственный за подачу заявки", "type": "User", "userSelectionMode": "PeopleOnly", "required": true },
{ "internalName": "SubmitDate", "title": "Дата подачи заявки", "type": "DateTime", "dateOnly": true },
{ "internalName": "IsRegistered", "title": "Зарегистрирована", "type": "Boolean" },
{ "internalName": "IsApproved", "title": "Одобрена", "type": "Boolean" },
{ "internalName": "OpenReason", "title": "Причина открытия вакансии", "type": "Note" },
{ "internalName": "ClosingDeadline", "title": "Крайний срок закрытия", "type": "DateTime", "dateOnly": true },
{ "internalName": "CompletionMark", "title": "Отметка о выполнении", "type": "Boolean" },
{ "internalName": "DepartmentName", "title": "Название отдела/департамента", "type": "Text", "required": true },
{ "internalName": "DepartmentHeadcount", "title": "Количество сотрудников в отделе", "type": "Number" },
{ "internalName": "DepartmentGoals", "title": "Цели, стоящие перед отделом", "type": "Note" },
{ "internalName": "RelatedDepartments", "title": "Смежные отделы по бизнес-процессам", "type": "Note" },
{ "internalName": "Position", "title": "Должность", "type": "Text", "required": true },
{ "internalName": "ClassifierCode", "title": "Код по классификатору", "type": "Text" },
{ "internalName": "EmploymentType", "title": "Характер занятости", "type": "Choice", "choices": ["Постоянная", "Временная"] },
{ "internalName": "MainFunction", "title": "Основной функционал", "type": "Note" },
{ "internalName": "AdditionalFunction", "title": "Дополнительный функционал", "type": "Note" },
{ "internalName": "Competencies", "title": "Компетенции", "type": "Note" },
{ "internalName": "PersonalTraits", "title": "Личностные характеристики", "type": "Note" },
{ "internalName": "Education", "title": "Образование", "type": "Text" },
{ "internalName": "WorkExperience", "title": "Опыт работы", "type": "Note" },
{ "internalName": "AdditionalEducation", "title": "Дополнительное образование", "type": "Note" },
{ "internalName": "EvaluationCriteria", "title": "Критерии оценки работы", "type": "Note" },
{ "internalName": "PcSkills", "title": "Уровень владения ПК и программами", "type": "Note" },
{ "internalName": "ForeignLanguages", "title": "Иностранные языки (уровень владения)", "type": "Note" },
{ "internalName": "Residence", "title": "Проживание", "type": "Text" },
{ "internalName": "DrivingLicense", "title": "Водительские права, стаж вождения", "type": "Text" },
{ "internalName": "HealthRestrictions", "title": "Приемлемые противопоказания (здоровье)", "type": "Note" },
{ "internalName": "BusinessTrips", "title": "Командировки (есть/нет и продолжительность)", "type": "Note" },
{ "internalName": "RateProbation", "title": "Ставка на ИС", "type": "Number", "decimals": 2 },
{ "internalName": "RateAfterProbation", "title": "Ставка после ИС", "type": "Number", "decimals": 2 },
{ "internalName": "Awards", "title": "Премии", "type": "Note" },
{ "internalName": "Bonuses", "title": "Бонусы", "type": "Note" },
{ "internalName": "CompensationPackage", "title": "Компенсационный пакет", "type": "Note" },
{ "internalName": "WorkSchedule", "title": "Режим работы", "type": "Text" },
{ "internalName": "Location", "title": "Локация", "type": "Text" },
{ "internalName": "MaterialResponsibility", "title": "Материальная ответственность", "type": "Boolean" },
{ "internalName": "WorkplaceProvision", "title": "Обеспечение рабочего места", "type": "Note" },
{ "internalName": "ProposedMentor", "title": "Предполагаемый наставник", "type": "User", "userSelectionMode": "PeopleOnly" },
{ "internalName": "DirectManager", "title": "Непосредственный руководитель", "type": "User", "userSelectionMode": "PeopleOnly" },
{ "internalName": "DevelopmentPrograms", "title": "Программы развития и обучения, периодичность", "type": "Note" },
{ "internalName": "DesiredTraining", "title": "Желаемое доп. обучение при выходе на работу", "type": "Note" },
{ "internalName": "HiringDecisionMaker", "title": "Кто принимает решение о приеме (собеседования)", "type": "User", "userSelectionMode": "PeopleOnly", "allowMultiple": true }
]
}
@@ -0,0 +1,39 @@
import * as React from 'react';
import { CollapseSection, FormField, TextInput, TextArea, Toggle, PeopleField } from '../../../shared/ui';
import { ISectionProps, PERSON_PLACEHOLDER } from '../model';
export const ApplicationSection: React.FC<ISectionProps> = ({ data, set, context }) => (
<CollapseSection title="Заявка" icon="clipboard">
<FormField label="Ответственный за подачу заявки" required full>
<PeopleField
context={context}
value={data.Responsible}
onChange={(v) => set('Responsible', v)}
placeholder={PERSON_PLACEHOLDER}
/>
</FormField>
<FormField label="Дата подачи заявки" htmlFor="SubmitDate">
<TextInput id="SubmitDate" type="date" value={data.SubmitDate} onChange={(v) => set('SubmitDate', v)} />
</FormField>
<FormField label="Крайний срок закрытия" htmlFor="ClosingDeadline">
<TextInput
id="ClosingDeadline"
type="date"
value={data.ClosingDeadline}
onChange={(v) => set('ClosingDeadline', v)}
/>
</FormField>
<FormField label="Причина открытия вакансии" htmlFor="OpenReason" full>
<TextArea id="OpenReason" value={data.OpenReason} onChange={(v) => set('OpenReason', v)} placeholder="..." />
</FormField>
<FormField label="Зарегистрирована">
<Toggle checked={data.IsRegistered} onChange={(v) => set('IsRegistered', v)} onLabel="Да" />
</FormField>
<FormField label="Одобрена">
<Toggle checked={data.IsApproved} onChange={(v) => set('IsApproved', v)} onLabel="Да" />
</FormField>
<FormField label="Отметка о выполнении">
<Toggle checked={data.CompletionMark} onChange={(v) => set('CompletionMark', v)} onLabel="Да" />
</FormField>
</CollapseSection>
);
@@ -0,0 +1,74 @@
import * as React from 'react';
import { CollapseSection, FormField, TextInput, TextArea, Toggle, PeopleField, PeopleFieldMulti } from '../../../shared/ui';
import { ISectionProps, PERSON_PLACEHOLDER } from '../model';
export const ConditionsSection: React.FC<ISectionProps> = ({ data, set, context }) => (
<CollapseSection title="Условия работы" icon="chart">
<FormField label="Ставка на ИС" htmlFor="RateProbation">
<TextInput id="RateProbation" type="number" value={data.RateProbation} onChange={(v) => set('RateProbation', v)} />
</FormField>
<FormField label="Ставка после ИС" htmlFor="RateAfterProbation">
<TextInput
id="RateAfterProbation"
type="number"
value={data.RateAfterProbation}
onChange={(v) => set('RateAfterProbation', v)}
/>
</FormField>
<FormField label="Премии" htmlFor="Awards" full>
<TextArea id="Awards" value={data.Awards} onChange={(v) => set('Awards', v)} />
</FormField>
<FormField label="Бонусы" htmlFor="Bonuses" full>
<TextArea id="Bonuses" value={data.Bonuses} onChange={(v) => set('Bonuses', v)} />
</FormField>
<FormField label="Компенсационный пакет" htmlFor="CompensationPackage" full>
<TextArea id="CompensationPackage" value={data.CompensationPackage} onChange={(v) => set('CompensationPackage', v)} />
</FormField>
<FormField label="Режим работы" htmlFor="WorkSchedule">
<TextInput id="WorkSchedule" value={data.WorkSchedule} onChange={(v) => set('WorkSchedule', v)} />
</FormField>
<FormField label="Локация" htmlFor="Location">
<TextInput id="Location" value={data.Location} onChange={(v) => set('Location', v)} />
</FormField>
<FormField label="Материальная ответственность">
<Toggle
checked={data.MaterialResponsibility}
onChange={(v) => set('MaterialResponsibility', v)}
onLabel="Да"
/>
</FormField>
<FormField label="Обеспечение рабочего места" htmlFor="WorkplaceProvision" full>
<TextArea id="WorkplaceProvision" value={data.WorkplaceProvision} onChange={(v) => set('WorkplaceProvision', v)} />
</FormField>
<FormField label="Предполагаемый наставник">
<PeopleField
context={context}
value={data.ProposedMentor}
onChange={(v) => set('ProposedMentor', v)}
placeholder={PERSON_PLACEHOLDER}
/>
</FormField>
<FormField label="Непосредственный руководитель">
<PeopleField
context={context}
value={data.DirectManager}
onChange={(v) => set('DirectManager', v)}
placeholder={PERSON_PLACEHOLDER}
/>
</FormField>
<FormField label="Программы развития и обучения, периодичность" htmlFor="DevelopmentPrograms" full>
<TextArea id="DevelopmentPrograms" value={data.DevelopmentPrograms} onChange={(v) => set('DevelopmentPrograms', v)} />
</FormField>
<FormField label="Желаемое доп. обучение при выходе на работу" htmlFor="DesiredTraining" full>
<TextArea id="DesiredTraining" value={data.DesiredTraining} onChange={(v) => set('DesiredTraining', v)} />
</FormField>
<FormField label="Кто принимает решение о приеме (собеседования)" full>
<PeopleFieldMulti
context={context}
value={data.HiringDecisionMaker}
onChange={(v) => set('HiringDecisionMaker', v)}
placeholder={PERSON_PLACEHOLDER}
/>
</FormField>
</CollapseSection>
);
@@ -0,0 +1,29 @@
import * as React from 'react';
import { CollapseSection, FormField, TextInput, TextArea } from '../../../shared/ui';
import { ISectionProps } from '../model';
export const DepartmentSection: React.FC<ISectionProps> = ({ data, set }) => (
<CollapseSection title="Отдел / Подразделение" icon="building">
<FormField label="Название отдела/департамента" htmlFor="DepartmentName" required full>
<TextInput id="DepartmentName" value={data.DepartmentName} onChange={(v) => set('DepartmentName', v)} />
</FormField>
<FormField label="Количество сотрудников в отделе" htmlFor="DepartmentHeadcount">
<TextInput
id="DepartmentHeadcount"
type="number"
value={data.DepartmentHeadcount}
onChange={(v) => set('DepartmentHeadcount', v)}
/>
</FormField>
<FormField label="Цели, стоящие перед отделом" htmlFor="DepartmentGoals" full>
<TextArea id="DepartmentGoals" value={data.DepartmentGoals} onChange={(v) => set('DepartmentGoals', v)} />
</FormField>
<FormField label="Смежные отделы по бизнес-процессам" htmlFor="RelatedDepartments" full>
<TextArea
id="RelatedDepartments"
value={data.RelatedDepartments}
onChange={(v) => set('RelatedDepartments', v)}
/>
</FormField>
</CollapseSection>
);
@@ -0,0 +1,18 @@
import * as React from 'react';
import { CollapseSection, FormField, TextArea } from '../../../shared/ui';
import { ISectionProps } from '../model';
export const HealthTripsSection: React.FC<ISectionProps> = ({ data, set }) => (
<CollapseSection title="Здоровье и командировки" icon="send">
<FormField label="Приемлемые противопоказания (здоровье)" htmlFor="HealthRestrictions" full>
<TextArea
id="HealthRestrictions"
value={data.HealthRestrictions}
onChange={(v) => set('HealthRestrictions', v)}
/>
</FormField>
<FormField label="Командировки (есть/нет и продолжительность)" htmlFor="BusinessTrips" full>
<TextArea id="BusinessTrips" value={data.BusinessTrips} onChange={(v) => set('BusinessTrips', v)} />
</FormField>
</CollapseSection>
);
@@ -0,0 +1,59 @@
import * as React from 'react';
import { CollapseSection, FormField, TextInput, TextArea, Select } from '../../../shared/ui';
import { ISectionProps, EMPLOYMENT_TYPE_OPTIONS } from '../model';
export const VacancySection: React.FC<ISectionProps> = ({ data, set }) => (
<CollapseSection title="Вакансия" icon="document">
<FormField label="Должность" htmlFor="Position" required full>
<TextInput id="Position" value={data.Position} onChange={(v) => set('Position', v)} />
</FormField>
<FormField label="Код по классификатору" htmlFor="ClassifierCode">
<TextInput id="ClassifierCode" value={data.ClassifierCode} onChange={(v) => set('ClassifierCode', v)} />
</FormField>
<FormField label="Характер занятости" htmlFor="EmploymentType">
<Select
id="EmploymentType"
value={data.EmploymentType}
onChange={(v) => set('EmploymentType', v)}
options={EMPLOYMENT_TYPE_OPTIONS}
placeholder="— выберите —"
/>
</FormField>
<FormField label="Основной функционал" htmlFor="MainFunction" full>
<TextArea id="MainFunction" value={data.MainFunction} onChange={(v) => set('MainFunction', v)} />
</FormField>
<FormField label="Дополнительный функционал" htmlFor="AdditionalFunction" full>
<TextArea id="AdditionalFunction" value={data.AdditionalFunction} onChange={(v) => set('AdditionalFunction', v)} />
</FormField>
<FormField label="Компетенции" htmlFor="Competencies" full>
<TextArea id="Competencies" value={data.Competencies} onChange={(v) => set('Competencies', v)} />
</FormField>
<FormField label="Личностные характеристики" htmlFor="PersonalTraits" full>
<TextArea id="PersonalTraits" value={data.PersonalTraits} onChange={(v) => set('PersonalTraits', v)} />
</FormField>
<FormField label="Образование" htmlFor="Education">
<TextInput id="Education" value={data.Education} onChange={(v) => set('Education', v)} />
</FormField>
<FormField label="Опыт работы" htmlFor="WorkExperience" full>
<TextArea id="WorkExperience" value={data.WorkExperience} onChange={(v) => set('WorkExperience', v)} />
</FormField>
<FormField label="Дополнительное образование" htmlFor="AdditionalEducation" full>
<TextArea id="AdditionalEducation" value={data.AdditionalEducation} onChange={(v) => set('AdditionalEducation', v)} />
</FormField>
<FormField label="Критерии оценки работы" htmlFor="EvaluationCriteria" full>
<TextArea id="EvaluationCriteria" value={data.EvaluationCriteria} onChange={(v) => set('EvaluationCriteria', v)} />
</FormField>
<FormField label="Уровень владения ПК и программами" htmlFor="PcSkills" full>
<TextArea id="PcSkills" value={data.PcSkills} onChange={(v) => set('PcSkills', v)} />
</FormField>
<FormField label="Иностранные языки (уровень владения)" htmlFor="ForeignLanguages" full>
<TextArea id="ForeignLanguages" value={data.ForeignLanguages} onChange={(v) => set('ForeignLanguages', v)} />
</FormField>
<FormField label="Проживание" htmlFor="Residence">
<TextInput id="Residence" value={data.Residence} onChange={(v) => set('Residence', v)} />
</FormField>
<FormField label="Водительские права, стаж вождения" htmlFor="DrivingLicense">
<TextInput id="DrivingLicense" value={data.DrivingLicense} onChange={(v) => set('DrivingLicense', v)} />
</FormField>
</CollapseSection>
);
@@ -0,0 +1,58 @@
import { getSP } from '../../shared/pnp/pnpjs';
import { IFormData } from './model';
const LIST_TITLE = 'Заявка на подбор — данные';
// Поля-люди (один человек): логин → ensureUser → Id в колонку <Field>Id.
const PERSON_FIELDS: (keyof IFormData)[] = ['Responsible', 'ProposedMentor', 'DirectManager'];
// Поля-люди (несколько): логины → массив Id в колонку <Field>Id.
const MULTI_PERSON_FIELDS: (keyof IFormData)[] = ['HiringDecisionMaker'];
// Числовые поля: пустая строка → null, иначе Number().
const NUMBER_FIELDS: (keyof IFormData)[] = ['DepartmentHeadcount', 'RateProbation', 'RateAfterProbation'];
/** Логин → числовой Id пользователя на текущем сайте. */
async function resolveUserId(login: string): Promise<number> {
const ensured = await getSP().web.ensureUser(login); // v4: возвращает ISiteUserInfo с .Id
return ensured.Id;
}
/** Записать заявку «на подбор» в список данных SharePoint. */
export async function submitRecruitingSelection(data: IFormData): Promise<void> {
const sp = getSP();
const item: Record<string, unknown> = {};
// Текст/заметки/выбор/даты/да-нет/числа (людей пропускаем — они ниже).
(Object.keys(data) as (keyof IFormData)[]).forEach((key) => {
if (PERSON_FIELDS.indexOf(key) !== -1 || MULTI_PERSON_FIELDS.indexOf(key) !== -1) {
return;
}
const value = data[key];
if (typeof value === 'boolean') {
item[key] = value;
} else 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);
}
}
// Несколько человек → <Field>Id = массив Id.
for (let i = 0; i < MULTI_PERSON_FIELDS.length; i++) {
const logins = data[MULTI_PERSON_FIELDS[i]] as string[];
const ids: number[] = [];
for (let j = 0; j < logins.length; j++) {
ids.push(await resolveUserId(logins[j]));
}
item[`${MULTI_PERSON_FIELDS[i]}Id`] = ids;
}
await sp.web.lists.getByTitle(LIST_TITLE).items.add(item);
}
@@ -0,0 +1,28 @@
import * as React from 'react';
import { IRequestFormProps, RequestTypeId } from '../models/types';
type FormComponent = React.ComponentType<IRequestFormProps>;
/**
* Реестр форм: id типа заявки → лениво загружаемая форма.
* Каждая форма — отдельный чанк (React.lazy): в бандл первого экрана не попадает,
* подтягивается только при открытии. Добавить форму = папка + строка здесь.
*/
const formRegistry: Record<string, React.LazyExoticComponent<FormComponent>> = {
'recruiting-selection': React.lazy(
() =>
import(
/* webpackChunkName: 'form-recruiting-selection' */ './RecruitingSelection/RecruitingSelectionForm'
)
),
'recruiting-hire': React.lazy(
() =>
import(/* webpackChunkName: 'form-recruiting-hire' */ './RecruitingHire/RecruitingHireForm')
)
};
export function getFormComponent(
id: RequestTypeId
): React.LazyExoticComponent<FormComponent> | undefined {
return formRegistry[id];
}