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

refactor: move device name and license inputs to modal popup
All checks were successful
Staging Build / build (push) Successful in 2m54s
Details

Browse Source
This commit is contained in:
DanielS
2026-08-11 00:55:35 +02:00
parent c3e81ee49e
commit 497d95d849
1 changed files with 71 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
shop/components/wizard/summary-sidebar.tsx
View File

@@ -8,6 +8,14 @@ import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { Pencil, Trash2, UserPlus, ChevronRight, AlertCircle, Check } from 'lucide-react'
import { Category, Product, CategorySelection } from '@/lib/types'
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog'
interface SummarySidebarProps {
visibleCategories: Category[]
@@ -72,6 +80,8 @@ export function SummarySidebar({
nextStep,
prevStep,
}: SummarySidebarProps) {
const [isOpen, setIsOpen] = React.useState(false)
return (
<div className="h-full flex flex-col">
<Card className="bg-[oklch(0.145_0.01_148)]/90 backdrop-blur-md border border-slate-800 shadow-[0_0_30px_rgba(0,0,0,0.5)] rounded-2xl overflow-hidden flex flex-col h-full">
@@ -252,7 +262,10 @@ export function SummarySidebar({
variant="ghost"
size="icon"
className="w-7 h-7 hover:bg-white/10 text-slate-400 hover:text-white"
onClick={() => editBasketItem(idx)}
onClick={() => {
editBasketItem(idx)
setIsOpen(true)
}}
title="Kasse bearbeiten"
>
<Pencil className="w-3.5 h-3.5" />
@@ -275,34 +288,14 @@ export function SummarySidebar({
)}
</CardContent>
<CardFooter className="flex flex-col gap-3 shrink-0">
<div className="w-full space-y-2">
<Label htmlFor="device-name" className="text-xs text-slate-400">Kassenname (optional)</Label>
<Input
id="device-name"
placeholder="z.B. Hauptkasse, Theke"
value={deviceName}
onChange={e => setDeviceName(e.target.value)}
className="bg-white/5 border-white/10 text-white text-xs h-9 rounded-lg"
/>
</div>
<div className="w-full space-y-2">
<Label htmlFor="license-number" className="text-xs text-slate-400">Lizenznummer (optional)</Label>
<Input
id="license-number"
placeholder="z.B. LIZ-12345"
value={licenseNumber}
onChange={e => setLicenseNumber(e.target.value)}
className="bg-white/5 border-white/10 text-white text-xs h-9 rounded-lg"
/>
</div>
<Button
type="button"
variant="outline"
className="w-full border-primary/30 text-white hover:bg-primary/10 gap-2 h-10 text-sm"
onClick={addToBasket}
onClick={() => setIsOpen(true)}
disabled={isNextStepDisabled}
>
<UserPlus className="w-4 h-4" /> {editingIdx !== null ? '💾 Änderungen an Kasse speichern' : (hasActiveSelection ? 'Kasse speichern' : 'Kasse anlegen')}
<UserPlus className="w-4 h-4" /> {editingIdx !== null ? '💾 Kasse bearbeiten' : (hasActiveSelection ? 'Kasse speichern' : 'Kasse anlegen')}
</Button>
<Separator className="bg-white/10 my-1" />
<Button
@@ -317,6 +310,61 @@ export function SummarySidebar({
</Button>
</CardFooter>
</Card>
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogContent className="bg-slate-900 border border-slate-800 text-white rounded-2xl max-w-md p-6">
<DialogHeader>
<DialogTitle className="text-lg font-bold text-white">
{editingIdx !== null ? 'Kasse bearbeiten' : 'Kasse anlegen'}
</DialogTitle>
<DialogDescription className="text-slate-400 text-xs mt-1">
Geben Sie den Namen und die Lizenznummer für diese Kasse ein.
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="space-y-2">
<Label htmlFor="device-name-modal" className="text-xs text-slate-400">Kassenname (optional)</Label>
<Input
id="device-name-modal"
placeholder={`z.B. Kasse ${basketItems.length + 1}, Theke`}
value={deviceName}
onChange={e => setDeviceName(e.target.value)}
className="bg-white/5 border-white/10 text-white text-xs h-9 rounded-lg"
/>
</div>
<div className="space-y-2">
<Label htmlFor="license-number-modal" className="text-xs text-slate-400">Lizenznummer (optional)</Label>
<Input
id="license-number-modal"
placeholder="z.B. LIZ-12345 (eindeutig)"
value={licenseNumber}
onChange={e => setLicenseNumber(e.target.value)}
className="bg-white/5 border-white/10 text-white text-xs h-9 rounded-lg"
/>
</div>
</div>
<DialogFooter className="flex flex-row justify-end gap-2 mt-4">
<Button
type="button"
variant="ghost"
className="text-slate-400 hover:text-white"
onClick={() => setIsOpen(false)}
>
Abbrechen
</Button>
<Button
type="button"
className="h-10"
onClick={() => {
addToBasket()
setIsOpen(false)
}}
>
Speichern
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
)
}