@dyrected/admin 2.4.0 → 2.4.2

package/src/pages/collections/edit-page.tsx

@@ -1,280 +0,0 @@
-import { useState, useEffect } from "react"
-import { toast } from "sonner"
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
-import { useDyrected } from "../../providers/dyrected-provider"
-import { FormEngine } from "../../components/forms/form-engine"
-import { useNavigate, useParams } from "react-router-dom"
-import { ChevronLeft } from "lucide-react"
-import { Button } from "../../components/ui/button"
-import { Badge } from "../../components/ui/badge"
-import { cn } from "../../lib/utils"
-import { Archive, Eye, EyeOff, Save } from "lucide-react"
-import { LivePreviewPane } from "../../components/live-preview/LivePreviewPane"
-import jexl from 'jexl'
-
-export function EditEntryPage() {
-  const { slug, id } = useParams()
-  const { client } = useDyrected()
-  const navigate = useNavigate()
-  const queryClient = useQueryClient()
-  const [showPreview, setShowPreview] = useState(false)
-  const [isDirty, setIsDirty] = useState(false)
-  const [previewData, setPreviewData] = useState<any>(null)
-  const isEdit = !!id
-
-  useEffect(() => {
-    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
-      if (isDirty) {
-        e.preventDefault()
-        e.returnValue = ""
-      }
-    }
-    window.addEventListener("beforeunload", handleBeforeUnload)
-    return () => window.removeEventListener("beforeunload", handleBeforeUnload)
-  }, [isDirty])
-
-  // Cmd+S to save
-  useEffect(() => {
-    const handleSave = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === "s") {
-        e.preventDefault()
-        document.getElementById('dyrected-form-submit')?.click()
-      }
-    }
-    window.addEventListener("keydown", handleSave)
-    return () => window.removeEventListener("keydown", handleSave)
-  }, [])
-
-  // Fetch schema
-  const { data: schemas } = useQuery({
-    queryKey: ["schemas"],
-    queryFn: () => client!.getSchemas(),
-    enabled: !!client,
-  })
-
-  const schema = schemas?.collections.find((c: any) => c.slug === slug)
-
-  // Effect to default preview if available
-  useEffect(() => {
-    if (schema?.admin?.previewUrl) {
-      setShowPreview(true)
-    }
-  }, [schema])
-
-  // Fetch entry data if in edit mode
-  const { data: entry, isLoading: isEntryLoading } = useQuery({
-    queryKey: ["entry", slug, id],
-    queryFn: () => client!.collection(slug!).findOne(id!),
-    enabled: !!client && isEdit,
-  })
-
-  useEffect(() => {
-    if (entry) {
-      setPreviewData(entry)
-    }
-  }, [entry])
-
-  const saveMutation = useMutation({
-    mutationFn: (data: any) => {
-      if (isEdit) {
-        return client!.collection(slug!).update(id!, data)
-      } else {
-        return client!.collection(slug!).create(data)
-      }
-    },
-    onSuccess: (data: any) => {
-      setIsDirty(false)
-      queryClient.invalidateQueries({ queryKey: ["collection", slug] })
-      if (isEdit) {
-        queryClient.invalidateQueries({ queryKey: ["entry", slug, id] })
-      }
-
-      toast.success(isEdit ? "Entry updated successfully" : "Entry created successfully", {
-        description: `${schema.label || schema.slug} has been saved.`
-      })
-
-      if (!isEdit && data?.id) {
-        navigate(`/collections/${slug}/edit/${data.id}`, { replace: true })
-      }
-    },
-    onError: (error: any) => {
-      toast.error("Failed to save entry", {
-        description: error.message || "An unexpected error occurred."
-      })
-    }
-  })
-
-  if (!schema) return <div>Collection not found</div>
-  if (isEdit && isEntryLoading) return <div>Loading entry...</div>
-
-  const hasStatus = schema?.fields.some((f: any) => f.name === "status")
-  const currentStatus = entry?.status || "draft"
-
-  let previewUrl = typeof schema.admin?.previewUrl === 'function'
-    ? schema.admin.previewUrl(previewData || entry, { locale: 'en' })
-    : schema.admin?.previewUrl
-
-  if (typeof previewUrl === 'string' && previewUrl.includes('{{')) {
-    previewUrl = previewUrl.replace(/{{(.*?)}}/g, (_, key) => entry?.[key.trim()] || "")
-  } else if (typeof previewUrl === 'string' && (previewData || entry)) {
-    try {
-      // Provide current window origin to Jexl context so users can use it in expressions
-      const context = { ...(previewData || entry), siteUrl: window.location.origin };
-
-      if (previewUrl.includes('+') || previewUrl.includes('?') || previewUrl.includes('==') || previewUrl.includes('siteUrl')) {
-        previewUrl = jexl.evalSync(previewUrl, context)
-      }
-    } catch (e) {
-      console.error("[PreviewDebug] Jexl Evaluation Failed:", e)
-    }
-  }
-
-  // If the resolved URL is relative, prepend the current origin
-  if (typeof previewUrl === 'string' && previewUrl.startsWith('/')) {
-    previewUrl = `${window.location.origin}${previewUrl}`
-  }
-
-  const canCreate = (schema.access as any)?.create !== false
-  const canUpdate = (schema.access as any)?.update !== false
-
-  return (
-    <div className="dy-flex dy-h-[calc(100vh-0px)] dy-overflow-hidden dy--mt-6 dy--mx-4 lg:dy--mt-10 lg:dy--mx-6">
-      {/* Left Column: Header + Form */}
-      <div className={cn(
-        "dy-flex-1 dy-overflow-y-auto dy-px-6 dy-py-6 lg:dy-px-10 lg:dy-py-10 dy-transition-all dy-duration-500",
-        showPreview ? "dy-max-w-2xl xl:dy-max-w-3xl" : "dy-max-w-5xl dy-mx-auto dy-w-full"
-      )}>
-        <div className="dy-space-y-8">
-          {/* Header */}
-          <div className="dy-flex dy-items-center dy-justify-between dy-gap-4 dy-border-b dy-border-border/50 dy-pb-6">
-            <div className="dy-flex dy-items-center dy-gap-4">
-              <Button
-                variant="ghost"
-                size="icon"
-                className="dy-h-8 dy-w-8 dy-rounded-lg hover:dy-bg-muted dy-shrink-0"
-                onClick={() => navigate(`/collections/${slug}`)}
-              >
-                <ChevronLeft className="dy-h-4 dy-w-4" />
-              </Button>
-              <div>
-                <div className="dy-flex dy-items-center dy-gap-3">
-                  <h1 className="dy-text-lg dy-font-serif dy-font-bold dy-tracking-tight dy-text-foreground dy-truncate">
-                    {isEdit ? `Edit ${schema.label || schema.slug}` : `New ${schema.label || schema.slug}`}
-                  </h1>
-                  {hasStatus && (
-                    <Badge className={cn(
-                      "dy-px-2 dy-py-0 dy-rounded-full dy-text-[10px] dy-font-bold dy-uppercase dy-tracking-wider",
-                      currentStatus === "published" ? "dy-bg-emerald-100 dy-text-emerald-700 dy-border-emerald-200" : "dy-bg-amber-100 dy-text-amber-700 dy-border-amber-200"
-                    )} variant="outline">
-                      {currentStatus === "published" ? "Live" : "Draft"}
-                    </Badge>
-                  )}
-                </div>
-              </div>
-            </div>
-
-            <div className="dy-flex dy-items-center dy-gap-2">
-              {previewUrl && (
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className={cn(
-                    "dy-h-9 dy-w-9 dy-rounded-lg dy-transition-colors",
-                    showPreview ? "dy-bg-primary/10 dy-text-primary hover:dy-bg-primary/20" : "hover:dy-bg-muted"
-                  )}
-                  onClick={() => setShowPreview(!showPreview)}
-                  title={showPreview ? "Hide Preview" : "Live Preview"}
-                >
-                  {showPreview ? <EyeOff className="dy-h-4 dy-w-4" /> : <Eye className="dy-h-4 dy-w-4" />}
-                </Button>
-              )}
-              <Button
-                size="icon"
-                className="dy-h-9 dy-w-9 dy-rounded-lg dy-shadow-sm"
-                onClick={() => document.getElementById('dyrected-form-submit')?.click()}
-                disabled={saveMutation.isPending || (isEdit ? !canUpdate : !canCreate)}
-                title={isEdit ? "Save Changes (⌘S)" : "Create Entry (⌘S)"}
-              >
-                {saveMutation.isPending ? (
-                  <div className="dy-h-4 dy-w-4 dy-animate-spin dy-border-2 dy-border-current dy-border-t-transparent dy-rounded-full" />
-                ) : (
-                  <Save className="dy-h-4 dy-w-4" />
-                )}
-              </Button>
-            </div>
-          </div>
-
-          {/* Form */}
-          <div className="dy-animate-in dy-space-y-8 dy-pb-20">
-            {!canUpdate && isEdit && (
-              <div className="dy-p-4 dy-rounded-lg dy-bg-amber-50 dy-border dy-border-amber-200 dy-text-amber-800 dy-text-sm dy-flex dy-items-center dy-gap-3">
-                <Archive className="dy-h-4 dy-w-4" />
-                You have read-only access to this collection.
-              </div>
-            )}
-            <FormEngine
-              collection={slug!}
-              fields={schema.fields}
-              defaultValues={entry}
-              onSubmit={(data) => saveMutation.mutate(data)}
-              onDataChange={(newData) => setPreviewData({ ...entry, ...newData })}
-              onChange={(dirty) => setIsDirty(dirty)}
-              isLoading={saveMutation.isPending}
-              submitLabel={isEdit ? "Save Changes" : "Create Entry"}
-              readOnly={isEdit ? !canUpdate : !canCreate}
-            />
-            <button id="dyrected-form-submit" type="submit" className="dy-hidden" />
-
-            {/* Document Meta */}
-            <div className="dy-pt-8 dy-border-t dy-border-border/40">
-              <div className="dy-flex dy-flex-wrap dy-items-center dy-gap-x-8 dy-gap-y-4">
-                <div className="dy-space-y-1">
-                  <p className="dy-text-[10px] dy-font-bold dy-uppercase dy-tracking-wider dy-text-muted-foreground/40 dy-text-nowrap">Document ID</p>
-                  <code className="dy-text-xs dy-font-mono dy-text-muted-foreground/80 dy-select-all">
-                    {isEdit ? id : "Pending..."}
-                  </code>
-                </div>
-
-                {isEdit && (
-                  <>
-                    <div className="dy-space-y-1">
-                      <p className="dy-text-[10px] dy-font-bold dy-uppercase dy-tracking-wider dy-text-muted-foreground/40 dy-text-nowrap">Created At</p>
-                      <p className="dy-text-xs dy-font-medium dy-text-muted-foreground/80">
-                        {entry?.createdAt ? new Date(entry.createdAt).toLocaleString() : 'N/A'}
-                      </p>
-                    </div>
-                    <div className="dy-space-y-1">
-                      <p className="dy-text-[10px] dy-font-bold dy-uppercase dy-tracking-wider dy-text-muted-foreground/40 dy-text-nowrap">Last Updated</p>
-                      <p className="dy-text-xs dy-font-medium dy-text-muted-foreground/80">
-                        {entry?.updatedAt ? new Date(entry.updatedAt).toLocaleString() : 'N/A'}
-                      </p>
-                    </div>
-                  </>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Right Column: Preview (starts from top) */}
-      {previewUrl && (
-        <div className={cn(
-          "dy-hidden lg:dy-block dy-border-l dy-border-border/50 dy-bg-muted/5 dy-transition-all dy-duration-500 dy-overflow-hidden",
-          showPreview ? "dy-flex-1 dy-opacity-100" : "dy-w-0 dy-opacity-0 dy-border-l-0"
-        )}>
-          {/* We use negative margins to pull the preview up and out to the shell's padding edges if possible, 
-              but since we're inside a parent with padding, we'll just make it height-full.
-          */}
-          <div className="dy-h-full">
-            <LivePreviewPane
-              previewUrl={previewUrl}
-              data={previewData || entry}
-              mode={schema.admin?.previewMode}
-            />
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

package/src/pages/collections/list-page.tsx

@@ -1,343 +0,0 @@
-import * as React from "react"
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
-import { toast } from "sonner"
-import { Link } from "react-router-dom"
-import { useDyrected } from "../../providers/dyrected-provider"
-import { DataTable } from "../../components/ui/data-table"
-import { type ColumnDef } from "@tanstack/react-table"
-import { Badge } from "../../components/ui/badge"
-import { Button } from "../../components/ui/button"
-import { Checkbox } from "../../components/ui/checkbox"
-import {
-  MoreHorizontal,
-  Plus,
-  Pencil,
-  Trash2,
-  Calendar,
-  Database,
-  Image as ImageIcon,
-} from "lucide-react"
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../../components/ui/dropdown-menu"
-import { RenderCell } from "../../components/ui/render-cell"
-import { PageHeader } from "../../components/ui/page-header"
-import { Pagination } from "../../components/ui/pagination"
-import { MediaGrid } from "../../components/media/media-grid"
-
-interface CollectionListPageProps {
-  slug: string
-}
-
-export function CollectionListPage({ slug }: CollectionListPageProps) {
-  const { client } = useDyrected()
-  const queryClient = useQueryClient()
-  const [page, setPage] = React.useState(1)
-
-  // Reset to page 1 when collection slug changes
-  React.useEffect(() => { setPage(1) }, [slug])
-
-  // Fetch schema to know fields
-  const { data: schemas } = useQuery({
-    queryKey: ["schemas"],
-    queryFn: () => client!.getSchemas(),
-    enabled: !!client,
-  })
-
-  const schema = schemas?.collections.find((c: any) => c.slug === slug)
-
-  // Fetch collection data
-  const { data: response, isLoading } = useQuery({
-    queryKey: ["collection", slug, page],
-    queryFn: () => client!.collection(slug).find({ page, limit: 20, depth: 1 }).exec(),
-    enabled: !!client,
-  })
-
-  const totalPages = response?.totalPages ?? 1
-  const hasNextPage = page < totalPages
-  const hasPrevPage = page > 1
-
-  const deleteMutation = useMutation({
-    mutationFn: (id: string) => client!.collection(slug).delete(id),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["collection", slug] })
-      setRowSelection({})
-      toast.success("Entry deleted successfully")
-    },
-    onError: (error: any) => {
-      toast.error("Failed to delete entry", {
-        description: error.message
-      })
-    }
-  })
-
-  const bulkDeleteMutation = useMutation({
-    mutationFn: async (ids: string[]) => {
-      for (const id of ids) {
-        await client!.collection(slug).delete(id)
-      }
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["collection", slug] })
-      setRowSelection({})
-      toast.success("Selected entries deleted")
-    },
-    onError: (error: any) => {
-      toast.error("Failed to delete entries", {
-        description: error.message
-      })
-    }
-  })
-
-  function handleDelete(id: string) {
-    if (window.confirm("Delete this entry? This cannot be undone.")) {
-      deleteMutation.mutate(id)
-    }
-  }
-
-  function handleBulkDelete(ids: string[]) {
-    if (window.confirm(`Delete ${ids.length} entries? This cannot be undone.`)) {
-      bulkDeleteMutation.mutate(ids)
-    }
-  }
-
-  const [rowSelection, setRowSelection] = React.useState<Record<string, boolean>>({})
-
-  const columns: ColumnDef<any>[] = React.useMemo(() => {
-    if (!schema) return []
-
-    const cols: ColumnDef<any>[] = [
-      {
-        id: "select",
-        header: ({ table }) => (
-          <Checkbox
-            checked={table.getIsAllPageRowsSelected() ? true : table.getIsSomePageRowsSelected() ? "indeterminate" : false}
-            onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-            aria-label="Select all"
-          />
-        ),
-        cell: ({ row }) => (
-          <Checkbox
-            checked={row.getIsSelected()}
-            onCheckedChange={(value) => row.toggleSelected(!!value)}
-            aria-label="Select row"
-          />
-        ),
-        enableSorting: false,
-        enableHiding: false,
-      },
-      {
-        accessorKey: "id",
-        header: "ID",
-        cell: ({ row }) => <span className="dy-font-mono dy-text-xs">{row.getValue("id")}</span>,
-      },
-    ]
-
-    const hasStatus = schema.fields.some((f: any) => f.name === "status")
-
-    if (hasStatus) {
-      cols.push({
-        accessorKey: "status",
-        header: "Status",
-        cell: ({ row }) => {
-          const status = row.getValue("status")
-          return (
-            <Badge variant={status === "published" ? "default" : "secondary"}>
-              {status === "published" ? "Published" : "Draft"}
-            </Badge>
-          )
-        }
-      })
-    }
-
-    // Include all non-hidden fields as columns
-    const allDisplayFields = schema.fields.filter((f: any) => f.name !== "status" && !f.admin?.hidden)
-
-    allDisplayFields.forEach((field: any) => {
-      cols.push({
-        accessorKey: field.name,
-        header: field.label || field.name,
-        cell: ({ row }) => (
-          <RenderCell
-            value={row.getValue(field.name)}
-            field={field}
-            client={client}
-            schemas={schemas}
-          />
-        ),
-      })
-    })
-
-    // Add metadata columns
-    cols.push({
-      accessorKey: "updatedAt",
-      header: "Last Updated",
-      cell: ({ row }) => {
-        const date = new Date(row.getValue("updatedAt"))
-        return (
-          <div className="dy-flex dy-items-center dy-gap-2 dy-text-muted-foreground">
-            <Calendar className="dy-h-3 dy-w-3" />
-            <span className="dy-text-xs">{date.toLocaleDateString()}</span>
-          </div>
-        )
-      }
-    })
-
-    // Actions
-    cols.push({
-      id: "actions",
-      cell: ({ row }) => {
-        const item = row.original
-        return (
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="ghost" className="dy-h-8 dy-w-8 dy-p-0">
-                <span className="dy-sr-only">Open menu</span>
-                <MoreHorizontal className="dy-h-4 dy-w-4" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-              <DropdownMenuItem onClick={() => navigator.clipboard.writeText(item.id)}>
-                Copy ID
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <Link to={`/collections/${slug}/edit/${item.id}`}>
-                <DropdownMenuItem className="dy-flex dy-gap-2">
-                  <Pencil className="dy-h-4 dy-w-4" />
-                  Edit
-                </DropdownMenuItem>
-              </Link>
-              <DropdownMenuItem
-                className="dy-flex dy-gap-2 dy-text-destructive focus:dy-text-destructive"
-                onClick={() => handleDelete(item.id)}
-                disabled={deleteMutation.isPending}
-              >
-                <Trash2 className="dy-h-4 dy-w-4" />
-                {deleteMutation.isPending ? "Deleting..." : "Delete"}
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        )
-      },
-    })
-
-    return cols
-  }, [schema, client, deleteMutation.isPending])
-
-  const initialColumnVisibility = React.useMemo(() => {
-    if (!schema) return {}
-    
-    const visibility: Record<string, boolean> = {}
-    const displayFields = schema.fields.filter((f: any) => f.name !== "status" && !f.admin?.hidden)
-    
-    let visibleFieldNames: string[] = []
-    if (schema.admin?.defaultColumns && Array.isArray(schema.admin.defaultColumns)) {
-      visibleFieldNames = schema.admin.defaultColumns
-    } else {
-      visibleFieldNames = displayFields.slice(0, 3).map((f: any) => f.name)
-    }
-
-    // Set visibility for all fields
-    displayFields.forEach((f: any) => {
-      visibility[f.name] = visibleFieldNames.includes(f.name)
-    })
-
-    return visibility
-  }, [schema])
-
-  if (isLoading) {
-    return (
-      <div className="dy-flex dy-h-[400px] dy-items-center dy-justify-center">
-        <div className="dy-animate-spin dy-rounded-full dy-border-4 dy-border-primary dy-border-t-transparent dy-h-8 dy-w-8"></div>
-      </div>
-    )
-  }
-
-  if (!schema) {
-    return <div>Collection not found: {slug}</div>
-  }
-
-  if (slug === "media") {
-    return (
-      <div className="dy-space-y-8 dy-animate-in">
-        <PageHeader 
-          title="Media Library" 
-          description="Manage your media assets and uploads." 
-          icon={ImageIcon}
-        >
-          <Link to={`/collections/${slug}/new`}>
-            <Button className="dy-h-8 dy-px-4 dy-text-[11px] dy-rounded-md dy-bg-primary hover:dy-bg-primary/90 dy-shadow-sm dy-transition-all active:dy-scale-95">
-              <Plus className="dy-mr-1.5 dy-h-3 dy-w-3" />
-              Upload New
-            </Button>
-          </Link>
-        </PageHeader>
-
-        <MediaGrid 
-          items={response?.docs || []} 
-          baseUrl={client?.getBaseUrl() || ""} 
-          onDelete={handleDelete}
-          slug={slug}
-        />
-
-        <Pagination 
-          page={page}
-          totalPages={totalPages}
-          hasPrevPage={hasPrevPage}
-          hasNextPage={hasNextPage}
-          onPageChange={setPage}
-          className="dy-mt-8"
-        />
-      </div>
-    )
-  }
-
-  return (
-    <div className="dy-space-y-8 dy-animate-in">
-      <PageHeader 
-        title={schema.labels?.plural || schema.label || schema.slug} 
-        description={`Manage your ${schema.slug} entries and update content.`} 
-        icon={Database}
-      >
-        <Link to={`/collections/${slug}/new`}>
-          <Button className="dy-h-8 dy-px-4 dy-text-[11px] dy-rounded-md dy-bg-primary hover:dy-bg-primary/90 dy-shadow-sm dy-transition-all active:dy-scale-95">
-            <Plus className="dy-mr-1.5 dy-h-3 dy-w-3" />
-            Create New
-          </Button>
-        </Link>
-      </PageHeader>
-
-      <div className="dy-overflow-hidden">
-        <DataTable
-          key={slug}
-          columns={columns}
-          data={response?.docs || []}
-          searchKey={schema.admin?.useAsTitle || schema.fields.find((f: any) => !f.admin?.hidden)?.name || "id"}
-          onRowSelectionChange={setRowSelection}
-          rowSelection={rowSelection}
-          persistenceKey={slug}
-          initialColumnVisibility={initialColumnVisibility}
-          bulkActions={(selectedIds) => (
-            <Button
-              variant="destructive"
-              size="sm"
-              className="dy-h-8"
-              onClick={() => handleBulkDelete(selectedIds)}
-              disabled={bulkDeleteMutation.isPending}
-            >
-              <Trash2 className="dy-h-4 dy-w-4 dy-mr-2" />
-              Delete Selected ({selectedIds.length})
-            </Button>
-          )}
-        />
-        <Pagination 
-          page={page}
-          totalPages={totalPages}
-          total={response?.total}
-          hasPrevPage={hasPrevPage}
-          hasNextPage={hasNextPage}
-          onPageChange={setPage}
-        />
-      </div>
-    </div>
-  )
-}