@actuate-media/cms-admin 0.1.3 → 0.2.0

package/src/views/DocumentEdit.tsx

@@ -0,0 +1,377 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { AlertTriangle, Eye, EyeOff, Save, Copy, Loader2, Clock } from 'lucide-react';
+import { toast } from 'sonner';
+import { FieldRenderer } from '../fields/FieldRenderer.js';
+import { Button } from '../components/ui/Button.js';
+import { Badge } from '../components/ui/Badge.js';
+import { LivePreview } from '../components/LivePreview.js';
+import { VersionHistory } from '../components/VersionHistory.js';
+import { PresenceIndicator } from '../components/PresenceIndicator.js';
+import { SEOPanel } from '../components/SEOPanel.js';
+import type { SEOData } from '../components/SEOPanel.js';
+import { cmsApi } from '../lib/api.js';
+
+export interface DocumentEditProps {
+  collectionSlug: string;
+  documentId?: string;
+  config: any;
+  onNavigate?: (path: string) => void;
+}
+
+export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }: DocumentEditProps) {
+  const isNew = !documentId;
+  const [values, setValues] = useState<Record<string, any>>({});
+  const [initialValues, setInitialValues] = useState<Record<string, any>>({});
+  const [seoData, setSeoData] = useState<SEOData>({});
+  const [initialSeoData, setInitialSeoData] = useState<SEOData>({});
+  const [saving, setSaving] = useState(false);
+  const [loading, setLoading] = useState(!isNew);
+  const [showPreview, setShowPreview] = useState(false);
+  const [showVersions, setShowVersions] = useState(false);
+  const [docStatus, setDocStatus] = useState<string>('DRAFT');
+  const hasLoadedRef = useRef(false);
+
+  const collections = config?.collections;
+  const collection = Array.isArray(collections)
+    ? collections.find((c: any) => c.slug === collectionSlug)
+    : collections?.[collectionSlug];
+
+  const previewUrl = collection?.admin?.preview ? collection.admin.preview({}) : undefined;
+  const fields: any[] = collection?.fields
+    ? (Array.isArray(collection.fields)
+        ? collection.fields
+        : Object.entries(collection.fields).map(([name, def]: [string, any]) => ({ name, ...def })))
+    : [];
+
+  const useAsTitleField = collection?.admin?.useAsTitle ?? 'title';
+  const displayTitle = isNew
+    ? `New ${collection?.labels?.singular ?? collectionSlug}`
+    : `Edit ${values[useAsTitleField] ?? 'Document'}`;
+
+  const isDirty = JSON.stringify(values) !== JSON.stringify(initialValues)
+    || JSON.stringify(seoData) !== JSON.stringify(initialSeoData);
+
+  useEffect(() => {
+    if (!isNew && documentId && !hasLoadedRef.current) {
+      hasLoadedRef.current = true;
+      loadDocument();
+    }
+  }, [documentId, isNew]);
+
+  useEffect(() => {
+    if (!isDirty) return;
+    const handler = (e: BeforeUnloadEvent) => {
+      e.preventDefault();
+    };
+    window.addEventListener('beforeunload', handler);
+    return () => window.removeEventListener('beforeunload', handler);
+  }, [isDirty]);
+
+  const SEO_FIELDS: (keyof SEOData)[] = [
+    'metaTitle', 'metaDescription', 'focusKeyphrase', 'canonical',
+    'noIndex', 'noFollow', 'ogTitle', 'ogDescription', 'ogImage',
+    'twitterTitle', 'twitterDescription', 'twitterImage',
+    'isCornerstone', 'schemaType',
+  ];
+
+  async function loadDocument() {
+    setLoading(true);
+    const res = await cmsApi<any>(`/collections/${collectionSlug}/${documentId}`);
+    if (res.data) {
+      const doc = res.data;
+      const docData = (doc.data && typeof doc.data === 'object') ? doc.data : {};
+      const merged = { ...docData, title: doc.title ?? docData.title, slug: doc.slug ?? docData.slug };
+      setValues(merged);
+      setInitialValues(merged);
+      setDocStatus(doc.status ?? 'DRAFT');
+
+      const loadedSeo: SEOData = {};
+      for (const key of SEO_FIELDS) {
+        if (docData[key] !== undefined) {
+          (loadedSeo as any)[key] = docData[key];
+        }
+      }
+      setSeoData(loadedSeo);
+      setInitialSeoData(loadedSeo);
+    } else if (res.error) {
+      toast.error(`Failed to load document: ${res.error}`);
+    }
+    setLoading(false);
+  }
+
+  function handleFieldChange(name: string, value: any) {
+    setValues((prev) => ({ ...prev, [name]: value }));
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    const payload = { ...values, ...seoData };
+    try {
+      if (isNew) {
+        const res = await cmsApi<any>(`/collections/${collectionSlug}`, {
+          method: 'POST',
+          body: JSON.stringify(payload),
+        });
+        if (res.error) {
+          toast.error(res.error);
+        } else {
+          toast.success('Document created');
+          const newId = res.data?.id;
+          setInitialValues(values);
+          setInitialSeoData(seoData);
+          if (newId && onNavigate) {
+            onNavigate(`/${collectionSlug}/${newId}`);
+          }
+        }
+      } else {
+        const res = await cmsApi<any>(`/collections/${collectionSlug}/${documentId}`, {
+          method: 'PUT',
+          body: JSON.stringify(payload),
+        });
+        if (res.error) {
+          toast.error(res.error);
+        } else {
+          toast.success('Changes saved');
+          setInitialValues(values);
+          setInitialSeoData(seoData);
+          if (res.data?.status) setDocStatus(res.data.status);
+        }
+      }
+    } catch {
+      toast.error('An unexpected error occurred');
+    }
+    setSaving(false);
+  }
+
+  async function handlePublish() {
+    if (isNew) return;
+    setSaving(true);
+    const res = await cmsApi<any>(`/collections/${collectionSlug}/${documentId}`, {
+      method: 'PUT',
+      body: JSON.stringify({ ...values, ...seoData, status: 'PUBLISHED' }),
+    });
+    if (res.error) {
+      toast.error(res.error);
+    } else {
+      toast.success('Document published');
+      setDocStatus('PUBLISHED');
+      setInitialValues(values);
+      setInitialSeoData(seoData);
+    }
+    setSaving(false);
+  }
+
+  async function handleUnpublish() {
+    if (isNew) return;
+    setSaving(true);
+    const res = await cmsApi<any>(`/collections/${collectionSlug}/${documentId}`, {
+      method: 'PUT',
+      body: JSON.stringify({ ...values, ...seoData, status: 'DRAFT' }),
+    });
+    if (res.error) {
+      toast.error(res.error);
+    } else {
+      toast.success('Document unpublished');
+      setDocStatus('DRAFT');
+      setInitialValues(values);
+      setInitialSeoData(seoData);
+    }
+    setSaving(false);
+  }
+
+  async function handleDuplicate() {
+    if (isNew || !documentId) return;
+    const res = await cmsApi<any>(`/collections/${collectionSlug}`, {
+      method: 'POST',
+      body: JSON.stringify({
+        ...values,
+        title: values.title ? `${values.title} (Copy)` : undefined,
+        slug: values.slug ? `${values.slug}-copy` : undefined,
+      }),
+    });
+    if (res.error) {
+      toast.error(res.error);
+    } else {
+      toast.success('Document duplicated');
+      const newId = res.data?.id;
+      if (newId && onNavigate) {
+        onNavigate(`/${collectionSlug}/${newId}`);
+      }
+    }
+  }
+
+  const mainFields = fields.filter(
+    (f: any) => !['status', 'publishedAt', 'featured', 'featuredImage'].includes(f.name),
+  );
+  const sidebarFields = fields.filter((f: any) =>
+    ['publishedAt', 'featured', 'featuredImage'].includes(f.name),
+  );
+
+  const contentField = fields.find(
+    (f: any) => f.type === 'richText' || f.name === 'content' || f.name === 'body',
+  );
+  const htmlContent = contentField ? (values[contentField.name] ?? '') : '';
+  const docSlug = values.slug ?? '';
+
+  const statusColor = docStatus === 'PUBLISHED' ? 'bg-green-100 text-green-800'
+    : docStatus === 'SCHEDULED' ? 'bg-blue-100 text-blue-800'
+    : 'bg-yellow-100 text-yellow-800';
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-[300px]">
+        <Loader2 className="w-8 h-8 animate-spin text-gray-400" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <h1 className="text-2xl font-bold">{displayTitle}</h1>
+          <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${statusColor}`}>
+            {docStatus}
+          </span>
+          {documentId && <PresenceIndicator documentId={documentId} />}
+          {isDirty && (
+            <span className="text-xs text-amber-600 font-medium">Unsaved changes</span>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => setShowPreview((v) => !v)}
+            className="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-[var(--muted-foreground)] hover:bg-[var(--muted)] hover:text-[var(--foreground)]"
+            title={showPreview ? 'Hide preview' : 'Show preview'}
+          >
+            {showPreview ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+            Preview
+          </button>
+          {!isNew && (
+            <>
+              <button
+                onClick={() => setShowVersions(true)}
+                className="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-[var(--muted-foreground)] hover:bg-[var(--muted)] hover:text-[var(--foreground)]"
+                title="Version history"
+              >
+                <Clock className="h-4 w-4" />
+                History
+              </button>
+              <button
+                onClick={handleDuplicate}
+                className="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-[var(--muted-foreground)] hover:bg-[var(--muted)] hover:text-[var(--foreground)]"
+                title="Duplicate this document"
+              >
+                <Copy className="h-4 w-4" />
+                Duplicate
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+
+      <div className={showPreview ? 'grid grid-cols-2 gap-6' : ''}>
+        <div className="space-y-6">
+          {fields.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-16 text-center rounded-lg border border-[var(--border)]">
+              <div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mb-4">
+                <AlertTriangle className="w-6 h-6 text-gray-400" />
+              </div>
+              <h3 className="text-sm font-medium text-gray-900 mb-1">Collection schema not found</h3>
+              <p className="text-sm text-gray-500">No fields are defined for this collection.</p>
+            </div>
+          ) : (
+          <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+            <div className="space-y-6 lg:col-span-2">
+              {mainFields.map((field: any) => (
+                <FieldRenderer
+                  key={field.name}
+                  field={field}
+                  value={values[field.name]}
+                  onChange={(val) => handleFieldChange(field.name, val)}
+                />
+              ))}
+            </div>
+
+            <div className="space-y-6">
+              <div className="rounded-lg border border-[var(--border)] bg-[var(--card)] p-4">
+                <h3 className="mb-4 font-semibold">Status</h3>
+                <div className="space-y-3">
+                  {!isNew && docStatus === 'DRAFT' && (
+                    <Button variant="primary" className="w-full" onClick={handlePublish} loading={saving}>
+                      Publish
+                    </Button>
+                  )}
+                  {!isNew && docStatus === 'PUBLISHED' && (
+                    <Button variant="secondary" className="w-full" onClick={handleUnpublish} loading={saving}>
+                      Unpublish
+                    </Button>
+                  )}
+                </div>
+              </div>
+
+              {sidebarFields.length > 0 && (
+                <div className="rounded-lg border border-[var(--border)] bg-[var(--card)] p-4">
+                  <h3 className="mb-4 font-semibold">Metadata</h3>
+                  {sidebarFields.map((field: any) => (
+                    <div key={field.name} className="mb-4">
+                      <FieldRenderer
+                        field={field}
+                        value={values[field.name]}
+                        onChange={(val) => handleFieldChange(field.name, val)}
+                      />
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              <SEOPanel
+                title={values[useAsTitleField] ?? values.title ?? ''}
+                slug={docSlug}
+                content={htmlContent}
+                seoData={seoData}
+                onChange={setSeoData}
+                siteUrl={config?.siteUrl}
+              />
+            </div>
+          </div>
+          )}
+
+          <div className="sticky bottom-0 flex items-center justify-end gap-3 border-t border-[var(--border)] bg-[var(--background)] px-4 py-3">
+            <Button variant="secondary" onClick={() => onNavigate?.(`/${collectionSlug}`)}>Cancel</Button>
+            <Button variant="primary" loading={saving} onClick={handleSave} data-shortcut="save">
+              <Save className="h-4 w-4 mr-1.5" />
+              {isNew ? 'Create' : 'Save Changes'}
+            </Button>
+          </div>
+        </div>
+
+        {showPreview && (
+          <LivePreview
+            collection={collectionSlug}
+            documentId={documentId}
+            previewUrl={previewUrl}
+            values={values}
+            onClose={() => setShowPreview(false)}
+          />
+        )}
+      </div>
+
+      {!isNew && documentId && (
+        <VersionHistory
+          collectionSlug={collectionSlug}
+          documentId={documentId}
+          open={showVersions}
+          onClose={() => setShowVersions(false)}
+          onRestore={(data) => {
+            const restoredData = data as Record<string, any>;
+            setValues(restoredData);
+            setInitialValues(restoredData);
+          }}
+        />
+      )}
+    </div>
+  );
+}