feat(admin): extend wysiwyg live editor
All checks were successful
Staging Build / build (push) Successful in 2m46s
All checks were successful
Staging Build / build (push) Successful in 2m46s
- Add is_required and allow_multiselect category toggles - Implement module-popover for product module assignment - Add cascade-protected deletion for categories and products - Add sidebar link with AdminNavLink active states
This commit is contained in:
DanielS
@@ -1,22 +1,65 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useTransition } from 'react'
|
||||
import { Category, Product } from '@/lib/types'
|
||||
import { updateProduct, createProduct, updateCategory, createCategory } from '@/lib/actions/products'
|
||||
import { Category, Product, ProductModule } from '@/lib/types'
|
||||
import { updateProduct, createProduct, updateCategory, createCategory, deleteProduct, deleteCategory } from '@/lib/actions/products'
|
||||
import { InlineInput } from './components/inline-input'
|
||||
import { ModulePopover } from './components/module-popover'
|
||||
import { Trash2 } from 'lucide-react'
|
||||
|
||||
export function WysiwygAdminClient({
|
||||
initialCategories,
|
||||
initialProducts
|
||||
initialProducts,
|
||||
allModules
|
||||
}: {
|
||||
initialCategories: Category[]
|
||||
initialProducts: Product[]
|
||||
allModules: ProductModule[]
|
||||
}) {
|
||||
const [mode, setMode] = useState<'purchase' | 'subscription'>('purchase')
|
||||
const [categories, setCategories] = useState(initialCategories)
|
||||
const [products, setProducts] = useState(initialProducts)
|
||||
const [isPending, startTransition] = useTransition()
|
||||
|
||||
const handleDeleteCategory = async (catId: string) => {
|
||||
// Cascade-Check: check if there are products belonging to this category
|
||||
const categoryProducts = products.filter(p => p.category_id === catId)
|
||||
if (categoryProducts.length > 0) {
|
||||
alert(`Diese Kategorie enthält noch ${categoryProducts.length} Produkte. Bitte lösche oder verschiebe diese zuerst!`)
|
||||
return
|
||||
}
|
||||
|
||||
if (!window.confirm('Möchten Sie diese Kategorie wirklich löschen?')) {
|
||||
return
|
||||
}
|
||||
|
||||
startTransition(async () => {
|
||||
try {
|
||||
await deleteCategory(catId)
|
||||
setCategories(categories.filter(c => c.id !== catId))
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
alert('Fehler beim Löschen der Kategorie.')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleDeleteProduct = async (prodId: string) => {
|
||||
if (!window.confirm('Möchten Sie dieses Produkt wirklich löschen?')) {
|
||||
return
|
||||
}
|
||||
|
||||
startTransition(async () => {
|
||||
try {
|
||||
await deleteProduct(prodId)
|
||||
setProducts(products.filter(p => p.id !== prodId))
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
alert('Fehler beim Löschen des Produkts.')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Filterung der Kategorien nach aktivem Modus
|
||||
const filteredCategories = categories.filter(cat =>
|
||||
mode === 'purchase' ? cat.show_in_kauf : cat.show_in_abo
|
||||
@@ -68,6 +111,17 @@ export function WysiwygAdminClient({
|
||||
})
|
||||
}
|
||||
|
||||
const handleCategoryToggle = async (catId: string, fields: Partial<Category>) => {
|
||||
startTransition(async () => {
|
||||
try {
|
||||
setCategories(categories.map(c => c.id === catId ? { ...c, ...fields } : c))
|
||||
await updateCategory(catId, fields)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`p-6 max-w-7xl mx-auto space-y-6 ${isPending ? 'opacity-70 pointer-events-none' : ''}`}>
|
||||
<div className="flex justify-between items-center border-b border-white/10 pb-4">
|
||||
@@ -89,7 +143,7 @@ export function WysiwygAdminClient({
|
||||
Abo-Modus (Monatlich)
|
||||
</button>
|
||||
</div>
|
||||
{isPending && <span className="text-xs text-primary animate-pulse">Speichere Änderungen...</span>}
|
||||
{isPending && <span className="text-xs text-primary animate-pulse font-medium">Speichere Änderungen...</span>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">
|
||||
@@ -98,8 +152,8 @@ export function WysiwygAdminClient({
|
||||
.map(cat => {
|
||||
const catProducts = filteredProducts.filter(p => p.category_id === cat.id)
|
||||
return (
|
||||
<div key={cat.id} className="p-6 bg-white/5 border border-white/10 rounded-2xl space-y-4">
|
||||
<div className="flex justify-between items-start">
|
||||
<div key={cat.id} className="p-6 bg-white/5 border border-white/10 rounded-2xl space-y-4 shadow-xl">
|
||||
<div className="flex justify-between items-start border-b border-white/5 pb-4">
|
||||
<div className="w-full">
|
||||
<InlineInput
|
||||
value={cat.name}
|
||||
@@ -117,40 +171,130 @@ export function WysiwygAdminClient({
|
||||
}}
|
||||
className="text-slate-400 text-sm mt-1 block w-full"
|
||||
/>
|
||||
|
||||
{/* Kategorie Attribute (Toggles) */}
|
||||
<div className="flex items-center gap-6 mt-3 text-xs text-slate-400">
|
||||
<label className="flex items-center gap-2 cursor-pointer select-none">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={cat.is_required}
|
||||
onChange={(e) => handleCategoryToggle(cat.id, { is_required: e.target.checked })}
|
||||
className="rounded border-white/10 bg-white/5 text-primary focus:ring-0 focus:ring-offset-0"
|
||||
/>
|
||||
<span>Pflichtauswahl (is_required)</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 cursor-pointer select-none">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={cat.allow_multiselect}
|
||||
onChange={(e) => handleCategoryToggle(cat.id, { allow_multiselect: e.target.checked })}
|
||||
className="rounded border-white/10 bg-white/5 text-primary focus:ring-0 focus:ring-offset-0"
|
||||
/>
|
||||
<span>Mehrfachauswahl (allow_multiselect)</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDeleteCategory(cat.id)}
|
||||
className="p-2 text-slate-500 hover:text-red-500 hover:bg-white/5 rounded-lg transition-all ml-4 flex-shrink-0"
|
||||
title="Kategorie löschen"
|
||||
>
|
||||
<Trash2 className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 pt-2">
|
||||
{catProducts.map(prod => (
|
||||
<div key={prod.id} className="p-4 bg-white/5 border border-white/10 rounded-xl space-y-2 relative group">
|
||||
<InlineInput
|
||||
value={prod.name}
|
||||
onSave={async (newName) => {
|
||||
await updateProduct(prod.id, { name: newName }, prod.modules || [])
|
||||
setProducts(products.map(p => p.id === prod.id ? { ...p, name: newName } : p))
|
||||
}}
|
||||
className="font-semibold text-white block"
|
||||
/>
|
||||
<InlineInput
|
||||
value={prod.description || ''}
|
||||
onSave={async (newDesc) => {
|
||||
await updateProduct(prod.id, { description: newDesc }, prod.modules || [])
|
||||
setProducts(products.map(p => p.id === prod.id ? { ...p, description: newDesc } : p))
|
||||
}}
|
||||
className="text-xs text-slate-400 block"
|
||||
/>
|
||||
<div className="text-primary font-mono text-sm flex items-center space-x-1">
|
||||
<div key={prod.id} className="p-4 bg-white/5 border border-white/10 rounded-xl space-y-3 relative group flex flex-col justify-between">
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between items-start gap-2">
|
||||
<div className="flex-1">
|
||||
<InlineInput
|
||||
value={prod.name}
|
||||
onSave={async (newName) => {
|
||||
await updateProduct(prod.id, { name: newName }, prod.modules || [])
|
||||
setProducts(products.map(p => p.id === prod.id ? { ...p, name: newName } : p))
|
||||
}}
|
||||
className="font-semibold text-white block"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDeleteProduct(prod.id)}
|
||||
className="p-1 text-slate-500 hover:text-red-500 hover:bg-white/5 rounded transition-all opacity-0 group-hover:opacity-100 flex-shrink-0"
|
||||
title="Produkt löschen"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<InlineInput
|
||||
value={prod.base_price.toString()}
|
||||
type="number"
|
||||
onSave={async (newPrice) => {
|
||||
const priceNum = parseFloat(newPrice) || 0
|
||||
await updateProduct(prod.id, { base_price: priceNum }, prod.modules || [])
|
||||
setProducts(products.map(p => p.id === prod.id ? { ...p, base_price: priceNum } : p))
|
||||
value={prod.description || ''}
|
||||
onSave={async (newDesc) => {
|
||||
await updateProduct(prod.id, { description: newDesc }, prod.modules || [])
|
||||
setProducts(products.map(p => p.id === prod.id ? { ...p, description: newDesc } : p))
|
||||
}}
|
||||
className="inline-block"
|
||||
/>
|
||||
<span>€</span>
|
||||
className="text-xs text-slate-400 block"
|
||||
/>
|
||||
<div className="text-primary font-mono text-sm flex items-center space-x-1">
|
||||
<InlineInput
|
||||
value={prod.base_price.toString()}
|
||||
type="number"
|
||||
onSave={async (newPrice) => {
|
||||
const priceNum = parseFloat(newPrice) || 0
|
||||
await updateProduct(prod.id, { base_price: priceNum }, prod.modules || [])
|
||||
setProducts(products.map(p => p.id === prod.id ? { ...p, base_price: priceNum } : p))
|
||||
}}
|
||||
className="inline-block"
|
||||
/>
|
||||
<span>€</span>
|
||||
</div>
|
||||
|
||||
{/* Modul-Badges */}
|
||||
<div className="space-y-1">
|
||||
<span className="text-[10px] uppercase tracking-wider text-slate-500 font-semibold block">Module:</span>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{(prod.modules || []).length > 0 ? (
|
||||
(prod.modules || []).map((m) => (
|
||||
<span key={m.id} className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] bg-white/10 text-slate-300 font-medium">
|
||||
{m.name}
|
||||
<button
|
||||
onClick={async () => {
|
||||
const updatedModules = (prod.modules || []).filter(mod => mod.id !== m.id)
|
||||
setProducts(products.map(p => p.id === prod.id ? { ...p, modules: updatedModules } : p))
|
||||
await updateProduct(prod.id, {}, updatedModules)
|
||||
}}
|
||||
className="text-slate-500 hover:text-white font-bold transition-colors ml-0.5"
|
||||
title="Modul entfernen"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
))
|
||||
) : (
|
||||
<span className="text-[10px] text-slate-500 italic">Keine Module</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Modul hinzufügen Popover */}
|
||||
<div className="mt-3 pt-2 border-t border-white/5">
|
||||
<ModulePopover
|
||||
assignedModules={prod.modules || []}
|
||||
allModules={allModules}
|
||||
onAddModule={async (mod) => {
|
||||
const newMod = {
|
||||
name: mod.name,
|
||||
description: mod.description,
|
||||
price: mod.price,
|
||||
requirements: mod.requirements || [],
|
||||
exclusions: mod.exclusions || [],
|
||||
has_quantity: mod.has_quantity || false
|
||||
}
|
||||
const updatedModules = [...(prod.modules || []), newMod]
|
||||
setProducts(products.map(p => p.id === prod.id ? { ...p, modules: updatedModules as any } : p))
|
||||
await updateProduct(prod.id, {}, updatedModules)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -160,7 +304,7 @@ export function WysiwygAdminClient({
|
||||
className="flex flex-col items-center justify-center p-4 border border-dashed border-white/20 hover:border-primary/50 rounded-xl text-slate-400 hover:text-primary transition h-full min-h-[140px]"
|
||||
>
|
||||
<span className="text-2xl mb-1">+</span>
|
||||
<span className="text-xs">Produkt hinzufügen</span>
|
||||
<span className="text-xs font-medium">Produkt hinzufügen</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -172,7 +316,7 @@ export function WysiwygAdminClient({
|
||||
className="w-full py-4 border border-dashed border-white/20 hover:border-primary/50 rounded-2xl flex items-center justify-center text-slate-400 hover:text-primary transition"
|
||||
>
|
||||
<span className="text-xl mr-2">+</span>
|
||||
<span>Neue Kategorie hinzufügen</span>
|
||||
<span className="font-medium">Neue Kategorie hinzufügen</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user