GuanM/certimate
1
0
Fork 0
mirror of https://github.com/usual2970/certimate.git synced 2025-06-08 21:49:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(ui): clean code

Browse Source
This commit is contained in:
Fu Diwei 2024-12-19 09:44:09 +08:00
parent 85faf8d517
commit 5ea5473bdd
4 changed files with 82 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
ui/src/pages/accesses/AccessList.tsx
View File

@ -1,5 +1,6 @@
import { useCallback, useEffect, useState } from "react";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useRequest } from "ahooks";
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";
@ -19,8 +20,6 @@ const AccessList = () => {
const { accesses, fetchAccesses, deleteAccess } = useAccessStore();
const [loading, setLoading] = useState<boolean>(false);
const tableColumns: TableProps<AccessModel>["columns"] = [
{
key: "$index",
@ -124,32 +123,24 @@ const AccessList = () => {
});
}, []);
const fetchTableData = useCallback(async () => {
if (loading) return;
setLoading(true);
try {
const { loading } = useRequest(
() => {
const startIndex = (page - 1) * pageSize;
const endIndex = startIndex + pageSize;
const items = accesses.slice(startIndex, endIndex);
setTableData(items);
setTableTotal(accesses.length);
} catch (err) {
if (err instanceof ClientResponseError && err.isAbort) {
return;
}
console.error(err);
notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
} finally {
setLoading(false);
return Promise.resolve({
items,
totalItems: accesses.length,
});
},
{
refreshDeps: [accesses, page, pageSize],
onSuccess: (data) => {
setTableData(data.items);
setTableTotal(data.totalItems);
},
}
}, [page, pageSize, accesses]);
useEffect(() => {
fetchTableData();
}, [fetchTableData]);
);
const handleDeleteClick = async (data: AccessModel) => {
modalApi.confirm({

45
ui/src/pages/certificates/CertificateList.tsx
View File

@ -1,6 +1,7 @@
import { useCallback, useEffect, useState } from "react";
import { useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { useRequest } from "ahooks";
import { Button, Divider, Empty, Menu, notification, Radio, Space, Table, theme, Tooltip, Typography, type MenuProps, type TableProps } from "antd";
import { PageHeader } from "@ant-design/pro-components";
import { Eye as EyeIcon, Filter as FilterIcon } from "lucide-react";
@ -22,8 +23,6 @@ const CertificateList = () => {
const [notificationApi, NotificationContextHolder] = notification.useNotification();
const [loading, setLoading] = useState<boolean>(false);
const tableColumns: TableProps<CertificateModel>["columns"] = [
{
key: "$index",
@ -177,34 +176,30 @@ const CertificateList = () => {
const [page, setPage] = useState<number>(() => parseInt(+searchParams.get("page")! + "") || 1);
const [pageSize, setPageSize] = useState<number>(() => parseInt(+searchParams.get("perPage")! + "") || 10);
const fetchTableData = useCallback(async () => {
if (loading) return;
setLoading(true);
try {
const resp = await listCertificate({
const { loading } = useRequest(
() => {
return listCertificate({
page: page,
perPage: pageSize,
state: filters["state"] as CertificateListReq["state"],
});
},
{
refreshDeps: [filters, page, pageSize],
onSuccess: (data) => {
setTableData(data.items);
setTableTotal(data.totalItems);
},
onError: (err) => {
if (err instanceof ClientResponseError && err.isAbort) {
return;
}
setTableData(resp.items);
setTableTotal(resp.totalItems);
} catch (err) {
if (err instanceof ClientResponseError && err.isAbort) {
return;
}
console.error(err);
notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
} finally {
setLoading(false);
console.error(err);
notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
},
}
}, [filters, page, pageSize]);
useEffect(() => {
fetchTableData();
}, [fetchTableData]);
);
return (
<>

51
ui/src/pages/dashboard/Dashboard.tsx
View File

@ -1,6 +1,7 @@
import React, { useCallback, useEffect, useState } from "react";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { useRequest } from "ahooks";
import { Card, Col, Divider, notification, Row, Space, Statistic, theme, Typography } from "antd";
import { PageHeader } from "@ant-design/pro-components";
import {
@ -25,8 +26,6 @@ const Dashboard = () => {
const [notificationApi, NotificationContextHolder] = notification.useNotification();
const [loading, setLoading] = useState<boolean>(false);
const statisticsGridSpans = {
xs: { flex: "50%" },
md: { flex: "50%" },
@ -34,31 +33,26 @@ const Dashboard = () => {
xl: { flex: "33.3333%" },
xxl: { flex: "20%" },
};
const [statistics, setStatistics] = useState<Statistics>();
const fetchStatistics = useCallback(async () => {
if (loading) return;
setLoading(true);
const { loading } = useRequest(
() => {
return getStatistics();
},
{
onSuccess: (data) => {
setStatistics(data);
},
onError: (err) => {
if (err instanceof ClientResponseError && err.isAbort) {
return;
}
try {
const data = await getStatistics();
setStatistics(data);
} catch (err) {
if (err instanceof ClientResponseError && err.isAbort) {
return;
}
console.error(err);
notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
} finally {
setLoading(false);
console.error(err);
notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
},
}
}, []);
useEffect(() => {
fetchStatistics();
}, []);
);
return (
<>
@ -71,6 +65,7 @@ const Dashboard = () => {
<StatisticCard
icon={<SquareSigmaIcon size={48} strokeWidth={1} color={themeToken.colorInfo} />}
label={t("dashboard.statistics.all_certificates")}
loading={loading}
value={statistics?.certificateTotal ?? "-"}
suffix={t("dashboard.statistics.unit")}
onClick={() => navigate("/certificates")}
@ -80,6 +75,7 @@ const Dashboard = () => {
<StatisticCard
icon={<CalendarClockIcon size={48} strokeWidth={1} color={themeToken.colorWarning} />}
label={t("dashboard.statistics.expire_soon_certificates")}
loading={loading}
value={statistics?.certificateExpireSoon ?? "-"}
suffix={t("dashboard.statistics.unit")}
onClick={() => navigate("/certificates?state=expireSoon")}
@ -89,6 +85,7 @@ const Dashboard = () => {
<StatisticCard
icon={<CalendarX2Icon size={48} strokeWidth={1} color={themeToken.colorError} />}
label={t("dashboard.statistics.expired_certificates")}
loading={loading}
value={statistics?.certificateExpired ?? "-"}
suffix={t("dashboard.statistics.unit")}
onClick={() => navigate("/certificates?state=expired")}
@ -98,6 +95,7 @@ const Dashboard = () => {
<StatisticCard
icon={<WorkflowIcon size={48} strokeWidth={1} color={themeToken.colorInfo} />}
label={t("dashboard.statistics.all_workflows")}
loading={loading}
value={statistics?.workflowTotal ?? "-"}
suffix={t("dashboard.statistics.unit")}
onClick={() => navigate("/workflows")}
@ -107,6 +105,7 @@ const Dashboard = () => {
<StatisticCard
icon={<FolderCheckIcon size={48} strokeWidth={1} color={themeToken.colorSuccess} />}
label={t("dashboard.statistics.enabled_workflows")}
loading={loading}
value={statistics?.workflowEnabled ?? "-"}
suffix={t("dashboard.statistics.unit")}
onClick={() => navigate("/workflows?state=enabled")}
@ -123,19 +122,21 @@ const Dashboard = () => {
const StatisticCard = ({
label,
loading,
icon,
value,
suffix,
onClick,
}: {
label: React.ReactNode;
loading?: boolean;
icon: React.ReactNode;
value?: string | number | React.ReactNode;
suffix?: React.ReactNode;
onClick?: () => void;
}) => {
return (
<Card className="size-full overflow-hidden" bordered={false} hoverable onClick={onClick}>
<Card className="size-full overflow-hidden" bordered={false} hoverable loading={loading} onClick={onClick}>
<Space size="middle">
{icon}
<Statistic

45
ui/src/pages/workflows/WorkflowList.tsx
View File

@ -1,6 +1,7 @@
import { useCallback, useEffect, useState } from "react";
import { useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { useRequest } from "ahooks";
import {
Button,
Divider,
@ -38,8 +39,6 @@ const WorkflowList = () => {
const [modalApi, ModelContextHolder] = Modal.useModal();
const [notificationApi, NotificationContextHolder] = notification.useNotification();
const [loading, setLoading] = useState<boolean>(false);
const tableColumns: TableProps<WorkflowModel>["columns"] = [
{
key: "$index",
@ -209,34 +208,30 @@ const WorkflowList = () => {
const [page, setPage] = useState<number>(() => parseInt(+searchParams.get("page")! + "") || 1);
const [pageSize, setPageSize] = useState<number>(() => parseInt(+searchParams.get("perPage")! + "") || 10);
const fetchTableData = useCallback(async () => {
if (loading) return;
setLoading(true);
try {
const resp = await listWorkflow({
const { loading } = useRequest(
() => {
return listWorkflow({
page: page,
perPage: pageSize,
enabled: (filters["state"] as string) === "enabled" ? true : (filters["state"] as string) === "disabled" ? false : undefined,
});
},
{
refreshDeps: [filters, page, pageSize],
onSuccess: (data) => {
setTableData(data.items);
setTableTotal(data.totalItems);
},
onError: (err) => {
if (err instanceof ClientResponseError && err.isAbort) {
return;
}
setTableData(resp.items);
setTableTotal(resp.totalItems);
} catch (err) {
if (err instanceof ClientResponseError && err.isAbort) {
return;
}
console.error(err);
notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
} finally {
setLoading(false);
console.error(err);
notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
},
}
}, [filters, page, pageSize]);
useEffect(() => {
fetchTableData();
}, [fetchTableData]);
);
const handleEnabledChange = async (workflow: WorkflowModel) => {
try {