Dashboard Redesign (#48)

* feat: add user_template setting

* style: header

* style: page padding

* style: header

* feat: header now time

* style: login page

* feat: nav indicator

* style: button inset shadow

* style: footer text size

* feat: header show login_ip

* fix: error toast

* fix: frontend_templates setting

* fix: lint

* feat: pr auto format

* chore: auto-fix linting and formatting issues

---------

Co-authored-by: hamster1963 <hamster1963@users.noreply.github.com>
This commit is contained in:
仓鼠
2024-12-13 23:51:33 +08:00
committed by GitHub
parent b04ef1bb72
commit 8c8d3e3057
132 changed files with 13242 additions and 12878 deletions
+55 -44
View File
@@ -1,6 +1,9 @@
import { swrFetcher } from "@/api/api";
import { Checkbox } from "@/components/ui/checkbox";
import { DDNSCard } from "@/components/ddns";
import { swrFetcher } from "@/api/api"
import { deleteDDNSProfiles, getDDNSProviders } from "@/api/ddns"
import { ActionButtonGroup } from "@/components/action-button-group"
import { DDNSCard } from "@/components/ddns"
import { HeaderButtonGroup } from "@/components/header-button-group"
import { Checkbox } from "@/components/ui/checkbox"
import {
Table,
TableBody,
@@ -8,38 +11,39 @@ import {
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { ModelDDNSProfile } from "@/types";
import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
import useSWR from "swr";
import { useEffect, useState, useMemo } from "react";
import { ActionButtonGroup } from "@/components/action-button-group";
import { HeaderButtonGroup } from "@/components/header-button-group";
import { toast } from "sonner";
import { deleteDDNSProfiles, getDDNSProviders } from "@/api/ddns";
import { useTranslation } from "react-i18next";
} from "@/components/ui/table"
import { ModelDDNSProfile } from "@/types"
import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"
import { useEffect, useMemo, useState } from "react"
import { useTranslation } from "react-i18next"
import { toast } from "sonner"
import useSWR from "swr"
export default function DDNSPage() {
const { t } = useTranslation();
const { data, mutate, error, isLoading } = useSWR<ModelDDNSProfile[]>("/api/v1/ddns", swrFetcher);
const [providers, setProviders] = useState<string[]>([]);
const { t } = useTranslation()
const { data, mutate, error, isLoading } = useSWR<ModelDDNSProfile[]>(
"/api/v1/ddns",
swrFetcher,
)
const [providers, setProviders] = useState<string[]>([])
useEffect(() => {
const fetchProviders = async () => {
const fetchedProviders = await getDDNSProviders();
setProviders(fetchedProviders);
};
fetchProviders();
}, []);
const fetchedProviders = await getDDNSProviders()
setProviders(fetchedProviders)
}
fetchProviders()
}, [])
useEffect(() => {
if (error)
toast(t("Error"), {
description: t("Results.ErrorFetchingResource", { error: error.message }),
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [error]);
description: t("Results.ErrorFetchingResource", {
error: error.message,
}),
})
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [error])
const columns: ColumnDef<ModelDDNSProfile>[] = [
{
@@ -48,7 +52,7 @@ export default function DDNSPage() {
<Checkbox
checked={
table.getIsAllPageRowsSelected() ||
(table.getIsSomePageRowsSelected() && "indeterminate")
(table.getIsSomePageRowsSelected() && "indeterminate")
}
onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
aria-label="Select all"
@@ -74,8 +78,8 @@ export default function DDNSPage() {
accessorKey: "name",
accessorFn: (row) => row.name,
cell: ({ row }) => {
const s = row.original;
return <div className="max-w-24 whitespace-normal break-words">{s.name}</div>;
const s = row.original
return <div className="max-w-24 whitespace-normal break-words">{s.name}</div>
},
},
{
@@ -94,12 +98,12 @@ export default function DDNSPage() {
accessorFn: (row) => row.provider,
},
{
header: t('Domains'),
header: t("Domains"),
accessorKey: "domains",
accessorFn: (row) => row.domains,
cell: ({ row }) => {
const s = row.original;
return <div className="max-w-24 whitespace-normal break-words">{s.domains}</div>;
const s = row.original
return <div className="max-w-24 whitespace-normal break-words">{s.domains}</div>
},
},
{
@@ -111,33 +115,37 @@ export default function DDNSPage() {
id: "actions",
header: t("Actions"),
cell: ({ row }) => {
const s = row.original;
const s = row.original
return (
<ActionButtonGroup
className="flex gap-2"
delete={{ fn: deleteDDNSProfiles, id: s.id, mutate: mutate }}
delete={{
fn: deleteDDNSProfiles,
id: s.id,
mutate: mutate,
}}
>
<DDNSCard mutate={mutate} data={s} providers={providers} />
</ActionButtonGroup>
);
)
},
},
];
]
const dataCache = useMemo(() => {
return data ?? [];
}, [data]);
return data ?? []
}, [data])
const table = useReactTable({
data: dataCache,
columns,
getCoreRowModel: getCoreRowModel(),
});
})
const selectedRows = table.getSelectedRowModel().rows;
const selectedRows = table.getSelectedRowModel().rows
return (
<div className="px-8">
<div className="px-3">
<div className="flex mt-6 mb-4">
<h1 className="flex-1 text-3xl font-bold tracking-tight">{t("DDNS")}</h1>
<HeaderButtonGroup
@@ -161,9 +169,12 @@ export default function DDNSPage() {
<TableHead key={header.id} className="text-sm">
{header.isPlaceholder
? null
: flexRender(header.column.columnDef.header, header.getContext())}
: flexRender(
header.column.columnDef.header,
header.getContext(),
)}
</TableHead>
);
)
})}
</TableRow>
))}
@@ -195,5 +206,5 @@ export default function DDNSPage() {
</TableBody>
</Table>
</div>
);
)
}