@goplusvn/core 0.1.79 → 0.1.81

package/src/workspace/components/workspace-member-picker-dialog.tsx

@@ -0,0 +1,492 @@
+"use client";
+
+// Hộp thoại "Thêm thành viên vào một không gian".
+//
+// Vì sao là HỘP THOẠI chứ không phải ô mở ra trong panel: đây là việc TÌM —
+// gõ mã nhân viên, đổi chi nhánh, đổi vai trò, lọc theo bộ phận đang ở, tick
+// vài chục dòng. Nhét vào panel thì danh sách ứng viên cao đúng 224px, nằm
+// ngay trên danh sách thành viên hiện có cũng gồm tên + email, và hai danh
+// sách giống hệt nhau dính nhau là chỗ chắc chắn gán nhầm.
+//
+// Khuôn lấy từ các hộp chọn của vinhhoa (`purchase-order-product-selector`,
+// `branch-select-dialog`): thanh công cụ dính trên nền `card`, vùng kết quả
+// cuộn riêng trên nền `muted`, chân hộp là nơi duy nhất có nút hành động.
+
+import * as React from "react";
+
+import { Building2, Loader2, Network, Search, ShieldCheck } from "lucide-react";
+import { toast } from "sonner";
+
+import {
+  Button,
+  Checkbox,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../ui";
+import { cn } from "../../utils";
+
+/**
+ * Radix `SelectItem` cấm `value=""` (chuỗi rỗng là "chưa chọn" của chính nó),
+ * nên "tất cả" phải mang một giá trị canh gác. Không được gửi giá trị này lên
+ * server — chỗ đổi bộ lọc quy nó về chuỗi rỗng.
+ */
+const ALL_FILTER = "__all__";
+
+/**
+ * Một trục lọc do app khai (chi nhánh, vai trò…). Core không biết chúng nghĩa
+ * là gì — `key` được gửi thẳng lên query string, và `deps.candidateFilter` ở
+ * phía route dịch nó thành `where` của Prisma.
+ */
+export interface CandidateFilter {
+  key: string;
+  label: string;
+  options: { value: string; label: string }[];
+}
+
+/** Danh tính đi kèm mỗi dòng người dùng — do route trả về. */
+export interface WorkspaceUserIdentity {
+  /** Mã nhân viên. Vắng khi app không khai `memberIdentity`. */
+  code?: string | null;
+  branch?: string | null;
+  roles?: string[];
+  /** Các không gian KHÁC người này đang thuộc về (đã trừ nút đang mở). */
+  workspaces?: string[];
+}
+
+export interface WorkspaceCandidate extends WorkspaceUserIdentity {
+  id: string;
+  name: string | null;
+  email: string | null;
+  isActive?: boolean;
+}
+
+/**
+ * Dòng phụ dưới tên: chi nhánh · vai trò · đang ở đâu.
+ *
+ * Một dòng chứ không phải ba cột: bên phải mỗi dòng còn huy hiệu và menu thao
+ * tác, nhồi thêm cột thì tên — thứ người ta quét mắt tìm — bị ép còn vài chữ.
+ * Rỗng thì không vẽ gì, không để lại dòng trống.
+ */
+export function WorkspaceIdentityLine({
+  identity,
+  workspacePrefix,
+}: {
+  identity: WorkspaceUserIdentity;
+  workspacePrefix: string;
+}) {
+  const roles = identity.roles ?? [];
+  const workspaces = identity.workspaces ?? [];
+  if (!identity.branch && roles.length === 0 && workspaces.length === 0) {
+    return null;
+  }
+  return (
+    <span className="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px] text-muted-foreground">
+      {identity.branch ? (
+        <span className="inline-flex max-w-40 items-center gap-1">
+          <Building2 className="h-3 w-3 shrink-0" />
+          <span className="truncate">{identity.branch}</span>
+        </span>
+      ) : null}
+      {roles.length > 0 ? (
+        <span
+          className="inline-flex max-w-52 items-center gap-1"
+          title={roles.join(", ")}
+        >
+          <ShieldCheck className="h-3 w-3 shrink-0" />
+          <span className="truncate">{roles.join(" · ")}</span>
+        </span>
+      ) : null}
+      {workspaces.length > 0 ? (
+        <span
+          className="inline-flex max-w-52 items-center gap-1"
+          title={workspaces.join(", ")}
+        >
+          <Network className="h-3 w-3 shrink-0" />
+          <span className="truncate">
+            {workspacePrefix} {workspaces.join(", ")}
+          </span>
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
+export interface WorkspaceMemberPickerDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Nút đang nhận người. `null` = chưa chọn gì, hộp không mở được. */
+  workspaceId: string | null;
+  workspaceName?: string | null;
+  /** Nhãn cấp của app ("Đơn vị" / "Bộ phận") — core không tự đặt tên. */
+  kindLabel?: string;
+  apiEndpoint?: string;
+  /** Trục lọc của app: chi nhánh, vai trò… */
+  filters?: CandidateFilter[];
+  /**
+   * Danh sách "đang ở bộ phận nào" — trục lọc CORE tự phục vụ được, vì bảng
+   * `userWorkspace` là của core. Trang cha làm phẳng cây rồi đưa vào đây.
+   */
+  workspaceOptions?: { id: string; name: string; depth: number }[];
+  /** Gán xong: trang cha tải lại danh sách thành viên. */
+  onDone?: () => void;
+}
+
+export function WorkspaceMemberPickerDialog({
+  open,
+  onOpenChange,
+  workspaceId,
+  workspaceName,
+  kindLabel,
+  apiEndpoint = "/api/workspaces",
+  filters,
+  workspaceOptions,
+  onDone,
+}: WorkspaceMemberPickerDialogProps) {
+  const [query, setQuery] = React.useState("");
+  const [filterValues, setFilterValues] = React.useState<
+    Record<string, string>
+  >({});
+  const [candidates, setCandidates] = React.useState<WorkspaceCandidate[]>([]);
+  const [searching, setSearching] = React.useState(false);
+  const [selected, setSelected] = React.useState<Set<string>>(new Set());
+  const [assigning, setAssigning] = React.useState(false);
+
+  const base = workspaceId ? `${apiEndpoint}/${workspaceId}/members` : null;
+  // Chuỗi hoá để đưa vào deps của effect: để nguyên object thì mỗi lần render
+  // lại là một tham chiếu mới, effect chạy vô hạn.
+  const filterKey = JSON.stringify(filterValues);
+
+  // Mở lại hộp là một phiên tìm MỚI: giữ lại tick cũ thì người dùng bấm
+  // "Chuyển" và kéo theo cả những người họ chọn cho một bộ phận khác.
+  React.useEffect(() => {
+    if (!open) return;
+    setQuery("");
+    setFilterValues({});
+    setSelected(new Set());
+  }, [open, workspaceId]);
+
+  // 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 (!open || !base) return;
+    let cancelled = false;
+    setSearching(true);
+    const timer = setTimeout(async () => {
+      try {
+        const params = new URLSearchParams({
+          candidates: "1",
+          q: query,
+          take: "200",
+        });
+        for (const [key, value] of Object.entries(
+          JSON.parse(filterKey) as Record<string, string>,
+        )) {
+          if (value) params.set(key, value);
+        }
+        const res = await fetch(`${base}?${params.toString()}`, {
+          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);
+    };
+  }, [open, base, query, filterKey]);
+
+  const setFilter = (key: string, value: string) => {
+    setFilterValues((prev) => ({
+      ...prev,
+      [key]: value === ALL_FILTER ? "" : value,
+    }));
+    // Đổi bộ lọc là danh sách đổi hẳn — giữ tick cũ thì người dùng bấm
+    // "Chuyển" và kéo theo cả những người họ không còn nhìn thấy trên màn hình.
+    setSelected(new Set());
+  };
+
+  /**
+   * Gán nhiều người một lượt.
+   *
+   * `move` GỠ mọi không gian khác của người được chọn. Đó là điểm dễ hiểu nhầm
+   * nhất của cả màn hình này: phạm vi đọc là HỢP các không gian một người thuộc
+   * về, nên nếu chỉ THÊM mà không gỡ thì người vừa được "gán vào bộ phận Kho"
+   * vẫn còn membership gốc và vẫn thấy toàn hệ thống — bấm xong tưởng đã cô lập
+   * mà thực ra không đổi gì.
+   */
+  async function assign(move: boolean) {
+    if (!base || selected.size === 0) return;
+    setAssigning(true);
+    try {
+      const res = await fetch(base, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          userIds: [...selected],
+          mode: move ? "move" : "add",
+        }),
+      });
+      const payload = await res.json().catch(() => ({}));
+      if (!res.ok) throw new Error(payload?.error ?? "Gán không thành công.");
+
+      const failed: { userId: string; error: string }[] = payload.failed ?? [];
+      if (payload.changed > 0) {
+        toast.success(
+          move
+            ? `Đã chuyển ${payload.changed} người vào ${workspaceName ?? "không gian này"}.`
+            : `Đã thêm ${payload.changed} người.`,
+        );
+      }
+      // Từng dòng hỏng có lý do RIÊNG (ngoài phạm vi, tài khoản được bảo vệ…).
+      // Gộp thành một câu "có lỗi" thì người dùng không biết bỏ tick ai ra.
+      if (failed.length > 0) {
+        toast.error(
+          `${failed.length} người không gán được: ${failed[0].error}` +
+            (failed.length > 1 ? " (và các lỗi khác)" : ""),
+        );
+      }
+      onDone?.();
+      if (failed.length === 0) onOpenChange(false);
+      else setSelected(new Set(failed.map((f) => f.userId)));
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Gán lỗi.");
+    } finally {
+      setAssigning(false);
+    }
+  }
+
+  const allChecked =
+    candidates.length > 0 && selected.size === candidates.length;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      {/* `p-0 gap-0` + ba tầng cuộn riêng: thanh công cụ và chân hộp phải đứng
+          yên khi danh sách 200 dòng cuộn qua. */}
+      <DialogContent className="flex h-[85vh] max-w-3xl flex-col gap-0 p-0">
+        <DialogHeader className="border-b border-border p-4 text-left">
+          <DialogTitle>
+            Thêm thành viên vào {workspaceName ?? "không gian này"}
+          </DialogTitle>
+          <DialogDescription>
+            Tìm theo họ tên, mã nhân viên hoặc email; lọc theo chi nhánh, vai
+            trò, bộ phận đang ở. Tick nhiều dòng rồi gán một lượt.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-2.5 border-b border-border bg-card p-4">
+          <div className="relative">
+            <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              autoFocus
+              placeholder="Họ tên, mã nhân viên, email…"
+              className="h-10 pl-9"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+            />
+          </div>
+
+          <div className="flex flex-wrap items-center gap-2">
+            {workspaceOptions && workspaceOptions.length > 1 ? (
+              <Select
+                value={filterValues.inWorkspaceId || ALL_FILTER}
+                onValueChange={(value) => setFilter("inWorkspaceId", value)}
+              >
+                <SelectTrigger className="h-9 w-auto min-w-44 text-sm">
+                  <SelectValue placeholder="Đang ở" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={ALL_FILTER}>
+                    Đang ở: mọi bộ phận
+                  </SelectItem>
+                  {workspaceOptions
+                    .filter((option) => option.id !== workspaceId)
+                    .map((option) => (
+                      <SelectItem key={option.id} value={option.id}>
+                        {" ".repeat(option.depth * 2)}
+                        {option.name}
+                      </SelectItem>
+                    ))}
+                </SelectContent>
+              </Select>
+            ) : null}
+
+            {filters?.map((filter) => (
+              <Select
+                key={filter.key}
+                value={filterValues[filter.key] || ALL_FILTER}
+                onValueChange={(value) => setFilter(filter.key, value)}
+              >
+                <SelectTrigger className="h-9 w-auto min-w-40 text-sm">
+                  <SelectValue placeholder={filter.label} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={ALL_FILTER}>
+                    {filter.label}: tất cả
+                  </SelectItem>
+                  {filter.options.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            ))}
+
+            {candidates.length > 0 ? (
+              <label className="ml-auto flex cursor-pointer items-center gap-2 text-xs text-muted-foreground">
+                <Checkbox
+                  checked={allChecked}
+                  onCheckedChange={(checked) =>
+                    setSelected(
+                      checked
+                        ? new Set(candidates.map((c) => c.id))
+                        : new Set(),
+                    )
+                  }
+                />
+                Chọn tất cả {candidates.length} người đang hiện
+              </label>
+            ) : null}
+          </div>
+        </div>
+
+        <div className="min-h-0 flex-1 space-y-1 overflow-y-auto bg-muted/30 p-2">
+          {searching && candidates.length === 0 ? (
+            <p className="px-2 py-6 text-center text-sm 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.
+            <div className="mx-auto max-w-sm px-6 py-14 text-center">
+              <Search className="mx-auto h-8 w-8 text-muted-foreground/50" />
+              <p className="mt-3 text-sm font-medium">
+                Không có người dùng nào khớp
+              </p>
+              <p className="mt-1.5 text-[13px] leading-relaxed text-muted-foreground">
+                Danh sách chỉ gồm người trong phạm vi quản trị của bạn và chưa
+                thuộc {kindLabel?.toLowerCase() ?? "không gian"} này.
+              </p>
+            </div>
+          ) : (
+            candidates.map((c) => {
+              const checked = selected.has(c.id);
+              return (
+                <label
+                  key={c.id}
+                  className={cn(
+                    "flex cursor-pointer items-center gap-3 rounded-lg border bg-card px-3 py-2 transition-colors",
+                    checked
+                      ? "border-primary/40 bg-accent"
+                      : "border-transparent hover:border-border",
+                  )}
+                >
+                  <Checkbox
+                    checked={checked}
+                    onCheckedChange={(value) =>
+                      setSelected((prev) => {
+                        const next = new Set(prev);
+                        if (value) next.add(c.id);
+                        else next.delete(c.id);
+                        return next;
+                      })
+                    }
+                  />
+                  <span className="min-w-0 flex-1">
+                    <span className="flex items-center gap-2">
+                      <span className="truncate text-sm font-medium">
+                        {c.name ?? c.email}
+                      </span>
+                      {/* Mã nhân viên nằm CẠNH TÊN, không ở dòng phụ: đây là
+                          thứ phân biệt hai người trùng tên, mà trùng tên là
+                          chuyện thường ở danh sách 700 người. */}
+                      {c.code ? (
+                        <span className="shrink-0 rounded border border-border bg-muted px-1.5 py-px text-[10px] font-medium tabular-nums text-muted-foreground">
+                          {c.code}
+                        </span>
+                      ) : null}
+                      {c.isActive === false ? (
+                        <span className="shrink-0 text-[11px] text-muted-foreground">
+                          (ngừng hoạt động)
+                        </span>
+                      ) : null}
+                    </span>
+                    {c.name && c.email ? (
+                      <span className="block truncate text-xs text-muted-foreground">
+                        {c.email}
+                      </span>
+                    ) : null}
+                    <WorkspaceIdentityLine identity={c} workspacePrefix="đang ở:" />
+                  </span>
+                </label>
+              );
+            })
+          )}
+        </div>
+
+        {/* Hai nút, hai nghĩa khác nhau, nên nhãn phải nói ra HỆ QUẢ chứ không
+            phải "Lưu": "Chuyển" gỡ nơi cũ (⇒ cô lập thật), "Thêm" giữ nguyên
+            nơi cũ (⇒ người đó thấy CẢ HAI nhánh). */}
+        <DialogFooter className="flex-col items-stretch gap-2 border-t border-border p-3 sm:flex-row sm:items-center">
+          <p className="mr-auto text-xs text-muted-foreground">
+            {selected.size > 0 ? (
+              <>
+                <span className="font-medium tabular-nums text-foreground">
+                  Đã chọn {selected.size}
+                </span>{" "}
+                — “Chuyển” gỡ họ khỏi các không gian khác, đó là điều kiện để họ
+                chỉ còn thấy dữ liệu ở đây.
+              </>
+            ) : (
+              "Tick vào người cần gán."
+            )}
+          </p>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={assigning || selected.size === 0}
+            onClick={() => void assign(false)}
+          >
+            Thêm, giữ cả nơi cũ
+          </Button>
+          <Button
+            size="sm"
+            disabled={assigning || selected.size === 0}
+            onClick={() => void assign(true)}
+          >
+            {assigning ? (
+              <Loader2 className="h-3.5 w-3.5 animate-spin" />
+            ) : null}
+            <span className={assigning ? "ml-1.5" : ""}>
+              {selected.size > 0
+                ? `Chuyển ${selected.size} người vào đây`
+                : "Chuyển vào đây"}
+            </span>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}