gorbenko.pavel
515 lines
27 KiB
TypeScript
515 lines
27 KiB
TypeScript
import * as React from 'react';
|
||
import type { WebPartContext } from '@microsoft/sp-webpart-base';
|
||
import {
|
||
ApprovalQueueKind,
|
||
filterPendingByQuery,
|
||
getApprovalQueue,
|
||
getApprovalQueueIndex,
|
||
getLinkedTypes,
|
||
getOwnRequests,
|
||
getOwnRequestsByStatus,
|
||
hydrateDecisionComments,
|
||
hydratePendingAuthors,
|
||
searchOwnRequests,
|
||
} from './myRequests.service';
|
||
import { IMyRequest } from './models/IMyRequest';
|
||
import { REQUEST_STATUS, REQUEST_STATUS_CHOICES, IRequestType, StatusBadge } from '../../shared/approval';
|
||
import { onRequestsChanged } from '../../shared/requestEvents';
|
||
import { usePersistedQuery, useDebouncedQuery } 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';
|
||
|
||
// Представления, которые строятся на строках маршрута пользователя, и их очередь
|
||
// в сервисе. Всё, чего здесь нет ('rework'/'own:created'), читается из списка
|
||
// данных по автору.
|
||
const QUEUE_BY_VIEW: { [key: string]: ApprovalQueueKind } = {
|
||
approvals: 'approvals',
|
||
execution: 'execution',
|
||
'own:approved': 'approved',
|
||
'own:rejected': 'rejected',
|
||
'own:executed': 'executed',
|
||
};
|
||
|
||
const HEADINGS: Record<ListView, string> = {
|
||
approvals: 'Ждут вашего согласования',
|
||
execution: 'Ждут вашего исполнения',
|
||
rework: 'Возвращены вам на доработку',
|
||
'own:created': 'Инициированные мной',
|
||
'own:approved': 'Согласованные мной',
|
||
'own:rejected': 'Отклонённые мной',
|
||
'own:executed': 'Выполненные мной',
|
||
};
|
||
|
||
const EMPTY_TEXTS: Record<ListView, string> = {
|
||
approvals: 'Нет заявок, ждущих вашего согласования.',
|
||
execution: 'Нет заявок, ждущих вашего исполнения.',
|
||
rework: 'Нет заявок, возвращённых вам на доработку.',
|
||
'own:created': 'Вы ещё не создавали заявок.',
|
||
'own:approved': 'Вы ещё ничего не согласовали.',
|
||
'own:rejected': 'Вы ещё ничего не отклоняли.',
|
||
'own:executed': 'Вы ещё ничего не выполнили.',
|
||
};
|
||
|
||
// Цвет пункта в выпадающем списке фильтра — то же сопоставление статус→цвет,
|
||
// что в 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 };
|
||
// История решений: заявка чужая, поэтому нужен автор. Статус — только если он
|
||
// не предопределён самой вкладкой («Отклонённые мной» — это всегда «Отклонено»,
|
||
// а вот у согласованных/выполненных заявка могла уйти дальше по маршруту).
|
||
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;
|
||
/** Клик по строке — открыть заявку (в выезжающей панели). */
|
||
onOpen: (request: IMyRequest) => void;
|
||
}
|
||
|
||
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.
|
||
const Table: React.FC<{
|
||
rows: IMyRequest[];
|
||
view: ListView;
|
||
statusFilter: string;
|
||
onOpen: (request: IMyRequest) => void;
|
||
}> = ({ rows, view, statusFilter, onOpen }) => {
|
||
const columns = columnsFor(view, statusFilter);
|
||
return (
|
||
<div className={styles.tableWrap}>
|
||
<table className={styles.table}>
|
||
<thead>
|
||
<tr>
|
||
<th className={styles.colId}>ID</th>
|
||
<th className={styles.colType}>Тип</th>
|
||
<th className={styles.colTitle}>Название</th>
|
||
<th className={styles.colDate}>Дата</th>
|
||
{columns.author && <th className={styles.colAuthor}>Автор</th>}
|
||
{columns.status && <th className={styles.colStatus}>Статус</th>}
|
||
{columns.commentLabel && <th className={styles.colComment}>{columns.commentLabel}</th>}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{rows.map((r) => (
|
||
<tr
|
||
className={styles.row}
|
||
key={`${r.requestTypeId}-${r.id}`}
|
||
tabIndex={0}
|
||
role="button"
|
||
aria-label={`Открыть заявку «${r.title || r.id}»`}
|
||
onClick={() => onOpen(r)}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter' || e.key === ' ') {
|
||
e.preventDefault();
|
||
onOpen(r);
|
||
}
|
||
}}
|
||
>
|
||
<td className={styles.colId}>{r.id}</td>
|
||
<td className={styles.colType}>{r.requestTypeName}</td>
|
||
<td className={styles.colTitle}>{r.title || `#${r.id}`}</td>
|
||
<td className={styles.colDate}>{formatDate(r.created)}</td>
|
||
{columns.author && (
|
||
<td className={styles.colAuthor}>
|
||
{[r.authorName, r.authorEmail].filter(Boolean).join(' · ') || '—'}
|
||
</td>
|
||
)}
|
||
{columns.status && (
|
||
<td className={styles.colStatus}>
|
||
{r.status ? <StatusBadge status={r.status} size="sm" /> : '—'}
|
||
</td>
|
||
)}
|
||
{columns.commentLabel && (
|
||
<td className={styles.colComment}>
|
||
{r.decisionComment || <span className={styles.commentEmpty}>Без комментария</span>}
|
||
</td>
|
||
)}
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</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,
|
||
onOpen,
|
||
}) => {
|
||
const [types, setTypes] = React.useState<IRequestType[] | undefined>(undefined);
|
||
const [rows, setRows] = React.useState<IMyRequest[] | undefined>(undefined);
|
||
const [totalRows, setTotalRows] = React.useState<number>(0);
|
||
const [query, setQuery] = usePersistedQuery(view);
|
||
const [error, setError] = React.useState<string>('');
|
||
|
||
// query — то, что в поле ввода (меняется сразу); debouncedQuery — то, что
|
||
// уходит в запрос (после паузы в наборе). Всё ниже завязано на debouncedQuery,
|
||
// иначе поиск бил бы запросом по каждой набранной букве.
|
||
const debouncedQuery = useDebouncedQuery(query);
|
||
|
||
// Какой ИМЕННО таблице принадлежат лежащие в состоянии rows/totalRows.
|
||
// Компонент один на все разделы (см. LIST_VIEWS в RequestPortal), поэтому при
|
||
// переключении раздела его состояние ещё хранит данные ПРЕДЫДУЩЕГО, пока не
|
||
// отработает загрузка. Без этой отметки сброс страницы ниже принимал решение
|
||
// по чужому totalRows и сбивал страницу на первую — из-за чего запомненная
|
||
// страница затиралась при каждом переходе по левому меню.
|
||
// Страница в ключ НЕ входит: totalRows один на всю таблицу, а не на страницу.
|
||
const dataKey = `${view}|${statusFilter}|${debouncedQuery.trim()}`;
|
||
const [loadedKey, setLoadedKey] = React.useState<string>('');
|
||
|
||
// Смена ЗАПРОСА сбрасывает страницу: набор результатов другой, и «страница 3»
|
||
// от прошлого запроса к нему отношения не имеет. Смену вкладки/фильтра здесь
|
||
// НЕ обрабатываем — там страница приходит уже правильной из маршрута
|
||
// (см. RequestPortal: gotoOwnTab/setOwnStatus). Сравниваем с предыдущим
|
||
// значением, а не просто вешаемся на изменение: иначе эффект сбрасывал бы
|
||
// страницу и на первом рендере, затирая ту, что пришла из адреса.
|
||
const prevQuery = React.useRef<string>(debouncedQuery);
|
||
React.useEffect(() => {
|
||
if (prevQuery.current === debouncedQuery) return;
|
||
prevQuery.current = debouncedQuery;
|
||
if (page !== 1) onPageChange(1);
|
||
}, [debouncedQuery, page, onPageChange]);
|
||
|
||
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]);
|
||
|
||
// Сразу показываем то, что уже загружали для ЭТОЙ вкладки (и этого запроса
|
||
// и страницы), а обновление идёт фоном. Компонент один на обе вкладки —
|
||
// без кеша при переключении на экране оставались бы строки предыдущей
|
||
// вкладки, пока не придёт ответ. Если для этой вкладки данных ещё нет —
|
||
// 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();
|
||
|
||
const fetchRows = async (): Promise<IPage> => {
|
||
// «Доработка» — тот же список, что «Инициированные», просто со статусом,
|
||
// зашитым в раздел, а не выбранным в фильтре.
|
||
if (view === 'rework' || (view === 'own:created' && statusFilter)) {
|
||
const status = view === 'rework' ? REQUEST_STATUS.returned : statusFilter;
|
||
return getOwnRequestsByStatus(context, types, status, page, debouncedQuery);
|
||
}
|
||
|
||
if (view === 'own:created') {
|
||
return q.length > 0
|
||
? searchOwnRequests(context, types, debouncedQuery, page)
|
||
: getOwnRequests(context, types, page);
|
||
}
|
||
|
||
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.
|
||
const fetchPage = async (): Promise<IPage> => {
|
||
const result = await fetchRows();
|
||
const decisionStatus = decisionStatusFor(view, statusFilter);
|
||
if (decisionStatus) {
|
||
await hydrateDecisionComments(context, types, result.rows, decisionStatus);
|
||
}
|
||
return result;
|
||
};
|
||
|
||
const load = async (): Promise<void> => {
|
||
try {
|
||
const fresh = await fetchPage();
|
||
if (cancelled) return;
|
||
|
||
// Перерисовываем, только если данные реально изменились — иначе при
|
||
// каждом возврате на вкладку таблица моргала бы, перерисовываясь тем же
|
||
// самым содержимым.
|
||
const prev = readPage(cacheKey);
|
||
if (!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(() => {
|
||
load().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]);
|
||
|
||
// Все ветки отдают уже нарезанную страницу — просто показываем как есть.
|
||
const q = debouncedQuery.trim();
|
||
const total = totalRows;
|
||
const visible = rows || [];
|
||
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}>
|
||
{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={query}
|
||
onChange={(e) => setQuery(e.target.value)}
|
||
/>
|
||
</div>
|
||
|
||
{error && <div className={styles.error}>Не удалось загрузить заявки: {error}</div>}
|
||
{!error && rows === undefined && <div className={styles.empty}>Загрузка…</div>}
|
||
{!error && rows && 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} />
|
||
<Pager page={page} totalPages={totalPages} onChange={onPageChange} />
|
||
</>
|
||
)}
|
||
</section>
|
||
);
|
||
};
|