693 lines
36 KiB
TypeScript
693 lines
36 KiB
TypeScript
import { useState } from "react";
|
|
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { fetchCategories, createCategory, updateCategory, deleteCategory, Category } from "@/modules/categories/client-categories";
|
|
import { toast } from "sonner";
|
|
import { Plus, Edit2, Trash2, FolderTree, Link as LinkIcon, Check, X, Loader2, Hash, Languages, Shield } from "lucide-react";
|
|
import { ACLEditorContent } from "@/modules/acl/ACLEditorContent";
|
|
import CollapsibleSection from "@/components/CollapsibleSection";
|
|
import { cn } from "@/lib/utils";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { T, translate } from "@/i18n";
|
|
import { VariablesEditor } from '@/components/variables/VariablesEditor';
|
|
import { updatePageMeta } from "@/modules/pages/client-pages";
|
|
import { fetchTypes } from "@/modules/types/client-types";
|
|
import { CategoryTranslationDialog } from "@/modules/i18n/CategoryTranslationDialog";
|
|
import { useAppConfig } from '@/hooks/useSystemInfo';
|
|
import { useAuth } from "@/hooks/useAuth";
|
|
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
|
|
interface CategoryManagerProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
currentPageId?: string; // If provided, allows linking page to category
|
|
currentPageMeta?: any;
|
|
onPageMetaUpdate?: (newMeta: any, newCategories?: Category[]) => void;
|
|
filterByType?: string; // Filter categories by meta.type (e.g., 'layout', 'page', 'email')
|
|
defaultMetaType?: string; // Default type to set in meta when creating new categories
|
|
/** Picker mode: simplified view for selecting categories */
|
|
mode?: 'manage' | 'pick';
|
|
/** Called in pick mode when user confirms selection */
|
|
onPick?: (categoryIds: string[], categories?: Category[]) => void;
|
|
/** Pre-selected category IDs for pick mode */
|
|
selectedCategoryIds?: string[];
|
|
/** If true, renders as a standalone view rather than a Dialog */
|
|
asView?: boolean;
|
|
}
|
|
|
|
export const CategoryManager = ({ isOpen, onClose, currentPageId, currentPageMeta, onPageMetaUpdate, filterByType, defaultMetaType, mode = 'manage', onPick, selectedCategoryIds: externalSelectedIds, asView }: CategoryManagerProps) => {
|
|
const [actionLoading, setActionLoading] = useState(false);
|
|
const { user } = useAuth();
|
|
const systemUserId = import.meta.env.VITE_SYSTEM_USER_ID;
|
|
const [ownershipTab, setOwnershipTab] = useState<'system'|'own'>('system');
|
|
|
|
// Entity Types selector state
|
|
const envTypes = import.meta.env.VITE_ENTITY_TYPES;
|
|
const ENTITY_TYPES = envTypes ? ['all', ...envTypes.split(',').map(s => s.trim())] : ['all', 'pages', 'posts', 'pictures', 'types', 'products'];
|
|
const [activeFilter, setActiveFilter] = useState<string>(filterByType || 'all');
|
|
|
|
// Selection state
|
|
const [selectedCategoryId, setSelectedCategoryId] = useState<string | null>(null);
|
|
|
|
// Picker mode state
|
|
const [pickerSelectedIds, setPickerSelectedIds] = useState<string[]>(externalSelectedIds || []);
|
|
|
|
// Editing/Creating state
|
|
const [editingCategory, setEditingCategory] = useState<Partial<Category> | null>(null);
|
|
const [isCreating, setIsCreating] = useState(false);
|
|
const [creationParentId, setCreationParentId] = useState<string | null>(null);
|
|
const [showVariablesEditor, setShowVariablesEditor] = useState(false);
|
|
const [showTranslationDialog, setShowTranslationDialog] = useState(false);
|
|
const appConfig = useAppConfig();
|
|
const srcLang = appConfig?.i18n?.source_language;
|
|
|
|
// Initial linked category from page meta
|
|
const getLinkedCategoryIds = (): string[] => {
|
|
if (!currentPageMeta) return [];
|
|
if (Array.isArray(currentPageMeta.categoryIds)) return currentPageMeta.categoryIds;
|
|
if (currentPageMeta.categoryId) return [currentPageMeta.categoryId];
|
|
return [];
|
|
};
|
|
|
|
const linkedCategoryIds = getLinkedCategoryIds();
|
|
|
|
// React Query Integration
|
|
const { data: categories = [], isLoading: loading } = useQuery({
|
|
queryKey: ['categories'],
|
|
queryFn: async () => {
|
|
const data = await fetchCategories({ includeChildren: true, sourceLang: srcLang });
|
|
// Only show root-level categories (those without a parent)
|
|
return data.filter(cat => !cat.parent_category_id);
|
|
}
|
|
});
|
|
|
|
const { data: types = [] } = useQuery({
|
|
queryKey: ['types', 'assignable'],
|
|
queryFn: async () => {
|
|
const allTypes = await fetchTypes();
|
|
// Filter for structures and aliases as requested
|
|
return allTypes.filter(t => t.kind === 'structure' || t.kind === 'alias');
|
|
}
|
|
});
|
|
|
|
const handleCreateStart = (parentId: string | null = null) => {
|
|
setIsCreating(true);
|
|
setCreationParentId(parentId);
|
|
setEditingCategory({
|
|
name: "",
|
|
slug: "",
|
|
description: "",
|
|
visibility: "public"
|
|
});
|
|
};
|
|
|
|
const handleEditStart = (category: Category) => {
|
|
setIsCreating(false);
|
|
setEditingCategory({ ...category });
|
|
};
|
|
|
|
const queryClient = useQueryClient();
|
|
|
|
const handleSave = async () => {
|
|
if (!editingCategory || !editingCategory.name || !editingCategory.slug) {
|
|
toast.error(translate("Name and Slug are required"));
|
|
return;
|
|
}
|
|
|
|
setActionLoading(true);
|
|
try {
|
|
if (isCreating) {
|
|
// Apply default meta type if provided
|
|
const categoryData: any = {
|
|
...editingCategory,
|
|
parentId: creationParentId || undefined,
|
|
relationType: 'generalization'
|
|
};
|
|
|
|
// Set meta.type if defaultMetaType is provided or derived from activeFilter
|
|
const targetType = defaultMetaType || (activeFilter !== 'all' ? activeFilter : undefined);
|
|
if (targetType) {
|
|
categoryData.meta = {
|
|
...(categoryData.meta || {}),
|
|
type: targetType
|
|
};
|
|
}
|
|
|
|
await createCategory(categoryData);
|
|
toast.success(translate("Category created"));
|
|
} else if (editingCategory.id) {
|
|
await updateCategory(editingCategory.id, editingCategory);
|
|
toast.success(translate("Category updated"));
|
|
}
|
|
setEditingCategory(null);
|
|
queryClient.invalidateQueries({ queryKey: ['categories'] });
|
|
} catch (error) {
|
|
console.error(error);
|
|
toast.error(isCreating ? translate("Failed to create category") : translate("Failed to update category"));
|
|
} finally {
|
|
setActionLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (id: string, e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
if (!confirm(translate("Are you sure you want to delete this category?"))) return;
|
|
|
|
setActionLoading(true);
|
|
try {
|
|
await deleteCategory(id);
|
|
toast.success(translate("Category deleted"));
|
|
queryClient.invalidateQueries({ queryKey: ['categories'] });
|
|
if (selectedCategoryId === id) setSelectedCategoryId(null);
|
|
} catch (error) {
|
|
console.error(error);
|
|
toast.error(translate("Failed to delete category"));
|
|
} finally {
|
|
setActionLoading(false);
|
|
}
|
|
};
|
|
|
|
// Helper to find category in tree
|
|
const findCategory = (id: string, cats: Category[]): Category | null => {
|
|
for (const cat of cats) {
|
|
if (cat.id === id) return cat;
|
|
if (cat.children) {
|
|
const found = cat.children.find(rel => rel.child.id === id)?.child;
|
|
if (found) return found; // Direct child match
|
|
|
|
// Deep search in children's children not strictly needed if flattened?
|
|
// Using recursive search on children
|
|
const deep = cat.children.map(c => findCategory(id, [c.child])).find(c => c);
|
|
if (deep) return deep;
|
|
}
|
|
}
|
|
return null;
|
|
};
|
|
|
|
// Flatten categories for easy lookup
|
|
const getAllCategoriesFlattened = (cats: Category[]): Category[] => {
|
|
let flat: Category[] = [];
|
|
cats.forEach(c => {
|
|
flat.push(c);
|
|
if (c.children) {
|
|
c.children.forEach(childRel => {
|
|
flat = [...flat, ...getAllCategoriesFlattened([childRel.child])];
|
|
});
|
|
}
|
|
});
|
|
return flat;
|
|
};
|
|
|
|
const handleLinkPage = async () => {
|
|
if (!currentPageId || !selectedCategoryId) return;
|
|
|
|
const currentIds = getLinkedCategoryIds();
|
|
if (currentIds.includes(selectedCategoryId)) return;
|
|
|
|
setActionLoading(true);
|
|
try {
|
|
const newIds = [...currentIds, selectedCategoryId];
|
|
const newMeta = { ...currentPageMeta, categoryIds: newIds, categoryId: null };
|
|
|
|
// Resolve category objects
|
|
const allCats = getAllCategoriesFlattened(categories);
|
|
const resolvedCategories = newIds.map(id => findCategory(id, categories) || allCats.find(c => c.id === id)).filter(Boolean) as Category[];
|
|
|
|
// Use callback if provided, otherwise fall back to updatePageMeta
|
|
if (onPageMetaUpdate) {
|
|
await onPageMetaUpdate(newMeta, resolvedCategories);
|
|
} else {
|
|
await updatePageMeta(currentPageId, { categoryIds: newIds, categoryId: null });
|
|
}
|
|
|
|
toast.success(translate("Added to category"));
|
|
} catch (error) {
|
|
console.error(error);
|
|
toast.error(translate("Failed to link"));
|
|
} finally {
|
|
setActionLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleUnlinkPage = async () => {
|
|
if (!currentPageId || !selectedCategoryId) return;
|
|
|
|
const currentIds = getLinkedCategoryIds();
|
|
if (!currentIds.includes(selectedCategoryId)) return;
|
|
|
|
setActionLoading(true);
|
|
try {
|
|
const newIds = currentIds.filter(id => id !== selectedCategoryId);
|
|
const newMeta = { ...currentPageMeta, categoryIds: newIds, categoryId: null };
|
|
|
|
// Resolve category objects
|
|
const allCats = getAllCategoriesFlattened(categories);
|
|
const resolvedCategories = newIds.map(id => findCategory(id, categories) || allCats.find(c => c.id === id)).filter(Boolean) as Category[];
|
|
|
|
// Use callback if provided, otherwise fall back to updatePageMeta
|
|
if (onPageMetaUpdate) {
|
|
await onPageMetaUpdate(newMeta, resolvedCategories);
|
|
} else {
|
|
await updatePageMeta(currentPageId, { categoryIds: newIds, categoryId: null });
|
|
}
|
|
|
|
toast.success(translate("Removed from category"));
|
|
} catch (error) {
|
|
console.error(error);
|
|
toast.error(translate("Failed to unlink"));
|
|
} finally {
|
|
setActionLoading(false);
|
|
}
|
|
};
|
|
|
|
// Picker mode: toggle category in selection
|
|
const togglePickerCategory = (catId: string) => {
|
|
setPickerSelectedIds(prev =>
|
|
prev.includes(catId) ? prev.filter(id => id !== catId) : [...prev, catId]
|
|
);
|
|
};
|
|
|
|
// Render Logic
|
|
const renderPickerItem = (cat: Category, level: number = 0): React.ReactNode => {
|
|
const isPicked = pickerSelectedIds.includes(cat.id);
|
|
return (
|
|
<div key={cat.id}>
|
|
<div
|
|
className={cn(
|
|
"flex items-center gap-2 p-2 rounded hover:bg-muted/50 cursor-pointer",
|
|
isPicked && "bg-primary/10"
|
|
)}
|
|
style={{ marginLeft: `${level * 16}px` }}
|
|
onClick={() => togglePickerCategory(cat.id)}
|
|
>
|
|
<Checkbox checked={isPicked} onCheckedChange={() => togglePickerCategory(cat.id)} />
|
|
<FolderTree className="h-3 w-3 text-muted-foreground opacity-50" />
|
|
<span className={cn("text-sm", isPicked && "font-semibold text-primary")}>{cat.name}</span>
|
|
</div>
|
|
{cat.children
|
|
?.filter(childRel => activeFilter === 'all' || (childRel.child as any).meta?.type === activeFilter)
|
|
.map(childRel => renderPickerItem(childRel.child, level + 1))
|
|
}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const renderCategoryItem = (cat: Category, level: number = 0) => {
|
|
const isSelected = selectedCategoryId === cat.id;
|
|
const isLinked = linkedCategoryIds.includes(cat.id);
|
|
|
|
return (
|
|
<div key={cat.id}>
|
|
<div
|
|
className={cn(
|
|
"flex items-center justify-between p-2 rounded hover:bg-muted/50 cursor-pointer group",
|
|
isSelected && "bg-muted",
|
|
isLinked && !isSelected && "bg-primary/5"
|
|
)}
|
|
style={{ marginLeft: `${level * 16}px` }}
|
|
onClick={() => {
|
|
setSelectedCategoryId(cat.id);
|
|
}}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
{isLinked ? (
|
|
<Check className="h-4 w-4 text-primary" />
|
|
) : (
|
|
<FolderTree className="h-3 w-3 text-muted-foreground opacity-50" />
|
|
)}
|
|
<span className={cn("text-sm", isLinked && "font-semibold text-primary")}>{cat.name}</span>
|
|
<span className="text-xs text-muted-foreground">({cat.slug})</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<Button variant="ghost" size="icon" className="h-6 w-6" onClick={(e) => { e.stopPropagation(); handleCreateStart(cat.id); }}>
|
|
<Plus className="h-3 w-3" />
|
|
</Button>
|
|
<Button variant="ghost" size="icon" className="h-6 w-6" onClick={(e) => { e.stopPropagation(); handleEditStart(cat); }}>
|
|
<Edit2 className="h-3 w-3" />
|
|
</Button>
|
|
<Button variant="ghost" size="icon" className="h-6 w-6 text-destructive" onClick={(e) => handleDelete(cat.id, e)}>
|
|
<Trash2 className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
{cat.children
|
|
?.filter(childRel => activeFilter === 'all' || (childRel.child as any).meta?.type === activeFilter)
|
|
.map(childRel => renderCategoryItem(childRel.child, level + 1))
|
|
}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Picker mode: simplified dialog
|
|
if (mode === 'pick') {
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
|
<DialogContent className="max-w-lg max-h-[70vh] flex flex-col">
|
|
<DialogHeader>
|
|
<DialogTitle><T>Select Categories</T></DialogTitle>
|
|
<DialogDescription>
|
|
<T>Choose one or more categories for your page.</T>
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="px-1 py-2">
|
|
<Tabs value={ownershipTab} onValueChange={(val: any) => setOwnershipTab(val)} className="w-full">
|
|
<TabsList className="h-8 w-full justify-start rounded-md bg-muted p-1">
|
|
<TabsTrigger value="system" className="text-xs px-4 py-1"><T>System</T></TabsTrigger>
|
|
<TabsTrigger value="own" className="text-xs px-4 py-1"><T>Own</T></TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto min-h-0 border rounded-md p-2">
|
|
{loading ? (
|
|
<div className="flex justify-center p-4"><Loader2 className="h-6 w-6 animate-spin" /></div>
|
|
) : (
|
|
<div className="space-y-1">
|
|
{categories
|
|
.filter(cat => ownershipTab === 'system' ? cat.owner_id === systemUserId : cat.owner_id === user?.id)
|
|
.map(cat => renderPickerItem(cat))}
|
|
{categories.filter(cat => ownershipTab === 'system' ? cat.owner_id === systemUserId : cat.owner_id === user?.id).length === 0 && <div className="text-center text-sm text-muted-foreground py-8"><T>No categories found.</T></div>}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={onClose}><T>Cancel</T></Button>
|
|
<Button onClick={() => { onPick?.(pickerSelectedIds, categories.flatMap(c => [c, ...(c.children || []).map(r => r.child)])); onClose(); }}><T>Done</T></Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
const innerContent = (
|
|
<>
|
|
<div className={asView ? "mb-4" : "mb-4"}>
|
|
{asView ? (
|
|
<div>
|
|
<h2 className="text-lg font-semibold"><T>Category Manager</T></h2>
|
|
<p className="text-sm text-muted-foreground"><T>Manage categories and organize your content structure.</T></p>
|
|
</div>
|
|
) : (
|
|
<DialogHeader>
|
|
<DialogTitle><T>Category Manager</T></DialogTitle>
|
|
<DialogDescription>
|
|
<T>Manage categories and organize your content structure.</T>
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex-1 flex flex-col md:flex-row gap-4 min-h-0">
|
|
{/* Left: Category Tree */}
|
|
<div className="flex-1 border rounded-md p-2 overflow-y-auto min-h-0 basis-[60%] md:basis-auto">
|
|
<div className="flex justify-between items-center mb-2 px-2 gap-2">
|
|
<Tabs value={ownershipTab} onValueChange={(val: any) => setOwnershipTab(val)} className="-ml-2">
|
|
<TabsList className="h-8 bg-transparent">
|
|
<TabsTrigger value="system" className="text-xs px-3 py-1 data-[state=active]:bg-muted"><T>System</T></TabsTrigger>
|
|
<TabsTrigger value="own" className="text-xs px-3 py-1 data-[state=active]:bg-muted"><T>Own</T></TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
<div className="flex items-center gap-2">
|
|
{(!filterByType) && (
|
|
<Select value={activeFilter} onValueChange={setActiveFilter}>
|
|
<SelectTrigger className="h-8 w-[120px]">
|
|
<SelectValue placeholder="Type..." />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{ENTITY_TYPES.map(t => (
|
|
<SelectItem key={t} value={t}><T>{t === 'all' ? 'All Types' : t.charAt(0).toUpperCase() + t.slice(1)}</T></SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
)}
|
|
<Button variant="ghost" size="sm" onClick={() => handleCreateStart(null)}>
|
|
<Plus className="h-3 w-3 mr-1" />
|
|
<T>Root Category</T>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
{loading ? (
|
|
<div className="flex justify-center p-4"><Loader2 className="h-6 w-6 animate-spin" /></div>
|
|
) : (
|
|
<div className="space-y-1">
|
|
{categories
|
|
.filter(cat => activeFilter === 'all' || (cat as any).meta?.type === activeFilter)
|
|
.filter(cat => ownershipTab === 'system' ? cat.owner_id === systemUserId : cat.owner_id === user?.id)
|
|
.map(cat => renderCategoryItem(cat))}
|
|
{categories
|
|
.filter(cat => activeFilter === 'all' || (cat as any).meta?.type === activeFilter)
|
|
.filter(cat => ownershipTab === 'system' ? cat.owner_id === systemUserId : cat.owner_id === user?.id)
|
|
.length === 0 && <div className="text-center text-sm text-muted-foreground py-8"><T>No categories found.</T></div>}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Right: Editor or Actions */}
|
|
<div className="border rounded-md p-4 flex flex-col gap-4 overflow-y-auto bg-muted/10 w-full md:w-[450px] border-t md:border-l-0 md:border-l min-h-[50%] md:min-h-0">
|
|
{editingCategory ? (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="font-semibold text-sm">{isCreating ? translate("New Category") : translate("Edit Category")}</h3>
|
|
<Button variant="ghost" size="sm" onClick={() => setEditingCategory(null)}><X className="h-4 w-4" /></Button>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label><T>Name</T></Label>
|
|
<Input
|
|
value={editingCategory.name}
|
|
onChange={(e) => {
|
|
const name = e.target.value;
|
|
const slug = isCreating ? name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '') : editingCategory.slug;
|
|
setEditingCategory({ ...editingCategory, name, slug })
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label><T>Slug</T></Label>
|
|
<Input
|
|
value={editingCategory.slug}
|
|
onChange={(e) => setEditingCategory({ ...editingCategory, slug: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label><T>Visibility</T></Label>
|
|
<Select
|
|
value={editingCategory.visibility}
|
|
onValueChange={(val: any) => setEditingCategory({ ...editingCategory, visibility: val })}
|
|
>
|
|
<SelectTrigger><SelectValue /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="public"><T>Public</T></SelectItem>
|
|
<SelectItem value="unlisted"><T>Unlisted</T></SelectItem>
|
|
<SelectItem value="private"><T>Private</T></SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Input
|
|
value={editingCategory.description || ''}
|
|
onChange={(e) => setEditingCategory({ ...editingCategory, description: e.target.value })}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label><T>Variables</T></Label>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
className="w-full justify-start"
|
|
onClick={() => setShowVariablesEditor(true)}
|
|
>
|
|
<Hash className="mr-2 h-4 w-4" />
|
|
<T>Manage Variables</T>
|
|
{editingCategory.meta?.variables && Object.keys(editingCategory.meta.variables).length > 0 && (
|
|
<span className="ml-auto text-xs text-muted-foreground">
|
|
{Object.keys(editingCategory.meta.variables).length} defined
|
|
</span>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label><T>Assigned Types</T></Label>
|
|
<div className="border rounded-md p-2 max-h-40 overflow-y-auto space-y-2">
|
|
{types.length === 0 && <div className="text-xs text-muted-foreground p-1"><T>No assignable types found.</T></div>}
|
|
{types.map(type => (
|
|
<div key={type.id} className="flex items-center gap-2">
|
|
<Checkbox
|
|
id={`type-${type.id}`}
|
|
checked={(editingCategory.meta?.assignedTypes || []).includes(type.id)}
|
|
onCheckedChange={(checked) => {
|
|
const current = editingCategory.meta?.assignedTypes || [];
|
|
const newTypes = checked
|
|
? [...current, type.id]
|
|
: current.filter((id: string) => id !== type.id);
|
|
|
|
setEditingCategory({
|
|
...editingCategory,
|
|
meta: {
|
|
...(editingCategory.meta || {}),
|
|
assignedTypes: newTypes
|
|
}
|
|
});
|
|
}}
|
|
/>
|
|
<Label htmlFor={`type-${type.id}`} className="text-sm font-normal cursor-pointer">
|
|
{type.name} <span className="text-xs text-muted-foreground">({type.kind})</span>
|
|
</Label>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="text-[10px] text-muted-foreground">
|
|
<T>Assign types to allow using them in this category.</T>
|
|
</div>
|
|
</div>
|
|
{/* Translate button — only for existing categories */}
|
|
{!isCreating && editingCategory.id && (
|
|
<div className="space-y-2">
|
|
<Label><T>Translations</T></Label>
|
|
<Button
|
|
variant="outline"
|
|
className="w-full justify-start"
|
|
onClick={() => setShowTranslationDialog(true)}
|
|
>
|
|
<Languages className="mr-2 h-4 w-4" />
|
|
<T>Translate</T>
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
<Button className="w-full" onClick={handleSave} disabled={actionLoading}>
|
|
{actionLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
|
<T>Save</T>
|
|
</Button>
|
|
</div>
|
|
) : selectedCategoryId ? (
|
|
<div className="space-y-4">
|
|
<div className="border-b pb-2">
|
|
<h3 className="font-semibold text-lg">{categories.find(c => c.id === selectedCategoryId)?.name || 'Selected'}</h3>
|
|
<p className="text-xs text-muted-foreground mb-1">{selectedCategoryId}</p>
|
|
{categories.find(c => c.id === selectedCategoryId)?.description && (
|
|
<p className="text-sm text-foreground/80 italic">
|
|
{categories.find(c => c.id === selectedCategoryId)?.description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{currentPageId && (
|
|
<div className="bg-background rounded p-3 border space-y-2">
|
|
<Label className="text-xs uppercase text-muted-foreground"><T>Current Page Link</T></Label>
|
|
{linkedCategoryIds.includes(selectedCategoryId) ? (
|
|
<div className="text-sm">
|
|
<div className="flex items-center gap-2 text-green-600 mb-2">
|
|
<Check className="h-4 w-4" />
|
|
<T>Page linked to this category</T>
|
|
</div>
|
|
<Button size="sm" variant="outline" className="w-full" onClick={handleUnlinkPage} disabled={actionLoading}>
|
|
<T>Remove from Category</T>
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<Button size="sm" className="w-full" onClick={handleLinkPage} disabled={actionLoading}>
|
|
<LinkIcon className="mr-2 h-4 w-4" />
|
|
<T>Add to Category</T>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div className="text-xs text-muted-foreground">
|
|
<T>Select a category to see actions or click edit/add icons in the tree.</T>
|
|
</div>
|
|
|
|
{/* Category ACL / Permissions */}
|
|
<CollapsibleSection
|
|
title={<span className="flex items-center gap-1.5"><Shield className="h-3.5 w-3.5" /><T>Permissions</T></span>}
|
|
initiallyOpen={false}
|
|
storageKey="cat-acl-open"
|
|
minimal
|
|
>
|
|
<ACLEditorContent
|
|
resourceType="category"
|
|
resourceId={selectedCategoryId}
|
|
resourceName={categories.find(c => c.id === selectedCategoryId)?.name || ''}
|
|
availablePermissions={['read', 'list', 'write', 'delete']}
|
|
/>
|
|
</CollapsibleSection>
|
|
</div>
|
|
) : (
|
|
<div className="flex-1 flex items-center justify-center text-muted-foreground text-sm text-center">
|
|
<T>Select a category to manage or link.</T>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{!asView && (
|
|
<DialogFooter className="mt-4">
|
|
<Button variant="outline" onClick={onClose}><T>Close</T></Button>
|
|
</DialogFooter>
|
|
)}
|
|
|
|
{/* Nested Dialog for Variables */}
|
|
<Dialog open={showVariablesEditor} onOpenChange={setShowVariablesEditor}>
|
|
<DialogContent className="max-w-4xl h-[70vh] flex flex-col">
|
|
<DialogHeader>
|
|
<DialogTitle><T>Category Variables</T></DialogTitle>
|
|
<DialogDescription>
|
|
<T>Define variables available to pages in this category.</T>
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="flex-1 min-h-0">
|
|
{editingCategory && (
|
|
<VariablesEditor
|
|
onLoad={async () => {
|
|
return (editingCategory.meta?.variables as Record<string, any>) || {};
|
|
}}
|
|
onSave={async (newVars) => {
|
|
setEditingCategory({
|
|
...editingCategory,
|
|
meta: {
|
|
...(editingCategory.meta || {}),
|
|
variables: newVars
|
|
}
|
|
});
|
|
setShowVariablesEditor(false);
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* Category Translation Dialog */}
|
|
{showTranslationDialog && editingCategory?.id && (
|
|
<CategoryTranslationDialog
|
|
open={showTranslationDialog}
|
|
onOpenChange={setShowTranslationDialog}
|
|
categoryId={editingCategory.id}
|
|
categoryName={editingCategory.name || ''}
|
|
categoryDescription={editingCategory.description}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
|
|
if (asView) {
|
|
return <div className="flex flex-col h-full">{innerContent}</div>;
|
|
}
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
|
<DialogContent className="max-w-5xl h-[80vh] flex flex-col">
|
|
{innerContent}
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|