750 lines
36 KiB
TypeScript
750 lines
36 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { useForm, useFieldArray } from 'react-hook-form'
|
|
import { zodResolver } from '@hookform/resolvers/zod'
|
|
import * as z from 'zod'
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from '@/components/ui/dialog'
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormDescription,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
} from '@/components/ui/form'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Checkbox } from '@/components/ui/checkbox'
|
|
import { Plus, Trash2, X, PlusCircle } from 'lucide-react'
|
|
import { createProduct, updateProduct } from '@/lib/actions/products'
|
|
import { ScrollArea } from '@/components/ui/scroll-area'
|
|
import { Separator } from '@/components/ui/separator'
|
|
import { Category, Product } from '@/lib/types'
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select"
|
|
|
|
const moduleSchema = z.object({
|
|
id: z.string().optional(),
|
|
name: z.string().min(2, 'Name muss mindestens 2 Zeichen lang sein'),
|
|
description: z.string().optional(),
|
|
price: z.coerce.number().min(0, 'Preis darf nicht negativ sein'),
|
|
is_required: z.boolean().default(false),
|
|
has_quantity: z.boolean().default(false),
|
|
requirements: z.array(z.string()).default([]),
|
|
exclusions: z.array(z.string()).default([]),
|
|
})
|
|
|
|
const productSchema = z.object({
|
|
name: z.string().min(2, 'Name muss mindestens 2 Zeichen lang sein'),
|
|
description: z.string().optional(),
|
|
base_price: z.coerce.number().min(0, 'Preis darf nicht negativ sein'),
|
|
category_id: z.string().min(1, 'Bitte wählen Sie eine Kategorie'),
|
|
billing_interval: z.enum(['one_time', 'monthly']).default('monthly'),
|
|
show_in_kauf: z.boolean().default(true),
|
|
show_in_abo: z.boolean().default(true),
|
|
requirements: z.array(z.string()).default([]),
|
|
exclusions: z.array(z.string()).default([]),
|
|
modules: z.array(moduleSchema).default([]),
|
|
allow_update_discount: z.boolean().default(true),
|
|
})
|
|
|
|
type ProductFormValues = z.infer<typeof productSchema>
|
|
|
|
export function CreateProductDialog({
|
|
children,
|
|
categories,
|
|
product,
|
|
products = []
|
|
}: {
|
|
children?: React.ReactNode
|
|
categories: Category[]
|
|
product?: Product
|
|
products?: Product[]
|
|
}) {
|
|
const [open, setOpen] = useState(false)
|
|
const [step, setStep] = useState(1)
|
|
const router = useRouter()
|
|
|
|
function handleOpenChange(isOpen: boolean) {
|
|
setOpen(isOpen)
|
|
if (isOpen) {
|
|
setStep(1)
|
|
}
|
|
}
|
|
|
|
async function nextStep() {
|
|
let isValid = false
|
|
if (step === 1) {
|
|
isValid = await form.trigger(['name', 'category_id', 'base_price'])
|
|
} else if (step === 2) {
|
|
isValid = await form.trigger('billing_interval')
|
|
} else if (step === 3) {
|
|
isValid = await form.trigger(['show_in_kauf', 'show_in_abo'])
|
|
} else if (step === 4) {
|
|
isValid = await form.trigger(['requirements', 'exclusions'])
|
|
}
|
|
if (isValid || step === 5) {
|
|
setStep(prev => Math.min(prev + 1, 5))
|
|
}
|
|
}
|
|
|
|
const otherProducts = products.filter(p => p.id !== product?.id)
|
|
|
|
const form = useForm<ProductFormValues>({
|
|
resolver: zodResolver(productSchema) as any,
|
|
defaultValues: {
|
|
name: product?.name || '',
|
|
description: product?.description || '',
|
|
base_price: product?.base_price || 0,
|
|
category_id: product?.category_id || '',
|
|
billing_interval: product?.billing_interval || 'monthly',
|
|
show_in_kauf: product ? (product.show_in_kauf ?? true) : true,
|
|
show_in_abo: product ? (product.show_in_abo ?? true) : true,
|
|
requirements: product?.requirements || [],
|
|
exclusions: product?.exclusions || [],
|
|
allow_update_discount: product ? (product.allow_update_discount ?? true) : true,
|
|
modules: product?.modules?.map(m => ({
|
|
id: m.id,
|
|
name: m.name,
|
|
description: m.description || '',
|
|
price: m.price,
|
|
is_required: false,
|
|
has_quantity: m.has_quantity ?? false,
|
|
requirements: m.requirements || [],
|
|
exclusions: m.exclusions || [],
|
|
})) || [],
|
|
},
|
|
})
|
|
|
|
const { fields, append, remove } = useFieldArray({
|
|
name: 'modules',
|
|
control: form.control,
|
|
})
|
|
|
|
async function onSubmit(values: ProductFormValues) {
|
|
try {
|
|
const { modules, ...productData } = values
|
|
const formattedModules = modules.map(m => ({
|
|
...m,
|
|
id: m.id || (typeof crypto !== 'undefined' && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).substring(2, 15)),
|
|
}))
|
|
|
|
if (product) {
|
|
await updateProduct(product.id, productData as any, formattedModules as any)
|
|
} else {
|
|
await createProduct(productData as any, formattedModules as any)
|
|
}
|
|
|
|
setOpen(false)
|
|
if (!product) form.reset()
|
|
router.refresh()
|
|
} catch (error) {
|
|
console.error('Error saving product:', error)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={handleOpenChange}>
|
|
<DialogTrigger asChild>
|
|
{children || (
|
|
<Button className="bg-primary hover:bg-primary/90">
|
|
<Plus className="mr-2 h-4 w-4" /> Produkt hinzufügen
|
|
</Button>
|
|
)}
|
|
</DialogTrigger>
|
|
<DialogContent className="sm:max-w-[900px] max-h-[90vh] overflow-hidden flex flex-col bg-white dark:bg-slate-950 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white shadow-2xl">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-2xl font-bold">
|
|
{product ? 'Produkt bearbeiten' : 'Neues Produkt erstellen'}
|
|
</DialogTitle>
|
|
<DialogDescription className="text-slate-500 dark:text-slate-400">
|
|
Definieren Sie das Basisprodukt und fügen Sie optionale oder erforderliche Module hinzu.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-4 overflow-hidden flex-1 min-h-0">
|
|
<div className="flex-1 overflow-y-auto pr-4 space-y-6 py-4 min-h-0">
|
|
{/* Step Indicator */}
|
|
{!product && (
|
|
<div className="flex justify-between items-center mb-6 border-b border-slate-100 dark:border-white/5 pb-4">
|
|
{[
|
|
{ nr: 1, label: 'Allgemein' },
|
|
{ nr: 2, label: 'Abrechnung' },
|
|
{ nr: 3, label: 'Sichtbarkeit' },
|
|
{ nr: 4, label: 'Abhängigkeiten' },
|
|
{ nr: 5, label: 'Module' }
|
|
].map(s => (
|
|
<div key={s.nr} className="flex flex-col items-center gap-1 flex-1">
|
|
<div className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm transition-colors ${
|
|
step === s.nr
|
|
? 'bg-primary text-white'
|
|
: step > s.nr
|
|
? 'bg-green-500 text-white'
|
|
: 'bg-slate-200 dark:bg-slate-800 text-slate-500'
|
|
}`}>
|
|
{s.nr}
|
|
</div>
|
|
<span className="text-[10px] text-slate-500 dark:text-slate-400 font-medium">{s.label}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
{(product || step === 1) && (
|
|
<div className="space-y-6">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="name"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-slate-900 dark:text-white">Produktname</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="z.B. Basic ERP" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="base_price"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-slate-900 dark:text-white">Basispreis (€)</FormLabel>
|
|
<FormControl>
|
|
<Input type="number" step="0.01" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="category_id"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-slate-900 dark:text-white">Kategorie</FormLabel>
|
|
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
|
<FormControl>
|
|
<SelectTrigger className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white">
|
|
<SelectValue placeholder="Kategorie wählen" />
|
|
</SelectTrigger>
|
|
</FormControl>
|
|
<SelectContent className="bg-white dark:bg-slate-950 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white">
|
|
{categories.map(cat => (
|
|
<SelectItem key={cat.id} value={cat.id}>{cat.name}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="description"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-slate-900 dark:text-white">Beschreibung</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="Kurze Beschreibung des Produkts" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{product && <Separator className="bg-slate-200 dark:bg-white/10" />}
|
|
|
|
{(product || step === 2) && (
|
|
<div className="space-y-6">
|
|
<FormField
|
|
control={form.control}
|
|
name="billing_interval"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-slate-900 dark:text-white">Abrechnungsmodell</FormLabel>
|
|
<div className="grid grid-cols-2 gap-2 pt-1">
|
|
{[
|
|
{ value: 'one_time', label: 'Einmalig', icon: '💳' },
|
|
{ value: 'monthly', label: 'Monatlich', icon: '🔄' },
|
|
].map(opt => (
|
|
<button
|
|
key={opt.value}
|
|
type="button"
|
|
onClick={() => field.onChange(opt.value)}
|
|
className={`flex flex-col items-center gap-1 p-3 rounded-xl border-2 text-sm font-medium transition-all ${
|
|
field.value === opt.value
|
|
? 'border-primary bg-primary/10 text-primary dark:text-white'
|
|
: 'border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-white/5 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/10'
|
|
}`}
|
|
>
|
|
<span className="text-lg">{opt.icon}</span>
|
|
{opt.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{product && <Separator className="bg-slate-200 dark:bg-white/10" />}
|
|
|
|
{(product || step === 3) && (
|
|
<div className="space-y-6">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="show_in_kauf"
|
|
render={({ field }) => (
|
|
<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10">
|
|
<FormControl>
|
|
<Checkbox
|
|
checked={field.value}
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
<div className="space-y-1 leading-none">
|
|
<FormLabel className="text-slate-900 dark:text-white font-medium cursor-pointer">In Kauf-Auswahl anzeigen</FormLabel>
|
|
<FormDescription className="text-xs text-slate-500">Produkt im Kauf-Zweig anzeigen</FormDescription>
|
|
</div>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="show_in_abo"
|
|
render={({ field }) => (
|
|
<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10">
|
|
<FormControl>
|
|
<Checkbox
|
|
checked={field.value}
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
<div className="space-y-1 leading-none">
|
|
<FormLabel className="text-slate-900 dark:text-white font-medium cursor-pointer">In Abo-Auswahl anzeigen</FormLabel>
|
|
<FormDescription className="text-xs text-slate-500">Produkt im Abo-Zweig anzeigen</FormDescription>
|
|
</div>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
{form.watch('billing_interval') === 'one_time' && (
|
|
<FormField
|
|
control={form.control}
|
|
name="allow_update_discount"
|
|
render={({ field }) => (
|
|
<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10">
|
|
<FormControl>
|
|
<Checkbox
|
|
checked={field.value}
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
<div className="space-y-1 leading-none">
|
|
<FormLabel className="text-slate-900 dark:text-white font-medium cursor-pointer">Update-Rabatt erlauben</FormLabel>
|
|
<FormDescription className="text-xs text-slate-500">
|
|
Kunden erhalten für dieses Produkt den selektiven Update-Rabatt.
|
|
</FormDescription>
|
|
</div>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{product && <Separator className="bg-slate-200 dark:bg-white/10" />}
|
|
|
|
{(product || step === 4) && (
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{/* Product Requirements */}
|
|
<FormField
|
|
control={form.control}
|
|
name="requirements"
|
|
render={({ field: reqField }) => (
|
|
<FormItem className="flex flex-col gap-1.5">
|
|
<FormLabel className="text-slate-900 dark:text-white font-medium">Benötigte Artikel</FormLabel>
|
|
<ScrollArea className="h-32 border border-slate-200 dark:border-white/10 rounded p-3 bg-slate-50 dark:bg-white/5">
|
|
{otherProducts.length === 0 ? (
|
|
<p className="text-xs text-slate-500 italic">Keine anderen Artikel vorhanden.</p>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{otherProducts.map(other => {
|
|
const checked = (reqField.value || []).includes(other.id)
|
|
return (
|
|
<div key={other.id} className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id={`prod-req-${other.id}`}
|
|
checked={checked}
|
|
onCheckedChange={(checkedState) => {
|
|
const currentVal = reqField.value || []
|
|
if (checkedState) {
|
|
reqField.onChange([...currentVal, other.id])
|
|
} else {
|
|
reqField.onChange(currentVal.filter(id => id !== other.id))
|
|
}
|
|
}}
|
|
/>
|
|
<label
|
|
htmlFor={`prod-req-${other.id}`}
|
|
className="text-xs text-slate-700 dark:text-slate-300 cursor-pointer select-none truncate block"
|
|
title={other.name}
|
|
>
|
|
{other.name}
|
|
</label>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</ScrollArea>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
{/* Product Exclusions */}
|
|
<FormField
|
|
control={form.control}
|
|
name="exclusions"
|
|
render={({ field: exclField }) => (
|
|
<FormItem className="flex flex-col gap-1.5">
|
|
<FormLabel className="text-slate-900 dark:text-white font-medium">Schließt aus</FormLabel>
|
|
<ScrollArea className="h-32 border border-slate-200 dark:border-white/10 rounded p-3 bg-slate-50 dark:bg-white/5">
|
|
{otherProducts.length === 0 ? (
|
|
<p className="text-xs text-slate-500 italic">Keine anderen Artikel vorhanden.</p>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{otherProducts.map(other => {
|
|
const checked = (exclField.value || []).includes(other.id)
|
|
return (
|
|
<div key={other.id} className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id={`prod-excl-${other.id}`}
|
|
checked={checked}
|
|
onCheckedChange={(checkedState) => {
|
|
const currentVal = exclField.value || []
|
|
if (checkedState) {
|
|
exclField.onChange([...currentVal, other.id])
|
|
} else {
|
|
exclField.onChange(currentVal.filter(id => id !== other.id))
|
|
}
|
|
}}
|
|
/>
|
|
<label
|
|
htmlFor={`prod-excl-${other.id}`}
|
|
className="text-xs text-slate-700 dark:text-slate-300 cursor-pointer select-none truncate block"
|
|
title={other.name}
|
|
>
|
|
{other.name}
|
|
</label>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</ScrollArea>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{product && <Separator className="bg-slate-200 dark:bg-white/10" />}
|
|
|
|
{(product || step === 5) && (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-lg font-semibold flex items-center gap-2">
|
|
<PlusCircle className="w-5 h-5 text-primary" />
|
|
Module
|
|
</h3>
|
|
</div>
|
|
|
|
{fields.map((field, index) => {
|
|
const allModules = form.watch('modules') || []
|
|
const otherModules = allModules
|
|
.map((m, idx) => ({
|
|
id: m.id || field.id,
|
|
name: m.name || `Modul ${idx + 1}`,
|
|
}))
|
|
.filter((_, idx) => idx !== index)
|
|
|
|
return (
|
|
<div key={field.id} className="p-4 border border-slate-200 dark:border-white/10 rounded-xl bg-slate-50 dark:bg-white/5 space-y-4">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="flex-1 grid grid-cols-2 gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name={`modules.${index}.name`}
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-slate-900 dark:text-white text-xs">Modulname</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="z.B. Zusatzlizenz" className="bg-white dark:bg-slate-900 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white text-xs" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name={`modules.${index}.price`}
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-slate-900 dark:text-white text-xs">Preis (€/Monat)</FormLabel>
|
|
<FormControl>
|
|
<Input type="number" step="0.01" className="bg-white dark:bg-slate-900 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white text-xs" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-red-500 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950/20 mt-6"
|
|
onClick={() => remove(index)}
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name={`modules.${index}.description`}
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-slate-900 dark:text-white text-xs">Beschreibung</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="Kurze Beschreibung" className="bg-white dark:bg-slate-900 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white text-xs" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
{otherModules.length > 0 && (
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name={`modules.${index}.requirements`}
|
|
render={({ field: mReqField }) => (
|
|
<FormItem className="flex flex-col gap-1">
|
|
<FormLabel className="text-slate-900 dark:text-white text-[11px] font-medium">Erfordert Module</FormLabel>
|
|
<ScrollArea className="h-24 border border-slate-200 dark:border-white/10 rounded p-2 bg-white dark:bg-slate-900">
|
|
<div className="space-y-1">
|
|
{otherModules.map(other => {
|
|
const checked = (mReqField.value || []).includes(other.id)
|
|
return (
|
|
<div key={other.id} className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id={`mod-req-${index}-${other.id}`}
|
|
checked={checked}
|
|
onCheckedChange={(checkedState) => {
|
|
const currentVal = mReqField.value || []
|
|
if (checkedState) {
|
|
mReqField.onChange([...currentVal, other.id])
|
|
} else {
|
|
mReqField.onChange(currentVal.filter(id => id !== other.id))
|
|
}
|
|
}}
|
|
/>
|
|
<label
|
|
htmlFor={`mod-req-${index}-${other.id}`}
|
|
className="text-[10px] text-slate-650 dark:text-slate-350 cursor-pointer truncate block"
|
|
>
|
|
{other.name}
|
|
</label>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</ScrollArea>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name={`modules.${index}.exclusions`}
|
|
render={({ field: mExclField }) => (
|
|
<FormItem className="flex flex-col gap-1">
|
|
<FormLabel className="text-slate-900 dark:text-white text-[11px] font-medium">Schließt Module aus</FormLabel>
|
|
<ScrollArea className="h-24 border border-slate-200 dark:border-white/10 rounded p-2 bg-white dark:bg-slate-900">
|
|
<div className="space-y-1">
|
|
{otherModules.map(other => {
|
|
const checked = (mExclField.value || []).includes(other.id)
|
|
return (
|
|
<div key={other.id} className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id={`mod-excl-${index}-${other.id}`}
|
|
checked={checked}
|
|
onCheckedChange={(checkedState) => {
|
|
const currentVal = mExclField.value || []
|
|
if (checkedState) {
|
|
mExclField.onChange([...currentVal, other.id])
|
|
} else {
|
|
mExclField.onChange(currentVal.filter(id => id !== other.id))
|
|
}
|
|
}}
|
|
/>
|
|
<label
|
|
htmlFor={`mod-excl-${index}-${other.id}`}
|
|
className="text-[10px] text-slate-650 dark:text-slate-350 cursor-pointer truncate block"
|
|
>
|
|
{other.name}
|
|
</label>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</ScrollArea>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center gap-6">
|
|
<FormField
|
|
control={form.control}
|
|
name={`modules.${index}.is_required`}
|
|
render={({ field }) => (
|
|
<FormItem className="flex flex-row items-center space-x-2 space-y-0">
|
|
<FormControl>
|
|
<Checkbox
|
|
checked={field.value}
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
<FormLabel className="text-slate-900 dark:text-white font-medium cursor-pointer text-xs">Erforderlich</FormLabel>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name={`modules.${index}.has_quantity`}
|
|
render={({ field }) => (
|
|
<FormItem className="flex flex-row items-center space-x-2 space-y-0">
|
|
<FormControl>
|
|
<Checkbox
|
|
checked={field.value}
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
<FormLabel className="text-slate-900 dark:text-white font-medium cursor-pointer text-xs">Mengeneingabe erlauben</FormLabel>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
|
|
{fields.length === 0 && (
|
|
<div className="text-center py-6 border-2 border-dashed border-slate-200 dark:border-white/5 rounded-lg text-slate-500 dark:text-slate-400 text-sm">
|
|
Noch keine Module hinzugefügt.
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex justify-end pt-2">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
className="border-primary/50 text-primary hover:bg-primary/10"
|
|
onClick={() => append({
|
|
id: typeof crypto !== 'undefined' && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).substring(2, 15),
|
|
name: '',
|
|
price: 0,
|
|
is_required: false,
|
|
has_quantity: false,
|
|
description: '',
|
|
requirements: [],
|
|
exclusions: []
|
|
})}
|
|
>
|
|
<Plus className="w-4 h-4 mr-2" /> Modul hinzufügen
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<DialogFooter className="pt-4 border-t border-slate-200 dark:border-white/10 flex justify-between items-center sm:justify-between">
|
|
{product ? (
|
|
<>
|
|
<Button type="button" variant="ghost" onClick={() => setOpen(false)} className="text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white">
|
|
Abbrechen
|
|
</Button>
|
|
<Button type="submit" className="bg-primary hover:bg-primary/90 text-white">
|
|
Speichern
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="flex gap-2">
|
|
{step > 1 ? (
|
|
<Button type="button" variant="outline" onClick={() => setStep(prev => prev - 1)}>
|
|
Zurück
|
|
</Button>
|
|
) : (
|
|
<Button type="button" variant="ghost" onClick={() => setOpen(false)} className="text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white">
|
|
Abbrechen
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<div className="flex gap-2">
|
|
{step < 5 ? (
|
|
<Button type="button" onClick={nextStep} className="bg-primary hover:bg-primary/90 text-black font-medium">
|
|
Weiter
|
|
</Button>
|
|
) : (
|
|
<Button type="submit" className="bg-primary hover:bg-primary/90 text-white">
|
|
Speichern
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</DialogFooter>
|
|
</form>
|
|
</Form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|