498 lines
17 KiB
TypeScript
498 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { useSearchParams } from "next/navigation";
|
|
import {
|
|
FileText,
|
|
FolderPlus,
|
|
Hash,
|
|
Layers3,
|
|
Pencil,
|
|
ShieldCheck,
|
|
ShieldOff,
|
|
Text,
|
|
Trash2,
|
|
} from "lucide-react";
|
|
|
|
import type { deleteCategoryAction, upsertCategoryAction } from "@/app/_admin/portfolio/actions";
|
|
import { AppCard } from "@/components/ui/app-card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { CardContent } from "@/components/ui/card";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import type { PortfolioCategoryView } from "@/lib/portfolio";
|
|
|
|
const locales = [
|
|
{ key: "Ar", label: "Arabic" },
|
|
{ key: "En", label: "English" },
|
|
{ key: "De", label: "German" },
|
|
] as const;
|
|
|
|
const copy = {
|
|
addCategory: "Add Category",
|
|
saveCategory: "Save Category",
|
|
save: "Save",
|
|
delete: "Delete",
|
|
active: "Active",
|
|
sortOrder: "Sort Order",
|
|
projects: "Projects",
|
|
description: "Description",
|
|
currentCategories: "Current Categories",
|
|
modalDescription: "Create a new category with a faster flow for basics, localization, and status.",
|
|
editDescription: "Update category content, change status, or remove the category if it has no assigned projects.",
|
|
empty: "No categories yet.",
|
|
deleteBlocked: "Delete becomes available only when no projects are assigned.",
|
|
editCategory: "Edit Category",
|
|
visibilityActive: "Visible on public portfolio filters.",
|
|
visibilityInactive: "Hidden from public portfolio filters.",
|
|
statusSection: "Visibility & Status",
|
|
statusHint: "Control whether the category can be assigned and shown publicly.",
|
|
};
|
|
|
|
type CategoryAction = typeof upsertCategoryAction;
|
|
type CategoryDeleteAction = typeof deleteCategoryAction;
|
|
|
|
type CategoryFormValues = {
|
|
slug?: string;
|
|
sortOrder?: number;
|
|
isActive?: boolean;
|
|
nameAr?: string;
|
|
nameEn?: string;
|
|
nameDe?: string;
|
|
descriptionAr?: string;
|
|
descriptionEn?: string;
|
|
descriptionDe?: string;
|
|
};
|
|
|
|
type PortfolioCategoriesManagerProps = {
|
|
categories: Array<PortfolioCategoryView & { projectCount: number }>;
|
|
activeCount: number;
|
|
assignedProjects: number;
|
|
saveCategoryAction: CategoryAction;
|
|
removeCategoryAction: CategoryDeleteAction;
|
|
};
|
|
|
|
function CategoryLocaleFields({
|
|
idPrefix,
|
|
values,
|
|
}: {
|
|
idPrefix: string;
|
|
values?: CategoryFormValues;
|
|
}) {
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-semibold text-foreground">Localized Content</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Keep names and descriptions ready in all supported locales.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-4 xl:grid-cols-3">
|
|
{locales.map((locale) => {
|
|
const nameKey = `name${locale.key}` as const;
|
|
const descriptionKey = `description${locale.key}` as const;
|
|
|
|
return (
|
|
<AppCard key={`${idPrefix}-${locale.key}`} level={2} padding="sm" className="space-y-4 rounded-nested">
|
|
<p className="text-sm font-medium text-foreground">{locale.label}</p>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor={`${idPrefix}-${nameKey}`}>Name</Label>
|
|
<div className="relative">
|
|
<Text className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
id={`${idPrefix}-${nameKey}`}
|
|
name={nameKey}
|
|
defaultValue={values?.[nameKey] ?? ""}
|
|
required
|
|
placeholder={`Name ${locale.label}`}
|
|
className="pl-9"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor={`${idPrefix}-${descriptionKey}`}>{copy.description}</Label>
|
|
<div className="relative">
|
|
<FileText className="pointer-events-none absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
|
<Textarea
|
|
id={`${idPrefix}-${descriptionKey}`}
|
|
name={descriptionKey}
|
|
rows={5}
|
|
defaultValue={values?.[descriptionKey] ?? ""}
|
|
required
|
|
placeholder={`${copy.description} ${locale.label}`}
|
|
className="pl-9"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</AppCard>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CategoryStatusFields({
|
|
formId,
|
|
values,
|
|
}: {
|
|
formId: string;
|
|
values?: CategoryFormValues;
|
|
}) {
|
|
const isActive = values?.isActive ?? true;
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-semibold text-foreground">{copy.statusSection}</p>
|
|
<p className="text-sm text-muted-foreground">{copy.statusHint}</p>
|
|
</div>
|
|
|
|
<div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_220px]">
|
|
<AppCard level={2} padding="sm" className="rounded-nested">
|
|
<div className="flex items-start gap-3">
|
|
{isActive ? (
|
|
<ShieldCheck className="mt-0.5 h-4 w-4 text-status-success" />
|
|
) : (
|
|
<ShieldOff className="mt-0.5 h-4 w-4 text-status-warning" />
|
|
)}
|
|
<div className="space-y-2">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<p className="text-sm font-medium text-foreground">{copy.active}</p>
|
|
<Badge variant={isActive ? "success" : "warning"}>
|
|
{isActive ? "Public" : "Hidden"}
|
|
</Badge>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
{isActive ? copy.visibilityActive : copy.visibilityInactive}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</AppCard>
|
|
|
|
<label
|
|
htmlFor={`${formId}-isActive`}
|
|
className="flex items-center gap-3 rounded-nested border border-input bg-card px-4 py-3 text-sm"
|
|
>
|
|
<Checkbox id={`${formId}-isActive`} name="isActive" defaultChecked={isActive} />
|
|
{copy.active}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CategoryForm({
|
|
formId,
|
|
action,
|
|
values,
|
|
categoryId,
|
|
}: {
|
|
formId: string;
|
|
action: CategoryAction;
|
|
values?: CategoryFormValues;
|
|
categoryId?: string;
|
|
}) {
|
|
return (
|
|
<form id={formId} action={action} className="space-y-6">
|
|
{categoryId ? <input type="hidden" name="id" value={categoryId} /> : null}
|
|
<input type="hidden" name="redirectPath" value="/portfolio/categories" />
|
|
|
|
<div className="space-y-4">
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-semibold text-foreground">Basics</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Set the stable identifier and display order first.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-4 lg:grid-cols-3">
|
|
<div className="space-y-2">
|
|
<Label htmlFor={`${formId}-slug`}>Slug</Label>
|
|
<div className="relative">
|
|
<Text className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
id={`${formId}-slug`}
|
|
name="slug"
|
|
defaultValue={values?.slug ?? ""}
|
|
required
|
|
placeholder="Slug"
|
|
className="pl-9"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor={`${formId}-sortOrder`}>{copy.sortOrder}</Label>
|
|
<div className="relative">
|
|
<Hash className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
id={`${formId}-sortOrder`}
|
|
name="sortOrder"
|
|
type="number"
|
|
min="0"
|
|
defaultValue={values?.sortOrder ?? 0}
|
|
required
|
|
className="pl-9"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<CategoryLocaleFields idPrefix={formId} values={values} />
|
|
|
|
<Separator />
|
|
|
|
<CategoryStatusFields formId={formId} values={values} />
|
|
</form>
|
|
);
|
|
}
|
|
|
|
function EditCategoryDialog({
|
|
category,
|
|
open,
|
|
onOpenChange,
|
|
saveCategoryAction,
|
|
removeCategoryAction,
|
|
}: {
|
|
category: PortfolioCategoriesManagerProps["categories"][number];
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
saveCategoryAction: CategoryAction;
|
|
removeCategoryAction: CategoryDeleteAction;
|
|
}) {
|
|
const formId = `portfolio-category-form-${category.id}`;
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="max-h-[90vh] max-w-5xl overflow-y-auto">
|
|
<DialogHeader>
|
|
<DialogTitle>{copy.editCategory}</DialogTitle>
|
|
<DialogDescription>{copy.editDescription}</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="grid gap-3 sm:grid-cols-3">
|
|
<AppCard level={2} padding="sm" className="rounded-nested">
|
|
<p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Projects</p>
|
|
<p className="mt-2 text-lg font-semibold text-foreground">{category.projectCount}</p>
|
|
</AppCard>
|
|
<AppCard level={2} padding="sm" className="rounded-nested">
|
|
<p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Status</p>
|
|
<div className="mt-2">
|
|
<Badge variant={category.isActive ? "success" : "warning"}>
|
|
{category.isActive ? "Public" : "Hidden"}
|
|
</Badge>
|
|
</div>
|
|
</AppCard>
|
|
<AppCard level={2} padding="sm" className="rounded-nested">
|
|
<p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Order</p>
|
|
<p className="mt-2 text-lg font-semibold text-foreground">{category.sortOrder}</p>
|
|
</AppCard>
|
|
</div>
|
|
|
|
<CategoryForm
|
|
formId={formId}
|
|
action={saveCategoryAction}
|
|
categoryId={category.id}
|
|
values={{
|
|
slug: category.slug,
|
|
sortOrder: category.sortOrder,
|
|
isActive: category.isActive,
|
|
nameAr: category.name.ar,
|
|
nameEn: category.name.en,
|
|
nameDe: category.name.de,
|
|
descriptionAr: category.description.ar,
|
|
descriptionEn: category.description.en,
|
|
descriptionDe: category.description.de,
|
|
}}
|
|
/>
|
|
|
|
<DialogFooter className="items-center justify-between sm:flex-row">
|
|
<p className="text-sm text-muted-foreground">
|
|
{category.projectCount > 0
|
|
? `Delete blocked. ${copy.deleteBlocked}`
|
|
: "Category can be deleted."}
|
|
</p>
|
|
<div className="flex w-full flex-col-reverse gap-2 sm:w-auto sm:flex-row">
|
|
<form action={removeCategoryAction}>
|
|
<input type="hidden" name="id" value={category.id} />
|
|
<input type="hidden" name="redirectPath" value="/portfolio/categories" />
|
|
<Button type="submit" variant="destructive" disabled={category.projectCount > 0}>
|
|
<Trash2 className="h-4 w-4" />
|
|
{copy.delete}
|
|
</Button>
|
|
</form>
|
|
<Button type="submit" form={formId}>
|
|
{copy.save}
|
|
</Button>
|
|
</div>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
export function PortfolioCategoriesManager({
|
|
categories,
|
|
activeCount,
|
|
assignedProjects,
|
|
saveCategoryAction,
|
|
removeCategoryAction,
|
|
}: PortfolioCategoriesManagerProps) {
|
|
const searchParams = useSearchParams();
|
|
const [createOpen, setCreateOpen] = useState(false);
|
|
const [editingCategoryId, setEditingCategoryId] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (searchParams.has("success")) {
|
|
setCreateOpen(false);
|
|
setEditingCategoryId(null);
|
|
}
|
|
}, [searchParams]);
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
|
<div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-muted-foreground">
|
|
<span>
|
|
Total:
|
|
{" "}
|
|
<span className="font-semibold text-foreground">{categories.length}</span>
|
|
</span>
|
|
<span>
|
|
Active:
|
|
{" "}
|
|
<span className="font-semibold text-foreground">{activeCount}</span>
|
|
</span>
|
|
<span>
|
|
Assigned:
|
|
{" "}
|
|
<span className="font-semibold text-foreground">{assignedProjects}</span>
|
|
</span>
|
|
</div>
|
|
|
|
<Dialog open={createOpen} onOpenChange={setCreateOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button>
|
|
<FolderPlus className="h-4 w-4" />
|
|
{copy.addCategory}
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="max-h-[90vh] max-w-5xl overflow-y-auto">
|
|
<DialogHeader>
|
|
<DialogTitle>{copy.addCategory}</DialogTitle>
|
|
<DialogDescription>{copy.modalDescription}</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<AppCard level={2} padding="sm" className="rounded-nested">
|
|
<div className="grid gap-3 sm:grid-cols-3">
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-medium text-foreground">1. Basics</p>
|
|
<p className="text-sm text-muted-foreground">Slug and sort order first.</p>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-medium text-foreground">2. Localization</p>
|
|
<p className="text-sm text-muted-foreground">Names and descriptions in all locales.</p>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-medium text-foreground">3. Visibility</p>
|
|
<p className="text-sm text-muted-foreground">Decide if the category is public or hidden.</p>
|
|
</div>
|
|
</div>
|
|
</AppCard>
|
|
|
|
<CategoryForm
|
|
formId="portfolio-category-create-form"
|
|
action={saveCategoryAction}
|
|
/>
|
|
|
|
<DialogFooter>
|
|
<Button type="submit" form="portfolio-category-create-form">
|
|
{copy.saveCategory}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
|
|
<AppCard level={3}>
|
|
<CardContent className="space-y-4 p-6">
|
|
<div className="flex items-center gap-3">
|
|
<Layers3 className="h-5 w-5 text-brand-primary" />
|
|
<h2 className="text-lg font-semibold text-foreground">{copy.currentCategories}</h2>
|
|
</div>
|
|
|
|
{categories.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">{copy.empty}</p>
|
|
) : (
|
|
<div className="grid gap-3">
|
|
{categories.map((category) => (
|
|
<AppCard
|
|
key={category.id}
|
|
level={2}
|
|
padding="sm"
|
|
className="rounded-nested"
|
|
>
|
|
<div className="flex min-w-0 flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
|
<div className="min-w-0 space-y-1">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className="truncate text-base font-semibold text-foreground">
|
|
{category.name.de || category.name.en || category.name.ar}
|
|
</span>
|
|
<Badge variant={category.isActive ? "success" : "warning"}>
|
|
{category.isActive ? "Active" : "Inactive"}
|
|
</Badge>
|
|
</div>
|
|
<div className="flex flex-wrap gap-x-3 gap-y-1 text-xs text-muted-foreground">
|
|
<span>{category.slug}</span>
|
|
<span>{copy.projects}: {category.projectCount}</span>
|
|
<span>{copy.sortOrder}: {category.sortOrder}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={() => setEditingCategoryId(category.id)}
|
|
>
|
|
<Pencil className="h-4 w-4" />
|
|
Edit
|
|
</Button>
|
|
</div>
|
|
|
|
<EditCategoryDialog
|
|
category={category}
|
|
open={editingCategoryId === category.id}
|
|
onOpenChange={(open) => setEditingCategoryId(open ? category.id : null)}
|
|
saveCategoryAction={saveCategoryAction}
|
|
removeCategoryAction={removeCategoryAction}
|
|
/>
|
|
</AppCard>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</AppCard>
|
|
</div>
|
|
);
|
|
}
|