opacacms 0.1.1 → 0.1.2

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

@@ -1,720 +0,0 @@
-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>
-  );
-}