create-nextblock 0.0.1

package/templates/nextblock-template/app/cms/pages/actions.ts

@@ -0,0 +1,241 @@
+// app/cms/pages/actions.ts
+"use server";
+
+import { createClient } from "@nextblock-cms/db/server";
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+import type { Database } from "@nextblock-cms/db";
+import { v4 as uuidv4 } from 'uuid';
+
+type PageStatus = Database['public']['Enums']['page_status'];
+import { encodedRedirect } from "@nextblock-cms/utils/server";
+import { getFullPageContent } from "../revisions/utils";
+import { createPageRevision } from "../revisions/service";
+
+// --- createPage and updatePage functions remain unchanged ---
+
+export async function createPage(formData: FormData) {
+  const supabase = createClient();
+  const { data: { user } } = await supabase.auth.getUser();
+  if (!user) return encodedRedirect("error", "/cms/pages/new", "User not authenticated.");
+
+
+  const rawFormData = {
+    title: formData.get("title") as string,
+    slug: formData.get("slug") as string,
+    language_id: parseInt(formData.get("language_id") as string, 10),
+    status: formData.get("status") as PageStatus,
+    meta_title: formData.get("meta_title") as string || null,
+    meta_description: formData.get("meta_description") as string || null,
+  };
+
+  if (!rawFormData.title || !rawFormData.slug || isNaN(rawFormData.language_id) || !rawFormData.status) {
+    return encodedRedirect("error", "/cms/pages/new", "Missing required fields: title, slug, language, or status.");
+  }
+
+  const translation_group_id = formData.get("translation_group_id") as string || uuidv4();
+
+  // Check if a translation for this language already exists
+  if (formData.get("translation_group_id")) {
+    const { data: existingTranslation, error: checkError } = await supabase
+      .from("pages")
+      .select("id")
+      .eq("translation_group_id", formData.get("translation_group_id") as string)
+      .eq("language_id", rawFormData.language_id)
+      .maybeSingle();
+
+    if (checkError) {
+      console.error("Error checking for existing translation:", checkError);
+      // Decide if we should halt or just log. For now, we'll proceed.
+    }
+
+    if (existingTranslation) {
+      // A translation for this language already exists, redirect to its edit page.
+      redirect(`/cms/pages/${existingTranslation.id}/edit?warning=${encodeURIComponent("A page for this language already exists. You are now editing it.")}`);
+    }
+  }
+ 
+   const pageData: UpsertPagePayload = {
+     ...rawFormData,
+     author_id: user.id,
+     translation_group_id: translation_group_id,
+   };
+ 
+   const { data: newPage, error: createError } = await supabase
+     .from("pages")
+     .insert(pageData)
+     .select("id, title, slug, language_id, translation_group_id")
+     .single();
+
+  if (createError) {
+    console.error("Error creating page:", createError);
+    if (createError.code === '23505' && createError.message.includes('pages_language_id_slug_key')) {
+        return encodedRedirect("error", "/cms/pages/new", `The slug "${pageData.slug}" already exists for the selected language. Please use a unique slug.`);
+    }
+    return encodedRedirect("error", "/cms/pages/new", `Failed to create page: ${createError.message}`);
+  }
+
+  revalidatePath("/cms/pages");
+  if (newPage?.slug) revalidatePath(`/${newPage.slug}`);
+
+  if (newPage?.id) {
+    redirect(`/cms/pages/${newPage.id}/edit?success=${encodeURIComponent("Page created successfully.")}`);
+  } else {
+    redirect(`/cms/pages?success=${encodeURIComponent("Page created successfully.")}`);
+  }
+}
+
+export async function updatePage(pageId: number, formData: FormData) {
+  const supabase = createClient();
+  const { data: { user } } = await supabase.auth.getUser();
+  const pageEditPath = `/cms/pages/${pageId}/edit`;
+
+  if (!user) return encodedRedirect("error", pageEditPath, "User not authenticated.");
+
+  const { data: existingPage, error: fetchError } = await supabase
+    .from("pages")
+    .select("translation_group_id, slug")
+    .eq("id", pageId)
+    .single();
+
+  if (fetchError || !existingPage) {
+    return encodedRedirect("error", "/cms/pages", "Original page not found or error fetching it.");
+  }
+
+  const rawFormData = {
+    title: formData.get("title") as string,
+    slug: formData.get("slug") as string,
+    language_id: parseInt(formData.get("language_id") as string, 10),
+    status: formData.get("status") as PageStatus,
+    meta_title: formData.get("meta_title") as string || null,
+    meta_description: formData.get("meta_description") as string || null,
+  };
+
+  if (!rawFormData.title || !rawFormData.slug || isNaN(rawFormData.language_id) || !rawFormData.status) {
+     return encodedRedirect("error", pageEditPath, "Missing required fields: title, slug, language, or status.");
+  }
+
+  const pageUpdateData: Partial<Omit<UpsertPagePayload, 'translation_group_id' | 'author_id'>> = {
+    title: rawFormData.title,
+    slug: rawFormData.slug,
+    language_id: rawFormData.language_id,
+    status: rawFormData.status,
+    meta_title: rawFormData.meta_title,
+    meta_description: rawFormData.meta_description,
+  };
+
+  // capture previous full content before update
+  const previousContent = await getFullPageContent(pageId);
+
+  const { error: updateError } = await supabase
+    .from("pages")
+    .update(pageUpdateData)
+    .eq("id", pageId);
+
+  if (updateError) {
+    console.error("Error updating page:", updateError);
+     if (updateError.code === '23505' && updateError.message.includes('pages_language_id_slug_key')) {
+        return encodedRedirect("error", pageEditPath, `The slug "${pageUpdateData.slug}" already exists for the selected language. Please use a unique slug.`);
+    }
+    return encodedRedirect("error", pageEditPath, `Failed to update page: ${updateError.message}`);
+  }
+
+  // create revision after update
+  if (previousContent && user) {
+    const newContent = await getFullPageContent(pageId);
+    if (newContent) {
+      await createPageRevision(pageId, user.id, previousContent, newContent);
+    }
+  }
+
+  revalidatePath("/cms/pages");
+  if (existingPage.slug) revalidatePath(`/${existingPage.slug}`);
+  if (rawFormData.slug && rawFormData.slug !== existingPage.slug) {
+      revalidatePath(`/${rawFormData.slug}`);
+  }
+  revalidatePath(pageEditPath);
+  redirect(`${pageEditPath}?success=Page updated successfully`);
+}
+
+
+export async function deletePage(pageId: number) {
+  const supabase = createClient();
+
+  // 1. Fetch the Translation Group
+  const { data: page, error: fetchError } = await supabase
+    .from("pages")
+    .select("translation_group_id")
+    .eq("id", pageId)
+    .single();
+
+  if (fetchError || !page) {
+    console.error("Error fetching page for deletion:", fetchError);
+    return encodedRedirect("error", "/cms/pages", "Page not found.");
+  }
+
+  const { translation_group_id } = page;
+
+  // 2. Find All Related Pages
+  const { data: relatedPages, error: relatedPagesError } = await supabase
+    .from("pages")
+    .select("slug")
+    .eq("translation_group_id", translation_group_id);
+
+  if (relatedPagesError) {
+    console.error("Error fetching related pages:", relatedPagesError);
+    return encodedRedirect("error", "/cms/pages", "Could not fetch related pages for deletion.");
+  }
+
+  // 3. Delete All Associated Navigation Links
+  if (relatedPages && relatedPages.length > 0) {
+    const slugs = relatedPages.map(p => p.slug).filter((s): s is string => s !== null);
+    if (slugs.length > 0) {
+        const pathsToDelete = slugs.map(slug => `/${slug}`);
+        const { error: navError } = await supabase
+          .from("navigation_items")
+          .delete()
+          .in("url", pathsToDelete);
+
+        if (navError) {
+          console.error("Error deleting navigation links:", navError);
+          // Do not block deletion of pages if nav items fail to delete
+        }
+    }
+  }
+
+  // 4. Delete All Related Pages
+  const { error: deletePagesError } = await supabase
+    .from("pages")
+    .delete()
+    .eq("translation_group_id", translation_group_id);
+
+  if (deletePagesError) {
+    console.error("Error deleting pages:", deletePagesError);
+    return encodedRedirect("error", "/cms/pages", `Failed to delete pages: ${deletePagesError.message}`);
+  }
+
+  // Revalidate paths to reflect the deletion
+  revalidatePath("/cms/pages");
+  revalidatePath("/cms/navigation");
+  if (relatedPages) {
+    relatedPages.forEach(p => {
+      if (p.slug) {
+        revalidatePath(`/${p.slug}`);
+      }
+    });
+  }
+
+  // 5. Update Redirect Message
+  redirect(`/cms/pages?success=${encodeURIComponent("Page and all its translations were deleted successfully.")}`);
+}
+
+type UpsertPagePayload = {
+  language_id: number;
+  author_id: string | null;
+  title: string;
+  slug: string; // Now language-specific
+  status: PageStatus;
+  meta_title?: string | null;
+  meta_description?: string | null;
+  translation_group_id: string; // UUID
+};

