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

feat(admin): support full view in product edit and wizard steps in product create

Browse Source
This commit is contained in:
DanielS
2026-07-10 09:36:30 +02:00
parent c8183abff7
commit 0ecb16daff
1 changed files with 65 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
shop/components/admin/create-product-dialog.tsx
View File

@@ -182,29 +182,31 @@ export function CreateProductDialog({
<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 */}
<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}
{!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>
<span className="text-[10px] text-slate-500 dark:text-slate-400 font-medium">{s.label}</span>
</div>
))}
</div>
{step === 1 && (
))}
</div>
)}
{(product || step === 1) && (
<div className="space-y-6">
<div className="grid grid-cols-2 gap-4">
<FormField
@@ -274,7 +276,9 @@ export function CreateProductDialog({
</div>
)}
{step === 2 && (
{product && <Separator className="bg-slate-200 dark:bg-white/10" />}
{(product || step === 2) && (
<div className="space-y-6">
<FormField
control={form.control}
@@ -309,7 +313,9 @@ export function CreateProductDialog({
</div>
)}
{step === 3 && (
{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
@@ -375,7 +381,9 @@ export function CreateProductDialog({
</div>
)}
{step === 4 && (
{product && <Separator className="bg-slate-200 dark:bg-white/10" />}
{(product || step === 4) && (
<div className="grid grid-cols-2 gap-4">
{/* Product Requirements */}
<FormField
@@ -471,7 +479,9 @@ export function CreateProductDialog({
</div>
)}
{step === 5 && (
{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">
@@ -695,29 +705,41 @@ export function CreateProductDialog({
</div>
<DialogFooter className="pt-4 border-t border-slate-200 dark:border-white/10 flex justify-between items-center sm:justify-between">
<div className="flex gap-2">
{step > 1 ? (
<Button type="button" variant="outline" onClick={() => setStep(prev => prev - 1)}>
Zurück
</Button>
) : (
{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>
)}
</div>
<div className="flex gap-2">
{step < 5 ? (
<Button type="button" onClick={nextStep} className="bg-primary hover:bg-primary/90 text-white">
Weiter
</Button>
) : (
<Button type="submit" className="bg-primary hover:bg-primary/90 text-white">
Speichern
</Button>
)}
</div>
</DialogFooter>
</>
) : (
<>
<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-white">
Weiter
</Button>
) : (
<Button type="submit" className="bg-primary hover:bg-primary/90 text-white">
Speichern
</Button>
)}
</div>
</>
)}
</form>
</Form>
</DialogContent>