feat: move settings creation flows into dialogs

2026-07-02 05:49:50 -07:00
parent ba8097e583
commit f6b7924d0c
8 changed files with 590 additions and 206 deletions
--- a/modules/settings/components/OrganizationInviteDialog.tsx
+++ b/modules/settings/components/OrganizationInviteDialog.tsx
@@ -0,0 +1,140 @@
+"use client";
+
+import { FormEvent, useMemo, useState } from "react";
+import { Copy, Send } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+import { Button } from "@/components/ui/button";
+import { Dialog } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import type { ApiResult } from "@/modules/core/server/api";
+import type { Organization, OrganizationInvitation, RoleDefinition } from "@/modules/core/types";
+
+type OrganizationInviteDialogProps = {
+  open: boolean;
+  organization: Organization;
+  roles: RoleDefinition[];
+  onClose: () => void;
+};
+
+export function getInviteHref(token: string): string {
+  return `/register?invite=${encodeURIComponent(token)}`;
+}
+
+export function OrganizationInviteDialog({
+  open,
+  organization,
+  roles,
+  onClose,
+}: OrganizationInviteDialogProps): React.ReactElement {
+  const router = useRouter();
+  const [message, setMessage] = useState("");
+  const [lastInviteHref, setLastInviteHref] = useState("");
+  const [isPending, setIsPending] = useState(false);
+  const organizationRoles = useMemo(
+    () => roles.filter((role) => role.scope === "organization" && role.organizationId === organization.id && role.isEnabled),
+    [organization.id, roles],
+  );
+  const defaultRoleId = organizationRoles.find((role) => role.key === "caregiver")?.id ?? organizationRoles[0]?.id ?? "";
+
+  function closeDialog(): void {
+    if (isPending) {
+      return;
+    }
+
+    setMessage("");
+    setLastInviteHref("");
+    onClose();
+  }
+
+  async function handleInviteSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
+    event.preventDefault();
+    setMessage("");
+    setLastInviteHref("");
+    setIsPending(true);
+    const formData = new FormData(event.currentTarget);
+    const response = await fetch(`/api/organizations/${organization.id}/invitations`, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({
+        email: String(formData.get("email") ?? ""),
+        roleId: String(formData.get("roleId") ?? ""),
+      }),
+    });
+    const result = (await response.json()) as ApiResult<{ invitation: OrganizationInvitation }>;
+    setIsPending(false);
+
+    if (!result.success) {
+      setMessage(result.reason);
+      return;
+    }
+
+    const inviteHref = getInviteHref(result.invitation.token);
+    setMessage(result.reason);
+    setLastInviteHref(inviteHref);
+    event.currentTarget.reset();
+    router.refresh();
+  }
+
+  return (
+    <Dialog
+      className="max-w-xl"
+      description={`生成 ${organization.name} 的邀请链接，可限定邮箱并指定入组角色。`}
+      onClose={closeDialog}
+      open={open}
+      title="发起机构邀请"
+    >
+      <form className="grid gap-4" onSubmit={handleInviteSubmit}>
+        <label className="grid gap-2 text-sm">
+          <span className="font-medium">邮箱</span>
+          <Input name="email" placeholder="可留空生成通用邀请" type="email" />
+        </label>
+        <label className="grid gap-2 text-sm">
+          <span className="font-medium">角色</span>
+          <select
+            className="h-11 w-full rounded-md border bg-background px-3 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
+            defaultValue={defaultRoleId}
+            disabled={organizationRoles.length === 0}
+            key={organization.id}
+            name="roleId"
+            required
+          >
+            {organizationRoles.map((role) => (
+              <option key={role.id} value={role.id}>
+                {role.label}
+              </option>
+            ))}
+          </select>
+        </label>
+        {message ? (
+          <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
+            {message}
+          </p>
+        ) : null}
+        {lastInviteHref ? (
+          <div className="flex flex-col gap-2 rounded-md border bg-secondary/20 p-3 text-sm sm:flex-row sm:items-center sm:justify-between">
+            <span className="break-all text-muted-foreground">{lastInviteHref}</span>
+            <Button
+              onClick={() => void navigator.clipboard.writeText(lastInviteHref)}
+              size="sm"
+              type="button"
+              variant="outline"
+            >
+              <Copy className="size-4" aria-hidden="true" />
+              复制
+            </Button>
+          </div>
+        ) : null}
+        <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+          <Button disabled={isPending} onClick={closeDialog} type="button" variant="outline">
+            取消
+          </Button>
+          <Button disabled={isPending || !defaultRoleId} type="submit">
+            <Send className="size-4" aria-hidden="true" />
+            生成邀请
+          </Button>
+        </div>
+      </form>
+    </Dialog>
+  );
+}