opacacms 0.1.0

package/src/admin/ui/views/collection-list-view.tsx

@@ -0,0 +1,720 @@
+import { useStore } from "@nanostores/react";
+import {
+  ArrowDownAZ,
+  ArrowUpZA,
+  ChevronLeft,
+  ChevronRight,
+  Edit2,
+  Inbox,
+  Loader2,
+  Image as LucideImage,
+  Plus,
+  Search,
+} from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import type { SerializableCollection } from "../../../types";
+import { lexicalToPlainText } from "../../../utils/lexical";
+import { api, getCurrentBaseURL } from "../../api-client";
+import { $collectionData, $collectionQuery } from "../../stores/admin-queries";
+import { $columnVisibility, initColumnVisibility } from "../../stores/column-visibility";
+import { $config } from "../../stores/config";
+import type { ToastType } from "../../stores/ui";
+import { notify } from "../../stores/ui";
+import { ColumnVisibilityToggle } from "../components/ColumnVisibilityToggle";
+import { DataDetailSheet } from "../components/DataDetailSheet";
+import { Link } from "../components/link";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/Table";
+import { RelationshipDetailSheet } from "../components/ui/relationship-detail-sheet";
+import { useDebounce } from "../hooks/use-debounce";
+
+function toSnakeCase(str: string): string {
+  return str
+    .replace(/([A-Z])/g, "_$1")
+    .toLowerCase()
+    .replace(/^_/, "");
+}
+
+function formatTableDate(date: string | number | Date | undefined | null, includeTime = false) {
+  if (!date) return "-";
+  const d = new Date(date);
+  if (Number.isNaN(d.getTime())) return String(date);
+  return includeTime ? d.toLocaleString() : d.toLocaleDateString();
+}
+
+export interface CollectionListViewProps {
+  collection: SerializableCollection;
+}
+
+export function CollectionListView({ collection }: CollectionListViewProps) {
+  const [page, setPage] = useState(1);
+  const [limit, setLimit] = useState(10);
+  const [sort, setSort] = useState<string>("");
+  const [search, setSearch] = useState("");
+  const [activeView, setActiveView] = useState<number | null>(null);
+  const [inspection, setInspection] = useState<{
+    open: boolean;
+    title: string;
+    data: any;
+    field?: string;
+    docId?: string | number;
+  }>({ open: false, title: "", data: null });
+
+  const [detailView, setDetailView] = useState<{
+    open: boolean;
+    relationTo: string;
+    id: string | number;
+  }>({ open: false, relationTo: "", id: "" });
+  const debouncedSearch = useDebounce(search, 400);
+
+  const visibility = useStore($columnVisibility);
+
+  // All named fields (flattened)
+  const allNamedFields = useMemo(
+    () => collection.fields.filter((f) => f.name),
+    [collection.fields],
+  );
+
+  // Initialize defaults once per collection
+  useEffect(() => {
+    const defaultCols =
+      typeof collection.admin === "object" ? collection.admin?.defaultColumns : undefined;
+    initColumnVisibility(collection.slug, allNamedFields, defaultCols);
+  }, [
+    collection.slug,
+    allNamedFields,
+    typeof collection.admin === "object" ? collection.admin?.defaultColumns : undefined,
+  ]);
+
+  // Derive visible fields from store
+  const visibleFields = useMemo(() => {
+    const visibleFieldNames = visibility[collection.slug];
+    return visibleFieldNames
+      ? allNamedFields.filter((f) => visibleFieldNames.includes(f.name as string))
+      : allNamedFields;
+  }, [visibility, collection.slug, allNamedFields]);
+
+  // Update query atom when params change
+  useEffect(() => {
+    const defaultSearchField =
+      typeof collection.admin === "object" && collection.admin !== null
+        ? collection.admin.useAsTitle
+        : undefined;
+
+    const searchField =
+      defaultSearchField ||
+      allNamedFields.find((f) => f.name === "title" || f.name === "name" || f.name === "slug")
+        ?.name ||
+      "id";
+
+    const populate = collection.fields
+      .filter((f) => f.type === "relationship" && (f as any).displayField)
+      .map((f) => f.name)
+      .join(",");
+
+    $collectionQuery.set({
+      slug: collection.apiPath || collection.slug,
+      page,
+      limit,
+      sort,
+      search: debouncedSearch,
+      searchField,
+      filter:
+        activeView !== null && typeof collection.admin === "object"
+          ? collection.admin?.views?.[activeView]?.filter
+          : undefined,
+      populate: populate || undefined,
+    });
+  }, [
+    collection.slug,
+    collection.apiPath,
+    collection.admin,
+    allNamedFields,
+    page,
+    limit,
+    sort,
+    debouncedSearch,
+    activeView,
+  ]);
+
+  const { data, loading } = useStore($collectionData);
+
+  const handleSort = (fieldName: string) => {
+    if (sort === fieldName) {
+      setSort(`-${fieldName}`); // toggle to desc
+    } else if (sort === `-${fieldName}`) {
+      setSort(""); // remove sort
+    } else {
+      setSort(fieldName); // asc
+    }
+    setPage(1); // reset to first page on sort change
+  };
+
+  const handleQuickEditSave = async (updatedData: any) => {
+    if (!inspection.field || !inspection.docId) return;
+
+    try {
+      const payload = { [inspection.field]: updatedData };
+      await api
+        .patch(`api/${(collection.apiPath || collection.slug) as string}/${inspection.docId}`, {
+          json: payload,
+        })
+        .json();
+
+      // Trigger a re-fetch of the collection data
+      const currentQuery = $collectionQuery.get();
+      if (currentQuery) {
+        $collectionQuery.set({
+          ...currentQuery,
+          slug: currentQuery.slug as string, // Ensure slug is string
+        });
+      }
+      notify("Document updated successfully", "success");
+      setInspection({ ...inspection, open: false });
+    } catch (e) {
+      console.error(e);
+      notify("Failed to update document", "error");
+    }
+  };
+
+  const getSortIcon = (fieldName: string) => {
+    if (sort === fieldName) {
+      return <ArrowDownAZ size={14} style={{ marginLeft: "4px", opacity: 0.7 }} />;
+    }
+    if (sort === `-${fieldName}`) {
+      return <ArrowUpZA size={14} style={{ marginLeft: "4px", opacity: 0.7 }} />;
+    }
+    return null;
+  };
+
+  const docs = data?.docs || [];
+
+  const createdAtField = useMemo(() => {
+    if (typeof collection.timestamps === "object" && collection.timestamps?.createdAt) {
+      return toSnakeCase(collection.timestamps.createdAt);
+    }
+    return "created_at";
+  }, [collection.timestamps]);
+
+  return (
+    <div className={`opaca-view-container ${loading ? "loading" : ""}`}>
+      <div className="opaca-header">
+        <div>
+          <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
+            <h1 className="opaca-title">
+              {collection.label ||
+                (collection.slug.startsWith("_")
+                  ? collection.slug
+                      .replace(/^_+/, "")
+                      .replace(/_/g, " ")
+                      .replace(/\b\w/g, (c) => c.toUpperCase())
+                  : collection.slug.charAt(0).toUpperCase() + collection.slug.slice(1))}
+            </h1>
+            {data && (
+              <span className="opaca-badge">
+                {data.totalDocs} {data.totalDocs === 1 ? "document" : "documents"}
+              </span>
+            )}
+          </div>
+          <p className="opaca-subtitle">Manage your {collection.slug} entries.</p>
+        </div>
+
+        <div style={{ display: "flex", gap: "0.75rem", alignItems: "center" }}>
+          <div style={{ position: "relative", width: "240px" }}>
+            <Search
+              size={16}
+              style={{
+                position: "absolute",
+                left: "10px",
+                top: "50%",
+                transform: "translateY(-50%)",
+                color: "var(--opaca-text-muted)",
+              }}
+            />
+            <input
+              type="text"
+              className="opaca-input"
+              placeholder="Search documents..."
+              value={search}
+              onChange={(e) => {
+                setSearch(e.target.value);
+                setPage(1);
+              }}
+              style={{ paddingLeft: "36px" }}
+            />
+          </div>
+          <ColumnVisibilityToggle slug={collection.slug} fields={allNamedFields} />
+          <Link
+            href={`/admin/collections/${collection.slug}/create`}
+            className="opaca-btn opaca-btn-primary"
+            style={{ textDecoration: "none" }}
+          >
+            <Plus size={18} />
+            Create New
+          </Link>
+        </div>
+      </div>
+
+      {typeof collection.admin === "object" &&
+        collection.admin?.views &&
+        collection.admin.views.length > 0 && (
+          <div
+            style={{
+              display: "flex",
+              gap: "0.5rem",
+              marginBottom: "1.25rem",
+              overflowX: "auto",
+              paddingBottom: "0.5rem",
+            }}
+          >
+            <button
+              type="button"
+              className={`opaca-btn ${activeView === null ? "opaca-btn-primary" : "opaca-btn-outline"}`}
+              onClick={() => {
+                setActiveView(null);
+                setPage(1);
+              }}
+              style={{ padding: "0.4rem 1rem", fontSize: "0.875rem" }}
+            >
+              All
+            </button>
+            {collection.admin.views.map((view, idx) => (
+              <button
+                key={view.name}
+                type="button"
+                className={`opaca-btn ${activeView === idx ? "opaca-btn-primary" : "opaca-btn-outline"}`}
+                onClick={() => {
+                  setActiveView(idx);
+                  setPage(1);
+                }}
+                style={{ padding: "0.4rem 1rem", fontSize: "0.875rem" }}
+              >
+                {view.name}
+              </button>
+            ))}
+          </div>
+        )}
+
+      <div className="opaca-table-container">
+        {loading && (
+          <div className="opaca-loading-overlay">
+            <Loader2 size={24} className="opaca-spin" />
+          </div>
+        )}
+
+        <DataDetailSheet
+          open={inspection.open}
+          onOpenChange={(open) => setInspection({ ...inspection, open })}
+          title={inspection.title}
+          data={inspection.data}
+          onSave={handleQuickEditSave}
+          field={inspection.field}
+        />
+
+        {docs.length > 0 ? (
+          <>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  {visibleFields.map((field) => (
+                    <TableHead
+                      key={field.name}
+                      onClick={() => handleSort(field.name as string)}
+                      style={{ cursor: "pointer", userSelect: "none" }}
+                    >
+                      <div style={{ display: "flex", alignItems: "center" }}>
+                        {field.label || field.name}
+                        {getSortIcon(field.name as string)}
+                      </div>
+                    </TableHead>
+                  ))}
+                  {collection.timestamps && (
+                    <TableHead
+                      onClick={() => handleSort("createdAt")}
+                      style={{ cursor: "pointer", userSelect: "none" }}
+                    >
+                      <div style={{ display: "flex", alignItems: "center" }}>
+                        Created At
+                        {getSortIcon("createdAt")}
+                      </div>
+                    </TableHead>
+                  )}
+                  <TableHead style={{ width: "50px" }}></TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {docs.map((doc: Record<string, unknown>) => (
+                  <TableRow key={doc.id as string | number}>
+                    {visibleFields.map((field) => {
+                      const value = doc[field.name as string];
+                      return (
+                        <TableCell
+                          key={field.name as string}
+                          className={
+                            ["richtext", "json", "group", "relationship"].includes(field.type)
+                              ? "opaca-cell-interactive"
+                              : ""
+                          }
+                          onClick={(e) => {
+                            if (!["richtext", "json", "group", "relationship"].includes(field.type))
+                              return;
+                            e.stopPropagation();
+                            setInspection({
+                              open: true,
+                              title: field.label || field.name || "Details",
+                              data: value,
+                              field: field.name as string,
+                              docId: doc.id as string | number,
+                            });
+                          }}
+                        >
+                          {field.type === "boolean" ? (
+                            value ? (
+                              <span
+                                className="opaca-badge"
+                                style={{ color: "var(--opaca-success)" }}
+                              >
+                                Yes
+                              </span>
+                            ) : (
+                              <span
+                                className="opaca-badge"
+                                style={{ color: "var(--opaca-text-dim)" }}
+                              >
+                                No
+                              </span>
+                            )
+                          ) : collection.slug === "_opaca_assets" && field.name === "filename" ? (
+                            <div
+                              style={{
+                                display: "flex",
+                                alignItems: "center",
+                                gap: "0.75rem",
+                              }}
+                            >
+                              <div
+                                style={{
+                                  width: "32px",
+                                  height: "32px",
+                                  borderRadius: "6px",
+                                  background: "var(--opaca-surface)",
+                                  overflow: "hidden",
+                                  display: "flex",
+                                  alignItems: "center",
+                                  justifyContent: "center",
+                                  border: "1px solid var(--opaca-border)",
+                                }}
+                              >
+                                {(() => {
+                                  const mime = String(doc.mimeType || doc.mime_type);
+                                  return mime.startsWith("image/") ? (
+                                    <img
+                                      src={`${getCurrentBaseURL()}/api/${collection.apiPath || collection.slug}/${doc.id}/view`}
+                                      style={{
+                                        width: "100%",
+                                        height: "100%",
+                                        objectFit: "cover",
+                                      }}
+                                      alt=""
+                                    />
+                                  ) : (
+                                    <LucideImage size={14} style={{ opacity: 0.5 }} />
+                                  );
+                                })()}
+                              </div>
+                              <span style={{ fontWeight: 500 }}>{String(value ?? "-")}</span>
+                            </div>
+                          ) : field.type === "blocks" && Array.isArray(value) ? (
+                            <button
+                              type="button"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setInspection({
+                                  open: true,
+                                  title: field.label || field.name || "Blocks",
+                                  data: value,
+                                  field: field.name as string,
+                                  docId: doc.id as string | number,
+                                });
+                              }}
+                              className="opaca-badge opaca-badge-interactive"
+                              style={{ color: "var(--opaca-text-dim)" }}
+                            >
+                              {value.length} block
+                              {value.length !== 1 ? "s" : ""}
+                            </button>
+                          ) : field.type === "relationship" ? (
+                            <div
+                              style={{
+                                display: "flex",
+                                alignItems: "center",
+                                gap: "0.5rem",
+                              }}
+                            >
+                              {(() => {
+                                const firstItemItem = Array.isArray(value) ? value[0] : value;
+                                if (
+                                  firstItemItem &&
+                                  typeof firstItemItem === "object" &&
+                                  (firstItemItem as any).filename
+                                ) {
+                                  return (
+                                    <div
+                                      style={{
+                                        width: "24px",
+                                        height: "24px",
+                                        borderRadius: "4px",
+                                        overflow: "hidden",
+                                        border: "1px solid var(--opaca-border)",
+                                        flexShrink: 0,
+                                      }}
+                                    >
+                                      <img
+                                        src={`${getCurrentBaseURL()}/api/_opaca_assets/${(firstItemItem as any).id}/view`}
+                                        style={{
+                                          width: "100%",
+                                          height: "100%",
+                                          objectFit: "cover",
+                                        }}
+                                        alt=""
+                                      />
+                                    </div>
+                                  );
+                                }
+                                return null;
+                              })()}
+                              {(() => {
+                                const firstItem = Array.isArray(value) ? value[0] : value;
+                                return (
+                                  <button
+                                    type="button"
+                                    className="opaca-badge opaca-badge-interactive"
+                                    style={{ color: "var(--opaca-text-dim)" }}
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      const id =
+                                        (firstItem as any)?.id ||
+                                        (typeof firstItem === "string" ? firstItem : "");
+                                      if (id) {
+                                        setDetailView({
+                                          open: true,
+                                          relationTo: field.relationTo || "",
+                                          id,
+                                        });
+                                      }
+                                    }}
+                                  >
+                                    {field.hasMany && Array.isArray(value)
+                                      ? `${value.length} item${value.length !== 1 ? "s" : ""}`
+                                      : typeof firstItem === "object" && firstItem !== null
+                                        ? (firstItem as any)[(field as any).displayField || "id"] ||
+                                          (firstItem as any).id ||
+                                          "[Object]"
+                                        : String(value ?? "-")}
+                                  </button>
+                                );
+                              })()}
+                            </div>
+                          ) : field.type === "group" &&
+                            typeof value === "object" &&
+                            value !== null ? (
+                            <span
+                              className="opaca-badge"
+                              style={{
+                                background: "rgba(255, 255, 255, 0.05)",
+                                border: "1px solid var(--opaca-border)",
+                                color: "var(--opaca-text-dim)",
+                              }}
+                            >
+                              {`{ ${Object.keys(value).length} keys }`}
+                            </span>
+                          ) : field.type === "json" &&
+                            typeof value === "object" &&
+                            value !== null ? (
+                            <span
+                              style={{
+                                color: "var(--opaca-text-dim)",
+                                fontFamily: "monospace",
+                                fontSize: "0.85em",
+                              }}
+                            >
+                              {JSON.stringify(value).slice(0, 30)}
+                              {JSON.stringify(value).length > 30 ? "..." : ""}
+                            </span>
+                          ) : field.type === "date" ? (
+                            <span
+                              style={{
+                                color: "var(--opaca-text)",
+                                opacity: 0.9,
+                              }}
+                            >
+                              {formatTableDate(value as string)}
+                            </span>
+                          ) : typeof value === "object" && value !== null ? (
+                            <span
+                              className="opaca-badge"
+                              style={{
+                                background: "rgba(255, 255, 255, 0.05)",
+                                border: "1px solid var(--opaca-border)",
+                                color: "var(--opaca-text-dim)",
+                              }}
+                            >
+                              [Object]
+                            </span>
+                          ) : (
+                            <span
+                              style={{
+                                color: "var(--opaca-text)",
+                                opacity: 0.9,
+                              }}
+                            >
+                              {field.type === "richtext"
+                                ? lexicalToPlainText(value as string).slice(0, 30) +
+                                  (lexicalToPlainText(value as string).length > 30 ? "..." : "")
+                                : typeof value === "string" && value.length > 30
+                                  ? `${value.slice(0, 30)}...`
+                                  : String(value ?? "-")}
+                            </span>
+                          )}
+                        </TableCell>
+                      );
+                    })}
+                    {collection.timestamps && (
+                      <TableCell
+                        style={{
+                          color: "var(--opaca-text-muted)",
+                          fontSize: "12px",
+                        }}
+                      >
+                        {formatTableDate(doc[createdAtField] as any, true)}
+                      </TableCell>
+                    )}
+                    <TableCell>
+                      <Link
+                        href={`/admin/collections/${collection.slug}/${doc.id}`}
+                        className="opaca-btn opaca-btn-outline"
+                        style={{ padding: "0.4rem" }}
+                        title="Edit Document"
+                      >
+                        <Edit2 size={14} />
+                      </Link>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+
+            {data && (
+              <div
+                className="opaca-pagination"
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  marginTop: "1rem",
+                }}
+              >
+                <div
+                  className="opaca-pagination-info"
+                  style={{
+                    color: "var(--opaca-text-muted)",
+                    fontSize: "0.875rem",
+                  }}
+                >
+                  Showing {(data.page - 1) * data.limit + 1} to{" "}
+                  {Math.min(data.page * data.limit, data.totalDocs)} of {data.totalDocs} documents
+                </div>
+
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "1.5rem",
+                  }}
+                >
+                  <div
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "0.5rem",
+                    }}
+                  >
+                    <span
+                      style={{
+                        fontSize: "0.875rem",
+                        color: "var(--opaca-text-muted)",
+                      }}
+                    >
+                      Rows per page:
+                    </span>
+                    <select
+                      value={limit}
+                      onChange={(e) => {
+                        setLimit(Number(e.target.value));
+                        setPage(1);
+                      }}
+                      className="opaca-input"
+                      style={{
+                        padding: "0.25rem 0.5rem",
+                        height: "auto",
+                        width: "auto",
+                      }}
+                    >
+                      <option value="10">10</option>
+                      <option value="25">25</option>
+                      <option value="50">50</option>
+                      <option value="100">100</option>
+                    </select>
+                  </div>
+
+                  <div
+                    className="opaca-pagination-actions"
+                    style={{ display: "flex", gap: "0.5rem" }}
+                  >
+                    <button
+                      type="button"
+                      className="opaca-btn opaca-btn-outline"
+                      disabled={!data.hasPrevPage || loading}
+                      onClick={() => setPage(page - 1)}
+                      style={{ padding: "0.4rem" }}
+                    >
+                      <ChevronLeft size={16} />
+                    </button>
+                    <button
+                      type="button"
+                      className="opaca-btn opaca-btn-outline"
+                      disabled={!data.hasNextPage || loading}
+                      onClick={() => setPage(page + 1)}
+                      style={{ padding: "0.4rem" }}
+                    >
+                      <ChevronRight size={16} />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            )}
+          </>
+        ) : !loading ? (
+          <div className="opaca-empty">
+            <div className="opaca-empty-icon">
+              <Inbox size={32} />
+            </div>
+            <h3 style={{ fontSize: "1.125rem", fontWeight: "600" }}>No documents found</h3>
+            <p className="opaca-subtitle" style={{ maxWidth: "300px" }}>
+              This collection is currently empty. Start by creating your first document.
+            </p>
+            <Link
+              href={`/admin/collections/${collection.slug}/create`}
+              className="opaca-btn opaca-btn-primary"
+              style={{ textDecoration: "none", marginTop: "0.5rem" }}
+            >
+              <Plus size={18} />
+              Create First {collection.label || collection.slug}
+            </Link>
+          </div>
+        ) : (
+          <div style={{ height: "200px" }} /> /* Placeholder while loading empty state */
+        )}
+      </div>
+    </div>
+  );
+}