76 lines
2.5 KiB
TypeScript
76 lines
2.5 KiB
TypeScript
|
import { XIcon } from "lucide-react"
|
||
|
|
import type { RefObject } from "react"
|
||
|
|
|
||
|
|
import type { SelectionResults } from "../api/selection.types"
|
||
|
|
import { IncompleteEvaluationTable } from "./incomplete-evaluation-table"
|
||
|
|
import { getSelectionRunStatusPresentation } from "./selection-presentation"
|
||
|
|
import {
|
||
|
|
Dialog,
|
||
|
|
DialogClose,
|
||
|
|
DialogContent,
|
||
|
|
DialogDescription,
|
||
|
|
DialogFooter,
|
||
|
|
DialogHeader,
|
||
|
|
DialogTitle,
|
||
|
|
} from "@/shared/ui/dialog"
|
||
|
|
import { Button } from "@/shared/ui/button"
|
||
|
|
|
||
|
|
interface ExecutionStatusDrawerProps {
|
||
|
|
finalFocus: RefObject<HTMLElement | null>
|
||
|
|
onOpenChange: (open: boolean) => void
|
||
|
|
open: boolean
|
||
|
|
result: SelectionResults
|
||
|
|
}
|
||
|
|
|
||
|
|
export function ExecutionStatusDrawer({
|
||
|
|
finalFocus,
|
||
|
|
onOpenChange,
|
||
|
|
open,
|
||
|
|
result,
|
||
|
|
}: ExecutionStatusDrawerProps) {
|
||
|
|
const statusPresentation = getSelectionRunStatusPresentation(result.status)
|
||
|
|
const statusLabel = statusPresentation?.label ?? result.status
|
||
|
|
const tradeDate = result.target_trade_date ?? "未指定"
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||
|
|
<DialogContent
|
||
|
|
aria-label="选股执行状态"
|
||
|
|
className="top-0 right-0 left-auto flex h-[100svh] min-h-[100svh] w-[min(600px,100vw)] max-w-none translate-x-full translate-y-0 flex-col grid-cols-1 gap-0 rounded-l-xl rounded-r-none border-y-0 border-r-0 p-4 data-open:translate-x-0 data-closed:translate-x-full sm:max-w-none"
|
||
|
|
finalFocus={finalFocus}
|
||
|
|
id="selection-execution-status-drawer"
|
||
|
|
showCloseButton={false}
|
||
|
|
>
|
||
|
|
<DialogHeader className="shrink-0 gap-1 pr-10">
|
||
|
|
<DialogTitle className="text-lg">知行 B1 执行状态</DialogTitle>
|
||
|
|
<DialogDescription>
|
||
|
|
目标交易日：{tradeDate}；当前状态：{statusLabel}；未完成评估：
|
||
|
|
{result.failures.length} 条。
|
||
|
|
</DialogDescription>
|
||
|
|
</DialogHeader>
|
||
|
|
|
||
|
|
<div className="min-h-0 flex-1 overflow-y-auto py-4">
|
||
|
|
<IncompleteEvaluationTable failures={result.failures} />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<DialogFooter className="shrink-0 -mx-4 -mb-4 rounded-none px-4 py-3">
|
||
|
|
<DialogClose render={<Button variant="outline" />}>关闭</DialogClose>
|
||
|
|
</DialogFooter>
|
||
|
|
|
||
|
|
<DialogClose
|
||
|
|
render={
|
||
|
|
<Button
|
||
|
|
aria-label="关闭执行状态"
|
||
|
|
className="absolute top-3 right-3 size-11 md:size-8"
|
||
|
|
size="icon"
|
||
|
|
variant="ghost"
|
||
|
|
/>
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<XIcon aria-hidden="true" />
|
||
|
|
</DialogClose>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
)
|
||
|
|
}
|