package/templates/nextblock-template/app/cms/pages/components/DeletePageButtonClient.tsx

@@ -0,0 +1,47 @@
+// app/cms/pages/components/DeletePageButtonClient.tsx
+"use client";
+
+import React, { useState, useTransition } from 'react';
+import { DropdownMenuItem } from "@nextblock-cms/ui";
+import { Trash2 } from "lucide-react";
+import { deletePage } from "../actions";
+import { ConfirmationModal } from '@/app/cms/components/ConfirmationModal';
+
+interface DeletePageButtonClientProps {
+  pageId: number;
+  pageTitle: string;
+}
+
+export default function DeletePageButtonClient({ pageId, pageTitle }: DeletePageButtonClientProps) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isPending, startTransition] = useTransition();
+
+  const handleDelete = () => {
+    startTransition(() => {
+      deletePage(pageId);
+    });
+  };
+
+  return (
+    <>
+      <DropdownMenuItem
+        className="text-red-600 hover:!text-red-600 hover:!bg-red-50 dark:hover:!bg-red-700/20 cursor-pointer"
+        onSelect={(e) => {
+          e.preventDefault();
+          setIsModalOpen(true);
+        }}
+      >
+        <Trash2 className="mr-2 h-4 w-4" />
+        Delete
+      </DropdownMenuItem>
+      <ConfirmationModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        onConfirm={handleDelete}
+        title="Are you sure?"
+        description={`This will permanently delete the page '${pageTitle}'. This action cannot be undone.`}
+        confirmText={isPending ? "Deleting..." : "Delete"}
+      />
+    </>
+  );
+}

