feat(forms): delete UI (destructive confirms) + Re-link submissions button

Forms list: per-form Delete with a destructive confirm that spells out
permanent loss of the form + all responses incl. signed waivers, plus a
header 'Re-link submissions' button (relinkAllSubmissions). Results page:
per-response Delete (confirm) and a 'Delete form' header action that
returns to /forms. Optimistic list updates; all behind useConfirm.
This commit is contained in:
Moheeb Zara
2026-05-17 00:10:47 -07:00
parent c4ae5d27ac
commit 1e6e5d523b
2 changed files with 108 additions and 11 deletions
@@ -2,12 +2,14 @@
import { useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { ArrowLeft, Download } from 'lucide-react'
import { PageHeader, PageTitle } from '@/components/ui/page-title'
import { Button } from '@/components/ui/button'
import { Empty, EmptyHeader, EmptyTitle, EmptyDescription } from '@/components/ui/empty'
import { useConfirm } from '@/components/ui/confirm'
import { toast } from 'sonner'
import { exportFormResultsCsv } from '@/lib/actions'
import { exportFormResultsCsv, deleteForm, deleteSubmission } from '@/lib/actions'
import type { FormField } from '@/lib/forms-schema'
type Submission = {
@@ -28,14 +30,18 @@ export function ResultsClient({
formId,
title,
fields,
submissions,
submissions: initial,
}: {
formId: string
title: string
fields: FormField[]
submissions: Submission[]
}) {
const router = useRouter()
const confirm = useConfirm()
const [submissions, setSubmissions] = useState<Submission[]>(initial)
const [exporting, setExporting] = useState(false)
const [busy, setBusy] = useState(false)
async function exportCsv() {
setExporting(true)
@@ -55,6 +61,39 @@ export function ResultsClient({
URL.revokeObjectURL(url)
}
async function onDeleteSubmission(id: string) {
const ok = await confirm({
title: 'Delete this response?',
description: 'This permanently removes this single submission. This cannot be undone.',
confirmText: 'Delete response',
destructive: true,
})
if (!ok) return
setBusy(true)
const res = await deleteSubmission({ submissionId: id })
setBusy(false)
if ('error' in res && res.error) return toast.error(res.error)
setSubmissions(prev => prev.filter(s => s.id !== id))
toast.success('Response deleted')
}
async function onDeleteForm() {
const ok = await confirm({
title: `Delete "${title}"?`,
description:
'This permanently deletes the form AND every response, including any signed waivers. This cannot be undone. Export first if you need a record.',
confirmText: 'Delete form and all responses',
destructive: true,
})
if (!ok) return
setBusy(true)
const res = await deleteForm({ formId, confirm: true })
setBusy(false)
if ('error' in res && res.error) return toast.error(res.error)
toast.success('Form deleted')
router.push('/forms')
}
return (
<>
<PageHeader>
@@ -66,9 +105,14 @@ export function ResultsClient({
</Button>
<PageTitle>{title} — responses</PageTitle>
</div>
<Button size="sm" onClick={exportCsv} disabled={exporting || submissions.length === 0}>
<Download className="size-4" /> {exporting ? 'Exporting…' : 'Export CSV'}
</Button>
<div className="flex gap-2">
<Button size="sm" onClick={exportCsv} disabled={exporting || submissions.length === 0}>
<Download className="size-4" /> {exporting ? 'Exporting…' : 'Export CSV'}
</Button>
<Button size="sm" variant="outline" disabled={busy} onClick={onDeleteForm}>
Delete form
</Button>
</div>
</PageHeader>
<div className="p-4 md:p-6">
@@ -91,6 +135,7 @@ export function ResultsClient({
{f.label}
</th>
))}
<th className="p-2 font-medium text-right">Actions</th>
</tr>
</thead>
<tbody className="divide-y">
@@ -109,6 +154,16 @@ export function ResultsClient({
{cell(a[f.key])}
</td>
))}
<td className="p-2 text-right">
<Button
size="sm"
variant="ghost"
disabled={busy}
onClick={() => onDeleteSubmission(s.id)}
>
Delete
</Button>
</td>
</tr>
)
})}
+48 -6
View File
@@ -1,12 +1,16 @@
'use client'
import { useState } from 'react'
import Link from 'next/link'
import { FileText, Plus } from 'lucide-react'
import { toast } from 'sonner'
import { PageHeader, PageTitle } from '@/components/ui/page-title'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from '@/components/ui/empty'
import { useConfirm } from '@/components/ui/confirm'
import { CopyLinkButton } from '@/components/forms/copy-link-button'
import { deleteForm, relinkAllSubmissions } from '@/lib/actions'
type FormRow = {
id: string
@@ -25,16 +29,51 @@ const VIS_LABEL: Record<string, string> = {
public_anon: 'Public',
}
export function FormsClient({ forms, spaceSlug }: { forms: FormRow[]; spaceSlug: string }) {
export function FormsClient({ forms: initial, spaceSlug }: { forms: FormRow[]; spaceSlug: string }) {
const confirm = useConfirm()
const [forms, setForms] = useState<FormRow[]>(initial)
const [busy, setBusy] = useState(false)
async function onRelink() {
setBusy(true)
const res = await relinkAllSubmissions()
setBusy(false)
if ('error' in res && res.error) return toast.error(res.error)
const n = (res as { data: { linked: number } }).data.linked
toast.success(n > 0 ? `Linked ${n} submission(s) to members` : 'All submissions already linked')
}
async function onDelete(f: FormRow) {
const ok = await confirm({
title: `Delete "${f.title}"?`,
description:
'This permanently deletes the form AND every response/submission for it, including any signed waivers. This cannot be undone. Export the results first if you need a record.',
confirmText: 'Delete form and all responses',
destructive: true,
})
if (!ok) return
setBusy(true)
const res = await deleteForm({ formId: f.id, confirm: true })
setBusy(false)
if ('error' in res && res.error) return toast.error(res.error)
setForms(prev => prev.filter(x => x.id !== f.id))
toast.success('Form deleted')
}
return (
<>
<PageHeader>
<PageTitle>Forms &amp; waivers</PageTitle>
<Button asChild size="sm">
<Link href="/forms/new">
<Plus className="size-4" /> New form
</Link>
</Button>
<div className="flex gap-2">
<Button size="sm" variant="outline" disabled={busy} onClick={onRelink}>
Re-link submissions
</Button>
<Button asChild size="sm">
<Link href="/forms/new">
<Plus className="size-4" /> New form
</Link>
</Button>
</div>
</PageHeader>
<div className="p-4 md:p-6">
@@ -86,6 +125,9 @@ export function FormsClient({ forms, spaceSlug }: { forms: FormRow[]; spaceSlug:
<Button asChild size="sm" variant="secondary">
<Link href={`/forms/${f.id}/edit`}>Edit</Link>
</Button>
<Button size="sm" variant="outline" disabled={busy} onClick={() => onDelete(f)}>
Delete
</Button>
</div>
</div>
))}