add pagination

ui/src/components/certimate/AccessCloudflareForm.tsx

@@ -0,0 +1,173 @@
+import { Input } from "@/components/ui/input";
+import { useForm } from "react-hook-form";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import z from "zod";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Button } from "@/components/ui/button";
+
+import { Access, accessFormType, CloudflareConfig } from "@/domain/access";
+import { save } from "@/repository/access";
+import { useConfig } from "@/providers/config";
+import { ClientResponseError } from "pocketbase";
+import { PbErrorData } from "@/domain/base";
+
+const AccessCloudflareForm = ({
+  data,
+  onAfterReq,
+}: {
+  data?: Access;
+  onAfterReq: () => void;
+}) => {
+  const { addAccess, updateAccess } = useConfig();
+  const formSchema = z.object({
+    id: z.string().optional(),
+    name: z.string().min(1).max(64),
+    configType: accessFormType,
+    dnsApiToken: z.string().min(1).max(64),
+  });
+
+  let config: CloudflareConfig = {
+    dnsApiToken: "",
+  };
+  if (data) config = data.config as CloudflareConfig;
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      id: data?.id,
+      name: data?.name,
+      configType: "cloudflare",
+      dnsApiToken: config.dnsApiToken,
+    },
+  });
+
+  const onSubmit = async (data: z.infer<typeof formSchema>) => {
+    console.log(data);
+    const req: Access = {
+      id: data.id as string,
+      name: data.name,
+      configType: data.configType,
+      config: {
+        dnsApiToken: data.dnsApiToken,
+      },
+    };
+
+    try {
+      const rs = await save(req);
+
+      onAfterReq();
+
+      req.id = rs.id;
+      req.created = rs.created;
+      req.updated = rs.updated;
+      if (data.id) {
+        updateAccess(req);
+        return;
+      }
+      addAccess(req);
+    } catch (e) {
+      const err = e as ClientResponseError;
+
+      Object.entries(err.response.data as PbErrorData).forEach(
+        ([key, value]) => {
+          form.setError(key as keyof z.infer<typeof formSchema>, {
+            type: "manual",
+            message: value.message,
+          });
+        }
+      );
+    }
+  };
+
+  return (
+    <>
+      <div className="max-w-[35em] mx-auto mt-10">
+        <Form {...form}>
+          <form
+            onSubmit={(e) => {
+              console.log(e);
+              e.stopPropagation();
+              form.handleSubmit(onSubmit)(e);
+            }}
+            className="space-y-8"
+          >
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>名称</FormLabel>
+                  <FormControl>
+                    <Input placeholder="请输入授权名称" {...field} />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="id"
+              render={({ field }) => (
+                <FormItem className="hidden">
+                  <FormLabel>配置类型</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="configType"
+              render={({ field }) => (
+                <FormItem className="hidden">
+                  <FormLabel>配置类型</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="dnsApiToken"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>CLOUD_DNS_API_TOKEN</FormLabel>
+                  <FormControl>
+                    <Input placeholder="请输入CLOUD_DNS_API_TOKEN" {...field} />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="flex justify-end">
+              <Button type="submit">保存</Button>
+            </div>
+          </form>
+        </Form>
+      </div>
+    </>
+  );
+};
+
+export default AccessCloudflareForm;

ui/src/components/certimate/AccessEdit.tsx

@@ -15,10 +15,19 @@ import { Label } from "../ui/label";
 import { Access, accessTypeMap } from "@/domain/access";
 import AccessAliyunForm from "./AccessAliyunForm";
 import { cn } from "@/lib/utils";
-import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
 
 import AccessSSHForm from "./AccessSSHForm";
 import WebhookForm from "./AccessWebhookFrom";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+import AccessCloudflareForm from "./AccessCloudflareForm";
 
 type TargetConfigEditProps = {
   op: "add" | "edit";
@@ -79,6 +88,17 @@ export function AccessEdit({
           }}
         />
       );
+      break;
+    case "cloudflare":
+      form = (
+        <AccessCloudflareForm
+          data={data}
+          onAfterReq={() => {
+            setOpen(false);
+          }}
+        />
+      );
+      break;
   }
 
   const getOptionCls = (val: string) => {
@@ -96,31 +116,38 @@ export function AccessEdit({
         </DialogHeader>
         <div className="container">
           <Label>服务商</Label>
-          <RadioGroup
-            value={configType}
-            className="flex mt-3 space-x-2"
+
+          <Select
             onValueChange={(val) => {
               console.log(val);
               setConfigType(val);
             }}
           >
-            {typeKeys.map((key) => (
-              <div className="flex items-center space-x-2" key={key}>
-                <Label>
-                  <RadioGroupItem value={key} hidden />
-                  <div
-                    className={cn(
-                      "flex items-center space-x-2 border p-2 rounded cursor-pointer",
-                      getOptionCls(key)
-                    )}
-                  >
-                    <img src={accessTypeMap.get(key)?.[1]} className="h-6" />
-                    <div>{accessTypeMap.get(key)?.[0]}</div>
-                  </div>
-                </Label>
-              </div>
-            ))}
-          </RadioGroup>
+            <SelectTrigger className="mt-3">
+              <SelectValue placeholder="请选择服务商" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectLabel>服务商</SelectLabel>
+                {typeKeys.map((key) => (
+                  <SelectItem value={key}>
+                    <div
+                      className={cn(
+                        "flex items-center space-x-2 rounded cursor-pointer",
+                        getOptionCls(key)
+                      )}
+                    >
+                      <img
+                        src={accessTypeMap.get(key)?.[1]}
+                        className="h-6 w-6"
+                      />
+                      <div>{accessTypeMap.get(key)?.[0]}</div>
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            </SelectContent>
+          </Select>
 
           {form}
         </div>

ui/src/components/certimate/XPagination.tsx

@@ -1,4 +1,10 @@
-import { Button } from "../ui/button";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+} from "../ui/pagination";
 
 type PaginationProps = {
   totalPages: number;
@@ -8,12 +14,12 @@ type PaginationProps = {
 
 type PageNumber = number | string;
 
-const Pagination = ({
+const XPagination = ({
   totalPages,
   currentPage,
   onPageChange,
 }: PaginationProps) => {
-  const pageNeighbours = 2; // Number of page numbers to show on either side of the current page
+  const pageNeighbours = 1; // Number of page numbers to show on either side of the current page
 
   const getPageNumbers = () => {
     const totalNumbers = pageNeighbours * 2 + 3; // total pages to display (left + right neighbours + current + 2 for start and end)
@@ -60,31 +66,37 @@ const Pagination = ({
   const pages = getPageNumbers();
 
   return (
-    <div className="pagination dark:text-stone-200">
-      {pages.map((page, index) => {
-        if (page === "...") {
-          return (
-            <span key={index} className="pagination-ellipsis">
-              &hellip;
-            </span>
-          );
-        }
+    <>
+      <Pagination className="dark:text-stone-200 justify-end mt-3">
+        <PaginationContent>
+          {pages.map((page, index) => {
+            if (page === "...") {
+              return (
+                <PaginationItem key={index}>
+                  <PaginationEllipsis />
+                </PaginationItem>
+              );
+            }
 
-        return (
-          <Button
-            key={index}
-            className={`pagination-button ${
-              currentPage === page ? "active" : ""
-            }`}
-            variant={currentPage === page ? "default" : "outline"}
-            onClick={() => onPageChange(page as number)}
-          >
-            {page}
-          </Button>
-        );
-      })}
-    </div>
+            return (
+              <PaginationItem key={index}>
+                <PaginationLink
+                  href="#"
+                  isActive={currentPage == page}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    onPageChange(page as number);
+                  }}
+                >
+                  {page}
+                </PaginationLink>
+              </PaginationItem>
+            );
+          })}
+        </PaginationContent>
+      </Pagination>
+    </>
   );
 };
 
-export default Pagination;
+export default XPagination;