package/templates/nextblock-template/app/cms/pages/components/PageForm.tsx

@@ -0,0 +1,253 @@
+// app/cms/pages/components/PageForm.tsx
+"use client";
+
+import { useEffect, useState, useTransition } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Button } from "@nextblock-cms/ui";
+import { Input } from "@nextblock-cms/ui";
+import { Label } from "@nextblock-cms/ui";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@nextblock-cms/ui";
+import { Textarea } from "@nextblock-cms/ui";
+import type { Database } from "@nextblock-cms/db";
+import { useAuth } from "@/context/AuthContext";
+
+type Page = Database['public']['Tables']['pages']['Row'];
+type PageStatus = Database['public']['Enums']['page_status'];
+type Language = Database['public']['Tables']['languages']['Row'];
+// Remove: import { getActiveLanguagesClientSide } from "@nextblock-cms/db";
+
+interface PageFormProps {
+  page?: Page | null;
+  formAction: (formData: FormData) => Promise<{ error?: string } | void>;
+  actionButtonText?: string;
+  isEditing?: boolean;
+  availableLanguagesProp: Language[]; // New prop
+  translationGroupId?: string;
+  target_lang_id?: string;
+}
+
+export default function PageForm({
+  page,
+  formAction,
+  actionButtonText = "Save Page",
+  isEditing = false,
+  availableLanguagesProp, // Use the new prop
+  translationGroupId,
+  target_lang_id,
+}: PageFormProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [isPending, startTransition] = useTransition();
+  const { user, isLoading: authLoading } = useAuth();
+
+  const [title, setTitle] = useState(page?.title || "");
+  const [slug, setSlug] = useState(page?.slug || "");
+  const [languageId, setLanguageId] = useState<string>(() => {
+    // If editing, use the page's language
+    if (page?.language_id) {
+      return page.language_id.toString();
+    }
+    // If creating a translation, use the target language
+    if (target_lang_id) {
+      return target_lang_id;
+    }
+    // Otherwise, find the default language from the available languages
+    if (availableLanguagesProp && availableLanguagesProp.length > 0) {
+      const defaultLang = availableLanguagesProp.find((l) => l.is_default);
+      if (defaultLang) {
+        return defaultLang.id.toString();
+      }
+      // As a fallback, use the first available language
+      return availableLanguagesProp[0].id.toString();
+    }
+    // If no languages are available, default to an empty string
+    return "";
+  });
+  const [status, setStatus] = useState<PageStatus>(page?.status || "draft");
+  const [metaTitle, setMetaTitle] = useState(page?.meta_title || "");
+  const [metaDescription, setMetaDescription] = useState(
+    page?.meta_description || ""
+  );
+
+  // Use the passed-in languages
+  const [availableLanguages] = useState<Language[]>(availableLanguagesProp);
+  // languagesLoading is no longer needed if languages are passed as props
+  // const [languagesLoading, setLanguagesLoading] = useState(true); // Remove or set to false initially
+
+  const [formMessage, setFormMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
+
+  useEffect(() => {
+    const successMessage = searchParams.get('success');
+    const errorMessage = searchParams.get('error');
+    if (successMessage) {
+      setFormMessage({ type: 'success', text: successMessage });
+    } else if (errorMessage) {
+      setFormMessage({ type: 'error', text: errorMessage });
+    }
+  }, [searchParams]);
+
+
+
+  const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newTitle = e.target.value;
+    setTitle(newTitle);
+    if (!isEditing || !slug) {
+      setSlug(newTitle.toLowerCase().replace(/\s+/g, "-").replace(/[^\w-]+/g, ""));
+    }
+  };
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setFormMessage(null);
+    const formData = new FormData(event.currentTarget);
+
+    startTransition(async () => {
+      const result = await formAction(formData);
+      if (result?.error) {
+        setFormMessage({ type: 'error', text: result.error });
+      }
+    });
+  };
+
+  // Removed languagesLoading from this condition
+  if (authLoading) {
+    return <div>Loading form...</div>;
+  }
+
+  if (!user) {
+    return <div>Please log in to manage pages.</div>;
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6 w-full mx-auto px-6">
+      {/* ... (rest of the form remains the same, but `availableLanguages` is now populated by the prop) ... */}
+      {formMessage && (
+        <div
+          className={`p-3 rounded-md text-sm ${
+            formMessage.type === 'success'
+              ? 'bg-green-100 text-green-700 border border-green-200'
+              : 'bg-red-100 text-red-700 border border-red-200'
+          }`}
+        >
+          {formMessage.text}
+        </div>
+      )}
+      {translationGroupId && (
+        <input type="hidden" name="translation_group_id" value={translationGroupId} />
+      )}
+      <div>
+        <Label htmlFor="title">Title</Label>
+        <Input
+          id="title"
+          name="title"
+          value={title}
+          onChange={handleTitleChange}
+          required
+          className="mt-1"
+        />
+      </div>
+
+      <div>
+        <Label htmlFor="slug">Slug</Label>
+        <Input
+          id="slug"
+          name="slug"
+          value={slug}
+          onChange={(e) => setSlug(e.target.value)}
+          required
+          className="mt-1"
+        />
+        <p className="text-xs text-muted-foreground mt-1">URL-friendly identifier. Auto-generated from title if left empty on creation.</p>
+      </div>
+
+      <div>
+        <Label htmlFor="language_id">Language</Label>
+        {availableLanguages.length > 0 ? (
+          <Select
+            name="language_id"
+            defaultValue={target_lang_id}
+            value={languageId}
+            onValueChange={setLanguageId}
+            required
+          >
+            <SelectTrigger className="mt-1">
+              <SelectValue placeholder="Select language" />
+            </SelectTrigger>
+            <SelectContent>
+              {availableLanguages.map((lang) => (
+                <SelectItem key={lang.id} value={lang.id.toString()}>
+                  {lang.name} ({lang.code})
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        ) : (
+          <p className="text-sm text-muted-foreground mt-1">No languages available. Please add languages in CMS settings.</p>
+        )}
+      </div>
+
+      <div>
+        <Label htmlFor="status">Status</Label>
+        <Select
+          name="status"
+          value={status}
+          onValueChange={(value) => setStatus(value as PageStatus)}
+          required
+        >
+          <SelectTrigger className="mt-1">
+            <SelectValue placeholder="Select status" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="draft">Draft</SelectItem>
+            <SelectItem value="published">Published</SelectItem>
+            <SelectItem value="archived">Archived</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div>
+        <Label htmlFor="meta_title">Meta Title (SEO)</Label>
+        <Input
+          id="meta_title"
+          name="meta_title"
+          value={metaTitle}
+          onChange={(e) => setMetaTitle(e.target.value)}
+          className="mt-1"
+        />
+      </div>
+
+      <div>
+        <Label htmlFor="meta_description">Meta Description (SEO)</Label>
+        <Textarea
+          id="meta_description"
+          name="meta_description"
+          value={metaDescription}
+          onChange={(e) => setMetaDescription(e.target.value)}
+          className="mt-1"
+          rows={3}
+        />
+      </div>
+
+      <div className="flex justify-end space-x-3">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={() => router.push("/cms/pages")}
+          disabled={isPending}
+        >
+          Cancel
+        </Button>
+        {/* Ensure button is not disabled due to removed languagesLoading */}
+        <Button type="submit" disabled={isPending || authLoading || availableLanguages.length === 0}>
+          {isPending ? "Saving..." : actionButtonText}
+        </Button>
+      </div>
+    </form>
+  );
+}

package/templates/nextblock-template/app/cms/pages/new/page.tsx

@@ -0,0 +1,52 @@
+// app/cms/pages/new/page.tsx
+import PageForm from "../components/PageForm";
+import { createPage } from "../actions"; // Server action for creating a page
+import { createClient } from "@nextblock-cms/db/server";
+import type { Database } from "@nextblock-cms/db";
+
+type Language = Database['public']['Tables']['languages']['Row'];
+
+interface NewPageProps {
+  searchParams?: Promise<{
+    from_group?: string | string[];
+    target_lang_id?: string | string[];
+  }>;
+}
+
+export default async function NewPage(props: NewPageProps) {
+  const searchParams = (await props.searchParams) || {};
+  const supabase = createClient();
+  const { data: fetchedLanguages, error: languagesError } = await supabase
+    .from("languages")
+    .select("*")
+    .order("name");
+
+  if (languagesError) {
+    console.error("Error fetching languages for NewPage:", languagesError.message);
+    // Optionally, you could redirect or show a more user-friendly error
+  }
+
+  const availableLanguages: Language[] = fetchedLanguages || [];
+
+  return (
+    <div className="max-w-2xl mx-auto">
+      <h1 className="text-2xl font-bold mb-6">Create New Page</h1>
+      <PageForm
+        formAction={createPage}
+        actionButtonText="Create Page"
+        isEditing={false}
+        availableLanguagesProp={availableLanguages}
+        translationGroupId={
+          Array.isArray(searchParams.from_group)
+            ? searchParams.from_group[0]
+            : searchParams.from_group
+        }
+        target_lang_id={
+          Array.isArray(searchParams.target_lang_id)
+            ? searchParams.target_lang_id[0]
+            : searchParams.target_lang_id
+        }
+      />
+    </div>
+  );
+}