312 lines
12 KiB
TypeScript
312 lines
12 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
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 } from '@/lib/actions/products'
|
|
import { ScrollArea } from '@/components/ui/scroll-area'
|
|
import { Separator } from '@/components/ui/separator'
|
|
import { Category } from '@/lib/types'
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select"
|
|
|
|
const moduleSchema = z.object({
|
|
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),
|
|
requirements: z.string().optional().default(''), // Will be converted to array
|
|
exclusions: z.string().optional().default(''), // Will be converted to array
|
|
})
|
|
|
|
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'),
|
|
is_active: z.boolean().default(true),
|
|
modules: z.array(moduleSchema).default([]),
|
|
})
|
|
|
|
type ProductFormValues = z.infer<typeof productSchema>
|
|
|
|
export function CreateProductDialog({ categories }: { categories: Category[] }) {
|
|
const [open, setOpen] = useState(false)
|
|
|
|
const form = useForm<ProductFormValues>({
|
|
resolver: zodResolver(productSchema) as any,
|
|
defaultValues: {
|
|
name: '',
|
|
description: '',
|
|
base_price: 0,
|
|
category_id: '',
|
|
is_active: true,
|
|
modules: [],
|
|
},
|
|
})
|
|
|
|
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,
|
|
requirements: m.requirements ? m.requirements.split(',').map(s => s.trim()).filter(Boolean) : [],
|
|
exclusions: m.exclusions ? m.exclusions.split(',').map(s => s.trim()).filter(Boolean) : [],
|
|
}))
|
|
await createProduct(productData as any, formattedModules as any)
|
|
setOpen(false)
|
|
form.reset()
|
|
} catch (error) {
|
|
console.error('Error creating product:', error)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogTrigger asChild>
|
|
<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-[700px] max-h-[90vh] overflow-hidden flex flex-col glass-dark border-white/10 text-white shadow-2xl">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-2xl font-bold">Neues Produkt erstellen</DialogTitle>
|
|
<DialogDescription className="text-muted-foreground">
|
|
Definieren Sie das Basisprodukt und fügen Sie optionale oder erforderliche Module hinzu.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 flex-1 overflow-hidden flex flex-col">
|
|
<ScrollArea className="flex-1 pr-4">
|
|
<div className="space-y-6 py-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="name"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Produktname</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="z.B. Basic ERP" className="bg-white/5 border-white/10" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="base_price"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Basispreis (€)</FormLabel>
|
|
<FormControl>
|
|
<Input type="number" step="0.01" className="bg-white/5 border-white/10" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="category_id"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Kategorie</FormLabel>
|
|
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
|
<FormControl>
|
|
<SelectTrigger className="bg-white/5 border-white/10">
|
|
<SelectValue placeholder="Kategorie wählen" />
|
|
</SelectTrigger>
|
|
</FormControl>
|
|
<SelectContent className="glass-dark border-white/10 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>Beschreibung</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="Kurze Beschreibung des Produkts" className="bg-white/5 border-white/10" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<Separator className="bg-white/10" />
|
|
|
|
<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>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
className="border-primary/50 text-primary hover:bg-primary/10"
|
|
onClick={() => append({ name: '', price: 0, is_required: false, description: '', requirements: '', exclusions: '' })}
|
|
>
|
|
<Plus className="w-4 h-4 mr-2" /> Modul hinzufügen
|
|
</Button>
|
|
</div>
|
|
|
|
{fields.map((field, index) => (
|
|
<div key={field.id} className="p-4 rounded-lg bg-white/5 border border-white/10 space-y-4 relative group">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="absolute top-2 right-2 h-8 w-8 text-muted-foreground hover:text-destructive opacity-0 group-hover:opacity-100 transition-opacity"
|
|
onClick={() => remove(index)}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name={`modules.${index}.name`}
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Modulname</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="z.B. Cloud Storage" className="bg-white/10 border-white/10" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name={`modules.${index}.price`}
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Aufpreis (€)</FormLabel>
|
|
<FormControl>
|
|
<Input type="number" step="0.01" className="bg-white/10 border-white/10" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name={`modules.${index}.requirements`}
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Benötigt (IDs, kommagetrennt)</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="UUIDs..." className="bg-white/10 border-white/10 text-xs" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name={`modules.${index}.exclusions`}
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Schließt aus (IDs, kommagetrennt)</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="UUIDs..." className="bg-white/10 border-white/10 text-xs" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<FormField
|
|
control={form.control}
|
|
name={`modules.${index}.is_required`}
|
|
render={({ field }) => (
|
|
<FormItem className="flex flex-row items-start space-x-3 space-y-0">
|
|
<FormControl>
|
|
<Checkbox
|
|
checked={field.value}
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
<div className="space-y-1 leading-none">
|
|
<FormLabel>Erforderlich</FormLabel>
|
|
</div>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
{fields.length === 0 && (
|
|
<div className="text-center py-6 border-2 border-dashed border-white/5 rounded-lg text-muted-foreground text-sm">
|
|
Noch keine Module hinzugefügt.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</ScrollArea>
|
|
|
|
<DialogFooter className="pt-4 border-t border-white/10">
|
|
<Button type="button" variant="ghost" onClick={() => setOpen(false)}>Abbrechen</Button>
|
|
<Button type="submit" className="bg-primary hover:bg-primary/90">Speichern</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</Form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|