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 [newDescription, setNewDescription] = useState('')
|
||||||
const [newProductId, setNewProductId] = useState<string>('')
|
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 filtered = useMemo(() => {
|
||||||
const q = search.trim().toLowerCase()
|
const q = search.trim().toLowerCase()
|
||||||
const result = ideas.filter((idea) => {
|
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) {
|
function handleArchive(id: string) {
|
||||||
if (isDemo) return
|
if (isDemo) return
|
||||||
startTransition(async () => {
|
startTransition(async () => {
|
||||||
|
|
@ -254,7 +280,18 @@ export function IdeaList({ ideas, products, isDemo }: IdeaListProps) {
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
</select>
|
</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}>
|
<DemoTooltip show={isDemo}>
|
||||||
<Button
|
<Button
|
||||||
size="sm"
|
size="sm"
|
||||||
|
|
@ -289,6 +326,28 @@ export function IdeaList({ ideas, products, isDemo }: IdeaListProps) {
|
||||||
})}
|
})}
|
||||||
</div>
|
</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 */}
|
{/* Inline create form */}
|
||||||
{showCreate && (
|
{showCreate && (
|
||||||
<div className="rounded-md border border-input bg-surface-container p-4 space-y-3">
|
<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