huangmin
1 month ago
3 changed files with 0 additions and 211 deletions
@ -1,172 +0,0 @@ |
|||
"use client"; |
|||
|
|||
import { useCallback, useEffect, useMemo, useState } from "react"; |
|||
import { App, Button, Card, Empty, Modal, Pagination, Popconfirm, Space, Spin, Typography } from "antd"; |
|||
import { useRouter, useSearchParams } from "next/navigation"; |
|||
import { useI18n } from "@/i18n"; |
|||
import { |
|||
deleteCanvasWorkflow, |
|||
listCanvasWorkflows, |
|||
type CanvasWorkflowListItem, |
|||
type CanvasWorkflowPageInfo, |
|||
} from "@/lib/canvasWorkflowApi"; |
|||
import { useCanvasWorkflowStore } from "@/store/canvasWorkflowStore"; |
|||
|
|||
interface CanvasWorkflowPickerModalProps { |
|||
isOpen: boolean; |
|||
onClose: () => void; |
|||
} |
|||
|
|||
const DEFAULT_PAGE_INFO: CanvasWorkflowPageInfo = { |
|||
page: 1, |
|||
pageSize: 10, |
|||
pageCount: 1, |
|||
total: 0, |
|||
}; |
|||
|
|||
function workflowDisplayTitle(workflow: CanvasWorkflowListItem): string { |
|||
return workflow.title?.trim() || workflow.code?.trim() || `#${workflow.id}`; |
|||
} |
|||
|
|||
function formatWorkflowTime(value?: string): string { |
|||
if (!value) return "-"; |
|||
const date = new Date(value); |
|||
if (Number.isNaN(date.getTime())) return value; |
|||
return date.toLocaleString(); |
|||
} |
|||
|
|||
function buildCanvasWorkflowUrl(searchParams: URLSearchParams): string { |
|||
const query = searchParams.toString(); |
|||
return query ? `/canvas?${query}` : "/canvas"; |
|||
} |
|||
|
|||
export function CanvasWorkflowPickerModal({ isOpen, onClose }: CanvasWorkflowPickerModalProps) { |
|||
const { t } = useI18n(); |
|||
const { message } = App.useApp(); |
|||
const router = useRouter(); |
|||
const searchParams = useSearchParams(); |
|||
const currentCanvasWorkflowId = useCanvasWorkflowStore((state) => state.currentCanvasWorkflowId); |
|||
const clearCurrentCanvasWorkflow = useCanvasWorkflowStore((state) => state.clearCurrentCanvasWorkflow); |
|||
const [workflows, setWorkflows] = useState<CanvasWorkflowListItem[]>([]); |
|||
const [pageInfo, setPageInfo] = useState<CanvasWorkflowPageInfo>(DEFAULT_PAGE_INFO); |
|||
const [isLoading, setIsLoading] = useState(false); |
|||
|
|||
const loadWorkflows = useCallback(async (page = pageInfo.page, pageSize = pageInfo.pageSize) => { |
|||
setIsLoading(true); |
|||
try { |
|||
const data = await listCanvasWorkflows({ page, pageSize }); |
|||
setWorkflows(data.list); |
|||
setPageInfo(data.pageInfo); |
|||
} catch (error) { |
|||
const errorMessage = error instanceof Error ? error.message : t("canvasWorkflow.listFailed"); |
|||
void message.error(errorMessage); |
|||
} finally { |
|||
setIsLoading(false); |
|||
} |
|||
}, [message, pageInfo.page, pageInfo.pageSize, t]); |
|||
|
|||
useEffect(() => { |
|||
if (isOpen) { |
|||
void loadWorkflows(1, pageInfo.pageSize); |
|||
} |
|||
}, [isOpen]); |
|||
|
|||
const openWorkflow = (workflow: CanvasWorkflowListItem) => { |
|||
const nextParams = new URLSearchParams(searchParams.toString()); |
|||
nextParams.set("workflowId", String(workflow.id)); |
|||
router.push(buildCanvasWorkflowUrl(nextParams)); |
|||
onClose(); |
|||
}; |
|||
|
|||
const handleDelete = async (workflow: CanvasWorkflowListItem) => { |
|||
try { |
|||
await deleteCanvasWorkflow(workflow.id); |
|||
void message.success(t("canvasWorkflow.deleteSuccess")); |
|||
if (currentCanvasWorkflowId === workflow.id) { |
|||
const nextParams = new URLSearchParams(searchParams.toString()); |
|||
nextParams.delete("workflowId"); |
|||
router.replace(buildCanvasWorkflowUrl(nextParams)); |
|||
clearCurrentCanvasWorkflow(); |
|||
} |
|||
await loadWorkflows(pageInfo.page, pageInfo.pageSize); |
|||
} catch (error) { |
|||
const errorMessage = error instanceof Error ? error.message : t("canvasWorkflow.deleteFailed"); |
|||
void message.error(errorMessage); |
|||
} |
|||
}; |
|||
|
|||
const cards = useMemo(() => workflows.map((workflow) => ( |
|||
<Card |
|||
key={workflow.id} |
|||
size="small" |
|||
className="h-full" |
|||
title={ |
|||
<Typography.Text strong ellipsis> |
|||
{workflowDisplayTitle(workflow)} |
|||
</Typography.Text> |
|||
} |
|||
extra={<Typography.Text type="secondary">#{workflow.id}</Typography.Text>} |
|||
actions={[ |
|||
<Button key="open" type="link" size="small" onClick={() => openWorkflow(workflow)}> |
|||
{t("canvasWorkflow.open")} |
|||
</Button>, |
|||
<Popconfirm |
|||
key="delete" |
|||
title={t("canvasWorkflow.deleteConfirmTitle")} |
|||
description={t("canvasWorkflow.deleteConfirmDesc")} |
|||
okText={t("common.remove")} |
|||
cancelText={t("common.cancel")} |
|||
onConfirm={() => handleDelete(workflow)} |
|||
> |
|||
<Button type="link" danger size="small"> |
|||
{t("common.remove")} |
|||
</Button> |
|||
</Popconfirm>, |
|||
]} |
|||
> |
|||
<Space direction="vertical" size={8} className="w-full"> |
|||
<Typography.Paragraph |
|||
type="secondary" |
|||
ellipsis={{ rows: 2 }} |
|||
className="!mb-0 min-h-11" |
|||
> |
|||
{workflow.desp?.trim() || t("canvasWorkflow.noDescription")} |
|||
</Typography.Paragraph> |
|||
<Typography.Text type="secondary" className="text-xs"> |
|||
{t("canvasWorkflow.columnUpdatedAt")}: {formatWorkflowTime(workflow.updateTime)} |
|||
</Typography.Text> |
|||
</Space> |
|||
</Card> |
|||
)), [workflows, t, searchParams, currentCanvasWorkflowId, pageInfo.page, pageInfo.pageSize]); |
|||
|
|||
return ( |
|||
<Modal |
|||
title={t("canvasWorkflow.projects")} |
|||
open={isOpen} |
|||
onCancel={onClose} |
|||
footer={null} |
|||
width={760} |
|||
destroyOnHidden |
|||
> |
|||
<Spin spinning={isLoading}> |
|||
{workflows.length > 0 ? ( |
|||
<div className="grid grid-cols-1 gap-3 md:grid-cols-2"> |
|||
{cards} |
|||
</div> |
|||
) : ( |
|||
<Empty description={t("canvasWorkflow.empty")} /> |
|||
)} |
|||
<div className="mt-4 flex justify-end"> |
|||
<Pagination |
|||
current={pageInfo.page} |
|||
pageSize={pageInfo.pageSize} |
|||
total={pageInfo.total} |
|||
showSizeChanger |
|||
pageSizeOptions={["10", "20", "50"]} |
|||
onChange={(page, pageSize) => void loadWorkflows(page, pageSize)} |
|||
/> |
|||
</div> |
|||
</Spin> |
|||
</Modal> |
|||
); |
|||
} |
|||
Loading…
Reference in new issue