mirror of
https://github.com/usual2970/certimate.git
synced 2025-06-10 14:39:50 +00:00
feat(ui): optimize table UI
This commit is contained in:
parent
4e0134b70a
commit
5c6be439e8
@ -1,7 +1,7 @@
|
||||
{
|
||||
"access.page.title": "Authorization",
|
||||
|
||||
"access.nodata": "Please add authorization to start deploying certificate.",
|
||||
"access.nodata": "No accesses. Please create an authorization first.",
|
||||
|
||||
"access.action.add": "Create Authorization",
|
||||
"access.action.edit": "Edit Authorization",
|
||||
|
@ -1,7 +1,7 @@
|
||||
{
|
||||
"certificate.page.title": "Certificates",
|
||||
|
||||
"certificate.nodata": "No certificates yet, create a workflow to generate certificates! 😀",
|
||||
"certificate.nodata": "No certificates. Please create a workflow to generate certificates! 😀",
|
||||
|
||||
"certificate.action.view": "View Certificate",
|
||||
"certificate.action.download": "Download Certificate",
|
||||
|
@ -1,8 +1,10 @@
|
||||
{
|
||||
"workflow.page.title": "Workflows",
|
||||
|
||||
"workflow.nodata": "No workflows. Please create a workflow to generate certificates! 😀",
|
||||
|
||||
"workflow.detail.title": "Workflow",
|
||||
"workflow.detail.history": "History",
|
||||
|
||||
"workflow.detail.action.save": "Save updates",
|
||||
"workflow.detail.action.save.failed": "Save failed",
|
||||
"workflow.detail.action.save.failed.uncompleted": "Save failed, please complete all node settings",
|
||||
|
@ -1,7 +1,7 @@
|
||||
{
|
||||
"access.page.title": "授权管理",
|
||||
|
||||
"access.nodata": "请添加授权开始部署证书吧。",
|
||||
"access.nodata": "暂无授权信息,请先创建。",
|
||||
|
||||
"access.action.add": "新建授权",
|
||||
"access.action.edit": "编辑授权",
|
||||
|
@ -1,7 +1,7 @@
|
||||
{
|
||||
"certificate.page.title": "证书管理",
|
||||
|
||||
"certificate.nodata": "暂无证书,创建一个工作流去生成证书吧 😀",
|
||||
"certificate.nodata": "暂无证书,创建一个工作流去生成证书吧~ 😀",
|
||||
|
||||
"certificate.action.view": "查看证书",
|
||||
"certificate.action.download": "下载证书",
|
||||
|
@ -1,8 +1,12 @@
|
||||
{
|
||||
"workflow.page.title": "工作流",
|
||||
|
||||
"certificate.nodata": "暂无证书,创建一个工作流去生成证书吧~ 😀",
|
||||
|
||||
"workflow.nodata": "No workflows yet. Try to create a workflow to generate certificates! 😀",
|
||||
|
||||
"workflow.detail.title": "流程",
|
||||
"workflow.detail.history": "历史",
|
||||
|
||||
"workflow.detail.action.save": "保存变更",
|
||||
"workflow.detail.action.save.failed": "保存失败",
|
||||
"workflow.detail.action.save.failed.uncompleted": "保存失败,请完成所有节点设置",
|
||||
|
@ -60,7 +60,6 @@ const ConsoleLayout = () => {
|
||||
const item =
|
||||
menuItems.find((item) => item!.key === location.pathname) ??
|
||||
menuItems.find((item) => item!.key !== "/" && location.pathname.startsWith(item!.key as string));
|
||||
console.log(item);
|
||||
if (item) {
|
||||
setMenuSelectedKey(item.key as string);
|
||||
} else {
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Avatar, Button, Modal, notification, Space, Table, Tooltip, Typography, type TableProps } from "antd";
|
||||
import { Avatar, Button, Empty, Modal, notification, Space, Table, Tooltip, Typography, type TableProps } from "antd";
|
||||
import { PageHeader } from "@ant-design/pro-components";
|
||||
import { Copy as CopyIcon, Pencil as PencilIcon, Plus as PlusIcon, Trash2 as Trash2Icon } from "lucide-react";
|
||||
import moment from "moment";
|
||||
@ -13,6 +13,9 @@ import { useConfigContext } from "@/providers/config";
|
||||
const AccessList = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
// a flag to fix the twice-rendering issue in strict mode
|
||||
const mountRef = useRef(true);
|
||||
|
||||
const [modalApi, ModelContextHolder] = Modal.useModal();
|
||||
const [notificationApi, NotificationContextHolder] = notification.useNotification();
|
||||
|
||||
@ -111,7 +114,7 @@ const AccessList = () => {
|
||||
|
||||
const configContext = useConfigContext();
|
||||
|
||||
const fetchTableData = async () => {
|
||||
const fetchTableData = useCallback(async () => {
|
||||
if (loading) return;
|
||||
setLoading(true);
|
||||
|
||||
@ -124,14 +127,20 @@ const AccessList = () => {
|
||||
setTableTotal(configContext.config.accesses.length);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
}, [page, pageSize, configContext.config.accesses]);
|
||||
|
||||
useEffect(() => {
|
||||
if (mountRef.current) {
|
||||
mountRef.current = false;
|
||||
return;
|
||||
}
|
||||
|
||||
fetchTableData();
|
||||
}, [page, pageSize, configContext.config.accesses]);
|
||||
}, [fetchTableData]);
|
||||
|
||||
const handleDeleteClick = async (data: AccessType) => {
|
||||
modalApi.confirm({
|
||||
@ -143,13 +152,13 @@ const AccessList = () => {
|
||||
const res = await removeAccess(data);
|
||||
configContext.deleteAccess(res.id);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// TODO: Empty 样式
|
||||
// TODO: 响应式表格
|
||||
|
||||
return (
|
||||
@ -176,6 +185,9 @@ const AccessList = () => {
|
||||
columns={tableColumns}
|
||||
dataSource={tableData}
|
||||
loading={loading}
|
||||
locale={{
|
||||
emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t("access.nodata")} />,
|
||||
}}
|
||||
pagination={{
|
||||
current: page,
|
||||
pageSize: pageSize,
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useNavigate, useSearchParams } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button, Space, Table, Tooltip, Typography, type TableProps } from "antd";
|
||||
import { Button, Empty, notification, Space, Table, Tooltip, Typography, type TableProps } from "antd";
|
||||
import { PageHeader } from "@ant-design/pro-components";
|
||||
import { Eye as EyeIcon } from "lucide-react";
|
||||
import moment from "moment";
|
||||
@ -17,6 +17,11 @@ const CertificateList = () => {
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
// a flag to fix the twice-rendering issue in strict mode
|
||||
const mountRef = useRef(true);
|
||||
|
||||
const [notificationApi, NotificationContextHolder] = notification.useNotification();
|
||||
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
|
||||
const tableColumns: TableProps<CertificateType>["columns"] = [
|
||||
@ -120,7 +125,7 @@ const CertificateList = () => {
|
||||
const [page, setPage] = useState<number>(1);
|
||||
const [pageSize, setPageSize] = useState<number>(10);
|
||||
|
||||
const fetchTableData = async () => {
|
||||
const fetchTableData = useCallback(async () => {
|
||||
if (loading) return;
|
||||
setLoading(true);
|
||||
|
||||
@ -137,14 +142,20 @@ const CertificateList = () => {
|
||||
setTableTotal(resp.totalItems);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
}, [page, pageSize]);
|
||||
|
||||
useEffect(() => {
|
||||
if (mountRef.current) {
|
||||
mountRef.current = false;
|
||||
return;
|
||||
}
|
||||
|
||||
fetchTableData();
|
||||
}, [page, pageSize]);
|
||||
}, [fetchTableData]);
|
||||
|
||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||
const [currentRecord, setCurrentRecord] = useState<CertificateType>();
|
||||
@ -154,17 +165,21 @@ const CertificateList = () => {
|
||||
setCurrentRecord(certificate);
|
||||
};
|
||||
|
||||
// TODO: Empty 样式
|
||||
// TODO: 响应式表格
|
||||
|
||||
return (
|
||||
<>
|
||||
{NotificationContextHolder}
|
||||
|
||||
<PageHeader title={t("certificate.page.title")} />
|
||||
|
||||
<Table<CertificateType>
|
||||
columns={tableColumns}
|
||||
dataSource={tableData}
|
||||
loading={loading}
|
||||
locale={{
|
||||
emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t("certificate.nodata")} />,
|
||||
}}
|
||||
pagination={{
|
||||
current: page,
|
||||
pageSize: pageSize,
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useNavigate, useSearchParams } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button, Modal, notification, Space, Switch, Table, Tooltip, Typography, type TableProps } from "antd";
|
||||
import { Button, Empty, Modal, notification, Space, Switch, Table, Tooltip, Typography, type TableProps } from "antd";
|
||||
import { PageHeader } from "@ant-design/pro-components";
|
||||
import { Pencil as PencilIcon, Plus as PlusIcon, Trash2 as Trash2Icon } from "lucide-react";
|
||||
import moment from "moment";
|
||||
@ -15,6 +15,9 @@ const WorkflowList = () => {
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
// a flag to fix the twice-rendering issue in strict mode
|
||||
const mountRef = useRef(true);
|
||||
|
||||
const [modalApi, ModelContextHolder] = Modal.useModal();
|
||||
const [notificationApi, NotificationContextHolder] = notification.useNotification();
|
||||
|
||||
@ -137,7 +140,7 @@ const WorkflowList = () => {
|
||||
const [pageSize, setPageSize] = useState<number>(10);
|
||||
|
||||
// TODO: 表头筛选
|
||||
const fetchTableData = async () => {
|
||||
const fetchTableData = useCallback(async () => {
|
||||
if (loading) return;
|
||||
setLoading(true);
|
||||
|
||||
@ -154,14 +157,20 @@ const WorkflowList = () => {
|
||||
setTableTotal(resp.totalItems);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
}, [searchParams, page, pageSize]);
|
||||
|
||||
useEffect(() => {
|
||||
if (mountRef.current) {
|
||||
mountRef.current = false;
|
||||
return;
|
||||
}
|
||||
|
||||
fetchTableData();
|
||||
}, [page, pageSize]);
|
||||
}, [fetchTableData]);
|
||||
|
||||
const handleEnabledChange = async (workflow: WorkflowType) => {
|
||||
try {
|
||||
@ -180,6 +189,7 @@ const WorkflowList = () => {
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
|
||||
}
|
||||
};
|
||||
@ -195,6 +205,7 @@ const WorkflowList = () => {
|
||||
setTableData((prev) => prev.filter((item) => item.id !== workflow.id));
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
|
||||
}
|
||||
},
|
||||
@ -205,7 +216,6 @@ const WorkflowList = () => {
|
||||
navigate("/workflows/detail");
|
||||
};
|
||||
|
||||
// TODO: Empty 样式
|
||||
// TODO: 响应式表格
|
||||
|
||||
return (
|
||||
@ -233,6 +243,9 @@ const WorkflowList = () => {
|
||||
columns={tableColumns}
|
||||
dataSource={tableData}
|
||||
loading={loading}
|
||||
locale={{
|
||||
emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t("workflow.nodata")} />,
|
||||
}}
|
||||
pagination={{
|
||||
current: page,
|
||||
pageSize: pageSize,
|
||||
|
@ -10,14 +10,15 @@ export const list = async () => {
|
||||
});
|
||||
};
|
||||
|
||||
export const save = async (data: Access) => {
|
||||
if (data.id) {
|
||||
return await getPocketBase().collection("access").update(data.id, data);
|
||||
export const save = async (record: Access) => {
|
||||
if (record.id) {
|
||||
return await getPocketBase().collection("access").update(record.id, record);
|
||||
}
|
||||
return await getPocketBase().collection("access").create(data);
|
||||
|
||||
return await getPocketBase().collection("access").create(record);
|
||||
};
|
||||
|
||||
export const remove = async (data: Access) => {
|
||||
data.deleted = moment.utc().format("YYYY-MM-DD HH:mm:ss");
|
||||
return await getPocketBase().collection("access").update(data.id, data);
|
||||
export const remove = async (record: Access) => {
|
||||
record.deleted = moment.utc().format("YYYY-MM-DD HH:mm:ss");
|
||||
return await getPocketBase().collection("access").update(record.id, record);
|
||||
};
|
||||
|
@ -1,25 +0,0 @@
|
||||
import { Deployment, DeploymentListReq } from "@/domain/deployment";
|
||||
import { getPocketBase } from "./pocketbase";
|
||||
|
||||
export const list = async (req: DeploymentListReq) => {
|
||||
let page = 1;
|
||||
if (req.page) {
|
||||
page = req.page;
|
||||
}
|
||||
|
||||
let perPage = 50;
|
||||
if (req.perPage) {
|
||||
perPage = req.perPage;
|
||||
}
|
||||
|
||||
let filter = "domain!=null";
|
||||
if (req.domain) {
|
||||
filter = `domain="${req.domain}"`;
|
||||
}
|
||||
|
||||
return await getPocketBase().collection("deployments").getList<Deployment>(page, perPage, {
|
||||
filter: filter,
|
||||
sort: "-deployedAt",
|
||||
expand: "domain",
|
||||
});
|
||||
};
|
@ -1,80 +0,0 @@
|
||||
import { getTimeAfter } from "@/lib/time";
|
||||
import { Domain } from "@/domain/domain";
|
||||
import { getPocketBase } from "./pocketbase";
|
||||
|
||||
type DomainListReq = {
|
||||
domain?: string;
|
||||
page?: number;
|
||||
perPage?: number;
|
||||
state?: string;
|
||||
};
|
||||
|
||||
export const list = async (req: DomainListReq) => {
|
||||
const pb = getPocketBase();
|
||||
|
||||
let page = 1;
|
||||
if (req.page) {
|
||||
page = req.page;
|
||||
}
|
||||
|
||||
let perPage = 2;
|
||||
if (req.perPage) {
|
||||
perPage = req.perPage;
|
||||
}
|
||||
|
||||
let filter = "";
|
||||
if (req.state === "enabled") {
|
||||
filter = "enabled=true";
|
||||
} else if (req.state === "disabled") {
|
||||
filter = "enabled=false";
|
||||
} else if (req.state === "expired") {
|
||||
filter = pb.filter("expiredAt<{:expiredAt}", {
|
||||
expiredAt: getTimeAfter(15),
|
||||
});
|
||||
}
|
||||
|
||||
const response = pb.collection("domains").getList<Domain>(page, perPage, {
|
||||
sort: "-created",
|
||||
expand: "lastDeployment",
|
||||
filter: filter,
|
||||
});
|
||||
|
||||
return response;
|
||||
};
|
||||
|
||||
export const get = async (id: string) => {
|
||||
const response = await getPocketBase().collection("domains").getOne<Domain>(id);
|
||||
return response;
|
||||
};
|
||||
|
||||
export const save = async (data: Domain) => {
|
||||
if (data.id) {
|
||||
return await getPocketBase().collection("domains").update<Domain>(data.id, data);
|
||||
}
|
||||
return await getPocketBase().collection("domains").create<Domain>(data);
|
||||
};
|
||||
|
||||
export const remove = async (id: string) => {
|
||||
return await getPocketBase().collection("domains").delete(id);
|
||||
};
|
||||
|
||||
type Callback = (data: Domain) => void;
|
||||
export const subscribeId = (id: string, callback: Callback) => {
|
||||
return getPocketBase()
|
||||
.collection("domains")
|
||||
.subscribe<Domain>(
|
||||
id,
|
||||
(e) => {
|
||||
if (e.action === "update") {
|
||||
callback(e.record);
|
||||
}
|
||||
},
|
||||
{
|
||||
expand: "lastDeployment",
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export const unsubscribeId = (id: string) => {
|
||||
getPocketBase().collection("domains").unsubscribe(id);
|
||||
};
|
@ -27,18 +27,18 @@ export const get = async (id: string) => {
|
||||
return await getPocketBase().collection("workflow").getOne<Workflow>(id);
|
||||
};
|
||||
|
||||
export const save = async (data: Record<string, string | boolean | WorkflowNode>) => {
|
||||
if (data.id) {
|
||||
export const save = async (record: Record<string, string | boolean | WorkflowNode>) => {
|
||||
if (record.id) {
|
||||
return await getPocketBase()
|
||||
.collection("workflow")
|
||||
.update<Workflow>(data.id as string, data);
|
||||
.update<Workflow>(record.id as string, record);
|
||||
}
|
||||
|
||||
return await getPocketBase().collection("workflow").create<Workflow>(data);
|
||||
return await getPocketBase().collection("workflow").create<Workflow>(record);
|
||||
};
|
||||
|
||||
export const remove = async (workflow: Workflow) => {
|
||||
return await getPocketBase().collection("workflow").delete(workflow.id);
|
||||
export const remove = async (record: Workflow) => {
|
||||
return await getPocketBase().collection("workflow").delete(record.id);
|
||||
};
|
||||
|
||||
type WorkflowLogsReq = {
|
||||
|
Loading…
x
Reference in New Issue
Block a user