gorbenko.pavel
287 lines
16 KiB
TypeScript
287 lines
16 KiB
TypeScript
import * as React from 'react';
|
||
import tableStyles from '../ui/DataTable.module.scss';
|
||
import styles from './ManageRequestsScreen.module.scss';
|
||
import { Employee, ManagedApprovalRow, isEditableRowStatus } from '../../models';
|
||
import { texts } from '../../texts';
|
||
import { toEmployeeOption } from '../../utils/employee';
|
||
import { blockIndexOf, blockRanges, markParallel, withOrdersFrom } from '../../utils/orderBlocks';
|
||
import { ActionsCell, Badge, BadgeVariant, CellNote, IconButton, PrimaryCell, SearchableSelect } from '../ui';
|
||
|
||
export interface IManageRequestsPhaseTableProps {
|
||
title: string;
|
||
/** Строки ОДНОЙ фазы, уже отсортированные по order (см. ManageRequestsScreen). */
|
||
rows: ManagedApprovalRow[];
|
||
/** Заявка целиком только для просмотра (закрыта) — контролов нет вообще. */
|
||
readOnly: boolean;
|
||
statusVariant: (status: string) => BadgeVariant;
|
||
onReassign: (row: ManagedApprovalRow) => void;
|
||
onRemove: (row: ManagedApprovalRow) => void;
|
||
employees: Employee[];
|
||
employeesLoading: boolean;
|
||
/** Плейсхолдер плашки-пикера под таблицей — разный для согласования/исполнения. */
|
||
addPlaceholder: string;
|
||
/** Должность подставляется из справочника (Employee.position) — здесь не спрашивается. */
|
||
onAddApprover: (email: string) => void;
|
||
/** updates — только строки, у которых order реально изменился. */
|
||
onReorder: (updates: Array<{ id: number; order: number }>) => void;
|
||
}
|
||
|
||
type Row = ManagedApprovalRow & { parallelWithPrev: boolean };
|
||
|
||
function diffOrders(original: ManagedApprovalRow[], renumbered: Row[]): Array<{ id: number; order: number }> {
|
||
const originalOrderById = new Map(original.map(r => [r.id, r.order]));
|
||
return renumbered
|
||
.filter(r => originalOrderById.get(r.id) !== r.order)
|
||
.map(r => ({ id: r.id, order: r.order }));
|
||
}
|
||
|
||
/**
|
||
* Таблица одной фазы маршрута с поддержкой перестановки шагов и параллельности —
|
||
* повторяет request-portal/shared/approval/ui/ApprovalMatrix.tsx (та же идея:
|
||
* колонка «Шаг» объединена по rowSpan на блок, кнопки ↑/↓ двигают блок целиком),
|
||
* но с одним отличием: часть строк тут может быть УЖЕ РЕШЕНА (approved/executed/
|
||
* rejected/returned) — такие блоки «заблокированы» и никогда не двигаются и не
|
||
* участвуют в переключении параллельности. Блокировка распространяется на все
|
||
* блоки НЕ ПОЗЖЕ последнего заблокированного — по построению маршрута (шаги
|
||
* решаются по возрастанию order) заблокированные блоки всегда образуют
|
||
* непрерывный префикс, поэтому «после последнего заблокированного» и есть та
|
||
* самая граница, ниже которой перестановка запрещена (см. utils/orderBlocks.ts).
|
||
*
|
||
* Переназначение/удаление СТРОКИ (не блока) разрешено независимо от соседей —
|
||
* если у одного из двух параллельных согласующих решение уже принято, а у
|
||
* другого нет, второго всё ещё можно переназначить.
|
||
*/
|
||
export const ManageRequestsPhaseTable: React.FC<IManageRequestsPhaseTableProps> = ({
|
||
title,
|
||
rows,
|
||
readOnly,
|
||
statusVariant,
|
||
onReassign,
|
||
onRemove,
|
||
employees,
|
||
employeesLoading,
|
||
addPlaceholder,
|
||
onAddApprover,
|
||
onReorder
|
||
}) => {
|
||
// Подсветка строки при наведении — на уровне БЛОКА, а не через CSS
|
||
// tbody tr:hover (см. .rowHover в ManageRequestsScreen.module.scss): ячейки
|
||
// с rowSpan (номер шага, стрелки перестановки) физически принадлежат <tr>
|
||
// только первой строки блока, поэтому обычный :hover при наведении на
|
||
// вторую/третью строку параллельного блока их не подсвечивал — получался
|
||
// "вырез" в жёлтом фоне ровно на границе объединённой ячейки.
|
||
const [hoveredBlock, setHoveredBlock] = React.useState<number | undefined>(undefined);
|
||
|
||
const withParallel = React.useMemo(() => markParallel(rows) as Row[], [rows]);
|
||
const blocks = React.useMemo(() => blockRanges(withParallel), [withParallel]);
|
||
const lockedBlock = React.useMemo(
|
||
() => blocks.map(b => withParallel.slice(b.start, b.end + 1).some(r => !isEditableRowStatus(r.status))),
|
||
[blocks, withParallel]
|
||
);
|
||
// Индекс последнего заблокированного блока — все блоки ПОСЛЕ него движимы,
|
||
// все блоки НА НЁМ И РАНЬШЕ — нет (см. комментарий к компоненту). Считаем
|
||
// именно НЕПРЕРЫВНЫЙ префикс заблокированных блоков с начала, а не индекс
|
||
// последнего true по всему списку: реальные данные не всегда гарантируют
|
||
// строгую непрерывность (например, более ранняя ручная правка тем же
|
||
// инструментом могла оставить решённый шаг ПОСЛЕ ещё не решённого) — а
|
||
// reduce по всему массиву в этом случае блокирует стрелки вообще у всех
|
||
// блоков до самого дальнего заблокированного, даже у тех, что реально
|
||
// редактируемы.
|
||
let lastLockedBlockIndex = -1;
|
||
for (let i = 0; i < lockedBlock.length; i++) {
|
||
if (!lockedBlock[i]) break;
|
||
lastLockedBlockIndex = i;
|
||
}
|
||
const firstMovableRowIndex = blocks[lastLockedBlockIndex + 1]?.start ?? -1;
|
||
|
||
// Фаза уже целиком решена (например, все согласующие одобрили, и заявка ушла
|
||
// в статус «Выполнение») — добавлять в неё ещё один шаг бессмысленно, очередь
|
||
// сюда больше не вернётся. Пустую фазу (rows.length===0) это не блокирует —
|
||
// так можно завести самый первый шаг фазы, у которой согласующих ещё не было
|
||
// вовсе.
|
||
const phaseClosed = rows.length > 0 && rows.every(r => !isEditableRowStatus(r.status));
|
||
|
||
const applyReorder = (mutate: (rows: Row[]) => Row[]): void => {
|
||
const renumbered = withOrdersFrom(mutate(withParallel), 0);
|
||
const updates = diffOrders(rows, renumbered);
|
||
if (updates.length > 0) onReorder(updates);
|
||
};
|
||
|
||
const moveBlockUp = (blockIndex: number): void => {
|
||
if (blockIndex <= lastLockedBlockIndex + 1) return; // упёрлись в заблокированный блок
|
||
applyReorder(current => {
|
||
const a = blocks[blockIndex - 1];
|
||
const b = blocks[blockIndex];
|
||
return [...current.slice(0, a.start), ...current.slice(b.start, b.end + 1), ...current.slice(a.start, a.end + 1), ...current.slice(b.end + 1)];
|
||
});
|
||
};
|
||
|
||
const moveBlockDown = (blockIndex: number): void => {
|
||
if (blockIndex >= blocks.length - 1) return;
|
||
applyReorder(current => {
|
||
const a = blocks[blockIndex];
|
||
const b = blocks[blockIndex + 1];
|
||
return [...current.slice(0, a.start), ...current.slice(b.start, b.end + 1), ...current.slice(a.start, a.end + 1), ...current.slice(b.end + 1)];
|
||
});
|
||
};
|
||
|
||
const toggleParallel = (rowIndex: number): void => {
|
||
if (rowIndex <= 0 || rowIndex === firstMovableRowIndex) return;
|
||
applyReorder(current => current.map((r, i) => (i === rowIndex ? { ...r, parallelWithPrev: !r.parallelWithPrev } : r)));
|
||
};
|
||
|
||
return (
|
||
<div className={styles.phase}>
|
||
<div className={styles.phaseHeader}>
|
||
<span className={styles.phaseTitle}>{title}</span>
|
||
</div>
|
||
|
||
{rows.length === 0 && <div className={tableStyles.wrap}><div className={tableStyles.empty}>{texts.manageRequests.emptyPhase}</div></div>}
|
||
|
||
{rows.length > 0 && (
|
||
<div className={`${tableStyles.wrap} ${styles.blockAwareWrap}`}>
|
||
<div className={tableStyles.scroll}>
|
||
<table className={tableStyles.table}>
|
||
<thead>
|
||
<tr>
|
||
<th className={styles.stepCol}>{texts.manageRequests.columnOrder}</th>
|
||
<th>{texts.manageRequests.columnApprover}</th>
|
||
<th>{texts.manageRequests.columnPosition}</th>
|
||
<th>{texts.manageRequests.columnStatus}</th>
|
||
<th>{texts.manageRequests.columnDate}</th>
|
||
{!readOnly && <th />}
|
||
{!readOnly && <th />}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{withParallel.map((r, i) => {
|
||
const blockIndex = blockIndexOf(blocks, i);
|
||
const block = blocks[blockIndex];
|
||
const isBlockStart = block.start === i;
|
||
const movable = blockIndex > lastLockedBlockIndex;
|
||
const rowEditable = isEditableRowStatus(r.status);
|
||
const canToggle = rowEditable && i !== firstMovableRowIndex;
|
||
// Отрицательный Id — призрачная строка (добавлена на клиенте,
|
||
// ответ сервера с настоящим Id ещё не пришёл, см.
|
||
// ManageRequestsScreen/handleAddApprover). Трогать её нельзя:
|
||
// запрос на переназначение/удаление/перестановку ушёл бы с
|
||
// несуществующим для SharePoint Id.
|
||
const isGhost = r.id < 0;
|
||
|
||
return (
|
||
<tr
|
||
key={r.id}
|
||
className={blockIndex === hoveredBlock ? styles.rowHover : undefined}
|
||
onMouseEnter={() => setHoveredBlock(blockIndex)}
|
||
onMouseLeave={() => setHoveredBlock(undefined)}
|
||
>
|
||
{isBlockStart && (
|
||
<td className={styles.stepCol} rowSpan={block.end - block.start + 1}>
|
||
{r.parallelWithPrev || block.end > block.start ? (
|
||
<span className={styles.parallelMark} title={texts.manageRequests.mergeWithPrev}>
|
||
{r.order} ∥
|
||
</span>
|
||
) : (
|
||
r.order
|
||
)}
|
||
</td>
|
||
)}
|
||
<td>
|
||
<PrimaryCell>{r.approverName || texts.common.empty}</PrimaryCell>
|
||
{r.approverEmail && <CellNote>{r.approverEmail}</CellNote>}
|
||
</td>
|
||
<td>{r.position || texts.common.empty}</td>
|
||
<td><Badge variant={statusVariant(r.status)}>{r.status || texts.common.empty}</Badge></td>
|
||
<td>{r.date || texts.common.empty}</td>
|
||
{/* Стрелки перестановки — СЛЕВА от действий над строкой (объединить/
|
||
переназначить/удалить), одна пара на весь блок (rowSpan): двигают
|
||
шаг целиком, а не отдельного участника параллельной группы. */}
|
||
{!readOnly && isBlockStart && (
|
||
<td rowSpan={block.end - block.start + 1}>
|
||
<ActionsCell>
|
||
<IconButton
|
||
icon="chevron-down"
|
||
className={`${styles.iconBtnVisible} ${styles.flipY}`}
|
||
label={texts.manageRequests.moveUp}
|
||
disabled={isGhost || !movable || blockIndex <= lastLockedBlockIndex + 1}
|
||
onClick={() => moveBlockUp(blockIndex)}
|
||
/>
|
||
<IconButton
|
||
icon="chevron-down"
|
||
className={styles.iconBtnVisible}
|
||
label={texts.manageRequests.moveDown}
|
||
disabled={isGhost || !movable || blockIndex >= blocks.length - 1}
|
||
onClick={() => moveBlockDown(blockIndex)}
|
||
/>
|
||
</ActionsCell>
|
||
</td>
|
||
)}
|
||
{!readOnly && (
|
||
<td>
|
||
{isGhost ? (
|
||
<CellNote>{texts.manageRequests.ghostHint}</CellNote>
|
||
) : rowEditable ? (
|
||
<ActionsCell>
|
||
<IconButton
|
||
icon="people"
|
||
className={r.parallelWithPrev ? styles.iconBtnActive : styles.iconBtnVisible}
|
||
label={r.parallelWithPrev ? texts.manageRequests.splitFromPrev : texts.manageRequests.mergeWithPrev}
|
||
disabled={!canToggle}
|
||
onClick={() => toggleParallel(i)}
|
||
/>
|
||
<IconButton
|
||
icon="edit"
|
||
className={styles.iconBtnVisible}
|
||
label={texts.manageRequests.reassign}
|
||
onClick={() => onReassign(r)}
|
||
/>
|
||
<IconButton
|
||
icon="trash"
|
||
className={styles.iconBtnVisible}
|
||
label={texts.manageRequests.remove}
|
||
danger
|
||
onClick={() => onRemove(r)}
|
||
/>
|
||
</ActionsCell>
|
||
) : (
|
||
<CellNote>{texts.manageRequests.lockedHint}</CellNote>
|
||
)}
|
||
</td>
|
||
)}
|
||
</tr>
|
||
);
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Плашка-пикер под таблицей вместо кнопки+модалки — как UserPicker в
|
||
request-portal/shared/approval/ui/ApprovalMatrix.tsx: выбрал сотрудника →
|
||
шаг добавлен сразу, значение поля сбрасывается для следующего добавления.
|
||
Должность отдельно не спрашивается — подставляется из справочника
|
||
(см. onAddApprover в ManageRequestsScreen). */}
|
||
{!readOnly && phaseClosed && (
|
||
<div className={styles.addRow}>
|
||
<CellNote>{texts.manageRequests.phaseClosedHint}</CellNote>
|
||
</div>
|
||
)}
|
||
|
||
{!readOnly && !phaseClosed && (
|
||
<div className={styles.addRow}>
|
||
<SearchableSelect
|
||
options={employees.map(toEmployeeOption)}
|
||
value=""
|
||
loading={employeesLoading}
|
||
placeholder={addPlaceholder}
|
||
searchPlaceholder={texts.select.employeeSearchPlaceholder}
|
||
emptyMessage={texts.select.employeesEmpty}
|
||
onChange={onAddApprover}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|