timur.gorodetskiy/request-portal
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: implemented form lifecycle hool and state machine

Browse Source
This commit is contained in:
Тимур Городецкий
2026-08-04 17:00:04 +05:00
parent ed21944628
commit ba4e3feee5
25 changed files with 504 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/_design-tokens.scss
+14
View File
@@ -125,6 +125,20 @@ $sp-7: 28px; $sp-8: 32px;
}
}
// Вид поля «только чтение» (режим согласующего / отправленная заявка):
// приглушённый фон, серый текст, без золотого фокуса — визуально «неактивно».
// $sel — псевдокласс состояния поля (:read-only для input/textarea, :disabled для select).
@mixin readonly-field($sel) {
&#{$sel},
&#{$sel}:focus {
background: $gray-50;
color: $gray-500;
border-color: $gray-200;
box-shadow: none;
cursor: default;
}
}
@mixin hairline {
height: 1px;
background: $grad-hairline;
src/webparts/requestPortal/forms/RecruitingHire/RecruitingHireForm.tsx
+79 -74
View File
@@ -1,12 +1,25 @@
import * as React from 'react';
import { useState, useMemo, useCallback } from 'react';
import styles from './RecruitingHireForm.module.scss';
import { Button, Alert, FormCard, FormActions, FileDropzone, CollapseSection, FormField, Icon } from '../../shared/ui';
import {
Alert,
FormCard,
FormModeProvider,
FileDropzone,
CollapseSection,
FormField,
Icon,
RequestNumber,
SubmitActions,
useRequestSubmit
} from '../../shared/ui';
import {
ApprovalMatrix,
StatusBadge,
useMatrixEditor,
getPlannedMatrix,
REQUEST_STATUS,
isEditableStatus,
IApproverToWrite
} from '../../shared/approval';
import { uploadAttachments } from '../../shared/attachments/attachments.service';
@@ -18,21 +31,16 @@ import { CandidateSection } from './sections/CandidateSection';
import { PpeSection } from './sections/PpeSection';
import { ConditionsSection } from './sections/ConditionsSection';
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 [files, setFiles] = useState<File[]>([]);
const [requestId, setRequestId] = useState<number | undefined>(undefined);
const [requestStatus, setRequestStatus] = useState<string | undefined>(undefined);
const submit = useRequestSubmit();
const set: SetField = (key, value) => {
setData((prev) => ({ ...prev, [key]: value }));
setActionStatus('idle');
};
const readOnly = !isEditableStatus(requestStatus);
const set: SetField = (key, value) => setData((prev) => ({ ...prev, [key]: value }));
// Маршрут согласования (планируемый) резолвится по email инициатора — текущего
// пользователя (кандидата ещё нет в системе).
@@ -42,7 +50,7 @@ const RecruitingHireForm: React.FC<IRequestFormProps> = ({ requestType, context,
() => getPlannedMatrix(context, HIRE_REQUEST_TYPE_ID, userEmail, approval, 'Approval'),
[context, userEmail, approval]
);
const matrix = useMatrixEditor(loadMatrix, userEmail, true, true, (login) =>
const matrix = useMatrixEditor(loadMatrix, userEmail, !readOnly, true, (login) =>
approval.getJobTitle(login)
);
@@ -55,41 +63,36 @@ const RecruitingHireForm: React.FC<IRequestFormProps> = ({ requestType, context,
approval.getJobTitle(login)
);
const saving = actionStatus === 'saving';
const isValid = data.CandidateName.trim().length > 0 && data.Position.trim().length > 0;
const validate = (): string | undefined =>
isValid ? undefined : 'Заполните обязательные поля: Ф.И.О. кандидата, Должность.';
const toApprovers = (rows: typeof matrix.rows): IApproverToWrite[] =>
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 {
const id = await saveHireRequest(
data,
toApprovers(matrix.rows),
toApprovers(executors.rows),
requestStatus
);
const save = (status: string): (() => Promise<void>) => async (): Promise<void> => {
const id = await saveHireRequest(
requestId,
data,
toApprovers(matrix.rows),
toApprovers(executors.rows),
status
);
setRequestId(id);
setRequestStatus(status);
if (files.length > 0) {
await uploadAttachments(DATA_LIST_TITLE, id, files); // файлы — после создания элемента
setStatus(requestStatus);
setActionStatus('success');
if (onSaved) {
onSaved();
}
} catch (e) {
setActionStatus('error');
setError(`Ошибка сохранения: ${(e as Error).message}`);
setFiles([]); // выгруженные файлы убираем, чтобы пересохранение не дублировало
}
}
if (onSaved) {
onSaved();
}
};
const handleSaveDraft = (): Promise<void> => run('draft', REQUEST_STATUS.draft);
const handleSubmit = (): Promise<void> => run('submit', REQUEST_STATUS.onApproval);
const handleSaveDraft = (): Promise<void> =>
submit.run('draft', save(REQUEST_STATUS.draft), validate);
const handleSubmit = (): Promise<void> =>
submit.run('submit', save(REQUEST_STATUS.onApproval), validate);
const sectionProps = { data, set, context };
@@ -100,32 +103,39 @@ const RecruitingHireForm: React.FC<IRequestFormProps> = ({ requestType, context,
<span>К списку заявок</span>
</button>
<FormCard title={requestType.title} subtitle="Категория: Отдел рекрутинга">
{status && (
<div className={styles.statusRow}>
<span className={styles.statusPill}>{status}</span>
</div>
)}
{actionStatus === 'success' && (
<FormCard
title={requestType.title}
subtitle="Категория: Отдел рекрутинга"
headerRight={
requestId || requestStatus ? (
<>
{requestStatus && <StatusBadge status={requestStatus} />}
{requestId && <RequestNumber id={requestId} />}
</>
) : undefined
}
>
{submit.savedKind && !submit.error && (
<Alert variant="ok">
{actionKind === 'draft'
? 'Черновик сохранён.'
: 'Заявка отправлена на согласование.'}
{submit.savedKind === 'draft' ? 'Черновик сохранён.' : 'Заявка отправлена на согласование.'}
</Alert>
)}
{error && <Alert variant="err">{error}</Alert>}
{submit.error && <Alert variant="err">{submit.error}</Alert>}
<ApplicationSection {...sectionProps} />
<CandidateSection {...sectionProps} />
<PpeSection {...sectionProps} />
<ConditionsSection {...sectionProps} />
<FormModeProvider readOnly={readOnly}>
<ApplicationSection {...sectionProps} />
<CandidateSection {...sectionProps} />
<PpeSection {...sectionProps} />
<ConditionsSection {...sectionProps} />
</FormModeProvider>
<CollapseSection title="Вложения" icon="upload">
<FormField label="Файлы" full>
<FileDropzone files={files} onChange={setFiles} />
</FormField>
</CollapseSection>
{!readOnly && (
<CollapseSection title="Вложения" icon="upload">
<FormField label="Файлы" full>
<FileDropzone files={files} onChange={setFiles} />
</FormField>
</CollapseSection>
)}
<ApprovalMatrix editor={matrix} search={(q) => approval.searchUsers(q)} />
@@ -139,19 +149,14 @@ const RecruitingHireForm: React.FC<IRequestFormProps> = ({ requestType, context,
/>
)}
<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>
<SubmitActions
submit={submit}
isValid={isValid}
readOnly={readOnly}
onCancel={onCancel}
onSaveDraft={handleSaveDraft}
onSubmit={handleSubmit}
/>
</FormCard>
</div>
);
src/webparts/requestPortal/forms/RecruitingHire/RecruitingHireView.tsx
+9 -3
View File
@@ -3,7 +3,7 @@ import { useState, useEffect, useMemo } from 'react';
import type { WebPartContext } from '@microsoft/sp-webpart-base';
import styles from './RecruitingHireView.module.scss';
import { Alert, FormCard, FormModeProvider, CollapseSection, FormField, AttachmentList } from '../../shared/ui';
import { ApproverService, DecisionPanel } from '../../shared/approval';
import { ApproverService, DecisionPanel, StatusBadge } from '../../shared/approval';
import { getAttachments, IAttachmentInfo } from '../../shared/attachments/attachments.service';
import { IFormData, EMPTY_DATA, SetField } from './model';
import { loadHireRequest } from './load';
@@ -26,6 +26,7 @@ const NOOP_SET: SetField = () => undefined;
// через <FormModeProvider readOnly> — поля сами становятся неизменяемыми.
const RecruitingHireView: React.FC<IRecruitingHireViewProps> = ({ context, itemId }) => {
const [data, setData] = useState<IFormData>(EMPTY_DATA);
const [status, setStatus] = useState<string>('');
const [attachments, setAttachments] = useState<IAttachmentInfo[]>([]);
const [loading, setLoading] = useState<boolean>(true);
const [error, setError] = useState<string | null>(null);
@@ -42,7 +43,8 @@ const RecruitingHireView: React.FC<IRecruitingHireViewProps> = ({ context, itemI
Promise.all([loadHireRequest(itemId), getAttachments(DATA_LIST_TITLE, itemId)])
.then(([loaded, files]) => {
if (alive) {
setData(loaded);
setData(loaded.data);
setStatus(loaded.status);
setAttachments(files);
setError(null);
setLoading(false);
@@ -74,7 +76,11 @@ const RecruitingHireView: React.FC<IRecruitingHireViewProps> = ({ context, itemI
return (
<div>
<FormCard title="Заявка на прием" subtitle={`№${itemId} · режим согласования`}>
<FormCard
title="Заявка на прием"
subtitle={`№${itemId} · режим согласования`}
headerRight={status ? <StatusBadge status={status} /> : undefined}
>
<FormModeProvider readOnly>
<ApplicationSection {...sectionProps} />
<CandidateSection {...sectionProps} />
src/webparts/requestPortal/forms/RecruitingHire/load.ts
+9 -4
View File
@@ -10,13 +10,18 @@ const SCALAR_FIELDS: (keyof IFormData)[] = [
'SalaryAfterProbation', 'WorkSchedule', 'EmploymentForm'
];
/** Прочитать заявку «на прием» по id и разложить в модель формы (для режима чтения). */
export async function loadHireRequest(itemId: number): Promise<IFormData> {
export interface ILoadedRequest {
data: IFormData;
status: string;
}
/** Прочитать заявку «на прием» по id: модель формы + статус (для режима чтения). */
export async function loadHireRequest(itemId: number): Promise<ILoadedRequest> {
const sp = getSP();
const item = (await sp.web.lists
.getByTitle(LIST_TITLE)
.items.getById(itemId)
.select(...SCALAR_FIELDS)()) as Record<string, unknown>;
.select(...SCALAR_FIELDS, 'Status')()) as Record<string, unknown>;
const data: IFormData = { ...EMPTY_DATA };
const writable = data as unknown as Record<string, string>;
@@ -32,5 +37,5 @@ export async function loadHireRequest(itemId: number): Promise<IFormData> {
}
});
return data;
return { data, status: (item.Status as string) || '' };
}
src/webparts/requestPortal/forms/RecruitingHire/submit.ts
+17 -6
View File
@@ -21,11 +21,10 @@ function buildTitle(data: IFormData): string {
return ['Прием', data.CandidateName, data.Position].filter(Boolean).join(' — ');
}
/** Записать контент заявки со статусом. Возвращает Id созданного элемента. */
async function writeContent(data: IFormData, status: string): Promise<number> {
/** Поля элемента списка данных из модели формы (текст/выбор/даты/числа). */
function buildItem(data: IFormData, status: string): Record<string, unknown> {
const item: Record<string, unknown> = { Title: buildTitle(data), Status: status };
// Текст/выбор/даты/числа.
(Object.keys(data) as (keyof IFormData)[]).forEach((key) => {
const value = data[key];
if (NUMBER_FIELDS.indexOf(key) !== -1) {
@@ -35,23 +34,35 @@ async function writeContent(data: IFormData, status: string): Promise<number> {
}
});
const added = await getSP().web.lists.getByTitle(DATA_LIST_TITLE).items.add(item);
return (added as { Id: number }).Id;
return item;
}
/**
* Сохранить заявку «на прием»: контент + маршрут (согласующие + исполнители) со статусом.
* existingId задан → обновляем ту же запись (черновик/доработка), иначе создаём новую.
* status = «Черновик» (сохранение) или «На согласовании» (отправка).
* executors может быть пустым — тогда после согласования заявка станет «Согласовано».
* Возвращает Id заявки.
*/
export async function saveHireRequest(
existingId: number | undefined,
data: IFormData,
approvers: IApproverToWrite[],
executors: IApproverToWrite[],
status: string
): Promise<number> {
const id = await writeContent(data, status);
const list = getSP().web.lists.getByTitle(DATA_LIST_TITLE);
const item = buildItem(data, status);
let id: number;
if (existingId) {
await list.items.getById(existingId).update(item);
id = existingId;
} else {
const added = await list.items.add(item);
id = (added as { Id: number }).Id;
}
await writeRoute(hireApprovalService(), id, approvers, executors, status);
return id;
}
src/webparts/requestPortal/forms/WorkplaceSetup/WorkplaceSetupForm.tsx
+81 -64
View File
@@ -1,12 +1,25 @@
import * as React from 'react';
import { useState, useMemo, useCallback, useEffect } from 'react';
import styles from './WorkplaceSetupForm.module.scss';
import { Button, Alert, FormCard, FormActions, FileDropzone, CollapseSection, FormField, Icon } from '../../shared/ui';
import {
Alert,
FormCard,
FormModeProvider,
FileDropzone,
CollapseSection,
FormField,
Icon,
RequestNumber,
SubmitActions,
useRequestSubmit
} from '../../shared/ui';
import {
ApprovalMatrix,
StatusBadge,
useMatrixEditor,
getPlannedMatrix,
REQUEST_STATUS,
isEditableStatus,
IApproverToWrite
} from '../../shared/approval';
import { uploadAttachments } from '../../shared/attachments/attachments.service';
@@ -22,20 +35,18 @@ import { loadPrefillFromHire } from './prefill';
import { EmployeeSection } from './sections/EmployeeSection';
import { EquipmentSection } from './sections/EquipmentSection';
type ActionStatus = 'idle' | 'saving' | 'success' | 'error';
type ActionKind = 'draft' | 'submit';
const WorkplaceSetupForm: React.FC<IRequestFormProps> = ({ requestType, context, onCancel, onSaved, sourceId }) => {
const [data, setData] = useState<IFormData>(EMPTY_DATA);
const [actionStatus, setActionStatus] = useState<ActionStatus>('idle');
const [actionKind, setActionKind] = useState<ActionKind | undefined>(undefined);
const [error, setError] = useState<string | null>(null);
const [files, setFiles] = useState<File[]>([]);
// Id и статус текущей заявки: заполняются после первого сохранения.
const [requestId, setRequestId] = useState<number | undefined>(undefined);
const [requestStatus, setRequestStatus] = useState<string | undefined>(undefined);
const submit = useRequestSubmit();
const set: SetField = (key, value) => {
setData((prev) => ({ ...prev, [key]: value }));
setActionStatus('idle');
};
// Редактировать можно новую/черновик/возвращённую/отклонённую; иначе только чтение.
const readOnly = !isEditableStatus(requestStatus);
const set: SetField = (key, value) => setData((prev) => ({ ...prev, [key]: value }));
// Предзаполнение из «Заявки на прием», если форма открыта «на основе» (rpsource).
useEffect(() => {
@@ -51,7 +62,7 @@ const WorkplaceSetupForm: React.FC<IRequestFormProps> = ({ requestType, context,
})
.catch((e) => {
if (alive) {
setError(`Не удалось предзаполнить из заявки на прием №${sourceId}: ${(e as Error).message}`);
submit.setError(`Не удалось предзаполнить из заявки на прием №${sourceId}: ${(e as Error).message}`);
}
});
return () => {
@@ -65,7 +76,7 @@ const WorkplaceSetupForm: React.FC<IRequestFormProps> = ({ requestType, context,
() => getPlannedMatrix(context, WORKPLACE_REQUEST_TYPE_ID, userEmail, approval, 'Approval'),
[context, userEmail, approval]
);
const matrix = useMatrixEditor(loadMatrix, userEmail, true, true, (login) => approval.getJobTitle(login));
const matrix = useMatrixEditor(loadMatrix, userEmail, !readOnly, true, (login) => approval.getJobTitle(login));
// Фаза исполнения: исполнители из маршрута (status='Execution'), только для чтения.
const loadExecutors = useCallback(
@@ -76,41 +87,37 @@ const WorkplaceSetupForm: React.FC<IRequestFormProps> = ({ requestType, context,
approval.getJobTitle(login)
);
const saving = actionStatus === 'saving';
const isValid = data.FullName.trim().length > 0 && data.Position.trim().length > 0;
const validate = (): string | undefined =>
isValid ? undefined : 'Заполните обязательные поля: Ф.И.О., Должность.';
const toApprovers = (rows: typeof matrix.rows): IApproverToWrite[] =>
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 {
const id = await saveWorkplaceRequest(
data,
toApprovers(matrix.rows),
toApprovers(executors.rows),
requestStatus,
sourceId
);
const save = (status: string): (() => Promise<void>) => async (): Promise<void> => {
const id = await saveWorkplaceRequest(
requestId,
data,
toApprovers(matrix.rows),
toApprovers(executors.rows),
status,
sourceId
);
setRequestId(id);
setRequestStatus(status);
if (files.length > 0) {
await uploadAttachments(DATA_LIST_TITLE, id, files);
setActionStatus('success');
if (onSaved) {
onSaved();
}
} catch (e) {
setActionStatus('error');
setError(`Ошибка сохранения: ${(e as Error).message}`);
setFiles([]); // выгруженные файлы убираем, чтобы пересохранение не дублировало
}
}
if (onSaved) {
onSaved();
}
};
const handleSaveDraft = (): Promise<void> => run('draft', REQUEST_STATUS.draft);
const handleSubmit = (): Promise<void> => run('submit', REQUEST_STATUS.onApproval);
const handleSaveDraft = (): Promise<void> =>
submit.run('draft', save(REQUEST_STATUS.draft), validate);
const handleSubmit = (): Promise<void> =>
submit.run('submit', save(REQUEST_STATUS.onApproval), validate);
const sectionProps = { data, set, context };
@@ -121,22 +128,37 @@ const WorkplaceSetupForm: React.FC<IRequestFormProps> = ({ requestType, context,
<span>К списку заявок</span>
</button>
<FormCard title={requestType.title} subtitle="Категория: IT">
{actionStatus === 'success' && (
<FormCard
title={requestType.title}
subtitle="Категория: IT"
headerRight={
requestId || requestStatus ? (
<>
{requestStatus && <StatusBadge status={requestStatus} />}
{requestId && <RequestNumber id={requestId} />}
</>
) : undefined
}
>
{submit.savedKind && !submit.error && (
<Alert variant="ok">
{actionKind === 'draft' ? 'Черновик сохранён.' : 'Заявка отправлена на согласование.'}
{submit.savedKind === 'draft' ? 'Черновик сохранён.' : 'Заявка отправлена на согласование.'}
</Alert>
)}
{error && <Alert variant="err">{error}</Alert>}
{submit.error && <Alert variant="err">{submit.error}</Alert>}
<EmployeeSection {...sectionProps} />
<EquipmentSection {...sectionProps} />
<FormModeProvider readOnly={readOnly}>
<EmployeeSection {...sectionProps} />
<EquipmentSection {...sectionProps} />
</FormModeProvider>
<CollapseSection title="Вложения" icon="upload">
<FormField label="Файлы" full>
<FileDropzone files={files} onChange={setFiles} />
</FormField>
</CollapseSection>
{!readOnly && (
<CollapseSection title="Вложения" icon="upload">
<FormField label="Файлы" full>
<FileDropzone files={files} onChange={setFiles} />
</FormField>
</CollapseSection>
)}
<ApprovalMatrix editor={matrix} search={(q) => approval.searchUsers(q)} />
@@ -150,19 +172,14 @@ const WorkplaceSetupForm: React.FC<IRequestFormProps> = ({ requestType, context,
/>
)}
<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>
<SubmitActions
submit={submit}
isValid={isValid}
readOnly={readOnly}
onCancel={onCancel}
onSaveDraft={handleSaveDraft}
onSubmit={handleSubmit}
/>
</FormCard>
</div>
);
src/webparts/requestPortal/forms/WorkplaceSetup/WorkplaceSetupView.tsx
+9 -3
View File
@@ -3,7 +3,7 @@ import { useState, useEffect, useMemo } from 'react';
import type { WebPartContext } from '@microsoft/sp-webpart-base';
import styles from './WorkplaceSetupView.module.scss';
import { Alert, FormCard, FormModeProvider, CollapseSection, FormField, AttachmentList } from '../../shared/ui';
import { ApproverService, DecisionPanel } from '../../shared/approval';
import { ApproverService, DecisionPanel, StatusBadge } from '../../shared/approval';
import { getAttachments, IAttachmentInfo } from '../../shared/attachments/attachments.service';
import { IFormData, EMPTY_DATA, SetField } from './model';
import { loadWorkplaceRequest } from './load';
@@ -21,6 +21,7 @@ const NOOP_SET: SetField = () => undefined;
// Заявка «орг. рабочего места» только для просмотра (режим согласующего).
const WorkplaceSetupView: React.FC<IWorkplaceSetupViewProps> = ({ context, itemId }) => {
const [data, setData] = useState<IFormData>(EMPTY_DATA);
const [status, setStatus] = useState<string>('');
const [attachments, setAttachments] = useState<IAttachmentInfo[]>([]);
const [loading, setLoading] = useState<boolean>(true);
const [error, setError] = useState<string | null>(null);
@@ -36,7 +37,8 @@ const WorkplaceSetupView: React.FC<IWorkplaceSetupViewProps> = ({ context, itemI
Promise.all([loadWorkplaceRequest(itemId), getAttachments(DATA_LIST_TITLE, itemId)])
.then(([loaded, files]) => {
if (alive) {
setData(loaded);
setData(loaded.data);
setStatus(loaded.status);
setAttachments(files);
setError(null);
setLoading(false);
@@ -68,7 +70,11 @@ const WorkplaceSetupView: React.FC<IWorkplaceSetupViewProps> = ({ context, itemI
return (
<div>
<FormCard title="Организация рабочего места" subtitle={`№${itemId} · режим согласования`}>
<FormCard
title="Организация рабочего места"
subtitle={`№${itemId} · режим согласования`}
headerRight={status ? <StatusBadge status={status} /> : undefined}
>
<FormModeProvider readOnly>
<EmployeeSection {...sectionProps} />
<EquipmentSection {...sectionProps} />
src/webparts/requestPortal/forms/WorkplaceSetup/load.ts
+9 -4
View File
@@ -8,12 +8,17 @@ const SCALAR_FIELDS: (keyof IFormData)[] = [
'Software', 'AccessRights'
];
/** Прочитать заявку по id и разложить в модель формы (для режима чтения). */
export async function loadWorkplaceRequest(itemId: number): Promise<IFormData> {
export interface ILoadedRequest {
data: IFormData;
status: string;
}
/** Прочитать заявку по id: модель формы + статус (для режима чтения). */
export async function loadWorkplaceRequest(itemId: number): Promise<ILoadedRequest> {
const item = (await getSP()
.web.lists.getByTitle(LIST_TITLE)
.items.getById(itemId)
.select(...SCALAR_FIELDS, 'NeedsEquipment')()) as Record<string, unknown>;
.select(...SCALAR_FIELDS, 'NeedsEquipment', 'Status')()) as Record<string, unknown>;
const data: IFormData = { ...EMPTY_DATA };
const writable = data as unknown as Record<string, string>;
@@ -31,5 +36,5 @@ export async function loadWorkplaceRequest(itemId: number): Promise<IFormData> {
data.NeedsEquipment = item.NeedsEquipment === true;
return data;
return { data, status: (item.Status as string) || '' };
}
src/webparts/requestPortal/forms/WorkplaceSetup/prefill.ts
+1 -1
View File
@@ -6,7 +6,7 @@ import { IFormData, EMPTY_DATA } from './model';
* Копируются согласованные поля; остальное остаётся пустым для ручного заполнения.
*/
export async function loadPrefillFromHire(hireId: number): Promise<IFormData> {
const hire = await loadHireRequest(hireId);
const { data: hire } = await loadHireRequest(hireId);
return {
...EMPTY_DATA,
FullName: hire.CandidateName,
src/webparts/requestPortal/forms/WorkplaceSetup/submit.ts
+18 -9
View File
@@ -17,11 +17,8 @@ function buildTitle(data: IFormData): string {
return ['Раб. место', data.FullName, data.Position].filter(Boolean).join(' — ');
}
/**
* Записать контент заявки. sourceHireId — id исходной «Заявки на прием»
* (записывается в lookup-колонку SourceHire для прослеживаемости). Возвращает Id.
*/
async function writeContent(data: IFormData, status: string, sourceHireId?: number): Promise<number> {
/** Поля элемента списка данных из модели формы. */
function buildItem(data: IFormData, status: string, sourceHireId?: number): Record<string, unknown> {
const item: Record<string, unknown> = { Title: buildTitle(data), Status: status };
(Object.keys(data) as (keyof IFormData)[]).forEach((key) => {
@@ -37,23 +34,35 @@ async function writeContent(data: IFormData, status: string, sourceHireId?: numb
item.SourceHireId = sourceHireId; // lookup → «Прием на работу — данные»
}
const added = await getSP().web.lists.getByTitle(DATA_LIST_TITLE).items.add(item);
return (added as { Id: number }).Id;
return item;
}
/**
* Сохранить заявку «орг. рабочего места»: контент + маршрут (согласующие + исполнители).
* existingId задан → обновляем ту же запись (черновик/доработка), иначе создаём новую.
* Исполнители пишутся сразу — фаза исполнения стартует автоматически после согласования.
* sourceHireId — если заявка создана на основе «прием».
* sourceHireId — если заявка создана на основе «прием». Возвращает Id заявки.
*/
export async function saveWorkplaceRequest(
existingId: number | undefined,
data: IFormData,
approvers: IApproverToWrite[],
executors: IApproverToWrite[],
status: string,
sourceHireId?: number
): Promise<number> {
const id = await writeContent(data, status, sourceHireId);
const list = getSP().web.lists.getByTitle(DATA_LIST_TITLE);
const item = buildItem(data, status, sourceHireId);
let id: number;
if (existingId) {
await list.items.getById(existingId).update(item);
id = existingId;
} else {
const added = await list.items.add(item);
id = (added as { Id: number }).Id;
}
await writeRoute(workplaceApprovalService(), id, approvers, executors, status);
return id;
}
src/webparts/requestPortal/shared/approval/index.ts
+3
View File
@@ -4,6 +4,8 @@ export {
REQUEST_STATUS_CHOICES,
APPROVAL_PHASE,
APPROVAL_PHASE_CHOICES,
EDITABLE_STATUSES,
isEditableStatus,
} from './models/statuses';
export type { ISiteUser } from './models/ISiteUser';
export type { IMatrixRow } from './models/IMatrixRow';
@@ -26,3 +28,4 @@ export type { IUseMatrixEditor } from './useMatrixEditor';
export { ApprovalMatrix } from './ui/ApprovalMatrix';
export { UserPicker } from './ui/UserPicker';
export { DecisionPanel } from './ui/DecisionPanel';
export { StatusBadge } from './ui/StatusBadge';
src/webparts/requestPortal/shared/approval/models/statuses.ts
+14
View File
@@ -13,6 +13,20 @@ export const REQUEST_STATUS = {
closed: 'Закрыта',
} as const;
// Статусы, при которых заявку ещё можно править (форма редактируема).
// Всё остальное (На согласовании / Согласовано / Выполнение / Закрыта) — только чтение.
// «Отклонено» здесь по решению 2026-08-04: отклонённую можно доработать и переотправить.
export const EDITABLE_STATUSES: string[] = [
REQUEST_STATUS.draft,
REQUEST_STATUS.returned,
REQUEST_STATUS.rejected,
];
// Новая (без статуса) или заявка в редактируемом статусе → форму можно менять.
export function isEditableStatus(status: string | undefined): boolean {
return !status || EDITABLE_STATUSES.indexOf(status) !== -1;
}
// Полный набор значений для Choice-колонки при провижининге.
export const REQUEST_STATUS_CHOICES: string[] = [
REQUEST_STATUS.draft,
src/webparts/requestPortal/shared/approval/ui/StatusBadge.module.scss
+48
View File
@@ -0,0 +1,48 @@
@import '../../../../../styles/design-tokens';
.badge {
display: inline-flex;
align-items: center;
padding: 5px 12px;
border-radius: $r-sm;
font-family: $font-sans;
font-size: 12.5px;
font-weight: 600;
letter-spacing: .2px;
white-space: nowrap;
}
.draft {
background: $gray-100;
color: $gray-700;
}
.onApproval {
background: $blue-50;
color: $blue-600;
}
.approved {
background: $green-50;
color: $green-600;
}
.rejected {
background: $red-50;
color: $red-500;
}
.returned {
background: $gold-50;
color: $amber-700;
}
.execution {
background: $navy-50;
color: $navy-800;
}
.closed {
background: $gray-100;
color: $gray-500;
}
src/webparts/requestPortal/shared/approval/ui/StatusBadge.tsx
+19
View File
@@ -0,0 +1,19 @@
import * as React from 'react';
import styles from './StatusBadge.module.scss';
import { REQUEST_STATUS } from '../models/statuses';
// Цвет бейджа по статусу заявки. Неизвестный статус → нейтральный (как черновик).
const VARIANT: Record<string, string> = {
[REQUEST_STATUS.draft]: styles.draft,
[REQUEST_STATUS.onApproval]: styles.onApproval,
[REQUEST_STATUS.approved]: styles.approved,
[REQUEST_STATUS.rejected]: styles.rejected,
[REQUEST_STATUS.returned]: styles.returned,
[REQUEST_STATUS.execution]: styles.execution,
[REQUEST_STATUS.closed]: styles.closed,
};
/** Цветная плашка статуса заявки (шапка формы / просмотра). */
export const StatusBadge: React.FC<{ status: string }> = ({ status }) => (
<span className={`${styles.badge} ${VARIANT[status] || styles.draft}`}>{status}</span>
);
src/webparts/requestPortal/shared/ui/FormCard/FormCard.module.scss
+14
View File
@@ -8,6 +8,13 @@
padding: 32px;
}
.header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.title {
font-family: $font-serif;
font-size: $fs-form-title;
@@ -15,6 +22,13 @@
color: $navy-900;
}
.headerRight {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 8px;
}
.subtitle {
font-size: 12px;
color: $gray-400;
src/webparts/requestPortal/shared/ui/FormCard/FormCard.tsx
+10 -3
View File
@@ -4,15 +4,22 @@ import styles from './FormCard.module.scss';
interface IFormCardProps {
title: string;
subtitle?: string;
/** Контент в правом верхнем углу шапки (например, номер заявки). */
headerRight?: React.ReactNode;
children: React.ReactNode;
}
/** Белая карточка формы: заголовок (Lora) + золотой hairline + содержимое. */
export const FormCard: React.FC<IFormCardProps> = ({ title, subtitle, children }) => {
export const FormCard: React.FC<IFormCardProps> = ({ title, subtitle, headerRight, children }) => {
return (
<div className={styles.card}>
<div className={styles.title}>{title}</div>
{subtitle && <div className={styles.subtitle}>{subtitle}</div>}
<div className={styles.header}>
<div>
<div className={styles.title}>{title}</div>
{subtitle && <div className={styles.subtitle}>{subtitle}</div>}
</div>
{headerRight && <div className={styles.headerRight}>{headerRight}</div>}
</div>
<hr className={styles.hairline} />
{children}
</div>
src/webparts/requestPortal/shared/ui/RequestNumber/RequestNumber.module.scss
+16
View File
@@ -0,0 +1,16 @@
@import '../../../../../styles/design-tokens';
.badge {
display: inline-flex;
align-items: center;
padding: 5px 12px;
border: 1px solid $gray-200;
border-radius: $r-sm;
background: $navy-50;
color: $navy-800;
font-family: $font-sans;
font-size: 13px;
font-weight: 600;
letter-spacing: .3px;
white-space: nowrap;
}
src/webparts/requestPortal/shared/ui/RequestNumber/RequestNumber.tsx
+7
View File
@@ -0,0 +1,7 @@
import * as React from 'react';
import styles from './RequestNumber.module.scss';
/** Номер заявки (Id элемента списка) — плашка в правом углу шапки формы. */
export const RequestNumber: React.FC<{ id: number }> = ({ id }) => (
<span className={styles.badge}>№{id}</span>
);
src/webparts/requestPortal/shared/ui/Select/Select.module.scss
+1
View File
@@ -16,4 +16,5 @@
transition: .18s;
@include input-focus-gold;
@include readonly-field(':disabled');
}
src/webparts/requestPortal/shared/ui/SubmitActions/SubmitActions.tsx
+50
View File
@@ -0,0 +1,50 @@
import * as React from 'react';
import { Button } from '../Button/Button';
import { Icon } from '../Icon/Icon';
import { FormActions } from '../FormActions/FormActions';
import { IRequestSubmit } from '../useRequestSubmit';
export interface ISubmitActionsProps {
submit: IRequestSubmit;
isValid: boolean;
/** Заявка в нередактируемом статусе (На согласовании/…): сохранять нельзя. */
readOnly: boolean;
onCancel: () => void;
onSaveDraft: () => void;
onSubmit: () => void;
/** Подпись основной кнопки. По умолчанию — «Отправить на согласование». */
submitLabel?: string;
}
// Единый ряд кнопок форм подачи: Отмена / Сохранить черновик / Отправить.
// Логика доступности — здесь, в одном месте, чтобы все формы вели себя одинаково:
// • сохранять/отправлять нельзя, пока идёт сохранение или заявка уже read-only;
// • «Отмена» доступна всегда (возврат к списку), кроме момента сохранения.
export const SubmitActions: React.FC<ISubmitActionsProps> = ({
submit,
isValid,
readOnly,
onCancel,
onSaveDraft,
onSubmit,
submitLabel = 'Отправить на согласование',
}) => {
const { saving, kind } = submit;
const locked = saving || readOnly;
return (
<FormActions>
<Button variant="secondary" onClick={onCancel} disabled={saving}>
Отмена
</Button>
<Button variant="secondary" onClick={onSaveDraft} disabled={!isValid || locked}>
<Icon name="document" size="sm" />
Сохранить черновик
</Button>
<Button variant="accent" onClick={onSubmit} disabled={!isValid || locked}>
<Icon name="send" size="sm" />
{saving && kind === 'submit' ? 'Отправка…' : submitLabel}
</Button>
</FormActions>
);
};
src/webparts/requestPortal/shared/ui/TextArea/TextArea.module.scss
+1
View File
@@ -13,6 +13,7 @@
transition: .18s;
@include input-focus-gold;
@include readonly-field(':read-only');
&::placeholder {
color: $gray-400;
src/webparts/requestPortal/shared/ui/TextInput/TextInput.module.scss
+1
View File
@@ -11,6 +11,7 @@
transition: .18s;
@include input-focus-gold;
@include readonly-field(':read-only');
&::placeholder {
color: $gray-400;
src/webparts/requestPortal/shared/ui/Toggle/Toggle.module.scss
+10
View File
@@ -49,6 +49,16 @@
box-shadow: 0 0 0 3px rgba(212, 160, 30, .25);
}
// Только чтение: приглушаем переключатель и подпись.
.input:disabled + .track {
opacity: .5;
cursor: default;
}
.input:disabled ~ .text {
color: $gray-400;
}
.text {
font-size: 13px;
color: $gray-700;
src/webparts/requestPortal/shared/ui/index.ts
+4
View File
@@ -19,3 +19,7 @@ export { PeopleField } from './PeopleField/PeopleField';
export { PeopleFieldMulti } from './PeopleField/PeopleFieldMulti';
export { FormModeProvider, useFormReadOnly } from './FormMode';
export { Icon } from './Icon/Icon';
export { SubmitActions } from './SubmitActions/SubmitActions';
export { RequestNumber } from './RequestNumber/RequestNumber';
export { useRequestSubmit } from './useRequestSubmit';
export type { IRequestSubmit, SubmitKind } from './useRequestSubmit';
src/webparts/requestPortal/shared/ui/useRequestSubmit.ts
+60
View File
@@ -0,0 +1,60 @@
import { useState } from 'react';
// Общая машина сохранения заявки для ВСЕХ форм портала.
// Отвечает ТОЛЬКО за транзиентное состояние операции (идёт сохранение / ошибка /
// что сохранили). Блокировка формы (readOnly) считается из СТАТУСА заявки на
// стороне формы через isEditableStatus — не здесь: так одинаково блокируются
// и «после отправки», и «открыли уже отправленную».
export type SubmitKind = 'draft' | 'submit';
export interface IRequestSubmit {
saving: boolean; // идёт сохранение
kind: SubmitKind | undefined; // текущее/последнее действие (для подписи кнопки)
savedKind: SubmitKind | undefined; // последнее УСПЕШНОЕ сохранение (для плашки)
error: string | undefined;
/**
* Запустить сохранение. validate (опц.) возвращает текст ошибки или undefined.
* Повторный вызов во время сохранения игнорируется (защита от дабл-клика).
*/
run: (
kind: SubmitKind,
save: () => Promise<void>,
validate?: () => string | undefined
) => Promise<void>;
setError: (message: string | undefined) => void;
}
export function useRequestSubmit(): IRequestSubmit {
const [saving, setSaving] = useState<boolean>(false);
const [kind, setKind] = useState<SubmitKind | undefined>(undefined);
const [savedKind, setSavedKind] = useState<SubmitKind | undefined>(undefined);
const [error, setError] = useState<string | undefined>(undefined);
const run = async (
k: SubmitKind,
save: () => Promise<void>,
validate?: () => string | undefined
): Promise<void> => {
if (saving) {
return;
}
setKind(k);
const validationError = validate ? validate() : undefined;
if (validationError) {
setError(validationError);
return;
}
setError(undefined);
setSaving(true);
try {
await save();
setSavedKind(k);
} catch (e) {
setError(`Ошибка сохранения: ${(e as Error).message}`);
} finally {
setSaving(false);
}
};
return { saving, kind, savedKind, error, run, setError };
}