gorbenko.pavel
98be3980cb
Tests / frontend-test (push) Successful in 1m24s
Co-authored-by: gorbenko.pavel <gorbenko.pavel@tansu.kz> Reviewed-on: http://git.tnsu.kz/timur.gorodetskiy/request-portal/pulls/22
634 lines
36 KiB
TypeScript
634 lines
36 KiB
TypeScript
import * as React from 'react';
|
||
import type { WebPartContext } from '@microsoft/sp-webpart-base';
|
||
import {
|
||
ApprovalQueueKind,
|
||
filterPendingByQuery,
|
||
getAllRequestsForType,
|
||
getApprovalQueue,
|
||
getApprovalQueueIndex,
|
||
getLinkedTypes,
|
||
getOwnRequests,
|
||
getOwnRequestsByStatus,
|
||
hydrateDecisionComments,
|
||
hydratePendingAuthors,
|
||
searchOwnRequests,
|
||
} from './myRequests.service';
|
||
import { IMyRequest } from './models/IMyRequest';
|
||
import { DataTable, IDataTableColumn, IconButton } from '@tnsu/ui-kit';
|
||
import { REQUEST_STATUS, REQUEST_STATUS_CHOICES, IRequestType, StatusBadge } from '../../shared/approval';
|
||
import { confirmAndDeleteDraft, isDeletableStatus } from '../../shared/draftDeletion';
|
||
import { friendlyErrorMessage } from '../../shared/diagnostics';
|
||
import { getFormComponent } from '../../forms/registry';
|
||
import { onRequestsChanged } from '../../shared/requestEvents';
|
||
import { perfScope } from '../../shared/perfTrace';
|
||
import { useRoutedQuery } from '../../shared/usePersistedQuery';
|
||
import { IPage, pageKey, pageSignature, readPage, writePage } from './pageCache';
|
||
import { Pager } from './Pager';
|
||
import styles from './RequestsTableView.module.scss';
|
||
|
||
const PAGE_SIZE = 20;
|
||
|
||
// Автообновление открытых таблиц: раз в 10 минут перечитываем данные, чтобы
|
||
// вкладка, оставленная открытой надолго, не показывала устаревший список.
|
||
// Обновление фоновое — строки с экрана не пропадают и перерисовываются, только
|
||
// если данные реально изменились (см. pageSignature).
|
||
const AUTO_REFRESH_MS = 10 * 60 * 1000;
|
||
|
||
|
||
/**
|
||
* Что именно показывает таблица. Один компонент обслуживает все списки заявок
|
||
* портала, а различаются они только источником строк и набором колонок:
|
||
*
|
||
* 'approvals' | 'execution' — очереди действий (из строк маршрута);
|
||
* 'rework' — свои заявки, возвращённые на доработку;
|
||
* 'own:created' — свои заявки (+ фильтр по статусу);
|
||
* 'own:approved'|'own:rejected'|'own:executed' — история своих решений.
|
||
*/
|
||
export type ListView =
|
||
| 'approvals'
|
||
| 'execution'
|
||
| 'rework'
|
||
| 'own:created'
|
||
| 'own:approved'
|
||
| 'own:rejected'
|
||
| 'own:executed'
|
||
| 'all';
|
||
|
||
// Представления, которые строятся на строках маршрута пользователя, и их очередь
|
||
// в сервисе. Всё, чего здесь нет ('rework'/'own:created'), читается из списка
|
||
// данных по автору.
|
||
const QUEUE_BY_VIEW: { [key: string]: ApprovalQueueKind } = {
|
||
approvals: 'approvals',
|
||
execution: 'execution',
|
||
'own:approved': 'approved',
|
||
'own:rejected': 'rejected',
|
||
'own:executed': 'executed',
|
||
};
|
||
|
||
// 'all' — заголовок и текст пустоты зависят от выбранного типа заявки
|
||
// (см. allRequestsType и heading/emptyText ниже), здесь только запасной
|
||
// вариант на случай, пока тип ещё не выбран/не загрузился.
|
||
const HEADINGS: Record<ListView, string> = {
|
||
approvals: 'Ждут вашего согласования',
|
||
execution: 'Ждут вашего исполнения',
|
||
rework: 'Возвращены вам на доработку',
|
||
'own:created': 'Инициированные мной',
|
||
'own:approved': 'Согласованные мной',
|
||
'own:rejected': 'Отклонённые мной',
|
||
'own:executed': 'Выполненные мной',
|
||
all: 'Все заявки',
|
||
};
|
||
|
||
const EMPTY_TEXTS: Record<ListView, string> = {
|
||
approvals: 'Нет заявок, ждущих вашего согласования.',
|
||
execution: 'Нет заявок, ждущих вашего исполнения.',
|
||
rework: 'Нет заявок, возвращённых вам на доработку.',
|
||
'own:created': 'Вы ещё не создавали заявок.',
|
||
'own:approved': 'Вы ещё ничего не согласовали.',
|
||
'own:rejected': 'Вы ещё ничего не отклоняли.',
|
||
'own:executed': 'Вы ещё ничего не выполнили.',
|
||
all: 'Заявок этого типа пока нет.',
|
||
};
|
||
|
||
// Цвет пункта в выпадающем списке фильтра — то же сопоставление статус→цвет,
|
||
// что в StatusBadge (VARIANT), только цвет текста, а не бейдж целиком: внутри
|
||
// нативного <option> нельзя отрендерить компонент, а background-color на нём
|
||
// браузеры показывают ненадёжно (в отличие от color). Если сопоставление там
|
||
// поменяется — поправить и здесь, второй раз найти дублирование негде.
|
||
function statusOptionClassName(status: string): string {
|
||
switch (status) {
|
||
case REQUEST_STATUS.onApproval:
|
||
case REQUEST_STATUS.onExecution:
|
||
return styles.optionOnApproval;
|
||
case REQUEST_STATUS.approved:
|
||
case REQUEST_STATUS.executed:
|
||
return styles.optionApproved;
|
||
case REQUEST_STATUS.rejected:
|
||
return styles.optionRejected;
|
||
case REQUEST_STATUS.returned:
|
||
return styles.optionReturned;
|
||
case REQUEST_STATUS.execution:
|
||
return styles.optionExecution;
|
||
case REQUEST_STATUS.closed:
|
||
return styles.optionClosed;
|
||
default:
|
||
return styles.optionDraft;
|
||
}
|
||
}
|
||
|
||
// Колонки: «Автор» нужен там, где заявка чужая; «Статус» — где он не следует из
|
||
// самого раздела. В истории решений важно и то, и другое: заявка чужая, а её
|
||
// текущий статус мог уйти дальше вашего решения.
|
||
//
|
||
// 'rework' — свои заявки (автор не нужен) И все с одним статусом «Возвращена на
|
||
// доработку», раз именно по нему раздел и отобран (см. getOwnRequestsByStatus):
|
||
// колонка из одинаковых плашек ничего не сообщает, только шумит. Та же логика,
|
||
// что у очередей согласования/исполнения.
|
||
//
|
||
// 'own:created' — статус нужен, только пока показаны ВСЕ заявки. Стоит выбрать
|
||
// его в фильтре, и колонка вырождается в тот же столбец одинаковых плашек,
|
||
// поэтому она зависит не от одного вида, а ещё и от фильтра.
|
||
//
|
||
// Статус решения, ОБЩИЙ для всех строк раздела, — если он есть, показывать его
|
||
// колонкой незачем (столбец одинаковых плашек), зато полезен комментарий
|
||
// согласующего: почему вернули или почему отклонили. Именно за этим в такие
|
||
// списки и заходят.
|
||
function decisionStatusFor(view: ListView, statusFilter: string): string | undefined {
|
||
if (view === 'rework') return REQUEST_STATUS.returned;
|
||
if (view === 'own:rejected') return REQUEST_STATUS.rejected;
|
||
if (
|
||
view === 'own:created' &&
|
||
(statusFilter === REQUEST_STATUS.returned || statusFilter === REQUEST_STATUS.rejected)
|
||
) {
|
||
return statusFilter;
|
||
}
|
||
return undefined;
|
||
}
|
||
|
||
interface ITableColumns {
|
||
author: boolean;
|
||
status: boolean;
|
||
/** Заголовок колонки с комментарием; undefined — колонки нет. */
|
||
commentLabel?: string;
|
||
}
|
||
|
||
function columnsFor(view: ListView, statusFilter: string): ITableColumns {
|
||
const decisionStatus = decisionStatusFor(view, statusFilter);
|
||
const commentLabel =
|
||
decisionStatus === REQUEST_STATUS.rejected
|
||
? 'Причина отклонения'
|
||
: decisionStatus === REQUEST_STATUS.returned
|
||
? 'Причина возврата'
|
||
: undefined;
|
||
|
||
if (view === 'approvals' || view === 'execution') return { author: true, status: false };
|
||
if (view === 'rework') return { author: false, status: false, commentLabel };
|
||
if (view === 'own:created') return { author: false, status: !statusFilter, commentLabel };
|
||
// 'all' — заявки всех авторов вперемешку, поэтому нужны и автор, и статус.
|
||
if (view === 'all') return { author: true, status: true };
|
||
// История решений: заявка чужая, поэтому нужен автор. Статус — только если он
|
||
// не предопределён самой вкладкой («Отклонённые мной» — это всегда «Отклонено»,
|
||
// а вот у согласованных/выполненных заявка могла уйти дальше по маршруту).
|
||
return { author: true, status: !decisionStatus, commentLabel };
|
||
}
|
||
|
||
export interface IRequestsTableViewProps {
|
||
context: WebPartContext;
|
||
view: ListView;
|
||
/** Фильтр по статусу заявки; только для view='own:created'. '' — все статусы. */
|
||
statusFilter?: string;
|
||
onStatusFilterChange?: (status: string) => void;
|
||
/**
|
||
* Текущая страница (1-based) и её смена. Страница живёт в маршруте, а не
|
||
* внутри компонента: так она попадает в адрес (ссылку можно передать),
|
||
* переживает открытие/закрытие заявки и запоминается для этой таблицы
|
||
* (см. persistPage в shared/routing.ts).
|
||
*/
|
||
page: number;
|
||
onPageChange: (page: number) => void;
|
||
/**
|
||
* Текст поиска и его смена. Тоже живёт в маршруте (см. page выше): попадает
|
||
* в адрес, переживает открытие заявки и запоминается для этой таблицы.
|
||
*/
|
||
query: string;
|
||
onQueryChange: (query: string) => void;
|
||
/** Клик по строке — открыть заявку (в выезжающей панели). */
|
||
onOpen: (request: IMyRequest) => void;
|
||
/** Только при view='all' — тип заявки, чьи заявки показываются целиком (без фильтра по автору). */
|
||
allRequestsType?: IRequestType;
|
||
}
|
||
|
||
function formatDate(iso: string): string {
|
||
if (!iso) return '';
|
||
const d = new Date(iso);
|
||
const dd = d.getDate() < 10 ? `0${d.getDate()}` : `${d.getDate()}`;
|
||
const mm = d.getMonth() + 1 < 10 ? `0${d.getMonth() + 1}` : `${d.getMonth() + 1}`;
|
||
return `${dd}.${mm}.${d.getFullYear()}`;
|
||
}
|
||
|
||
// Таблица заявок. Клик в ЛЮБОМ месте строки открывает заявку (кликабельна вся
|
||
// строка, а не только название), поэтому строка — <tr> с onClick + tabIndex
|
||
// (доступ с клавиатуры: Enter/Space).
|
||
//
|
||
// Набор колонок зависит от раздела и от фильтра — см. columnsFor.
|
||
/**
|
||
* Можно ли удалить строку прямо из таблицы: своя заявка в статусе «Черновик»
|
||
* и форма этого типа есть в портале (чужие типы из approval-route портал не
|
||
* открывает и не удаляет).
|
||
*/
|
||
function canDeleteRow(r: IMyRequest): boolean {
|
||
return r.kind === 'own' && isDeletableStatus(r.status) && !!getFormComponent(r.formKey);
|
||
}
|
||
|
||
const Table: React.FC<{
|
||
rows: IMyRequest[];
|
||
view: ListView;
|
||
statusFilter: string;
|
||
onOpen: (request: IMyRequest) => void;
|
||
/** Удалить черновик; задан только там, где в таблице бывают свои черновики. */
|
||
onDelete?: (request: IMyRequest) => void;
|
||
}> = ({ rows, view, statusFilter, onOpen, onDelete }) => {
|
||
const cols = columnsFor(view, statusFilter);
|
||
|
||
// Колонки для DataTable строим динамически: базовые всегда, автор/статус/
|
||
// комментарий — по columnsFor (зависит от раздела и фильтра). Кастомные ячейки
|
||
// (статус → StatusBadge, дата → формат) задаются через render.
|
||
const columns: IDataTableColumn<IMyRequest>[] = [
|
||
// Код заявки, а не Id элемента: Id уникален только внутри своей партиции
|
||
// (в каждом списке SharePoint нумерация с единицы), поэтому после архивации
|
||
// в таблице встречались разные заявки под одним номером. Кода нет у заявок,
|
||
// созданных до появления колонки — для них показываем Id, как раньше.
|
||
{ key: 'code', title: 'Номер', width: '130px', render: (r) => r.code || `#${r.id}` },
|
||
{ key: 'type', title: 'Тип', width: '200px', render: (r) => r.requestTypeName },
|
||
{ key: 'title', title: 'Название', render: (r) => r.title || r.code || `#${r.id}` },
|
||
{ key: 'date', title: 'Дата', width: '110px', render: (r) => formatDate(r.created) }
|
||
];
|
||
if (cols.author) {
|
||
columns.push({
|
||
key: 'author',
|
||
title: 'Автор',
|
||
width: '280px',
|
||
render: (r) => [r.authorName, r.authorEmail].filter(Boolean).join(' · ') || '—'
|
||
});
|
||
}
|
||
if (cols.status) {
|
||
columns.push({
|
||
key: 'status',
|
||
title: 'Статус',
|
||
width: '190px',
|
||
render: (r) => (r.status ? <StatusBadge status={r.status} size="sm" /> : '—')
|
||
});
|
||
}
|
||
if (cols.commentLabel) {
|
||
columns.push({
|
||
key: 'comment',
|
||
title: cols.commentLabel,
|
||
render: (r) => r.decisionComment || <span className={styles.commentEmpty}>Без комментария</span>
|
||
});
|
||
}
|
||
if (onDelete && rows.some(canDeleteRow)) {
|
||
columns.push({
|
||
key: 'actions',
|
||
title: '',
|
||
width: '56px',
|
||
render: (r) =>
|
||
canDeleteRow(r) ? (
|
||
<IconButton
|
||
icon="trash"
|
||
title="Удалить черновик"
|
||
danger
|
||
size="sm"
|
||
onClick={(e) => {
|
||
// Клик по всей строке открывает заявку — кнопке это не нужно.
|
||
e.stopPropagation();
|
||
onDelete(r);
|
||
}}
|
||
/>
|
||
) : null
|
||
});
|
||
}
|
||
|
||
return (
|
||
<div className={styles.tableWrap}>
|
||
<DataTable
|
||
columns={columns}
|
||
rows={rows}
|
||
rowKey={(r) => `${r.requestTypeId}-${r.id}`}
|
||
onRowClick={onOpen}
|
||
/>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// Раздел с таблицей заявок: поиск по всем полям + вывод постранично.
|
||
//
|
||
// Движок выбирается по наличию текста в поиске, а не по разделу: БЕЗ запроса —
|
||
// всегда обычный REST (мгновенно свежий, без задержки индексации), С запросом —
|
||
// всегда Search (полнотекстовый, но переиндексируется с задержкой). Раньше
|
||
// поиск подмешивал REST для «свежих» строк поверх Search — из-за этого
|
||
// результат мог быть неустойчивым (заявка то находилась, то нет, в зависимости
|
||
// от того, попала ли она в окно подстраховки); эту гибридную логику убрали.
|
||
//
|
||
// 'own:created' без фильтра и поиска — getOwnRequests (Search + REST-довесок на
|
||
// свежесть). С поиском — searchOwnRequests (Search, RowLimit/StartRow).
|
||
//
|
||
// Очереди и история решений ('approvals'/'execution'/'own:*' кроме created) без
|
||
// поиска — getApprovalQueue: REST по ApproverId(+Status), страница нарезается на
|
||
// СЕРВЕРЕ (сам берёт нужный срез индекса и дочитывает автора только для него).
|
||
// С поиском — getApprovalQueueIndex даёт ПОЛНЫЙ список этой же очереди без
|
||
// автора (постранично его тут не взять, т.к. фильтрация текстом идёт уже
|
||
// после), затем текстовый фильтр через Search (filterPendingByQuery), и только
|
||
// после фильтрации — нарезка на страницы и дочитывание автора
|
||
// (hydratePendingAuthors) — тоже только для видимой страницы.
|
||
//
|
||
// Отбор по статусу ЗАЯВКИ ('rework' и фильтр на 'own:created') — НЕ через KQL:
|
||
// managed property для произвольной Choice-колонки ненадёжна (см.
|
||
// getOwnRequestsByStatus в myRequests.service.ts — там объяснение и ссылка на
|
||
// реальный инцидент). Вместо этого Search ищет только по автору (надёжная
|
||
// AuthorOWSUSER), а статус фильтруется в памяти по полям, дочитанным через
|
||
// REST; постраничность там же, в памяти.
|
||
//
|
||
// Все варианты перечитываются по событию rp-requests-changed
|
||
// (shared/requestEvents) — после создания заявки и после решения согласующего.
|
||
// Поиск идёт по индексу, поэтому свежая правка может проявиться не мгновенно.
|
||
export const RequestsTableView: React.FC<IRequestsTableViewProps> = ({
|
||
context,
|
||
view,
|
||
statusFilter = '',
|
||
onStatusFilterChange,
|
||
page,
|
||
onPageChange,
|
||
query,
|
||
onQueryChange,
|
||
onOpen,
|
||
allRequestsType,
|
||
}) => {
|
||
const [types, setTypes] = React.useState<IRequestType[] | undefined>(undefined);
|
||
const [rows, setRows] = React.useState<IMyRequest[] | undefined>(undefined);
|
||
const [totalRows, setTotalRows] = React.useState<number>(0);
|
||
const [error, setError] = React.useState<string>('');
|
||
const [deleteError, setDeleteError] = React.useState<string>('');
|
||
|
||
// Список перечитается сам: confirmAndDeleteDraft шлёт rp-requests-changed.
|
||
const handleDelete = (request: IMyRequest): void => {
|
||
setDeleteError('');
|
||
confirmAndDeleteDraft({
|
||
formKey: request.formKey,
|
||
itemId: request.id,
|
||
listId: request.listId,
|
||
code: request.code
|
||
}).catch((e) => setDeleteError(`Не удалось удалить черновик: ${friendlyErrorMessage(e)}`));
|
||
};
|
||
|
||
// input — то, что в поле ввода (меняется сразу); в маршрут значение уходит
|
||
// после паузы в наборе. Данные грузятся по МАРШРУТНОМУ query — он и так уже
|
||
// «отложенный», отдельный debounce здесь был бы вторым по счёту.
|
||
const [input, setInput] = useRoutedQuery(query, onQueryChange);
|
||
const debouncedQuery = query;
|
||
|
||
// Какой ИМЕННО таблице принадлежат лежащие в состоянии rows/totalRows.
|
||
// Компонент один на все разделы (см. LIST_VIEWS в RequestPortal), поэтому при
|
||
// переключении раздела его состояние ещё хранит данные ПРЕДЫДУЩЕГО, пока не
|
||
// отработает загрузка. Без этой отметки сброс страницы ниже принимал решение
|
||
// по чужому totalRows и сбивал страницу на первую — из-за чего запомненная
|
||
// страница затиралась при каждом переходе по левому меню.
|
||
// Страница в ключ НЕ входит: totalRows один на всю таблицу, а не на страницу.
|
||
const dataKey = `${view}|${statusFilter}|${debouncedQuery.trim()}|${allRequestsType?.id ?? ''}`;
|
||
const [loadedKey, setLoadedKey] = React.useState<string>('');
|
||
|
||
// Страницу при смене запроса здесь НЕ сбрасываем: и запрос, и страница живут
|
||
// в маршруте, и меняются они одним переходом (см. setQuery в RequestPortal).
|
||
|
||
React.useEffect(() => {
|
||
let cancelled = false;
|
||
getLinkedTypes(context)
|
||
.then((t) => {
|
||
if (!cancelled) setTypes(t);
|
||
})
|
||
.catch((e) => {
|
||
if (!cancelled) setError((e as Error).message);
|
||
});
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [context]);
|
||
|
||
React.useEffect(() => {
|
||
if (types === undefined) return;
|
||
let cancelled = false;
|
||
const cacheKey = pageKey('table', [view, statusFilter, debouncedQuery.trim(), page, allRequestsType?.id ?? 0]);
|
||
|
||
// Сразу показываем то, что уже загружали для ЭТОЙ вкладки (и этого запроса
|
||
// и страницы), а обновление идёт фоном. Компонент один на обе вкладки —
|
||
// без кеша при переключении на экране оставались бы строки предыдущей
|
||
// вкладки, пока не придёт ответ. Если для этой вкладки данных ещё нет —
|
||
// rows становится undefined, и показывается «Загрузка…».
|
||
const cached = readPage(cacheKey);
|
||
setRows(cached ? cached.rows : undefined);
|
||
setTotalRows(cached ? cached.totalRows : 0);
|
||
// Пока не подтвердим, что загруженное относится к ТЕКУЩЕЙ таблице, ничего
|
||
// на основании totalRows решать нельзя — см. loadedKey ниже.
|
||
setLoadedKey(cached ? dataKey : '');
|
||
|
||
const q = debouncedQuery.trim();
|
||
|
||
// onPartial — Search и REST-довесок по свежести («Мои заявки»/«Доработка»,
|
||
// см. getOwnRequests/getOwnRequestsByStatus в myRequests.service.ts) теперь
|
||
// идут параллельно, и заранее не угадать, какой из двух ответит первым —
|
||
// сеть шумит то в одну, то в другую сторону. onPartial зовётся с тем, что
|
||
// пришло раньше, чтобы не держать список пустым ради заведомо более
|
||
// медленного источника. Остальные ветки (approvals/execution/поиск) его
|
||
// просто не принимают — там нет пары «Search + довесок» с независимо
|
||
// валидным промежуточным результатом.
|
||
const fetchRows = async (onPartial?: (p: IPage) => void): Promise<IPage> => {
|
||
// «Доработка» — тот же список, что «Инициированные», просто со статусом,
|
||
// зашитым в раздел, а не выбранным в фильтре.
|
||
if (view === 'rework' || (view === 'own:created' && statusFilter)) {
|
||
const status = view === 'rework' ? REQUEST_STATUS.returned : statusFilter;
|
||
return getOwnRequestsByStatus(context, types, status, page, debouncedQuery, onPartial);
|
||
}
|
||
|
||
if (view === 'own:created') {
|
||
return q.length > 0
|
||
? searchOwnRequests(context, types, debouncedQuery, page)
|
||
: getOwnRequests(context, types, page, onPartial);
|
||
}
|
||
|
||
if (view === 'all') {
|
||
if (!allRequestsType) return { rows: [], totalRows: 0 };
|
||
return getAllRequestsForType(context, allRequestsType, page, debouncedQuery);
|
||
}
|
||
|
||
const queue = QUEUE_BY_VIEW[view];
|
||
if (q.length === 0) {
|
||
// Без поиска — страница уже нарезана и дочитана сервером.
|
||
const r = await getApprovalQueue(context, queue, page);
|
||
return { rows: r.rows, totalRows: r.totalRows };
|
||
}
|
||
|
||
// С поиском — сначала полный список этой очереди (без автора), фильтруем
|
||
// текстом, и только потом режем на страницы и дочитываем автора — только
|
||
// для видимой страницы.
|
||
const idx = await getApprovalQueueIndex(context, queue);
|
||
const filtered = await filterPendingByQuery(context, idx.types, idx.rows, debouncedQuery);
|
||
const pageRows = filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
|
||
await hydratePendingAuthors(context, idx.types, pageRows);
|
||
return { rows: pageRows, totalRows: filtered.length };
|
||
};
|
||
|
||
// Комментарий к решению дочитываем ОДНИМ местом на все ветки: «Доработка» и
|
||
// «Отклонённые мной» приходят разными путями (по автору и по строкам
|
||
// маршрута соответственно), а колонка у них одинаковая по смыслу. И только
|
||
// для видимой страницы — как и автор в hydratePendingAuthors. Промежуточный
|
||
// показ (onPartial) комментарий ещё не несёт — он дочитывается только для
|
||
// ИТОГОВОГО результата, полный показ его донесёт следом.
|
||
const fetchPage = async (onPartial?: (p: IPage) => void): Promise<IPage> => {
|
||
const result = await fetchRows(onPartial);
|
||
const decisionStatus = decisionStatusFor(view, statusFilter);
|
||
if (decisionStatus) {
|
||
await hydrateDecisionComments(context, types, result.rows, decisionStatus);
|
||
}
|
||
return result;
|
||
};
|
||
|
||
const load = async (forceRender = false): Promise<void> => {
|
||
try {
|
||
// Промежуточный показ — ТОЛЬКО когда для этой страницы прямо СЕЙЧАС
|
||
// ничего не закешировано (первый заход, экран пуст). Проверяем на
|
||
// каждый вызов load(), а не один раз на весь эффект: тот же load()
|
||
// переиспользуется автообновлением по таймеру и событием
|
||
// rp-requests-changed все 10 минут жизни вкладки, и ко второму вызову
|
||
// кеш почти наверняка уже есть — без повторной проверки список бы на
|
||
// мгновение "усыхал" при КАЖДОМ фоновом обновлении, а не только при
|
||
// самой первой загрузке.
|
||
const onPartial = readPage(cacheKey)
|
||
? undefined
|
||
: (partial: IPage): void => {
|
||
if (cancelled) return;
|
||
// ПУСТОЙ промежуточный результат не показываем: смысл onPartial —
|
||
// не держать экран пустым, пока отвечает более медленный источник,
|
||
// а пустая страница как раз пустой экран и даёт, только вместо
|
||
// «Загрузка…» на нём появляется «Вы ещё не создавали заявок» —
|
||
// и через мгновение исчезает, когда придёт второй источник.
|
||
if (partial.rows.length === 0) return;
|
||
setRows(partial.rows);
|
||
setTotalRows(partial.totalRows);
|
||
};
|
||
|
||
const fresh = await perfScope(`таблица ${view} стр.${page}`, () => fetchPage(onPartial));
|
||
if (cancelled) return;
|
||
|
||
// Перерисовываем, только если данные реально изменились — иначе при
|
||
// каждом возврате на вкладку таблица моргала бы, перерисовываясь тем же
|
||
// самым содержимым. forceRender — исключение: строки уже спрятаны со
|
||
// экрана (см. force ниже), и их обязательно нужно вернуть, даже если
|
||
// свежий ответ побайтово совпал с тем, что было в кеше, — иначе таблица
|
||
// так и останется в состоянии «Загрузка…», хотя данные давно пришли
|
||
// (баг: ушёл на этом самом совпадении сигнатур, найден 2026-08-18).
|
||
const prev = readPage(cacheKey);
|
||
if (forceRender || !prev || pageSignature(prev) !== pageSignature(fresh)) {
|
||
writePage(cacheKey, fresh);
|
||
setRows(fresh.rows);
|
||
setTotalRows(fresh.totalRows);
|
||
}
|
||
// Данные точно от текущей таблицы — теперь по ним можно судить о
|
||
// количестве страниц (см. сброс страницы ниже).
|
||
setLoadedKey(dataKey);
|
||
setError('');
|
||
} catch (e) {
|
||
if (!cancelled) setError((e as Error).message);
|
||
}
|
||
};
|
||
|
||
load().catch(() => undefined); // ошибки уже обработаны внутри load через setError
|
||
const unsubscribe = onRequestsChanged((force) => {
|
||
// Явный повторный клик по уже открытому пункту меню — пользователь ждёт
|
||
// видимого обновления, а не молчаливой подмены данных за спиной. Прежние
|
||
// строки прячем сразу; свежие подставит load(force).
|
||
if (force) {
|
||
setRows(undefined);
|
||
setLoadedKey('');
|
||
}
|
||
load(force).catch(() => undefined);
|
||
});
|
||
// Пока вкладка браузера скрыта, обновляться незачем — при возврате к ней
|
||
// сработает ближайший тик.
|
||
const timer = window.setInterval(() => {
|
||
if (!document.hidden) load().catch(() => undefined);
|
||
}, AUTO_REFRESH_MS);
|
||
return () => {
|
||
cancelled = true;
|
||
unsubscribe();
|
||
window.clearInterval(timer);
|
||
};
|
||
}, [context, types, view, statusFilter, debouncedQuery, page, dataKey, allRequestsType]);
|
||
|
||
// Все ветки отдают уже нарезанную страницу — просто показываем как есть.
|
||
const q = debouncedQuery.trim();
|
||
const total = totalRows;
|
||
const visible = rows || [];
|
||
|
||
/**
|
||
* Можно ли уже судить о содержимом таблицы.
|
||
*
|
||
* Пустоту («Вы ещё не создавали заявок») объявляем ТОЛЬКО по завершённой
|
||
* загрузке именно ЭТОЙ таблицы (loadedKey), а не по любому пустому rows: до
|
||
* этого rows может быть пустым по совершенно другой причине — часть источников
|
||
* ещё в пути (см. onPartial выше, «Мои заявки» собираются из Search + REST).
|
||
* Промежуточный НЕПУСТОЙ результат показывать можно и нужно — в нём уже есть
|
||
* что смотреть.
|
||
*/
|
||
const loaded = loadedKey === dataKey || visible.length > 0;
|
||
const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
|
||
|
||
// Страница может оказаться за пределами набора: пришла из старой ссылки или
|
||
// из запомненной, а заявок с тех пор стало меньше (часть согласовали, и они
|
||
// ушли из этой очереди). Показывать пустую таблицу с непустым счётчиком —
|
||
// выглядит как поломка, поэтому возвращаемся на последнюю существующую.
|
||
//
|
||
// Строго ПОСЛЕ проверки loadedKey: totalRows в состоянии может быть ещё от
|
||
// предыдущей таблицы (компонент общий), и решение по нему сбило бы страницу
|
||
// на первую при обычном переходе по левому меню.
|
||
React.useEffect(() => {
|
||
if (loadedKey !== dataKey) return;
|
||
if (rows && page > totalPages) onPageChange(totalPages);
|
||
}, [loadedKey, dataKey, rows, page, totalPages, onPageChange]);
|
||
|
||
return (
|
||
<section className={styles.view}>
|
||
<div className={styles.head}>
|
||
<h2 className={styles.heading}>
|
||
{view === 'all' && allRequestsType ? `Все заявки: ${allRequestsType.name}` : HEADINGS[view]}
|
||
{rows && <span className={styles.count}>{total}</span>}
|
||
</h2>
|
||
{view === 'own:created' && onStatusFilterChange && (
|
||
<select
|
||
// Цвет самого <select> (закрытое состояние) — тем же классом, что и
|
||
// у выбранного <option>: statusFilter задаёт нейтральные border/фон,
|
||
// а конкретный statusOptionClassName(statusFilter) перекрывает color.
|
||
className={`${styles.statusFilter} ${statusFilter ? statusOptionClassName(statusFilter) : ''}`}
|
||
value={statusFilter}
|
||
onChange={(e) => onStatusFilterChange(e.target.value)}
|
||
aria-label="Фильтр по статусу"
|
||
>
|
||
<option value="">Все статусы</option>
|
||
{REQUEST_STATUS_CHOICES.map((s) => (
|
||
<option key={s} value={s} className={statusOptionClassName(s)}>
|
||
{s}
|
||
</option>
|
||
))}
|
||
</select>
|
||
)}
|
||
<input
|
||
type="search"
|
||
className={styles.search}
|
||
placeholder="Поиск по заявкам…"
|
||
value={input}
|
||
onChange={(e) => setInput(e.target.value)}
|
||
/>
|
||
</div>
|
||
|
||
{error && <div className={styles.error}>Не удалось загрузить заявки: {error}</div>}
|
||
{deleteError && <div className={styles.error}>{deleteError}</div>}
|
||
{!error && !loaded && <div className={styles.empty}>Загрузка…</div>}
|
||
{!error && loaded && total === 0 && (
|
||
<div className={styles.empty}>
|
||
{q ? `По запросу «${debouncedQuery}» ничего не найдено.` : EMPTY_TEXTS[view]}
|
||
</div>
|
||
)}
|
||
{!error && rows && total > 0 && (
|
||
<>
|
||
<Table
|
||
rows={visible}
|
||
view={view}
|
||
statusFilter={statusFilter}
|
||
onOpen={onOpen}
|
||
onDelete={view === 'own:created' ? handleDelete : undefined}
|
||
/>
|
||
<Pager page={page} totalPages={totalPages} onChange={onPageChange} />
|
||
</>
|
||
)}
|
||
</section>
|
||
);
|
||
};
|