@goplusvn/core 0.1.79 → 0.1.82

package/src/workspace/components/workspace-members-panel.tsx

@@ -11,12 +11,10 @@ import * as React from "react";
 import {
   Loader2,
   MoreHorizontal,
-  Search,
   Shield,
   Trash2,
   UserPlus,
   Users,
-  X,
 } from "lucide-react";
 import { toast } from "sonner";
 
@@ -28,10 +26,19 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-  Input,
   Skeleton,
 } from "../../ui";
 import { cn } from "../../utils";
+import {
+  WorkspaceIdentityLine,
+  WorkspaceMemberPickerDialog,
+} from "./workspace-member-picker-dialog";
+import type {
+  CandidateFilter,
+  WorkspaceUserIdentity,
+} from "./workspace-member-picker-dialog";
+
+export type { CandidateFilter };
 
 /** Chữ cái đầu cho ô avatar — hai ký tự là đủ nhận diện, ba trở lên thành rối. */
 function initials(name?: string | null, email?: string | null): string {
@@ -45,7 +52,7 @@ function initials(name?: string | null, email?: string | null): string {
   return source.slice(0, 2).toUpperCase();
 }
 
-export interface WorkspaceMember {
+export interface WorkspaceMember extends WorkspaceUserIdentity {
   userId: string;
   name: string | null;
   email: string | null;
@@ -54,13 +61,6 @@ export interface WorkspaceMember {
   isDefault?: boolean;
 }
 
-interface Candidate {
-  id: string;
-  name: string | null;
-  email: string | null;
-  isActive?: boolean;
-}
-
 export interface WorkspaceMembersPanelProps {
   /** Nút đang chọn trên cây; `null` = chưa chọn gì. */
   workspaceId: string | null;
@@ -78,6 +78,10 @@ export interface WorkspaceMembersPanelProps {
    * thuẫn trên cùng một màn hình và không biết tin cái nào.
    */
   onCountChange?: (workspaceId: string, count: number) => void;
+  /** Trục lọc của app cho hộp thoại thêm thành viên (chi nhánh, vai trò…). */
+  bulkFilters?: CandidateFilter[];
+  /** Cây đã làm phẳng, cho trục lọc "đang ở bộ phận nào" của hộp thoại. */
+  workspaceOptions?: { id: string; name: string; depth: number }[];
 }
 
 export function WorkspaceMembersPanel({
@@ -87,14 +91,13 @@ export function WorkspaceMembersPanel({
   canManage = false,
   apiEndpoint = "/api/workspaces",
   onCountChange,
+  bulkFilters,
+  workspaceOptions,
 }: WorkspaceMembersPanelProps) {
   const [members, setMembers] = React.useState<WorkspaceMember[]>([]);
   const [loading, setLoading] = React.useState(false);
   const [busyUserId, setBusyUserId] = React.useState<string | null>(null);
-  const [adding, setAdding] = React.useState(false);
-  const [query, setQuery] = React.useState("");
-  const [candidates, setCandidates] = React.useState<Candidate[]>([]);
-  const [searching, setSearching] = React.useState(false);
+  const [picking, setPicking] = React.useState(false);
 
   const base = workspaceId ? `${apiEndpoint}/${workspaceId}/members` : null;
 
@@ -129,43 +132,11 @@ export function WorkspaceMembersPanel({
 
   React.useEffect(() => {
     void reload();
-    // Đổi nút thì đóng luôn ô thêm — để mở là người dùng tưởng đang thêm vào nút cũ.
-    setAdding(false);
-    setQuery("");
-    setCandidates([]);
+    // Đổi nút thì đóng luôn hộp thêm — để mở là người dùng tưởng đang thêm vào
+    // nút cũ, mà hộp đã gắn với nút mới rồi.
+    setPicking(false);
   }, [reload]);
 
-  // Tìm ứng viên: gõ tới đâu hỏi tới đó, có hoãn để không bắn mỗi phím một request.
-  React.useEffect(() => {
-    if (!adding || !base) return;
-    let cancelled = false;
-    setSearching(true);
-    const timer = setTimeout(async () => {
-      try {
-        const url = `${base}?candidates=1&q=${encodeURIComponent(query)}`;
-        const res = await fetch(url, { cache: "no-store" });
-        if (!res.ok) throw new Error((await res.json())?.error ?? "Lỗi tìm");
-        const data = await res.json();
-        if (!cancelled) setCandidates(data);
-      } catch (error) {
-        if (!cancelled) {
-          setCandidates([]);
-          toast.error(
-            error instanceof Error
-              ? error.message
-              : "Không tìm được người dùng.",
-          );
-        }
-      } finally {
-        if (!cancelled) setSearching(false);
-      }
-    }, 250);
-    return () => {
-      cancelled = true;
-      clearTimeout(timer);
-    };
-  }, [adding, query, base]);
-
   async function mutate(
     init: RequestInit & { url: string },
     userId: string,
@@ -189,18 +160,6 @@ export function WorkspaceMembersPanel({
     }
   }
 
-  const add = (userId: string) =>
-    mutate(
-      {
-        url: base!,
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify({ userId }),
-      },
-      userId,
-      "Đã thêm vào " + (kindLabel?.toLowerCase() ?? "workspace"),
-    );
-
   const toggleAdmin = (member: WorkspaceMember) =>
     mutate(
       {
@@ -250,81 +209,15 @@ export function WorkspaceMembersPanel({
         {canManage ? (
           <Button
             size="sm"
-            variant={adding ? "secondary" : "default"}
             className="ml-auto"
-            onClick={() => setAdding((v) => !v)}
+            onClick={() => setPicking(true)}
           >
-            {adding ? (
-              <X className="h-3.5 w-3.5" />
-            ) : (
-              <UserPlus className="h-3.5 w-3.5" />
-            )}
-            <span className="ml-1.5">
-              {adding ? "Đóng" : "Thêm thành viên"}
-            </span>
+            <UserPlus className="h-3.5 w-3.5" />
+            <span className="ml-1.5">Thêm thành viên</span>
           </Button>
         ) : null}
       </div>
 
-      {/* Nền + vạch dưới của ô thêm là BẮT BUỘC: ngay bên dưới là danh sách
-          thành viên hiện có, cũng gồm tên + email. Bỏ ranh giới thì người vừa
-          được thêm hiện hai lần sát nhau (một dòng ứng viên, một dòng thành
-          viên) mà không có gì nói đó là hai danh sách khác nhau. */}
-      {adding ? (
-        <div className="border-b border-border bg-muted/30 p-3">
-          <div className="relative max-w-md">
-            <Search className="pointer-events-none absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
-            <Input
-              autoFocus
-              placeholder="Tìm theo tên hoặc email…"
-              className="h-8 pl-8 text-sm"
-              value={query}
-              onChange={(e) => setQuery(e.target.value)}
-            />
-          </div>
-          <div className="mt-2 max-h-56 max-w-md space-y-0.5 overflow-y-auto">
-            {searching ? (
-              <p className="px-2 py-3 text-xs text-muted-foreground">
-                Đang tìm…
-              </p>
-            ) : candidates.length === 0 ? (
-              // Danh sách rỗng ở đây gần như luôn là "ngoài phạm vi", không phải
-              // "hệ thống không có ai" — nói thẳng để khỏi tưởng mất dữ liệu.
-              <p className="px-2 py-3 text-xs text-muted-foreground">
-                Không có người dùng nào trong phạm vi quản trị của bạn khớp tìm
-                kiếm.
-              </p>
-            ) : (
-              candidates.map((c) => (
-                <button
-                  key={c.id}
-                  type="button"
-                  disabled={busyUserId === c.id}
-                  onClick={() => add(c.id)}
-                  className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left hover:bg-accent disabled:opacity-50"
-                >
-                  <span className="min-w-0 flex-1">
-                    <span className="block truncate text-sm">
-                      {c.name ?? c.email}
-                    </span>
-                    {c.name && c.email ? (
-                      <span className="block truncate text-xs text-muted-foreground">
-                        {c.email}
-                      </span>
-                    ) : null}
-                  </span>
-                  {busyUserId === c.id ? (
-                    <Loader2 className="h-3.5 w-3.5 animate-spin" />
-                  ) : (
-                    <UserPlus className="h-3.5 w-3.5 text-muted-foreground" />
-                  )}
-                </button>
-              ))
-            )}
-          </div>
-        </div>
-      ) : null}
-
       <div className="min-h-0 flex-1 overflow-y-auto">
         {loading ? (
           <div className="space-y-2 p-3">
@@ -332,36 +225,26 @@ export function WorkspaceMembersPanel({
             <Skeleton className="h-10 w-5/6" />
           </div>
         ) : members.length === 0 ? (
-          // Đang mở ô thêm thì bảng hướng dẫn im lặng: người dùng đã làm đúng
-          // việc nó bảo làm, để lại chỉ tổ tranh chỗ với danh sách ứng viên.
-          adding ? null : (
-            // Trạng thái rỗng phải DẠY việc, không chỉ báo trống: nói thêm người
-            // vào đây thì họ được gì, và ai mới cần đặt làm quản trị.
-            <div className="mx-auto max-w-sm px-6 py-12 text-center">
-              <Users className="mx-auto h-8 w-8 text-muted-foreground/60" />
-              <p className="mt-3 text-sm font-medium">
-                Chưa có ai trong {kindLabel?.toLowerCase() ?? "workspace"} này
-              </p>
-              <p className="mt-1.5 text-[13px] leading-relaxed text-muted-foreground">
-                Người được thêm vào đây sẽ thấy dữ liệu của{" "}
-                {workspaceName ?? "workspace này"}. Đặt một người làm{" "}
-                <strong className="font-medium text-foreground">
-                  quản trị
-                </strong>{" "}
-                thì họ tự tạo được tài khoản và phân quyền trong phạm vi đó.
-              </p>
-              {canManage ? (
-                <Button
-                  size="sm"
-                  className="mt-4"
-                  onClick={() => setAdding(true)}
-                >
-                  <UserPlus className="h-3.5 w-3.5" />
-                  <span className="ml-1.5">Thêm thành viên</span>
-                </Button>
-              ) : null}
-            </div>
-          )
+          // Trạng thái rỗng phải DẠY việc, không chỉ báo trống: nói thêm người
+          // vào đây thì họ được gì, và ai mới cần đặt làm quản trị.
+          <div className="mx-auto max-w-sm px-6 py-12 text-center">
+            <Users className="mx-auto h-8 w-8 text-muted-foreground/60" />
+            <p className="mt-3 text-sm font-medium">
+              Chưa có ai trong {kindLabel?.toLowerCase() ?? "workspace"} này
+            </p>
+            <p className="mt-1.5 text-[13px] leading-relaxed text-muted-foreground">
+              Người được thêm vào đây sẽ thấy dữ liệu của{" "}
+              {workspaceName ?? "workspace này"}. Đặt một người làm{" "}
+              <strong className="font-medium text-foreground">quản trị</strong>{" "}
+              thì họ tự tạo được tài khoản và phân quyền trong phạm vi đó.
+            </p>
+            {canManage ? (
+              <Button size="sm" className="mt-4" onClick={() => setPicking(true)}>
+                <UserPlus className="h-3.5 w-3.5" />
+                <span className="ml-1.5">Thêm thành viên</span>
+              </Button>
+            ) : null}
+          </div>
         ) : (
           <ul>
             {members.map((m) => (
@@ -393,6 +276,13 @@ export function WorkspaceMembersPanel({
                       {m.email}
                     </span>
                   ) : null}
+                  {/* "cũng ở" chứ không phải "ở": họ chắc chắn ở nút đang mở,
+                      cái đáng cảnh báo là những nhánh CÒN LẠI — còn nhánh nào
+                      thì họ còn thấy dữ liệu ở đó. */}
+                  <WorkspaceIdentityLine
+                    identity={m}
+                    workspacePrefix="cũng ở:"
+                  />
                 </span>
 
                 {/* Cột vai trò: mọi dòng đều có chữ, không chỉ dòng quản trị —
@@ -449,6 +339,18 @@ export function WorkspaceMembersPanel({
           </ul>
         )}
       </div>
+
+      <WorkspaceMemberPickerDialog
+        open={picking}
+        onOpenChange={setPicking}
+        workspaceId={workspaceId}
+        workspaceName={workspaceName}
+        kindLabel={kindLabel}
+        apiEndpoint={apiEndpoint}
+        filters={bulkFilters}
+        workspaceOptions={workspaceOptions}
+        onDone={() => void reload()}
+      />
     </div>
   );
 }