jiazhizhong/certimate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve data display

Browse Source
This commit is contained in:
yoan
2024-11-15 08:06:39 +08:00
parent 9132d47f4d
commit 8901f5d40e
8 changed files with 385 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/components/workflow/CustomAlertDialog.tsx
View File

@@ -24,12 +24,12 @@ const CustomAlertDialog = ({ open, title, description, confirm, onOpenChange }:
return (
<AlertDialog open={open} onOpenChange={onOpenChange}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogHeader className="dark:text-stone-200">
<AlertDialogTitle>{title}</AlertDialogTitle>
<AlertDialogDescription>{description}</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
<AlertDialogCancel className="dark:text-stone-200">{t("common.cancel")}</AlertDialogCancel>
<AlertDialogAction
onClick={() => {
confirm && confirm();

24
ui/src/components/workflow/DataTable.tsx
View File

@@ -3,20 +3,23 @@ import { ColumnDef, flexRender, getCoreRowModel, getPaginationRowModel, Paginati
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Button } from "../ui/button";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
interface DataTableProps<TData, TValue> {
interface DataTableProps<TData extends { id: string }, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
pageCount: number;
onPageChange?: (pageIndex: number, pageSize?: number) => Promise<void>;
}
export function DataTable<TData, TValue>({ columns, data, onPageChange, pageCount }: DataTableProps<TData, TValue>) {
export function DataTable<TData extends { id: string }, TValue>({ columns, data, onPageChange, pageCount }: DataTableProps<TData, TValue>) {
const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
pageIndex: 0,
pageSize: 10,
});
const navigate = useNavigate();
const pagination = {
pageIndex,
pageSize,
@@ -39,13 +42,17 @@ export function DataTable<TData, TValue>({ columns, data, onPageChange, pageCoun
onPageChange?.(pageIndex, pageSize);
}, [pageIndex]);
const handleRowClick = (id: string) => {
navigate(`/workflow/detail?id=${id}`);
};
return (
<>
<div className="rounded-md">
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id} className="border-muted-foreground">
<TableRow key={headerGroup.id} className="dark:border-muted-foreground">
{headerGroup.headers.map((header) => {
return <TableHead key={header.id}>{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}</TableHead>;
})}
@@ -55,7 +62,15 @@ export function DataTable<TData, TValue>({ columns, data, onPageChange, pageCoun
<TableBody className="dark:text-stone-200">
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow key={row.id} data-state={row.getIsSelected() && "selected"} className="border-muted-foreground">
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
className="dark:border-muted-foreground"
onClick={(e) => {
e.stopPropagation();
handleRowClick(row.original.id);
}}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
))}
@@ -84,4 +99,3 @@ export function DataTable<TData, TValue>({ columns, data, onPageChange, pageCoun
</>
);
}

26
ui/src/components/workflow/WorkflowBaseInfoEditDialog.tsx
View File

@@ -8,7 +8,7 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
import { Input } from "../ui/input";
import { Button } from "../ui/button";
import { useTranslation } from "react-i18next";
import { useState } from "react";
import { memo, useState } from "react";
type WorkflowNameEditDialogProps = {
trigger: React.ReactNode;
@@ -28,10 +28,6 @@ const WorkflowNameBaseInfoDialog = ({ trigger }: WorkflowNameEditDialogProps) =>
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
name: workflow.name,
description: workflow.description,
},
});
const { t } = useTranslation();
@@ -72,7 +68,14 @@ const WorkflowNameBaseInfoDialog = ({ trigger }: WorkflowNameEditDialogProps) =>
<FormItem>
<FormLabel>名称</FormLabel>
<FormControl>
<Input placeholder="请输入流程名称" {...field} />
<Input
placeholder="请输入流程名称"
{...field}
defaultValue={workflow.name}
onChange={(e) => {
form.setValue("name", e.target.value);
}}
/>
</FormControl>
<FormMessage />
@@ -87,7 +90,14 @@ const WorkflowNameBaseInfoDialog = ({ trigger }: WorkflowNameEditDialogProps) =>
<FormItem>
<FormLabel>说明</FormLabel>
<FormControl>
<Input placeholder="请输入流程说明" {...field} />
<Input
placeholder="请输入流程说明"
{...field}
defaultValue={workflow.description}
onChange={(e) => {
form.setValue("description", e.target.value);
}}
/>
</FormControl>
<FormMessage />
@@ -107,4 +117,4 @@ const WorkflowNameBaseInfoDialog = ({ trigger }: WorkflowNameEditDialogProps) =>
);
};
export default WorkflowNameBaseInfoDialog;
export default memo(WorkflowNameBaseInfoDialog);