ST-iiybtinq: voeg Snel idee-knop en inline form toe aan IdeaList (#129)
- Voeg showQuick/quickTitle/quickDescription state toe - Voeg handleQuickCreate toe die createIdeaAction met product_id=null aanroept - Voeg Snel idee-knop (variant=outline) toe naast Nieuw idee in de top-bar - Voeg inline snel-form toe zonder product-dropdown, met Enter-to-submit Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
dc8557308b
commit
688bd01a75
1 changed files with 60 additions and 1 deletions
|
|
@ -126,6 +126,11 @@ export function IdeaList({ ideas, products, isDemo }: IdeaListProps) {
|
|||
const [newDescription, setNewDescription] = useState('')
|
||||
const [newProductId, setNewProductId] = useState<string>('')
|
||||
|
||||
// Quick-idea form state
|
||||
const [showQuick, setShowQuick] = useState(false)
|
||||
const [quickTitle, setQuickTitle] = useState('')
|
||||
const [quickDescription, setQuickDescription] = useState('')
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const q = search.trim().toLowerCase()
|
||||
const result = ideas.filter((idea) => {
|
||||
|
|
@ -218,6 +223,27 @@ export function IdeaList({ ideas, products, isDemo }: IdeaListProps) {
|
|||
})
|
||||
}
|
||||
|
||||
function handleQuickCreate() {
|
||||
if (isDemo) return
|
||||
const title = quickTitle.trim()
|
||||
if (!title) {
|
||||
toast.error('Titel is verplicht')
|
||||
return
|
||||
}
|
||||
startTransition(async () => {
|
||||
const r = await createIdeaAction({ title, description: quickDescription.trim() || null, product_id: null })
|
||||
if ('error' in r) {
|
||||
toast.error(r.error)
|
||||
return
|
||||
}
|
||||
toast.success(`Idee aangemaakt (${r.data?.code})`)
|
||||
setQuickTitle('')
|
||||
setQuickDescription('')
|
||||
setShowQuick(false)
|
||||
router.refresh()
|
||||
})
|
||||
}
|
||||
|
||||
function handleArchive(id: string) {
|
||||
if (isDemo) return
|
||||
startTransition(async () => {
|
||||
|
|
@ -254,7 +280,18 @@ export function IdeaList({ ideas, products, isDemo }: IdeaListProps) {
|
|||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="ml-auto">
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
<DemoTooltip show={isDemo}>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => setShowQuick((v) => !v)}
|
||||
disabled={isDemo || isPending}
|
||||
>
|
||||
<Plus className="size-4 mr-1" />
|
||||
Snel idee
|
||||
</Button>
|
||||
</DemoTooltip>
|
||||
<DemoTooltip show={isDemo}>
|
||||
<Button
|
||||
size="sm"
|
||||
|
|
@ -289,6 +326,28 @@ export function IdeaList({ ideas, products, isDemo }: IdeaListProps) {
|
|||
})}
|
||||
</div>
|
||||
|
||||
{/* Snel idee form — geen product-dropdown */}
|
||||
{showQuick && (
|
||||
<div className="rounded-md border border-input bg-surface-container p-4 space-y-3">
|
||||
<Input
|
||||
placeholder="Titel *"
|
||||
value={quickTitle}
|
||||
onChange={(e) => setQuickTitle(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleQuickCreate()}
|
||||
/>
|
||||
<Textarea
|
||||
placeholder="Beschrijving (optioneel)"
|
||||
value={quickDescription}
|
||||
onChange={(e) => setQuickDescription(e.target.value)}
|
||||
rows={2}
|
||||
/>
|
||||
<div className="flex gap-2 justify-end">
|
||||
<Button size="sm" variant="ghost" onClick={() => setShowQuick(false)}>Annuleer</Button>
|
||||
<Button size="sm" onClick={handleQuickCreate} disabled={isPending || !quickTitle.trim()}>Opslaan</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Inline create form */}
|
||||
{showCreate && (
|
||||
<div className="rounded-md border border-input bg-surface-container p-4 space-y-3">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue