роутинг и подсветы

This commit is contained in:
gorbenko.pavel
2026-08-07 12:24:51 +05:00
parent 7ef4f53a6a
commit 3f7e42e874
6 changed files with 325 additions and 59 deletions
@@ -7,6 +7,7 @@ import { PortalDictionaryClient } from '../../services/portalDictionary';
import { SharePointListsClient } from '../../services/sharePointLists';
import { RequestManageService } from '../../services/requestManageService';
import { RequestType, TemplateRoute } from '../../models';
import { navigate, useRoute } from '../../routing';
import { DashboardScreen } from '../screens/DashboardScreen';
import { RequestTypesScreen } from '../screens/RequestTypesScreen';
import { RoutesScreen } from '../screens/RoutesScreen';
@@ -23,76 +24,84 @@ export interface IAdminAppProps {
currentUserEmail?: string;
}
const ACTIVE_TAB_STORAGE_KEY = 'approvalAdmin.activeTab';
// 'routeSteps' сознательно НЕ входит: этот экран требует selectedRoute — полный
// объект маршрута, полученный по клику из RoutesScreen, а не просто ключ. После
// перезагрузки страницы такого объекта нет и взять его неоткуда, поэтому эту
// вкладку как «последнюю открытую» восстанавливать нельзя — если она вдруг
// окажется в localStorage (старое значение, ручная правка), откатываемся на дашборд.
const RESTORABLE_SCREENS: ScreenKey[] = ['dashboard', 'requestTypes', 'routes', 'resolve', 'manageRequests'];
function readStoredScreen(): ScreenKey {
try {
const raw = window.localStorage.getItem(ACTIVE_TAB_STORAGE_KEY);
if (raw && (RESTORABLE_SCREENS as string[]).indexOf(raw) !== -1) return raw as ScreenKey;
} catch {
// localStorage недоступен (приватный режим и т.п.) — просто не восстанавливаем.
}
return 'dashboard';
}
export const AdminApp: React.FC<IAdminAppProps> = ({ api, dictionary, sharePoint, requestManage, currentUserEmail }) => {
const [screen, setScreenState] = React.useState<ScreenKey>(readStoredScreen);
const route = useRoute();
const [selectedRoute, setSelectedRoute] = React.useState<TemplateRoute | undefined>();
const [selectedRequestType, setSelectedRequestType] = React.useState<RequestType | undefined>();
// 'routeSteps' в localStorage не пишем — см. RESTORABLE_SCREENS.
const setScreen = (key: ScreenKey): void => {
setScreenState(key);
if (key === 'routeSteps') return;
try {
window.localStorage.setItem(ACTIVE_TAB_STORAGE_KEY, key);
} catch {
// не критично — просто не запомнится
}
};
const navigateTab = (key: ScreenKey): void => navigate({ tab: key });
const navigate = (key: ScreenKey): void => {
setScreen(key);
};
const openSteps = (route: TemplateRoute): void => {
setSelectedRoute(route);
const openSteps = (r: TemplateRoute): void => {
setSelectedRoute(r);
setSelectedRequestType(undefined);
api.requestTypes.get(route.requestTypeId)
api.requestTypes.get(r.requestTypeId)
.then(setSelectedRequestType)
.catch(() => setSelectedRequestType(undefined));
setScreen('routeSteps');
navigate({ tab: 'routes', routeId: r.id });
};
// Открытие по прямой ссылке / обновление страницы / кнопка «назад»: в URL
// лежит только aaroute (число), а RouteStepsScreen ждёт полный TemplateRoute —
// дочитываем его через API. Если сюда пришли через openSteps (клик в
// RoutesScreen), selectedRoute уже тот самый — повторный запрос не нужен.
React.useEffect(() => {
if (route.tab !== 'routes' || !route.routeId) {
setSelectedRoute(undefined);
setSelectedRequestType(undefined);
return;
}
if (selectedRoute && selectedRoute.id === route.routeId) return;
let alive = true;
api.templateRoutes.get(route.routeId)
.then(r => {
if (!alive) return;
setSelectedRoute(r);
return api.requestTypes.get(r.requestTypeId).then(rt => {
if (alive) setSelectedRequestType(rt);
});
})
.catch(() => {
if (alive) setSelectedRoute(undefined);
});
return () => {
alive = false;
};
// selectedRoute — намеренно не в зависимостях: иначе повторный fetch
// запускался бы сразу после того, как этот же эффект его и выставил.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [api, route.tab, route.routeId]);
return (
<div className={styles.shell}>
<TopNav active={screen} onSelect={navigate} />
<TopNav active={route.tab} onSelect={navigateTab} />
<div className={styles.content}>
{screen === 'dashboard' && <DashboardScreen api={api} onNavigate={navigate} />}
{screen === 'requestTypes' && <RequestTypesScreen api={api} sharePoint={sharePoint} />}
{screen === 'routes' && <RoutesScreen api={api} dictionary={dictionary} onOpenSteps={openSteps} />}
{screen === 'routeSteps' && selectedRoute && (
{route.tab === 'dashboard' && <DashboardScreen api={api} onNavigate={navigateTab} />}
{route.tab === 'requestTypes' && <RequestTypesScreen api={api} sharePoint={sharePoint} />}
{route.tab === 'routes' && !route.routeId && (
<RoutesScreen api={api} dictionary={dictionary} onOpenSteps={openSteps} />
)}
{route.tab === 'routes' && route.routeId && selectedRoute && (
<RouteStepsScreen
api={api}
route={selectedRoute}
requestType={selectedRequestType}
dictionary={dictionary}
sharePoint={sharePoint}
onBack={() => setScreen('routes')}
onBack={() => navigate({ tab: 'routes' })}
/>
)}
{screen === 'resolve' && (
<ResolveScreen api={api} dictionary={dictionary} sharePoint={sharePoint} currentUserEmail={currentUserEmail} />
{route.tab === 'resolve' && (
<ResolveScreen
api={api}
dictionary={dictionary}
sharePoint={sharePoint}
currentUserEmail={currentUserEmail}
route={route.resolve}
/>
)}
{screen === 'manageRequests' && (
<ManageRequestsScreen api={api} dictionary={dictionary} requestManage={requestManage} />
{route.tab === 'manageRequests' && (
<ManageRequestsScreen api={api} dictionary={dictionary} requestManage={requestManage} route={route.manage} />
)}
</div>
</div>
@@ -152,7 +152,7 @@ export const ManageRequestsPhaseTable: React.FC<IManageRequestsPhaseTableProps>
const isGhost = r.id < 0;
return (
<tr key={r.id} className={block.end > block.start ? styles.parallelRow : undefined}>
<tr key={r.id}>
{isBlockStart && (
<td className={styles.stepCol} rowSpan={block.end - block.start + 1}>
{r.parallelWithPrev || block.end > block.start ? (
@@ -202,7 +202,7 @@ export const ManageRequestsPhaseTable: React.FC<IManageRequestsPhaseTableProps>
<ActionsCell>
<IconButton
icon="people"
className={styles.iconBtnVisible}
className={r.parallelWithPrev ? styles.iconBtnActive : styles.iconBtnVisible}
label={r.parallelWithPrev ? texts.manageRequests.splitFromPrev : texts.manageRequests.mergeWithPrev}
disabled={busy || !canToggle}
onClick={() => toggleParallel(i)}
@@ -45,12 +45,6 @@
font-weight: 600;
}
// Строки одного параллельного блока — лёгкая заливка, чтобы объединённая
// ячейка «Шаг» читалась как один блок, а не как случайно схлопнутые строки.
.parallelRow > td {
background: rgba($gold-500, .06);
}
.flipY {
svg { transform: scaleY(-1); }
}
@@ -66,6 +60,21 @@
background: #fff !important;
}
// Включённое состояние кнопки «объединить с предыдущим шагом» — в отличие от
// остальных кнопок это переключатель состояния, а не разовое действие,
// поэтому оно залито (как в request-portal/shared/approval/ui/approval.module.scss/.iconBtnActive).
// !important по той же причине, что и у .iconBtnVisible.
.iconBtnActive {
border-color: $gold-500 !important;
background: $gold-500 !important;
color: $navy-950 !important;
&:hover:not(:disabled) {
border-color: $gold-600 !important;
background: $gold-600 !important;
}
}
// Плашка-пикер под таблицей для добавления шага (вместо кнопки+модалки) —
// повторяет request-portal/shared/approval/ui/ApprovalMatrix.tsx/.matrixPicker.
.addRow {
@@ -19,6 +19,7 @@ import { usePortalEmployees } from '../../hooks/usePortalEmployees';
import { useLocalStorageState } from '../../hooks/useLocalStorageState';
import { findEmployeeByEmail } from '../../utils/employee';
import { markParallel, withOrdersFrom } from '../../utils/orderBlocks';
import { IManageRequestRouteParams, replaceRoute } from '../../routing';
import {
Alert,
AsyncSearchableSelect,
@@ -39,6 +40,9 @@ export interface IManageRequestsScreenProps {
/** Undefined, пока SPFx выдаёт AAD-клиент для api.tnsu.kz. */
dictionary?: PortalDictionaryClient;
requestManage: RequestManageService;
/** Заполнение из URL (глубокая ссылка на конкретную заявку) — есть, только
* если в адресе заданы aamtype/aamreq (см. routing.ts). */
route?: IManageRequestRouteParams;
}
// Цвет плашки статуса — те же группы смысла, что и в request-portal
@@ -97,12 +101,39 @@ const SELECTION_STORAGE_KEY = 'approvalAdmin.manageRequestsSelection';
// решение через request-portal), а вкладка могла быть открыта давно.
const AUTO_REFRESH_MS = 2 * 60 * 1000;
export const ManageRequestsScreen: React.FC<IManageRequestsScreenProps> = ({ api, dictionary, requestManage }) => {
export const ManageRequestsScreen: React.FC<IManageRequestsScreenProps> = ({ api, dictionary, requestManage, route }) => {
const requestTypes = useRequestTypes(api);
const employees = usePortalEmployees(dictionary);
const [selection, setSelection] = useLocalStorageState<IPersistedSelection>(SELECTION_STORAGE_KEY, EMPTY_SELECTION);
const { requestTypeId, selectedRequest } = selection;
// Открыли по глубокой ссылке (aamtype/aamreq в URL) — перекрывает то, что
// было в localStorage. Только на монтировании — см. тот же приём в
// ResolveScreen (route меняется при каждом собственном replaceRoute ниже).
// title/status заявки в URL не хранятся (их полностью определяет requestId) —
// ставим пустыми, реальные подтянутся, как только матрица загрузится (см.
// reloadMatrix ниже: там selection.selectedRequest патчится из matrix.request).
React.useEffect(() => {
if (!route) return;
setSelection({
requestTypeId: route.requestTypeId,
selectedRequest: { id: Number(route.requestId), title: '', status: '', created: '', authorName: '' }
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// Держим URL синхронным с выбором — открытую заявку можно скопировать и
// прислать коллеге. replaceRoute, а не navigate: смена заявки — это правка
// состояния текущего экрана, а не переход на новую страницу с отдельным
// шагом в истории браузера. title/status заявки в URL не пишем — их выводит
// сам requestId, хранить производные данные в ссылке незачем.
React.useEffect(() => {
replaceRoute({
tab: 'manageRequests',
manage: selectedRequest ? { requestTypeId, requestId: String(selectedRequest.id) } : undefined
});
}, [requestTypeId, selectedRequest]);
const [matrix, setMatrix] = React.useState<ManagedRequestMatrix | undefined>();
const [matrixLoading, setMatrixLoading] = React.useState(false);
const [matrixError, setMatrixError] = React.useState<string | undefined>();
@@ -156,7 +187,17 @@ export const ManageRequestsScreen: React.FC<IManageRequestsScreenProps> = ({ api
setMatrixError(undefined);
requestManage
.getMatrix(requestType, selectedRequest.id)
.then(setMatrix)
.then(m => {
setMatrix(m);
// title/status в комбобоксе (а значит, и в localStorage) держим
// синхронными с сервером — особенно важно после захода по глубокой
// ссылке, где изначально они пустые (см. эффект-затравку выше).
setSelection(prev =>
prev.selectedRequest && prev.selectedRequest.id === m.request.id
? { ...prev, selectedRequest: m.request }
: prev
);
})
.catch((e: Error) => setMatrixError(e.message))
.finally(() => {
if (!silent) setMatrixLoading(false);
@@ -11,6 +11,7 @@ import { usePortalEmployees } from '../../hooks/usePortalEmployees';
import { useSharePointFields } from '../../hooks/useSharePointFields';
import { useLocalStorageState } from '../../hooks/useLocalStorageState';
import { findEmployeeByEmail, toEmployeeOption } from '../../utils/employee';
import { IResolveRouteParams, replaceRoute } from '../../routing';
import {
Alert,
AsyncSearchableSelect,
@@ -35,6 +36,9 @@ export interface IResolveScreenProps {
dictionary?: PortalDictionaryClient;
sharePoint: SharePointListsClient;
currentUserEmail?: string;
/** Заполнение из URL (глубокая ссылка) — есть, только если в адресе заданы
* параметры проверки маршрута (aartype и т.д., см. routing.ts). */
route?: IResolveRouteParams;
}
const STATUS_OPTIONS = [RouteStepStatus.Approval, RouteStepStatus.Execution]
@@ -63,11 +67,36 @@ const EMPTY_RESOLVE_FORM: IResolveFormState = {
fieldValues: []
};
export const ResolveScreen: React.FC<IResolveScreenProps> = ({ api, dictionary, sharePoint, currentUserEmail }) => {
export const ResolveScreen: React.FC<IResolveScreenProps> = ({ api, dictionary, sharePoint, currentUserEmail, route }) => {
const requestTypes = useRequestTypes(api);
const [form, setForm] = useLocalStorageState<IResolveFormState>(RESOLVE_FORM_STORAGE_KEY, EMPTY_RESOLVE_FORM);
const { requestTypeId, userEmail, projectId, projectLabel, status, fieldValues = [] } = form;
// Открыли по глубокой ссылке (aartype и т.д. в URL) — параметры оттуда
// перекрывают то, что было в localStorage. Только на монтировании: route
// меняется при каждом собственном же replaceRoute ниже, а не только при
// переходе по внешней ссылке — сравнивать его на равенство и держать в
// зависимостях смысла нет.
React.useEffect(() => {
if (!route) return;
setForm({
requestTypeId: route.requestTypeId,
userEmail: route.userEmail,
projectId: route.projectId,
projectLabel: route.projectLabel,
status: route.status,
fieldValues: route.fieldValues
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// Держим URL синхронным с формой — правки сразу становятся частью ссылки,
// которую можно скопировать/сохранить. replaceRoute, а не navigate: иначе
// каждый введённый символ добавлял бы шаг в историю браузера.
React.useEffect(() => {
replaceRoute({ tab: 'resolve', resolve: { requestTypeId, userEmail, projectId, projectLabel, status, fieldValues } });
}, [requestTypeId, userEmail, projectId, projectLabel, status, fieldValues]);
const requestType = requestTypes.items.find(rt => rt.id === Number(requestTypeId));
const hasListId = Boolean(requestType?.listId);
const sharePointFields = useSharePointFields(sharePoint, requestType?.siteUrl, requestType?.listId);
@@ -0,0 +1,178 @@
import * as React from 'react';
import { ScreenKey } from './components/app/types';
import { ResolveFieldValue, RouteStepStatus } from './models';
// Маршрутизация веб-части по параметрам URL: у каждой верхней вкладки свой
// адрес, а «Проверка маршрута» и «Редактирование заявок» — ещё и глубокие
// ссылки на конкретный подбор (маршрут+сотрудник / конкретная заявка), которые
// можно передать коллеге или обновить страницу без потери контекста.
//
// Префикс aa (approval admin) — тот же приём, что в request-portal
// (src/webparts/requestPortal/shared/routing.ts, префикс rp): SharePoint
// резервирует часть имён параметров (id/mode/type) под свою навигацию, поэтому
// используем собственные, заведомо не пересекающиеся имена.
//
// Навигация — history.pushState без перезагрузки страницы (SPA); useRoute()
// подписан и на popstate (кнопка «назад»), и на собственное событие (pushState
// само popstate не порождает).
export interface IResolveRouteParams {
requestTypeId: string;
userEmail: string;
projectId: string;
/** Название проекта — чтобы показать выбор до отдельного похода в справочник. */
projectLabel: string;
status: RouteStepStatus;
fieldValues: ResolveFieldValue[];
}
export interface IManageRequestRouteParams {
requestTypeId: string;
requestId: string;
}
export interface IAdminRoute {
tab: ScreenKey;
/** Id маршрута — только при tab='routes': сразу открывает шаги ЭТОГО маршрута,
* минуя список (см. AdminApp — по нему домаршрут дочитывается через api.templateRoutes.get). */
routeId?: number;
/** Задан только при tab='resolve' и непустом requestTypeId. */
resolve?: IResolveRouteParams;
/** Задан только при tab='manageRequests' и непустых requestTypeId+requestId. */
manage?: IManageRequestRouteParams;
}
const ROUTE_CHANGE_EVENT = 'aa-route-change';
// 'routeSteps' сюда намеренно не входит — это не отдельная вкладка URL, а
// состояние вкладки 'routes' при наличии aaroute (см. parseRoute).
const TABS: ScreenKey[] = ['dashboard', 'requestTypes', 'routes', 'resolve', 'manageRequests'];
const PARAM_KEYS = [
'aatab', 'aaroute',
'aartype', 'aauser', 'aaproject', 'aaprojectname', 'aastatus', 'aafields',
'aamtype', 'aamreq'
];
function parseTab(raw: string | null): ScreenKey {
return raw && (TABS as string[]).indexOf(raw) !== -1 ? (raw as ScreenKey) : 'dashboard';
}
function parseFieldValues(raw: string | null): ResolveFieldValue[] {
if (!raw) return [];
try {
const parsed: unknown = JSON.parse(raw);
if (!Array.isArray(parsed)) return [];
return parsed
.filter((x): x is Record<string, unknown> => typeof x === 'object' && x !== null)
.map(x => ({ fieldName: String(x.fieldName || ''), value: String(x.value || '') }));
} catch {
// Битый/устаревший JSON в ссылке — не роняем экран, просто без предзаполненных условий.
return [];
}
}
/** Разобрать строку запроса (по умолчанию — из адреса страницы) в маршрут. */
export function parseRoute(search: string = window.location.search): IAdminRoute {
const params = new URLSearchParams(search);
const tab = parseTab(params.get('aatab'));
const routeIdRaw = tab === 'routes' ? params.get('aaroute') : null;
const routeId = routeIdRaw ? Number(routeIdRaw) : undefined;
const resolveTypeId = params.get('aartype');
const resolve: IResolveRouteParams | undefined =
tab === 'resolve' && resolveTypeId
? {
requestTypeId: resolveTypeId,
userEmail: params.get('aauser') || '',
projectId: params.get('aaproject') || '',
projectLabel: params.get('aaprojectname') || '',
status: (params.get('aastatus') as RouteStepStatus) || RouteStepStatus.Approval,
fieldValues: parseFieldValues(params.get('aafields'))
}
: undefined;
const manageTypeId = params.get('aamtype');
const manageReqId = params.get('aamreq');
const manage: IManageRequestRouteParams | undefined =
tab === 'manageRequests' && manageTypeId && manageReqId
? { requestTypeId: manageTypeId, requestId: manageReqId }
: undefined;
return {
tab,
routeId: routeId && !isNaN(routeId) ? routeId : undefined,
resolve,
manage
};
}
// Собрать query-строку маршрута, сохранив посторонние параметры страницы
// (SharePoint/Workbench могут держать в URL свои — их трогать нельзя).
function buildQuery(route: IAdminRoute): string {
const params = new URLSearchParams(window.location.search);
PARAM_KEYS.forEach(k => params.delete(k));
if (route.tab !== 'dashboard') params.set('aatab', route.tab);
if (route.tab === 'routes' && route.routeId) {
params.set('aaroute', String(route.routeId));
}
if (route.tab === 'resolve' && route.resolve && route.resolve.requestTypeId) {
params.set('aartype', route.resolve.requestTypeId);
if (route.resolve.userEmail) params.set('aauser', route.resolve.userEmail);
if (route.resolve.projectId) params.set('aaproject', route.resolve.projectId);
if (route.resolve.projectLabel) params.set('aaprojectname', route.resolve.projectLabel);
if (route.resolve.status) params.set('aastatus', route.resolve.status);
if (route.resolve.fieldValues.length > 0) params.set('aafields', JSON.stringify(route.resolve.fieldValues));
}
if (route.tab === 'manageRequests' && route.manage && route.manage.requestTypeId && route.manage.requestId) {
params.set('aamtype', route.manage.requestTypeId);
params.set('aamreq', route.manage.requestId);
}
const query = params.toString();
return `${window.location.pathname}${query ? `?${query}` : ''}${window.location.hash}`;
}
/** Перейти на другой маршрут без перезагрузки страницы (SPA) — новая запись в истории. */
export function navigate(route: IAdminRoute): void {
window.history.pushState({}, '', buildQuery(route));
window.dispatchEvent(new Event(ROUTE_CHANGE_EVENT));
}
/**
* Обновить параметры ТЕКУЩЕГО маршрута без новой записи в истории — для форм
* (ResolveScreen/ManageRequestsScreen), которые синхронизируют URL на каждое
* изменение поля: pushState на каждый символ ввода превратил бы кнопку «назад»
* в полистывание истории набора текста вместо переключения вкладок.
*/
export function replaceRoute(route: IAdminRoute): void {
window.history.replaceState({}, '', buildQuery(route));
window.dispatchEvent(new Event(ROUTE_CHANGE_EVENT));
}
/** Ссылка на маршрут — для href (открыть в новой вкладке, скопировать, поделиться). */
export function routeUrl(route: IAdminRoute): string {
return buildQuery(route);
}
/** Текущий маршрут, реактивно обновляется по navigate() и кнопке «назад». */
export function useRoute(): IAdminRoute {
const [route, setRoute] = React.useState<IAdminRoute>(() => parseRoute());
React.useEffect(() => {
const onChange = (): void => setRoute(parseRoute());
window.addEventListener('popstate', onChange);
window.addEventListener(ROUTE_CHANGE_EVENT, onChange);
return () => {
window.removeEventListener('popstate', onChange);
window.removeEventListener(ROUTE_CHANGE_EVENT, onChange);
};
}, []);
return route;
}