feat: move settings creation flows into dialogs

modules/settings/components/OrganizationManagementClient.tsx

@@ -1,21 +1,35 @@
 "use client";
 
 import { FormEvent, useState } from "react";
-import { Pencil, Plus, Power } from "lucide-react";
+import { Pencil, Plus, Power, Send } from "lucide-react";
 import { useRouter } from "next/navigation";
 
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Dialog } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import type { ApiResult } from "@/modules/core/server/api";
-import type { Organization } from "@/modules/core/types";
+import type { Organization, RoleDefinition } from "@/modules/core/types";
+import { OrganizationInviteDialog } from "@/modules/settings/components/OrganizationInviteDialog";
 
 export function OrganizationManagementClient(): React.ReactElement {
   const router = useRouter();
+  const [isCreateOpen, setIsCreateOpen] = useState(false);
   const [message, setMessage] = useState("");
   const [isPending, setIsPending] = useState(false);
 
+  function openCreateDialog(): void {
+    setMessage("");
+    setIsCreateOpen(true);
+  }
+
+  function closeCreateDialog(): void {
+    if (isPending) {
+      return;
+    }
+
+    setIsCreateOpen(false);
+  }
+
   async function handleSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
     event.preventDefault();
     setMessage("");
@@ -38,42 +52,61 @@ export function OrganizationManagementClient(): React.ReactElement {
     }
 
     setMessage(result.reason);
+    setIsCreateOpen(false);
     event.currentTarget.reset();
     router.refresh();
   }
 
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>新增机构</CardTitle>
-        <CardDescription>创建后会自动初始化机构内置角色。</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form className="grid gap-3 md:grid-cols-[1fr_1fr_auto]" onSubmit={handleSubmit}>
+    <>
+      <Button onClick={openCreateDialog} type="button">
+        <Plus className="size-4" aria-hidden="true" />
+        新增机构
+      </Button>
+      <Dialog
+        className="max-w-xl"
+        description="创建后会自动初始化机构内置角色。"
+        onClose={closeCreateDialog}
+        open={isCreateOpen}
+        title="新增机构"
+      >
+        <form className="grid gap-4" onSubmit={handleSubmit}>
           <Input name="name" placeholder="机构名称" required />
           <Input name="slug" placeholder="机构标识，可留空" />
-          <Button disabled={isPending} type="submit">
-            <Plus className="size-4" aria-hidden="true" />
-            新增机构
-          </Button>
+          {message ? (
+            <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
+              {message}
+            </p>
+          ) : null}
+          <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+            <Button disabled={isPending} onClick={closeCreateDialog} type="button" variant="outline">
+              取消
+            </Button>
+            <Button disabled={isPending} type="submit">
+              <Plus className="size-4" aria-hidden="true" />
+              新增机构
+            </Button>
+          </div>
         </form>
-        {message ? (
-          <p className="mt-3 rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
-            {message}
-          </p>
-        ) : null}
-      </CardContent>
-    </Card>
+      </Dialog>
+    </>
   );
 }
 
 type OrganizationRowActionsProps = {
+  canInvite: boolean;
   organization: Organization;
+  roles: RoleDefinition[];
 };
 
-export function OrganizationRowActions({ organization }: OrganizationRowActionsProps): React.ReactElement {
+export function OrganizationRowActions({
+  canInvite,
+  organization,
+  roles,
+}: OrganizationRowActionsProps): React.ReactElement {
   const router = useRouter();
   const [isEditOpen, setIsEditOpen] = useState(false);
+  const [isInviteOpen, setIsInviteOpen] = useState(false);
   const [message, setMessage] = useState("");
   const [isPending, setIsPending] = useState(false);
 
@@ -131,6 +164,12 @@ export function OrganizationRowActions({ organization }: OrganizationRowActionsP
         <Pencil className="size-4" aria-hidden="true" />
         编辑
       </Button>
+      {canInvite ? (
+        <Button onClick={() => setIsInviteOpen(true)} size="sm" type="button" variant="outline">
+          <Send className="size-4" aria-hidden="true" />
+          邀请
+        </Button>
+      ) : null}
       {organization.status === "disabled" ? (
         <Button
           disabled={isPending}
@@ -189,6 +228,12 @@ export function OrganizationRowActions({ organization }: OrganizationRowActionsP
           </div>
         </form>
       </Dialog>
+      <OrganizationInviteDialog
+        onClose={() => setIsInviteOpen(false)}
+        open={isInviteOpen}
+        organization={organization}
+        roles={roles}
+      />
     </div>
   );
 }