Тимур Городецкий
113 lines
5.2 KiB
TypeScript
113 lines
5.2 KiB
TypeScript
import * as React from 'react';
|
||
import { useState, useEffect, useMemo, useRef } from 'react';
|
||
import type { WebPartContext } from '@microsoft/sp-webpart-base';
|
||
import styles from './SubmitFeature.module.scss';
|
||
import { Icon } from '../../shared/ui/Icon/Icon';
|
||
import { RequestGrid } from '../../components/RequestGrid/RequestGrid';
|
||
import { getRequestsByCategory, REQUEST_TYPES } from '../../data/requests';
|
||
import { getFormComponent } from '../../forms/registry';
|
||
import { IRequestType } from '../../models/types';
|
||
import { emitRequestsChanged } from '../../shared/requestEvents';
|
||
import { confirmDiscardFormChanges, markFormClean } from '../../shared/unsavedChanges';
|
||
|
||
export interface ISubmitFeatureProps {
|
||
context: WebPartContext;
|
||
/** Активная категория. Вкладки теперь рендерятся на уровне портала (RequestPortal),
|
||
* чтобы оставаться на экране и в режиме согласования — эта фича их только слушает. */
|
||
activeCategoryId: string;
|
||
/** Открыть сразу форму с предзаполнением (производная заявка), минуя плитки. */
|
||
initialForm?: { formKey: string; sourceId: number };
|
||
/** Открыть сразу форму на РЕДАКТИРОВАНИЕ существующей заявки (черновик/возвращена). */
|
||
editForm?: { formKey: string; itemId: number };
|
||
}
|
||
|
||
// Фича «Подать заявку»: плитки → беспоук-форма (категории/вкладки — в RequestPortal).
|
||
// Владелец: автор портала. Живёт целиком в features/submit/**.
|
||
const SubmitFeature: React.FC<ISubmitFeatureProps> = ({
|
||
context,
|
||
activeCategoryId,
|
||
initialForm,
|
||
editForm,
|
||
}) => {
|
||
// «Создать на основе» и «редактировать» оба сразу открывают нужную форму, минуя плитки.
|
||
const preOpen = initialForm ?? editForm;
|
||
const initialSelected = useMemo(
|
||
() => (preOpen ? REQUEST_TYPES.filter((r) => r.id === preOpen.formKey)[0] ?? null : null),
|
||
[preOpen]
|
||
);
|
||
|
||
const [selectedRequest, setSelectedRequest] = useState<IRequestType | null>(initialSelected);
|
||
|
||
// Смена категории (вкладка сверху) — возвращаемся к списку плиток.
|
||
// Первый прогон пропускаем: иначе форма, открытая по initialForm «на основе»
|
||
// (её категория может не совпадать с текущей вкладкой), тут же закроется.
|
||
const firstCategorySync = useRef(true);
|
||
useEffect(() => {
|
||
if (firstCategorySync.current) {
|
||
firstCategorySync.current = false;
|
||
return;
|
||
}
|
||
setSelectedRequest((prev) => (prev && prev.categoryId !== activeCategoryId ? null : prev));
|
||
}, [activeCategoryId]);
|
||
|
||
const requests = getRequestsByCategory(activeCategoryId);
|
||
|
||
// Возврат к плиткам закрывает форму и теряет введённое (раздел остаётся
|
||
// смонтированным, но состояние формы живёт в самом FormComponent). Спрашиваем,
|
||
// если правки есть и они не сохранены; после согласия флаг снимаем — терять
|
||
// уже нечего.
|
||
const handleBack = (): void => {
|
||
if (!confirmDiscardFormChanges()) return;
|
||
markFormClean();
|
||
setSelectedRequest(null);
|
||
};
|
||
|
||
const renderSelected = (request: IRequestType): React.ReactNode => {
|
||
const FormComponent = getFormComponent(request.id);
|
||
|
||
// Форма ещё не реализована — показываем заглушку.
|
||
if (!FormComponent) {
|
||
return (
|
||
<div className={styles.formPlaceholder}>
|
||
<button type="button" className={styles.backButton} onClick={handleBack}>
|
||
<Icon name="arrow-left" size="sm" />
|
||
<span>К списку заявок</span>
|
||
</button>
|
||
<p className={styles.placeholderText}>Форма «{request.title}» ещё в разработке.</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// sourceId — «на основе» исходной заявки; editId — правка существующей.
|
||
const sourceId =
|
||
initialForm && request.id === initialForm.formKey ? initialForm.sourceId : undefined;
|
||
const editId = editForm && request.id === editForm.formKey ? editForm.itemId : undefined;
|
||
|
||
// Ленивый рендер формы: её код подтягивается только сейчас, при открытии.
|
||
return (
|
||
<React.Suspense fallback={<div className={styles.loading}>Загрузка формы…</div>}>
|
||
<FormComponent
|
||
requestType={request}
|
||
context={context}
|
||
onCancel={handleBack}
|
||
onSaved={emitRequestsChanged}
|
||
sourceId={sourceId}
|
||
editId={editId}
|
||
/>
|
||
</React.Suspense>
|
||
);
|
||
};
|
||
|
||
return (
|
||
<div className={styles.content}>
|
||
{selectedRequest ? (
|
||
renderSelected(selectedRequest)
|
||
) : (
|
||
<RequestGrid requests={requests} onSelect={setSelectedRequest} />
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default SubmitFeature;
|