This commit is contained in:
@@ -63,35 +63,52 @@ export class ApproverService {
|
|||||||
return delegated ? { ...delegated, isDelegator: true } : undefined;
|
return delegated ? { ...delegated, isDelegator: true } : undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Делегирование: согласующий добавляет делеганта ПЕРЕД собой (Order — между
|
// Делегирование: согласующий добавляет одного или нескольких делегантов ПЕРЕД
|
||||||
// предыдущей строкой и своей). Делегат согласует раньше и сам не делегирует
|
// собой. Order каждому — из равных долей промежутка между предыдущей строкой и
|
||||||
// (allowReassign всегда false у новой строки) — зато делегировавший (текущий
|
// своей, В ПОРЯДКЕ ВЫБОРА: выбранный первым согласует первым. Делеганты сами не
|
||||||
// пользователь) сохраняет право переназначить эту строку ещё раз, если делегат
|
// делегируют (allowReassign всегда false) — зато делегировавший (текущий
|
||||||
// тоже окажется недоступен (см. getPendingRowForCurrentUser/isDelegator).
|
// пользователь) сохраняет право переназначить строку ещё раз, если кто-то из них
|
||||||
|
// окажется недоступен (см. getPendingRowForCurrentUser/isDelegator).
|
||||||
|
//
|
||||||
|
// Дробный Order — осознанно: он позволяет вклиниться между уже существующими
|
||||||
|
// шагами, не переписывая их (в SharePoint StepOrder — Number, дробные значения
|
||||||
|
// хранит). Делители растут с числом делегантов, но при реальных количествах
|
||||||
|
// (единицы) точности double хватает с колоссальным запасом.
|
||||||
public async delegate(
|
public async delegate(
|
||||||
requestId: number,
|
requestId: number,
|
||||||
currentRowId: number,
|
currentRowId: number,
|
||||||
user: ISiteUser
|
users: ISiteUser[]
|
||||||
): Promise<void> {
|
): Promise<void> {
|
||||||
|
if (users.length === 0) return;
|
||||||
const rows = await this.approval.getForRequest(requestId);
|
const rows = await this.approval.getForRequest(requestId);
|
||||||
const current = rows.filter((r) => r.id === currentRowId)[0];
|
const current = rows.filter((r) => r.id === currentRowId)[0];
|
||||||
if (!current) return;
|
if (!current) return;
|
||||||
|
// Предыдущий шаг — с меньшим Order. У параллельных шагов Order общий, поэтому
|
||||||
|
// берём именно последний меньший, а не «строку выше по списку».
|
||||||
const before = rows.filter((r) => r.order < current.order);
|
const before = rows.filter((r) => r.order < current.order);
|
||||||
const prevOrder = before.length > 0 ? before[before.length - 1].order : current.order - 1;
|
const prevOrder = before.length > 0 ? before[before.length - 1].order : current.order - 1;
|
||||||
const newOrder = (prevOrder + current.order) / 2;
|
const step = (current.order - prevOrder) / (users.length + 1);
|
||||||
const position = await this.approval.getJobTitle(user.loginName);
|
|
||||||
const delegatedById = await this.approval.getCurrentUserId();
|
const delegatedById = await this.approval.getCurrentUserId();
|
||||||
|
|
||||||
|
// Последовательно, а не Promise.all: добавление строки резолвит пользователя и
|
||||||
|
// пишет в список — параллельные пачки упираются в троттлинг SharePoint, а
|
||||||
|
// выигрыш во времени на единицах строк незаметен.
|
||||||
|
for (let i = 0; i < users.length; i += 1) {
|
||||||
|
const user = users[i];
|
||||||
|
const position = await this.approval.getJobTitle(user.loginName).catch(() => '');
|
||||||
// Делегат наследует фазу той строки, вместо которой согласует (согласование/исполнение).
|
// Делегат наследует фазу той строки, вместо которой согласует (согласование/исполнение).
|
||||||
// Обе строки — делегат и прежний согласующий — уходят в «Ждёт очереди»,
|
|
||||||
// activateNextQueued затем активирует делегата (у него меньший order).
|
|
||||||
await this.approval.addApproverRow(
|
await this.approval.addApproverRow(
|
||||||
requestId,
|
requestId,
|
||||||
{ email: user.email, position, allowReassign: false },
|
{ email: user.email, position, allowReassign: false },
|
||||||
newOrder,
|
prevOrder + step * (i + 1),
|
||||||
REQUEST_STATUS.queued,
|
REQUEST_STATUS.queued,
|
||||||
current.phase,
|
current.phase,
|
||||||
delegatedById
|
delegatedById
|
||||||
);
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Все строки — и делеганты, и прежний согласующий — уходят в «Ждёт очереди»,
|
||||||
|
// activateNextQueued затем активирует первого делеганта (у него меньший order).
|
||||||
await this.approval.setStatus(current.id, REQUEST_STATUS.queued);
|
await this.approval.setStatus(current.id, REQUEST_STATUS.queued);
|
||||||
await this.approval.activateNextQueued(requestId);
|
await this.approval.activateNextQueued(requestId);
|
||||||
emitRequestsChanged();
|
emitRequestsChanged();
|
||||||
|
|||||||
@@ -31,6 +31,92 @@
|
|||||||
border-top: 1px solid $gray-200;
|
border-top: 1px solid $gray-200;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Выбранные, но ещё не записанные делеганты. Список нумерованный: номер — это
|
||||||
|
// очерёдность согласования, а не просто маркер, поэтому он рисуется явно, а не
|
||||||
|
// через list-style (его вид не настраивается достаточно предсказуемо).
|
||||||
|
.pickedList {
|
||||||
|
list-style: none;
|
||||||
|
margin: 12px 0 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pickedItem {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 8px 10px;
|
||||||
|
border: 1px solid $gray-200;
|
||||||
|
border-radius: $r-sm;
|
||||||
|
background: $gray-50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pickedOrder {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: $gold-500;
|
||||||
|
color: $navy-950;
|
||||||
|
font-size: $fs-caption;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pickedName {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
min-width: 0; // иначе длинный email распирает строку и ломает выравнивание кнопки
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1px;
|
||||||
|
font-size: $fs-sm;
|
||||||
|
color: $gray-900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pickedEmail {
|
||||||
|
font-size: $fs-caption;
|
||||||
|
color: $gray-500;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pickedRemove {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
border-radius: $r-sm;
|
||||||
|
background: transparent;
|
||||||
|
color: $gray-500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: .16s;
|
||||||
|
|
||||||
|
&:hover:not(:disabled) {
|
||||||
|
background: $white;
|
||||||
|
color: $red-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
opacity: .4;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.delegateHint {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: $fs-caption;
|
||||||
|
color: $gray-500;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
.state {
|
.state {
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
|
|||||||
@@ -39,8 +39,11 @@ export const DecisionPanel: React.FC<IDecisionPanelProps> = ({
|
|||||||
const [comment, setComment] = useState<string>('');
|
const [comment, setComment] = useState<string>('');
|
||||||
const [submitting, setSubmitting] = useState<boolean>(false);
|
const [submitting, setSubmitting] = useState<boolean>(false);
|
||||||
const [resultStatus, setResultStatus] = useState<string | undefined>(undefined);
|
const [resultStatus, setResultStatus] = useState<string | undefined>(undefined);
|
||||||
const [delegated, setDelegated] = useState<boolean>(false);
|
const [delegated, setDelegated] = useState<number>(0);
|
||||||
const [showDelegate, setShowDelegate] = useState<boolean>(false);
|
const [showDelegate, setShowDelegate] = useState<boolean>(false);
|
||||||
|
// Выбранные делеганты копятся здесь и пишутся одной пачкой по кнопке — иначе
|
||||||
|
// добавить второго человека можно было бы только переоткрыв заявку.
|
||||||
|
const [picked, setPicked] = useState<ISiteUser[]>([]);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -91,15 +94,30 @@ export const DecisionPanel: React.FC<IDecisionPanelProps> = ({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleDelegate(user: ISiteUser): Promise<void> {
|
// Выбор в пикере только копит список; запись — в handleDelegate по кнопке.
|
||||||
if (!pendingRow) {
|
// Дубли отсекаем по email: одного человека дважды в маршрут ставить незачем.
|
||||||
|
function pickDelegate(user: ISiteUser): void {
|
||||||
|
setPicked((prev) => (prev.some((p) => p.email === user.email) ? prev : [...prev, user]));
|
||||||
|
}
|
||||||
|
|
||||||
|
function unpickDelegate(index: number): void {
|
||||||
|
setPicked((prev) => prev.filter((_, i) => i !== index));
|
||||||
|
}
|
||||||
|
|
||||||
|
function cancelDelegate(): void {
|
||||||
|
setPicked([]);
|
||||||
|
setShowDelegate(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleDelegate(): Promise<void> {
|
||||||
|
if (!pendingRow || picked.length === 0) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setError(null);
|
setError(null);
|
||||||
setSubmitting(true);
|
setSubmitting(true);
|
||||||
try {
|
try {
|
||||||
await service.delegate(requestId, pendingRow.id, user);
|
await service.delegate(requestId, pendingRow.id, picked);
|
||||||
setDelegated(true);
|
setDelegated(picked.length);
|
||||||
setSubmitting(false);
|
setSubmitting(false);
|
||||||
if (onDelegated) {
|
if (onDelegated) {
|
||||||
onDelegated();
|
onDelegated();
|
||||||
@@ -123,10 +141,15 @@ export const DecisionPanel: React.FC<IDecisionPanelProps> = ({
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (delegated) {
|
if (delegated > 0) {
|
||||||
return (
|
return (
|
||||||
<div className={styles.panel}>
|
<div className={styles.panel}>
|
||||||
<Alert variant="ok">Шаг переназначен — заявка передана выбранному сотруднику.</Alert>
|
<Alert variant="ok">
|
||||||
|
{delegated === 1
|
||||||
|
? 'Согласующий добавлен перед вами — он рассмотрит заявку раньше вас. Ваш шаг остаётся в маршруте.'
|
||||||
|
: `Согласующих добавлено: ${delegated}. Они рассмотрят заявку раньше вас, в порядке добавления. ` +
|
||||||
|
'Ваш шаг остаётся в маршруте.'}
|
||||||
|
</Alert>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -146,13 +169,55 @@ export const DecisionPanel: React.FC<IDecisionPanelProps> = ({
|
|||||||
const delegateBlock = canDelegate ? (
|
const delegateBlock = canDelegate ? (
|
||||||
<div className={styles.delegate}>
|
<div className={styles.delegate}>
|
||||||
{showDelegate ? (
|
{showDelegate ? (
|
||||||
<FormField label="Кому переназначить">
|
<>
|
||||||
|
<FormField label="Кого добавить перед собой">
|
||||||
<UserPicker
|
<UserPicker
|
||||||
search={search}
|
search={search}
|
||||||
onPick={handleDelegate}
|
onPick={pickDelegate}
|
||||||
placeholder="Начните вводить ФИО сотрудника…"
|
placeholder="Начните вводить ФИО сотрудника…"
|
||||||
/>
|
/>
|
||||||
</FormField>
|
</FormField>
|
||||||
|
{picked.length > 0 && (
|
||||||
|
<ul className={styles.pickedList}>
|
||||||
|
{picked.map((u, i) => (
|
||||||
|
<li className={styles.pickedItem} key={u.email || u.id}>
|
||||||
|
<span className={styles.pickedOrder}>{i + 1}</span>
|
||||||
|
<span className={styles.pickedName}>
|
||||||
|
{u.name}
|
||||||
|
{u.email && <span className={styles.pickedEmail}>{u.email}</span>}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={styles.pickedRemove}
|
||||||
|
disabled={submitting}
|
||||||
|
aria-label={`Убрать ${u.name}`}
|
||||||
|
onClick={() => unpickDelegate(i)}
|
||||||
|
>
|
||||||
|
<Icon name="close" size="sm" />
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
<div className={styles.delegateHint}>
|
||||||
|
{picked.length === 0
|
||||||
|
? 'Выберите одного или нескольких сотрудников. Они согласуют заявку до вас, в порядке добавления; ваш шаг остаётся в маршруте.'
|
||||||
|
: 'Согласуют до вас в этом порядке. Ваш шаг остаётся в маршруте.'}
|
||||||
|
</div>
|
||||||
|
<div className={styles.actions}>
|
||||||
|
<Button
|
||||||
|
variant="accent"
|
||||||
|
disabled={submitting || picked.length === 0}
|
||||||
|
onClick={handleDelegate}
|
||||||
|
>
|
||||||
|
<Icon name="people" size="sm" />
|
||||||
|
{picked.length > 1 ? `Добавить (${picked.length})` : 'Добавить'}
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost" disabled={submitting} onClick={cancelDelegate}>
|
||||||
|
Отмена
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
) : (
|
) : (
|
||||||
<Button variant="secondary" disabled={submitting} onClick={() => setShowDelegate(true)}>
|
<Button variant="secondary" disabled={submitting} onClick={() => setShowDelegate(true)}>
|
||||||
<Icon name="people" size="sm" />
|
<Icon name="people" size="sm" />
|
||||||
@@ -169,8 +234,9 @@ export const DecisionPanel: React.FC<IDecisionPanelProps> = ({
|
|||||||
<div className={styles.panel}>
|
<div className={styles.panel}>
|
||||||
<div className={styles.title}>{isExecution ? 'Исполнение' : 'Ваше решение'}</div>
|
<div className={styles.title}>{isExecution ? 'Исполнение' : 'Ваше решение'}</div>
|
||||||
<Alert variant="warn">
|
<Alert variant="warn">
|
||||||
Этот шаг сейчас у сотрудника, которому вы его переназначили. Если он недоступен —
|
Заявку сейчас рассматривает сотрудник, которого вы добавили перед собой. Ваш шаг никуда
|
||||||
переназначьте шаг ещё раз.
|
не делся — он вернётся к вам, когда очередь дойдёт. Если добавленный сотрудник
|
||||||
|
недоступен, можно добавить ещё.
|
||||||
</Alert>
|
</Alert>
|
||||||
{error && <Alert variant="err">{error}</Alert>}
|
{error && <Alert variant="err">{error}</Alert>}
|
||||||
{delegateBlock}
|
{delegateBlock}
|
||||||
|
|||||||
Reference in New Issue
Block a user