Daniel/webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(admin): add wysiwyg editor for order wizard
All checks were successful
Staging Build / build (push) Successful in 2m49s
Details

Browse Source
This commit is contained in:
DanielS
2026-07-09 15:39:14 +02:00
parent 915d3b1b2f
commit 16917bcbdc
3 changed files with 276 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
shop/app/admin/wysiwyg/wysiwyg-client.tsx Normal file
View File

@@ -0,0 +1,180 @@
'use client'
import { useState, useTransition } from 'react'
import { Category, Product } from '@/lib/types'
import { updateProduct, createProduct, updateCategory, createCategory } from '@/lib/actions/products'
import { InlineInput } from './components/inline-input'
export function WysiwygAdminClient({
initialCategories,
initialProducts
}: {
initialCategories: Category[]
initialProducts: Product[]
}) {
const [mode, setMode] = useState<'purchase' | 'subscription'>('purchase')
const [categories, setCategories] = useState(initialCategories)
const [products, setProducts] = useState(initialProducts)
const [isPending, startTransition] = useTransition()
// Filterung der Kategorien nach aktivem Modus
const filteredCategories = categories.filter(cat =>
mode === 'purchase' ? cat.show_in_kauf : cat.show_in_abo
)
// Filterung der Produkte nach aktivem Modus
const filteredProducts = products.filter(p =>
mode === 'purchase' ? p.billing_interval === 'one_time' : p.billing_interval === 'monthly'
)
const handleAddCategory = async () => {
startTransition(async () => {
try {
const newCat = await createCategory({
name: 'Neue Kategorie',
description: 'Beschreibung hier...',
sort_order: categories.length + 1,
is_required: false,
allow_multiselect: false,
free_items_limit: 0,
preselect: false,
show_in_kauf: mode === 'purchase',
show_in_abo: mode === 'subscription'
})
setCategories([...categories, newCat])
} catch (e) {
console.error(e)
}
})
}
const handleAddProduct = async (categoryId: string) => {
startTransition(async () => {
try {
const newProd = await createProduct({
name: 'Neues Produkt',
description: 'Produktbeschreibung...',
base_price: 19.99,
tax_rate: 19,
billing_interval: mode === 'purchase' ? 'one_time' : 'monthly',
category_id: categoryId,
show_in_kauf: mode === 'purchase',
show_in_abo: mode === 'subscription'
}, [])
setProducts([...products, newProd])
} 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">
<div className="flex space-x-4">
<button
onClick={() => setMode('purchase')}
className={`px-4 py-2 rounded-lg font-medium transition ${
mode === 'purchase' ? 'bg-primary text-black' : 'bg-white/5 text-white hover:bg-white/10'
}`}
>
Kauf-Modus (Einmalig)
</button>
<button
onClick={() => setMode('subscription')}
className={`px-4 py-2 rounded-lg font-medium transition ${
mode === 'subscription' ? 'bg-primary text-black' : 'bg-white/5 text-white hover:bg-white/10'
}`}
>
Abo-Modus (Monatlich)
</button>
</div>
{isPending && <span className="text-xs text-primary animate-pulse">Speichere Änderungen...</span>}
</div>
<div className="space-y-8">
{filteredCategories
.sort((a, b) => a.sort_order - b.sort_order)
.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 className="w-full">
<InlineInput
value={cat.name}
onSave={async (newName) => {
await updateCategory(cat.id, { name: newName })
setCategories(categories.map(c => c.id === cat.id ? { ...c, name: newName } : c))
}}
className="text-2xl font-bold text-white block w-full"
/>
<InlineInput
value={cat.description || ''}
onSave={async (newDesc) => {
await updateCategory(cat.id, { description: newDesc })
setCategories(categories.map(c => c.id === cat.id ? { ...c, description: newDesc } : c))
}}
className="text-slate-400 text-sm mt-1 block w-full"
/>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{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">
<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>
</div>
))}
<button
onClick={() => handleAddProduct(cat.id)}
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>
</button>
</div>
</div>
)
})}
<button
onClick={handleAddCategory}
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>
</button>
</div>
</div>
)
}