feat(approval): /my-drafts maker self-tracking view + /api/v1/drafts/me
Approval Workflow v2 Phase 4 — UX: Backend: - DraftController.myDrafts: GET /api/v1/drafts/me?page&size — все статусы (PENDING/APPROVED/REJECTED/WITHDRAWN) текущего authenticated user, sorted submitted_at DESC. Resolve maker_id из JWT subject (fallback "anonymous" если auth off). - Reuses existing DraftService.listByMaker (Phase 1 method, был не exposed). Frontend: - routes/my-drafts.tsx: новый маршрут с табличным view. Колонки: businessKey / operation / status / submittedAt / reviewedAt / reviewerId / comment / actions. Status badge tinted (warning/success/ error/neutral). PENDING строки имеют Withdraw кнопку (calls existing useWithdrawDraft с confirm). - api/queries.ts: useMyDrafts (refetch 30s — maker увидит когда reviewer decide). - api/mutations.ts: useWithdrawDraft теперь invalidate'ит ['drafts'] — /me + by-dict обе видят изменение. - routes/__root.tsx: nav link "Мои черновики" / "My drafts" (после Reviews). - i18n RU/EN: 18 keys (nav.myDrafts, myDrafts.* col/action/status). Pluralization для total через i18next plurals. Why это нужно: - До этого maker submit'нул draft и пропадал — единственный feedback был badge "На review" в records list (только для текущего dict). Здесь — все его submissions с history + withdraw для PENDING. - Reviewer pool (D3=A) маленький, /reviews queue только для них. Maker без role'а не видит queue, но должен tracking своих submissions. Tests: ordinis-rest-api unit 119/119, ordinis-app e2e 28/28, vitest 89/89.
This commit is contained in:
@@ -0,0 +1,148 @@
|
||||
import { useState } from 'react'
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
Alert,
|
||||
Badge,
|
||||
Button,
|
||||
EmptyState,
|
||||
LoadingBlock,
|
||||
PageHeader,
|
||||
Panel,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeaderCell,
|
||||
TableRow,
|
||||
} from '@nstart/ui'
|
||||
import { useMyDrafts } from '@/api/queries'
|
||||
import { useWithdrawDraft } from '@/api/mutations'
|
||||
import type { DraftOperation, DraftStatus } from '@/api/client'
|
||||
|
||||
export const Route = createFileRoute('/my-drafts')({
|
||||
component: MyDraftsPage,
|
||||
})
|
||||
|
||||
const operationVariant = (op: DraftOperation): 'info' | 'success' | 'warning' => {
|
||||
if (op === 'CREATE') return 'success'
|
||||
if (op === 'CLOSE') return 'warning'
|
||||
return 'info'
|
||||
}
|
||||
|
||||
const statusVariant = (
|
||||
s: DraftStatus,
|
||||
): 'warning' | 'success' | 'error' | 'neutral' => {
|
||||
if (s === 'PENDING') return 'warning'
|
||||
if (s === 'APPROVED') return 'success'
|
||||
if (s === 'REJECTED') return 'error'
|
||||
return 'neutral'
|
||||
}
|
||||
|
||||
/**
|
||||
* Approval Workflow v2 Phase 4: maker self-tracking. Maker видит свои
|
||||
* submissions всех статусов (PENDING/APPROVED/REJECTED/WITHDRAWN), sorted
|
||||
* submitted_at DESC. Polled каждые 30s — maker увидит когда reviewer
|
||||
* approve/reject. Withdraw кнопка для PENDING (только свои + maker-only
|
||||
* gate в backend).
|
||||
*/
|
||||
function MyDraftsPage() {
|
||||
const { t } = useTranslation()
|
||||
const drafts = useMyDrafts(0, 50)
|
||||
const withdrawMut = useWithdrawDraft()
|
||||
const [busyId, setBusyId] = useState<string | undefined>(undefined)
|
||||
|
||||
const handleWithdraw = (id: string) => {
|
||||
if (!confirm(t('myDrafts.confirmWithdraw'))) return
|
||||
setBusyId(id)
|
||||
withdrawMut.mutate(id, {
|
||||
onSettled: () => setBusyId(undefined),
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<PageHeader
|
||||
title={t('myDrafts.title')}
|
||||
description={t('myDrafts.description')}
|
||||
/>
|
||||
|
||||
{drafts.isLoading && <LoadingBlock size="md" label={t('loading')} />}
|
||||
|
||||
{drafts.error && (
|
||||
<Alert variant="error" title={t('error.failed')}>
|
||||
{String(drafts.error)}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{drafts.data && drafts.data.totalElements === 0 && (
|
||||
<EmptyState title={t('myDrafts.empty')} />
|
||||
)}
|
||||
|
||||
{drafts.data && drafts.data.totalElements > 0 && (
|
||||
<Panel>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<p className="text-2xs text-carbon/60">
|
||||
{t('myDrafts.total', { count: drafts.data.totalElements })}
|
||||
</p>
|
||||
</div>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableHeaderCell>{t('myDrafts.col.bk')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('myDrafts.col.op')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('myDrafts.col.status')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('myDrafts.col.submitted')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('myDrafts.col.reviewed')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('myDrafts.col.reviewer')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('myDrafts.col.comment')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('myDrafts.col.actions')}</TableHeaderCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{drafts.data.items.map((d) => (
|
||||
<TableRow key={d.id}>
|
||||
<TableCell className="font-mono text-2xs">{d.businessKey}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={operationVariant(d.operation)}>{d.operation}</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={statusVariant(d.status)}>{d.status}</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-2xs text-carbon/70">
|
||||
{new Date(d.submittedAt).toLocaleString()}
|
||||
</TableCell>
|
||||
<TableCell className="text-2xs text-carbon/70">
|
||||
{d.reviewedAt
|
||||
? new Date(d.reviewedAt).toLocaleString()
|
||||
: '—'}
|
||||
</TableCell>
|
||||
<TableCell className="font-mono text-2xs">
|
||||
{d.reviewerId ?? '—'}
|
||||
</TableCell>
|
||||
<TableCell className="text-2xs text-carbon/80 max-w-md">
|
||||
{d.reviewComment ?? d.makerComment ?? '—'}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{d.status === 'PENDING' ? (
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
disabled={busyId === d.id}
|
||||
onClick={() => handleWithdraw(d.id)}
|
||||
>
|
||||
{t('myDrafts.action.withdraw')}
|
||||
</Button>
|
||||
) : (
|
||||
<span className="text-2xs text-carbon/40">—</span>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Panel>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user