@nocobase/portal-template-default 1.0.15 → 1.0.17

package/src/extensions/nocobase-mail/components/mail-table.tsx

@@ -0,0 +1,476 @@
+import { useMemo, useState, type ReactNode } from "react";
+import {
+  type ColumnDef,
+  type VisibilityState,
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { format, isToday, isYesterday, parseISO } from "date-fns";
+import { ChevronLeft, ChevronRight, MessagesSquare, Paperclip, SlidersHorizontal } from "lucide-react";
+import type { MailColumnId, MailMessage } from "./types";
+import { DEFAULT_MAIL_COLUMNS, MAIL_COLUMN_LABELS, MailBoxType } from "./types";
+import { MailLabelBadge } from "./mail-label-badge";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Skeleton } from "@/components/ui/skeleton";
+import { MailEmpty } from "./mail-empty";
+import { cn } from "@/lib/utils";
+
+function formatDate(dateStr?: string) {
+  if (!dateStr) return "";
+  try {
+    const date = parseISO(dateStr);
+    if (isToday(date)) return format(date, "HH:mm");
+    if (isYesterday(date)) return "Yesterday";
+    return format(date, "MMM d, yyyy");
+  } catch {
+    return "";
+  }
+}
+
+function senderName(message: MailMessage) {
+  return message.fromUser?.name || message.from || "Unknown";
+}
+
+function recipientSummary(message: MailMessage) {
+  if (message.toUsers?.length) {
+    return message.toUsers.map((u) => u.name || u.address).join(", ");
+  }
+  return message.to || "";
+}
+
+function threadCount(message: MailMessage) {
+  const children =
+    message.relatedMessageIds?.length ?? message.childrenMessages?.length ?? 0;
+  return children > 0 ? children + 1 : 0;
+}
+
+const boxTypeLabels: Record<string, string> = {
+  [MailBoxType.IN]: "Inbox",
+  [MailBoxType.OUT]: "Sent",
+  [MailBoxType.DRAFT]: "Draft",
+  [MailBoxType.TRASH]: "Trash",
+  [MailBoxType.SPAM]: "Spam",
+  [MailBoxType.ARCHIVE]: "Archive",
+  [MailBoxType.SCHEDULED]: "Scheduled",
+};
+
+const boxTypeStyles: Record<string, string> = {
+  [MailBoxType.IN]: "border-blue-500/25 bg-blue-500/12 text-blue-600 dark:text-blue-400",
+  [MailBoxType.OUT]: "border-green-500/25 bg-green-500/12 text-green-600 dark:text-green-400",
+  [MailBoxType.DRAFT]: "border-cyan-500/25 bg-cyan-500/12 text-cyan-600 dark:text-cyan-400",
+  [MailBoxType.SCHEDULED]: "border-amber-500/25 bg-amber-500/12 text-amber-600 dark:text-amber-400",
+  [MailBoxType.SPAM]: "border-red-500/25 bg-red-500/12 text-red-600 dark:text-red-400",
+  [MailBoxType.MASS]: "border-purple-500/25 bg-purple-500/12 text-purple-600 dark:text-purple-400",
+  [MailBoxType.TRASH]: "border-border bg-muted text-muted-foreground",
+  [MailBoxType.ARCHIVE]: "border-border bg-muted text-muted-foreground",
+};
+
+const columnHelper = createColumnHelper<MailMessage>();
+
+// TanStack column defs are heterogeneous in TValue; `any` matches the library's
+// own `ColumnDef<TData, any>` convention for mixed-value column collections.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type MailColumnDef = ColumnDef<MailMessage, any>;
+
+const DATA_COLUMN_DEFS: Record<MailColumnId, MailColumnDef> = {
+  from: columnHelper.accessor((row) => senderName(row), {
+    id: "from",
+    header: MAIL_COLUMN_LABELS.from,
+    cell: (info) => (
+      <div className="min-w-0">
+        <div className="truncate font-medium">{senderName(info.row.original)}</div>
+        <div className="truncate text-xs text-muted-foreground">
+          {info.row.original.from}
+        </div>
+      </div>
+    ),
+  }),
+  to: columnHelper.accessor((row) => recipientSummary(row), {
+    id: "to",
+    header: MAIL_COLUMN_LABELS.to,
+    cell: (info) => (
+      <span className="block max-w-[220px] truncate">
+        {recipientSummary(info.row.original) || "-"}
+      </span>
+    ),
+  }),
+  subject: columnHelper.accessor((row) => row.subject, {
+    id: "subject",
+    header: MAIL_COLUMN_LABELS.subject,
+    cell: (info) => {
+      const message = info.row.original;
+      const count = threadCount(message);
+      return (
+        <div className="flex items-center gap-1.5">
+          <span className="block max-w-[280px] truncate">
+            {message.isDraft ? "Draft: " : ""}
+            {message.subject || "(no subject)"}
+          </span>
+          {count > 0 && (
+            <span
+              title={`${count} messages in this conversation`}
+              className="inline-flex shrink-0 items-center gap-0.5 rounded-full bg-muted px-1.5 py-px text-[10px] font-medium text-muted-foreground"
+            >
+              <MessagesSquare className="size-2.5" />
+              {count}
+            </span>
+          )}
+        </div>
+      );
+    },
+  }),
+  date: columnHelper.accessor((row) => row.relatedMessageLatestDate ?? row.date, {
+    id: "date",
+    header: MAIL_COLUMN_LABELS.date,
+    cell: (info) => (
+      <span className="tabular-nums text-muted-foreground">
+        {formatDate(info.row.original.relatedMessageLatestDate ?? info.row.original.date)}
+      </span>
+    ),
+  }),
+  boxType: columnHelper.accessor((row) => row.boxType, {
+    id: "boxType",
+    header: MAIL_COLUMN_LABELS.boxType,
+    cell: (info) => {
+      const boxType = info.row.original.boxType;
+      return (
+        <Badge
+          variant="outline"
+          className={cn(
+            "capitalize",
+            boxTypeStyles[boxType] ?? boxTypeStyles[MailBoxType.TRASH]
+          )}
+        >
+          {boxTypeLabels[boxType] ?? boxType}
+        </Badge>
+      );
+    },
+  }),
+  isRead: columnHelper.accessor((row) => row.isRead, {
+    id: "isRead",
+    header: MAIL_COLUMN_LABELS.isRead,
+    cell: (info) => {
+      const unread =
+        !info.row.original.isRead ||
+        info.row.original.relatedMessagesIsRead === false;
+      return (
+        <span className="flex items-center gap-1.5 text-xs">
+          <span
+            className={cn(
+              "size-2 rounded-full",
+              unread ? "bg-primary" : "bg-muted-foreground/30"
+            )}
+          />
+          {unread ? "Unread" : "Read"}
+        </span>
+      );
+    },
+  }),
+  email: columnHelper.accessor((row) => row.email, {
+    id: "email",
+    header: MAIL_COLUMN_LABELS.email,
+    cell: (info) => (
+      <span className="block max-w-[180px] truncate text-muted-foreground">
+        {info.row.original.email}
+      </span>
+    ),
+  }),
+  user: columnHelper.accessor((row) => row.user?.nickname ?? row.user?.email ?? "", {
+    id: "user",
+    header: MAIL_COLUMN_LABELS.user,
+    cell: (info) => (
+      <span className="block max-w-[140px] truncate">
+        {info.row.original.user?.nickname ||
+          info.row.original.user?.email ||
+          `#${info.row.original.userId ?? ""}`}
+      </span>
+    ),
+  }),
+  labels: columnHelper.display({
+    id: "labels",
+    header: MAIL_COLUMN_LABELS.labels,
+    cell: (info) => (
+      <div className="flex flex-wrap gap-1">
+        {info.row.original.labels?.length ? (
+          info.row.original.labels.map((label) => (
+            <MailLabelBadge key={label.id} label={label} />
+          ))
+        ) : (
+          <span className="text-muted-foreground">-</span>
+        )}
+      </div>
+    ),
+  }),
+  attachments: columnHelper.display({
+    id: "attachments",
+    header: MAIL_COLUMN_LABELS.attachments,
+    cell: (info) =>
+      info.row.original.attachments?.length ? (
+        <span className="flex items-center gap-1 text-muted-foreground">
+          <Paperclip className="size-3.5" />
+          {info.row.original.attachments.length}
+        </span>
+      ) : (
+        <span className="text-muted-foreground">-</span>
+      ),
+  }),
+};
+
+export function MailTable({
+  messages,
+  loading,
+  total,
+  page,
+  pageSize,
+  onPageChange,
+  selectedIds,
+  activeId,
+  onOpen,
+  onSelect,
+  columns = DEFAULT_MAIL_COLUMNS,
+  emptyVariant = "inbox",
+  toolbar,
+  trailingAction,
+  className,
+}: {
+  messages: MailMessage[];
+  loading: boolean;
+  total?: number;
+  page?: number;
+  pageSize?: number;
+  onPageChange?: (page: number) => void;
+  selectedIds: Set<number>;
+  activeId?: number;
+  onOpen: (message: MailMessage) => void;
+  onSelect: (id: number, checked: boolean) => void;
+  columns?: MailColumnId[];
+  emptyVariant?: "inbox" | "search";
+  toolbar?: ReactNode;
+  trailingAction?: ReactNode;
+  className?: string;
+}) {
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(() =>
+    Object.fromEntries(columns.map((id) => [id, true]))
+  );
+
+  const tableColumns = useMemo(() => {
+    const allSelected =
+      messages.length > 0 && messages.every((m) => selectedIds.has(m.id));
+
+    const selectColumn: MailColumnDef = columnHelper.display({
+      id: "select",
+      header: () => (
+        <Checkbox
+          checked={allSelected}
+          onCheckedChange={(checked) =>
+            messages.forEach((m) => onSelect(m.id, Boolean(checked)))
+          }
+          aria-label="Select all"
+        />
+      ),
+      cell: (info) => (
+        <div
+          className="flex w-fit items-center"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Checkbox
+            checked={selectedIds.has(info.row.original.id)}
+            onCheckedChange={(checked) =>
+              onSelect(info.row.original.id, Boolean(checked))
+            }
+            aria-label={`Select ${info.row.original.subject}`}
+          />
+        </div>
+      ),
+    });
+
+    return [
+      selectColumn,
+      ...columns
+        .map((id) => DATA_COLUMN_DEFS[id])
+        .filter((def): def is MailColumnDef => Boolean(def)),
+    ];
+  }, [columns, messages, selectedIds, onSelect]);
+
+  const table = useReactTable({
+    data: messages,
+    columns: tableColumns,
+    state: { columnVisibility },
+    onColumnVisibilityChange: setColumnVisibility,
+    getCoreRowModel: getCoreRowModel(),
+    getRowId: (row) => String(row.id),
+  });
+
+  const pageCount =
+    total && pageSize ? Math.max(1, Math.ceil(total / pageSize)) : 1;
+
+  return (
+    <div className={cn("flex flex-col gap-3", className)}>
+      <div className="flex items-center gap-2">
+        {toolbar && <div className="min-w-0 flex-1">{toolbar}</div>}
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <Button variant="outline" size="sm">
+                <SlidersHorizontal />
+                Columns
+              </Button>
+            }
+          />
+          <DropdownMenuContent align="end" className="w-44">
+            <DropdownMenuGroup>
+              <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              {columns.map((id) => {
+                const column = table.getColumn(id);
+                if (!column) return null;
+                return (
+                  <DropdownMenuCheckboxItem
+                    key={id}
+                    checked={column.getIsVisible()}
+                    onCheckedChange={(value) =>
+                      column.toggleVisibility(Boolean(value))
+                    }
+                  >
+                    {MAIL_COLUMN_LABELS[id]}
+                  </DropdownMenuCheckboxItem>
+                );
+              })}
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        {trailingAction}
+      </div>
+
+      <div className="overflow-hidden rounded-xl border bg-card shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
+        <Table>
+          <TableHeader className="bg-muted/45">
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {loading ? (
+              Array.from({ length: pageSize ?? 8 }).map((_, rowIndex) => (
+                <TableRow key={`skeleton-${rowIndex}`}>
+                  {table.getAllLeafColumns().map((column) => (
+                    <TableCell key={`skeleton-${rowIndex}-${column.id}`}>
+                      <Skeleton className="h-4 w-full" />
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : table.getRowModel().rows.length ? (
+              table.getRowModel().rows.map((row) => {
+                const message = row.original;
+                const unread =
+                  !message.isRead || message.relatedMessagesIsRead === false;
+                return (
+                  <TableRow
+                    key={row.id}
+                    data-state={selectedIds.has(message.id) ? "selected" : undefined}
+                    className={cn(
+                      "cursor-pointer",
+                      activeId === message.id && "bg-muted"
+                    )}
+                    onClick={() => onOpen(message)}
+                  >
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell
+                        key={cell.id}
+                        className={cn(
+                          cell.column.id === "select" ? "w-10" : undefined,
+                          unread &&
+                            cell.column.id !== "select" &&
+                            cell.column.id !== "isRead" &&
+                            cell.column.id !== "date"
+                            ? "font-bold"
+                            : undefined
+                        )}
+                      >
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                );
+              })
+            ) : (
+              <TableRow className="hover:bg-transparent">
+                <TableCell
+                  colSpan={table.getAllLeafColumns().length}
+                  className="p-0"
+                >
+                  <MailEmpty variant={emptyVariant} />
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {onPageChange && total ? (
+        <div className="flex items-center justify-between text-sm text-muted-foreground">
+          <span className="tabular-nums">
+            {total} message{total === 1 ? "" : "s"}
+          </span>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="icon-sm"
+              disabled={!page || page <= 1}
+              onClick={() => onPageChange((page ?? 1) - 1)}
+            >
+              <ChevronLeft />
+            </Button>
+            <span className="tabular-nums">
+              {page ?? 1} / {pageCount}
+            </span>
+            <Button
+              variant="outline"
+              size="icon-sm"
+              disabled={!page || page >= pageCount}
+              onClick={() => onPageChange((page ?? 1) + 1)}
+            >
+              <ChevronRight />
+            </Button>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/extensions/nocobase-mail/components/mail-template-manager.tsx

@@ -0,0 +1,204 @@
+import { useEffect, useState } from "react";
+import { Plus, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+import type { MailTemplate } from "./types";
+import type { MailTemplateValues } from "./use-mail-templates";
+import { MailRichEditor } from "./mail-rich-editor";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+export interface MailTemplateManagerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  templates: MailTemplate[];
+  onCreate: (values: MailTemplateValues) => Promise<MailTemplate>;
+  onUpdate: (
+    id: number | string,
+    values: MailTemplateValues
+  ) => Promise<unknown>;
+  onRemove: (id: number | string) => Promise<unknown>;
+  embedded?: boolean;
+}
+
+const EMPTY: MailTemplateValues = { name: "", content: "" };
+
+export function MailTemplateManager({
+  open,
+  onOpenChange,
+  templates,
+  onCreate,
+  onUpdate,
+  onRemove,
+  embedded = false,
+}: MailTemplateManagerProps) {
+  const [selectedId, setSelectedId] = useState<number | string | null>(null);
+  const [form, setForm] = useState<MailTemplateValues>(EMPTY);
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    const first = templates[0];
+    if (first) {
+      setSelectedId(first.id);
+      setForm({
+        name: first.name,
+        content: first.content,
+      });
+    } else {
+      setSelectedId(null);
+      setForm(EMPTY);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  const selectTemplate = (template: MailTemplate) => {
+    setSelectedId(template.id);
+    setForm({
+      name: template.name,
+      content: template.content,
+    });
+  };
+
+  const startNew = () => {
+    setSelectedId(null);
+    setForm(EMPTY);
+  };
+
+  const canSave = form.name.trim().length > 0;
+
+  const handleSave = async () => {
+    if (!canSave) return;
+    setBusy(true);
+    try {
+      if (selectedId !== null) await onUpdate(selectedId, form);
+      else setSelectedId((await onCreate(form)).id);
+      toast.success("Template saved");
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to save template"
+      );
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleDelete = async (id: number | string) => {
+    setBusy(true);
+    try {
+      await onRemove(id);
+      if (selectedId === id) {
+        setSelectedId(null);
+        setForm(EMPTY);
+      }
+      toast.success("Template deleted");
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to delete template"
+      );
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const editor = (
+    <div className="grid gap-4 sm:grid-cols-[180px_1fr]">
+      <div className="flex flex-col gap-2">
+        <div className="flex max-h-80 flex-col gap-0.5 overflow-y-auto">
+          {templates.map((template) => (
+            <div
+              key={template.id}
+              className={cn(
+                "group flex items-center rounded-md text-sm transition-colors",
+                selectedId === template.id
+                  ? "bg-muted font-medium"
+                  : "hover:bg-muted/50"
+              )}
+            >
+              <button
+                type="button"
+                onClick={() => selectTemplate(template)}
+                className="min-w-0 flex-1 px-2.5 py-2 text-left"
+              >
+                <span className="block truncate">{template.name}</span>
+              </button>
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                title={`Delete ${template.name}`}
+                aria-label={`Delete ${template.name}`}
+                disabled={busy}
+                onClick={() => void handleDelete(template.id)}
+                className="mr-1 shrink-0 text-muted-foreground opacity-60 hover:text-destructive sm:opacity-0 sm:group-hover:opacity-100 sm:focus-visible:opacity-100"
+              >
+                <Trash2 />
+              </Button>
+            </div>
+          ))}
+          {!templates.length && (
+            <p className="px-2.5 py-2 text-xs text-muted-foreground">
+              No templates yet
+            </p>
+          )}
+        </div>
+        <Button variant="outline" size="sm" onClick={startNew}>
+          <Plus />
+          New
+        </Button>
+      </div>
+
+      <div className="flex flex-col gap-3">
+        <div className="space-y-1.5">
+          <Label className="text-xs text-muted-foreground">Name</Label>
+          <Input
+            value={form.name}
+            onChange={(e) =>
+              setForm((prev) => ({ ...prev, name: e.target.value }))
+            }
+            placeholder="e.g. Welcome"
+            className="h-9"
+          />
+        </div>
+
+        <div className="space-y-1.5">
+          <Label className="text-xs text-muted-foreground">Content</Label>
+          <MailRichEditor
+            value={form.content}
+            onChange={(content) => setForm((prev) => ({ ...prev, content }))}
+            placeholder="Template content…"
+          />
+        </div>
+
+        <div className="flex items-center justify-end">
+          <Button
+            size="sm"
+            onClick={() => void handleSave()}
+            disabled={!canSave || busy}
+          >
+            Save
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+
+  if (embedded) return editor;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-3xl">
+        <DialogHeader>
+          <DialogTitle>Templates</DialogTitle>
+        </DialogHeader>
+        {editor}
+      </DialogContent>
+    </Dialog>
+  );
+}