Редактирование заявок у конкретного пользователя (#14)
Co-authored-by: gorbenko.pavel <gorbenko.pavel@tansu.kz> Reviewed-on: http://git.tnsu.kz/gorbenko.pavel/tnsu-approval-route/pulls/14
This commit was merged in pull request #14.
This commit is contained in:
@@ -0,0 +1,589 @@
|
||||
import * as React from 'react';
|
||||
import styles from './ManageByUserScreen.module.scss';
|
||||
import { DuplicateChoice, ManageByUserDuplicateModal } from './ManageByUserDuplicateModal';
|
||||
import { ApprovalRouteApi } from '../../services/api';
|
||||
import { PortalDictionaryClient } from '../../services/portalDictionary';
|
||||
import { RequestManageService } from '../../services/requestManageService';
|
||||
import { ApiClientError } from '../../services/httpClient';
|
||||
import { REQUEST_STATUS, RequestListPartition, UserApprovalRow, UserTemplateStepRow } from '../../models';
|
||||
import { routeStepStatusLabels, texts } from '../../texts';
|
||||
import { shortGuid } from '../../utils/guid';
|
||||
import { describeStepCondition } from '../../utils/stepExecutor';
|
||||
import { findEmployeeByEmail, toEmployeeOption } from '../../utils/employee';
|
||||
import { reportError } from '../../utils/errors';
|
||||
import { mapWithLimit } from '../../utils/parallel';
|
||||
import { IManageByUserRouteParams, replaceRoute } from '../../routing';
|
||||
import { useLocalStorageState } from '../../hooks/useLocalStorageState';
|
||||
import { useRequestTypes } from '../../hooks/useRequestTypes';
|
||||
import { useRequestTypeListsAll } from '../../hooks/useRequestTypeListsAll';
|
||||
import { useTemplateRouteStepsByExecutor } from '../../hooks/useTemplateRouteStepsByExecutor';
|
||||
import { useTemplateRoutesLookup } from '../../hooks/useTemplateRoutesLookup';
|
||||
import { usePortalEmployees } from '../../hooks/usePortalEmployees';
|
||||
import { usePortalDictionaries } from '../../hooks/usePortalDictionaries';
|
||||
import {
|
||||
ActionsCell,
|
||||
Alert,
|
||||
Badge,
|
||||
BadgeVariant,
|
||||
Breadcrumbs,
|
||||
Button,
|
||||
Checkbox,
|
||||
DataTable,
|
||||
Field,
|
||||
FormGrid,
|
||||
IColumn,
|
||||
IconButton,
|
||||
PageHeader,
|
||||
Panel,
|
||||
PrimaryCell,
|
||||
ProgressOverlay,
|
||||
SearchableSelect,
|
||||
Toast
|
||||
} from '../ui';
|
||||
|
||||
export interface IManageByUserScreenProps {
|
||||
api: ApprovalRouteApi;
|
||||
/** Undefined, пока SPFx выдаёт AAD-клиент для api.tnsu.kz. */
|
||||
dictionary?: PortalDictionaryClient;
|
||||
requestManage: RequestManageService;
|
||||
/** Заполнение из URL (глубокая ссылка на конкретного сотрудника) — см. routing.ts. */
|
||||
route?: IManageByUserRouteParams;
|
||||
}
|
||||
|
||||
// Выбор (кого меняем и на кого) переживает перезагрузку страницы — как и выбор
|
||||
// заявки в ManageRequestsScreen (тот же приём, отдельный ключ).
|
||||
const SELECTION_STORAGE_KEY = 'approvalAdmin.manageByUserSelection';
|
||||
|
||||
interface IPersistedSelection {
|
||||
employeeEmail: string;
|
||||
targetEmail: string;
|
||||
}
|
||||
|
||||
const EMPTY_SELECTION: IPersistedSelection = { employeeEmail: '', targetEmail: '' };
|
||||
|
||||
// Активные статусы строки для этого экрана — сознательно уже, чем
|
||||
// isEditableRowStatus (models/requestManage.ts): «Возвращена на доработку» и
|
||||
// черновики сюда не входят (согласовано отдельно, см. план реализации).
|
||||
const ACTIVE_STATUSES: string[] = [REQUEST_STATUS.queued, REQUEST_STATUS.onApproval, REQUEST_STATUS.onExecution];
|
||||
|
||||
// Итог пакетной операции по одной панели.
|
||||
interface IBulkOutcome {
|
||||
ok: number;
|
||||
fail: number;
|
||||
/** Дубли, снятые удалением старой строки/шага (пользователь выбрал «удалить»). */
|
||||
deleted: number;
|
||||
/** Дубли, оставленные как есть (пользователь выбрал «пропустить»). */
|
||||
skipped: number;
|
||||
}
|
||||
|
||||
// Та же цветовая группировка статуса заявки, что и в ManageRequestsScreen
|
||||
// (дублирование небольшое и не стоит выносить ради одной строки).
|
||||
function statusVariant(status: string): BadgeVariant {
|
||||
if (status === REQUEST_STATUS.onExecution) return 'blue';
|
||||
if (status === REQUEST_STATUS.queued) return 'neutral';
|
||||
return 'gold';
|
||||
}
|
||||
|
||||
function liveRowKey(r: UserApprovalRow): string {
|
||||
return `${r.listId}:${r.id}`;
|
||||
}
|
||||
|
||||
interface IReplaceScope {
|
||||
live: UserApprovalRow[];
|
||||
templates: UserTemplateStepRow[];
|
||||
}
|
||||
|
||||
export const ManageByUserScreen: React.FC<IManageByUserScreenProps> = ({ api, dictionary, requestManage, route }) => {
|
||||
const requestTypes = useRequestTypes(api);
|
||||
const listSeries = useRequestTypeListsAll(api);
|
||||
const employees = usePortalEmployees(dictionary);
|
||||
const dictionaries = usePortalDictionaries(dictionary);
|
||||
|
||||
const [selection, setSelection] = useLocalStorageState<IPersistedSelection>(SELECTION_STORAGE_KEY, EMPTY_SELECTION);
|
||||
const { employeeEmail, targetEmail } = selection;
|
||||
|
||||
const selectEmployee = (email: string): void => setSelection(prev => ({ ...prev, employeeEmail: email }));
|
||||
const selectTarget = (email: string): void => setSelection(prev => ({ ...prev, targetEmail: email }));
|
||||
const swapEmployees = (): void =>
|
||||
setSelection(prev => ({ employeeEmail: prev.targetEmail, targetEmail: prev.employeeEmail }));
|
||||
|
||||
// Открыли по глубокой ссылке (aabuser/aabtarget в URL) — перекрывает то, что
|
||||
// было в localStorage. Только на монтировании: route меняется при каждом
|
||||
// собственном replaceRoute ниже (тот же приём, что в ManageRequestsScreen).
|
||||
React.useEffect(() => {
|
||||
if (route?.userEmail) setSelection({ employeeEmail: route.userEmail, targetEmail: route.targetEmail });
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
// Держим URL синхронным с выбором — открытый экран можно скопировать и
|
||||
// прислать коллеге. replaceRoute, а не navigate: смена сотрудника — правка
|
||||
// состояния текущего экрана, а не отдельный шаг в истории браузера.
|
||||
React.useEffect(() => {
|
||||
replaceRoute({
|
||||
tab: 'manageByUser',
|
||||
manageByUser: employeeEmail ? { userEmail: employeeEmail, targetEmail } : undefined
|
||||
});
|
||||
}, [employeeEmail, targetEmail]);
|
||||
|
||||
const partitionsByType = React.useMemo(() => {
|
||||
const map = new Map<number, RequestListPartition[]>();
|
||||
listSeries.items.forEach(s => map.set(s.requestTypeId, s.partitions));
|
||||
return map;
|
||||
}, [listSeries.items]);
|
||||
|
||||
const [liveRows, setLiveRows] = React.useState<UserApprovalRow[]>([]);
|
||||
const [liveLoading, setLiveLoading] = React.useState(false);
|
||||
const [liveError, setLiveError] = React.useState<string | undefined>();
|
||||
const [checkedLiveKeys, setCheckedLiveKeys] = React.useState<Set<string>>(new Set());
|
||||
|
||||
const reloadLiveRows = React.useCallback(() => {
|
||||
if (!employeeEmail || requestTypes.isLoading || listSeries.isLoading) return;
|
||||
setLiveLoading(true);
|
||||
setLiveError(undefined);
|
||||
requestManage
|
||||
.findActiveApprovalRowsForApprover(requestTypes.items, partitionsByType, employeeEmail, ACTIVE_STATUSES)
|
||||
.then(setLiveRows)
|
||||
.catch((e: Error) => setLiveError(reportError(e, 'ManageByUserScreen: findActiveApprovalRowsForApprover')))
|
||||
.finally(() => setLiveLoading(false));
|
||||
}, [requestManage, requestTypes.items, requestTypes.isLoading, partitionsByType, listSeries.isLoading, employeeEmail]);
|
||||
|
||||
React.useEffect(() => {
|
||||
setLiveRows([]);
|
||||
setCheckedLiveKeys(new Set());
|
||||
reloadLiveRows();
|
||||
}, [reloadLiveRows]);
|
||||
|
||||
const templateSteps = useTemplateRouteStepsByExecutor(api, employeeEmail || undefined);
|
||||
const routeIds = React.useMemo(() => templateSteps.items.map(s => s.routeId), [templateSteps.items]);
|
||||
const routesLookup = useTemplateRoutesLookup(api, routeIds);
|
||||
const [checkedTemplateIds, setCheckedTemplateIds] = React.useState<Set<number>>(new Set());
|
||||
|
||||
const templateRows: UserTemplateStepRow[] = React.useMemo(
|
||||
() =>
|
||||
templateSteps.items.map(step => {
|
||||
const route = routesLookup.byId.get(step.routeId);
|
||||
const requestType = route ? requestTypes.items.filter(rt => rt.id === route.requestTypeId)[0] : undefined;
|
||||
const companyName = route?.companyId
|
||||
? dictionaries.companies.find(c => c.id === route.companyId)?.name ?? shortGuid(route.companyId)
|
||||
: texts.routeSteps.anyCompany;
|
||||
const departmentName = route?.departmentId
|
||||
? dictionaries.departments.find(d => d.id === route.departmentId)?.name ?? shortGuid(route.departmentId)
|
||||
: texts.routeSteps.anyDepartment;
|
||||
return {
|
||||
...step,
|
||||
requestTypeName: requestType?.name ?? (route ? `#${route.requestTypeId}` : texts.common.empty),
|
||||
companyName,
|
||||
departmentName
|
||||
};
|
||||
}),
|
||||
[templateSteps.items, routesLookup.byId, requestTypes.items, dictionaries.companies, dictionaries.departments]
|
||||
);
|
||||
|
||||
const toggleLive = (row: UserApprovalRow): void =>
|
||||
setCheckedLiveKeys(prev => {
|
||||
const next = new Set(prev);
|
||||
const key = liveRowKey(row);
|
||||
if (next.has(key)) next.delete(key);
|
||||
else next.add(key);
|
||||
return next;
|
||||
});
|
||||
|
||||
const toggleTemplate = (row: UserTemplateStepRow): void =>
|
||||
setCheckedTemplateIds(prev => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(row.id)) next.delete(row.id);
|
||||
else next.add(row.id);
|
||||
return next;
|
||||
});
|
||||
|
||||
const checkedLiveRows = liveRows.filter(r => checkedLiveKeys.has(liveRowKey(r)));
|
||||
const checkedTemplateRows = templateRows.filter(r => checkedTemplateIds.has(r.id));
|
||||
|
||||
const allLiveChecked = liveRows.length > 0 && checkedLiveRows.length === liveRows.length;
|
||||
const toggleAllLive = (): void => setCheckedLiveKeys(allLiveChecked ? new Set() : new Set(liveRows.map(liveRowKey)));
|
||||
|
||||
const allTemplatesChecked = templateRows.length > 0 && checkedTemplateRows.length === templateRows.length;
|
||||
const toggleAllTemplates = (): void =>
|
||||
setCheckedTemplateIds(allTemplatesChecked ? new Set() : new Set(templateRows.map(r => r.id)));
|
||||
|
||||
const [resultToast, setResultToast] = React.useState<{ message: string; kind: 'ok' | 'err' } | undefined>();
|
||||
// Пока задан — интерфейс заблокирован подложкой с полосой прогресса
|
||||
// (ProgressOverlay), и запустить вторую замену поверх первой нельзя.
|
||||
const [progress, setProgress] = React.useState<{ done: number; total: number } | undefined>();
|
||||
|
||||
// Открытый диалог разрешения дубля + то, чем разбудить ожидающий его цикл
|
||||
// замены (см. askDuplicate). Пакетная обработка идёт ПОСЛЕДОВАТЕЛЬНО именно
|
||||
// из-за этого диалога: параллельные ветки открыли бы N окон разом.
|
||||
const [duplicatePrompt, setDuplicatePrompt] =
|
||||
React.useState<{ message: string; resolve: (choice: DuplicateChoice) => void } | undefined>();
|
||||
// «…для всех» на время ОДНОЙ пакетной операции — ref, а не state: значение
|
||||
// читается внутри уже запущенного цикла, и перерисовка ему не нужна.
|
||||
const duplicatePolicy = React.useRef<DuplicateChoice | undefined>(undefined);
|
||||
|
||||
// Шаг вперёд по полосе прогресса. Вызывается ПЕРЕД обработкой очередной
|
||||
// строки: показывает «делаю N-ю из M», а не «N уже готово».
|
||||
const advanceProgress = (): void =>
|
||||
setProgress(prev => (prev ? { done: Math.min(prev.done + 1, prev.total), total: prev.total } : prev));
|
||||
|
||||
const askDuplicate = (message: string): Promise<DuplicateChoice> => {
|
||||
if (duplicatePolicy.current) return Promise.resolve(duplicatePolicy.current);
|
||||
return new Promise<DuplicateChoice>(resolve => setDuplicatePrompt({ message, resolve }));
|
||||
};
|
||||
|
||||
const answerDuplicate = (choice: DuplicateChoice, forAll: boolean): void => {
|
||||
if (forAll) duplicatePolicy.current = choice;
|
||||
const pending = duplicatePrompt;
|
||||
setDuplicatePrompt(undefined);
|
||||
pending?.resolve(choice);
|
||||
};
|
||||
|
||||
/**
|
||||
* Замена в живых заявках — тремя фазами, чтобы совместить параллельность с
|
||||
* интерактивным разрешением дублей:
|
||||
*
|
||||
* 1. ПАРАЛЛЕЛЬНО проверяем каждую строку на дубль (чтение, ничего не пишет)
|
||||
* и заодно параллельно заменяем все «чистые» строки;
|
||||
* 2. ПОСЛЕДОВАТЕЛЬНО спрашиваем пользователя по каждому найденному дублю —
|
||||
* диалог по определению один за раз (параллельно открылось бы N окон);
|
||||
* 3. ПАРАЛЛЕЛЬНО удаляем те строки, по которым выбрали «удалить».
|
||||
*
|
||||
* Дубль (тот же человек уже стоит в этой же фазе этой же заявки) SharePoint
|
||||
* сам не запрещает — если не проверить, в маршруте появились бы две строки на
|
||||
* одного человека, и заявка ушла бы ему на согласование дважды.
|
||||
*/
|
||||
async function bulkReplaceLive(rows: UserApprovalRow[], email: string, position: string): Promise<IBulkOutcome> {
|
||||
const outcome: IBulkOutcome = { ok: 0, fail: 0, deleted: 0, skipped: 0 };
|
||||
|
||||
// Фаза 1: проверка дублей. Прогресс здесь не двигаем — это ещё не работа по
|
||||
// строке, а подготовка (строка может оказаться и заменена, и удалена).
|
||||
const checks = await mapWithLimit(rows, row => requestManage.hasApproverInSamePhase(row, email));
|
||||
|
||||
const clean: UserApprovalRow[] = [];
|
||||
const conflicting: UserApprovalRow[] = [];
|
||||
checks.forEach((result, i) => {
|
||||
if (!result.ok) {
|
||||
reportError(result.error, 'ManageByUserScreen: hasApproverInSamePhase');
|
||||
outcome.fail += 1;
|
||||
advanceProgress();
|
||||
return;
|
||||
}
|
||||
(result.value ? conflicting : clean).push(rows[i]);
|
||||
});
|
||||
|
||||
// Фаза 2: «чистые» строки — параллельно, друг от друга не зависят.
|
||||
const replaced = await mapWithLimit(
|
||||
clean,
|
||||
row => requestManage.reassignApprover(row, row.id, email, position),
|
||||
{ onSettled: advanceProgress }
|
||||
);
|
||||
replaced.forEach(result => {
|
||||
if (result.ok) outcome.ok += 1;
|
||||
else {
|
||||
reportError(result.error, 'ManageByUserScreen: bulkReplaceLive/reassign');
|
||||
outcome.fail += 1;
|
||||
}
|
||||
});
|
||||
|
||||
// Фаза 3: дубли — спрашиваем по одному, накапливая тех, кого удалять.
|
||||
const toDelete: UserApprovalRow[] = [];
|
||||
for (const row of conflicting) {
|
||||
const label = `${row.requestUniqueCode || `#${row.ticketId}`} ${row.requestTitle}`;
|
||||
const choice = await askDuplicate(texts.manageByUser.duplicateLiveMessage(label, row.position, email));
|
||||
if (choice === 'skip') {
|
||||
outcome.skipped += 1;
|
||||
advanceProgress();
|
||||
} else {
|
||||
toDelete.push(row);
|
||||
}
|
||||
}
|
||||
|
||||
const removed = await mapWithLimit(toDelete, row => requestManage.removeRow(row, row.id), {
|
||||
onSettled: advanceProgress
|
||||
});
|
||||
removed.forEach(result => {
|
||||
if (result.ok) outcome.deleted += 1;
|
||||
else {
|
||||
reportError(result.error, 'ManageByUserScreen: bulkReplaceLive/remove');
|
||||
outcome.fail += 1;
|
||||
}
|
||||
});
|
||||
|
||||
return outcome;
|
||||
}
|
||||
|
||||
/**
|
||||
* Замена в шаблонах маршрутов — та же трёхфазная схема, что и для живых
|
||||
* заявок, но дубль здесь ловит СЕРВЕР (HasDuplicateAsync в
|
||||
* TemplateRouteStepService → 409): своей предварительной проверки не делаем,
|
||||
* его правило шире email'а (совпадать должны ещё статус и условие появления),
|
||||
* и дублировать это на клиенте значило бы разъехаться с ним при первой же
|
||||
* правке. Поэтому «проверка» и есть сам PATCH — он идёт параллельно, а
|
||||
* разбираем 409-ые уже после.
|
||||
*/
|
||||
async function bulkReplaceTemplates(rows: UserTemplateStepRow[], email: string): Promise<IBulkOutcome> {
|
||||
const outcome: IBulkOutcome = { ok: 0, fail: 0, deleted: 0, skipped: 0 };
|
||||
|
||||
const patched = await mapWithLimit(
|
||||
rows,
|
||||
row => api.templateRouteSteps.patch(row.routeId, row.id, { executorEmail: email }),
|
||||
{ onSettled: advanceProgress }
|
||||
);
|
||||
|
||||
const conflicting: UserTemplateStepRow[] = [];
|
||||
patched.forEach((result, i) => {
|
||||
if (result.ok) {
|
||||
outcome.ok += 1;
|
||||
return;
|
||||
}
|
||||
if ((result.error as ApiClientError)?.status === 409) {
|
||||
conflicting.push(rows[i]);
|
||||
return;
|
||||
}
|
||||
reportError(result.error, 'ManageByUserScreen: bulkReplaceTemplates');
|
||||
outcome.fail += 1;
|
||||
});
|
||||
|
||||
const toDelete: UserTemplateStepRow[] = [];
|
||||
for (const row of conflicting) {
|
||||
const label = `${row.requestTypeName} — ${row.companyName}`;
|
||||
const choice = await askDuplicate(texts.manageByUser.duplicateTemplateMessage(label, row.orderNo, email));
|
||||
if (choice === 'skip') outcome.skipped += 1;
|
||||
else toDelete.push(row);
|
||||
}
|
||||
|
||||
const removed = await mapWithLimit(toDelete, row => api.templateRouteSteps.remove(row.routeId, row.id));
|
||||
removed.forEach(result => {
|
||||
if (result.ok) outcome.deleted += 1;
|
||||
else {
|
||||
reportError(result.error, 'ManageByUserScreen: bulkReplaceTemplates/remove');
|
||||
outcome.fail += 1;
|
||||
}
|
||||
});
|
||||
|
||||
return outcome;
|
||||
}
|
||||
|
||||
const runReplace = async (scope: IReplaceScope): Promise<void> => {
|
||||
const total = scope.live.length + scope.templates.length;
|
||||
if (!targetEmail || total === 0 || progress) return;
|
||||
|
||||
const position = findEmployeeByEmail(employees.items, targetEmail)?.position || '';
|
||||
const messages: string[] = [];
|
||||
// Политика «…для всех» живёт ровно одну операцию — иначе следующая замена
|
||||
// молча унаследовала бы решение, принятое для совсем другого списка строк.
|
||||
duplicatePolicy.current = undefined;
|
||||
setProgress({ done: 0, total });
|
||||
|
||||
try {
|
||||
if (scope.live.length > 0) {
|
||||
const r = await bulkReplaceLive(scope.live, targetEmail, position);
|
||||
messages.push(texts.manageByUser.liveResult(r.ok, r.fail, r.deleted, r.skipped));
|
||||
}
|
||||
if (scope.templates.length > 0) {
|
||||
const r = await bulkReplaceTemplates(scope.templates, targetEmail);
|
||||
messages.push(texts.manageByUser.templatesResult(r.ok, r.fail, r.deleted, r.skipped));
|
||||
}
|
||||
} finally {
|
||||
// Снимать блокировку обязательно в finally: если что-то бросит мимо
|
||||
// внутренних try/catch, подложка иначе осталась бы висеть навсегда и
|
||||
// экран стал бы неработоспособен до перезагрузки страницы.
|
||||
setProgress(undefined);
|
||||
duplicatePolicy.current = undefined;
|
||||
}
|
||||
|
||||
setResultToast({ message: messages.join(' '), kind: 'ok' });
|
||||
setCheckedLiveKeys(new Set());
|
||||
setCheckedTemplateIds(new Set());
|
||||
reloadLiveRows();
|
||||
templateSteps.reload();
|
||||
};
|
||||
|
||||
// Сам себя заменить нельзя — выбор бессмысленный (и в живых заявках сразу
|
||||
// упёрся бы в проверку дубля), поэтому исходного сотрудника в списке
|
||||
// получателей не показываем вовсе.
|
||||
const targetOptions = employees.items
|
||||
.filter(e => e.email.toLowerCase() !== employeeEmail.toLowerCase())
|
||||
.map(toEmployeeOption);
|
||||
// Пока получатель не выбран, менять нечего — все кнопки замены выключены.
|
||||
const canReplace = !!employeeEmail && !!targetEmail;
|
||||
|
||||
const liveColumns: IColumn<UserApprovalRow>[] = [
|
||||
{ key: 'check', header: '', width: '32px', render: r => <Checkbox label="" checked={checkedLiveKeys.has(liveRowKey(r))} onChange={() => toggleLive(r)} /> },
|
||||
{ key: 'type', header: texts.manageByUser.columnRequestType, render: r => r.requestTypeName },
|
||||
{
|
||||
key: 'request',
|
||||
header: texts.manageByUser.columnRequest,
|
||||
render: r => <PrimaryCell>{`${r.requestUniqueCode || `#${r.ticketId}`} ${r.requestTitle}`}</PrimaryCell>
|
||||
},
|
||||
{ key: 'position', header: texts.manageByUser.columnPosition, render: r => r.position || texts.common.empty },
|
||||
{ key: 'status', header: texts.manageByUser.columnStatus, render: r => <Badge variant={statusVariant(r.status)}>{r.status}</Badge> },
|
||||
{ key: 'phase', header: texts.manageByUser.columnPhase, render: r => r.phase },
|
||||
{
|
||||
key: 'actions',
|
||||
header: '',
|
||||
sticky: true,
|
||||
render: r => (
|
||||
<ActionsCell>
|
||||
<IconButton icon="edit" label={texts.manageByUser.replaceOne} disabled={!canReplace} onClick={() => runReplace({ live: [r], templates: [] })} />
|
||||
</ActionsCell>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
const templateColumns: IColumn<UserTemplateStepRow>[] = [
|
||||
{ key: 'check', header: '', width: '32px', render: r => <Checkbox label="" checked={checkedTemplateIds.has(r.id)} onChange={() => toggleTemplate(r)} /> },
|
||||
{
|
||||
key: 'route',
|
||||
header: texts.manageByUser.columnRoute,
|
||||
render: r => <PrimaryCell>{`${r.requestTypeName} — ${r.companyName} / ${r.departmentName}`}</PrimaryCell>
|
||||
},
|
||||
{ key: 'stepStatus', header: texts.manageByUser.columnStepStatus, render: r => routeStepStatusLabels[r.status] },
|
||||
{ key: 'condition', header: texts.manageByUser.columnCondition, render: r => describeStepCondition(r) ?? texts.common.empty },
|
||||
{
|
||||
key: 'actions',
|
||||
header: '',
|
||||
sticky: true,
|
||||
render: r => (
|
||||
<ActionsCell>
|
||||
<IconButton icon="edit" label={texts.manageByUser.replaceOne} disabled={!canReplace} onClick={() => runReplace({ live: [], templates: [r] })} />
|
||||
</ActionsCell>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
const hasAnyRows = liveRows.length > 0 || templateRows.length > 0;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Breadcrumbs items={[{ label: texts.common.home }, { label: texts.manageByUser.breadcrumb }]} />
|
||||
<PageHeader
|
||||
icon="people"
|
||||
subtitle={texts.manageByUser.subtitle}
|
||||
title={texts.manageByUser.title}
|
||||
actions={
|
||||
<Button
|
||||
variant="accent"
|
||||
disabled={!canReplace || !hasAnyRows}
|
||||
onClick={() => runReplace({ live: liveRows, templates: templateRows })}
|
||||
>
|
||||
{texts.manageByUser.replaceEverywhere}
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
<Panel>
|
||||
<FormGrid>
|
||||
<Field label={texts.manageByUser.employeeLabel} required hint={texts.manageByUser.employeeHint}>
|
||||
<SearchableSelect
|
||||
options={employees.items.map(toEmployeeOption)}
|
||||
value={employeeEmail}
|
||||
loading={employees.isLoading}
|
||||
placeholder={texts.manageByUser.employeePlaceholder}
|
||||
searchPlaceholder={texts.select.employeeSearchPlaceholder}
|
||||
emptyMessage={texts.select.employeesEmpty}
|
||||
onChange={selectEmployee}
|
||||
/>
|
||||
</Field>
|
||||
{/* Кого ставим вместо — рядом, а не в модалке по кнопке: замена обычно
|
||||
идёт в несколько приёмов (сначала заявки, потом маршруты, потом
|
||||
отдельные строки), и выбирать одного и того же человека заново
|
||||
на каждый приём незачем. */}
|
||||
<Field label={texts.manageByUser.targetLabel} required hint={texts.manageByUser.targetHint}>
|
||||
<div className={styles.targetRow}>
|
||||
<div className={styles.targetSelect}>
|
||||
<SearchableSelect
|
||||
options={targetOptions}
|
||||
value={targetEmail}
|
||||
loading={employees.isLoading}
|
||||
placeholder={texts.manageByUser.targetPlaceholder}
|
||||
searchPlaceholder={texts.select.employeeSearchPlaceholder}
|
||||
emptyMessage={texts.select.employeesEmpty}
|
||||
allowClear
|
||||
clearLabel={texts.manageByUser.targetClear}
|
||||
onChange={selectTarget}
|
||||
/>
|
||||
</div>
|
||||
{/* Обратная замена — обычное продолжение работы («вернуть всё
|
||||
как было», «а теперь наоборот»), и переставлять двух человек
|
||||
руками через два поиска по справочнику ради этого не нужно. */}
|
||||
<IconButton
|
||||
icon="sort"
|
||||
label={texts.manageByUser.swap}
|
||||
disabled={!employeeEmail && !targetEmail}
|
||||
onClick={swapEmployees}
|
||||
/>
|
||||
</div>
|
||||
</Field>
|
||||
</FormGrid>
|
||||
</Panel>
|
||||
|
||||
{employeeEmail && (
|
||||
<Panel>
|
||||
<div className={styles.panelHeader}>
|
||||
<div className={styles.panelTitle}>{`${texts.manageByUser.liveTitle} (${liveRows.length})`}</div>
|
||||
<div className={styles.panelActions}>
|
||||
<Button variant="ghost" size="sm" disabled={liveRows.length === 0} onClick={toggleAllLive}>
|
||||
{allLiveChecked ? texts.manageByUser.deselectAll : texts.manageByUser.selectAll}
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
disabled={!canReplace || checkedLiveRows.length === 0}
|
||||
onClick={() => runReplace({ live: checkedLiveRows, templates: [] })}
|
||||
>
|
||||
{texts.manageByUser.replaceSelected(checkedLiveRows.length)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{liveError && <Alert kind="err">{`${texts.manageByUser.liveLoadError}: ${liveError}`}</Alert>}
|
||||
{liveLoading && <div>{texts.common.loading}</div>}
|
||||
{!liveLoading && !liveError && (
|
||||
<DataTable columns={liveColumns} rows={liveRows} keyOf={liveRowKey} emptyMessage={texts.manageByUser.liveEmpty} />
|
||||
)}
|
||||
</Panel>
|
||||
)}
|
||||
|
||||
{employeeEmail && (
|
||||
<Panel>
|
||||
<div className={styles.panelHeader}>
|
||||
<div className={styles.panelTitle}>{`${texts.manageByUser.templatesTitle} (${templateRows.length})`}</div>
|
||||
<div className={styles.panelActions}>
|
||||
<Button variant="ghost" size="sm" disabled={templateRows.length === 0} onClick={toggleAllTemplates}>
|
||||
{allTemplatesChecked ? texts.manageByUser.deselectAll : texts.manageByUser.selectAll}
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
disabled={!canReplace || checkedTemplateRows.length === 0}
|
||||
onClick={() => runReplace({ live: [], templates: checkedTemplateRows })}
|
||||
>
|
||||
{texts.manageByUser.replaceSelected(checkedTemplateRows.length)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{templateSteps.error && <Alert kind="err">{`${texts.manageByUser.templatesLoadError}: ${templateSteps.error}`}</Alert>}
|
||||
{templateSteps.isLoading && <div>{texts.common.loading}</div>}
|
||||
{!templateSteps.isLoading && !templateSteps.error && (
|
||||
<DataTable columns={templateColumns} rows={templateRows} keyOf={r => r.id} emptyMessage={texts.manageByUser.templatesEmpty} />
|
||||
)}
|
||||
</Panel>
|
||||
)}
|
||||
|
||||
{progress && (
|
||||
<ProgressOverlay label={texts.manageByUser.progressLabel} done={progress.done} total={progress.total} />
|
||||
)}
|
||||
|
||||
{duplicatePrompt && (
|
||||
<ManageByUserDuplicateModal
|
||||
title={texts.manageByUser.duplicateModalTitle}
|
||||
message={duplicatePrompt.message}
|
||||
onChoice={answerDuplicate}
|
||||
/>
|
||||
)}
|
||||
|
||||
{resultToast && (
|
||||
<Toast message={resultToast.message} kind={resultToast.kind} onClose={() => setResultToast(undefined)} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user