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:
@@ -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>
|
||||
)
|
||||
})}
|
||||
|
||||
@@ -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 & 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>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user