99 lines
3.0 KiB
TypeScript
99 lines
3.0 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
|
|
export interface DisplayRow {
|
|
key: string
|
|
submissionNum: number
|
|
isFirstInGroup: boolean
|
|
date: string
|
|
code: string
|
|
prompt: string
|
|
rendered: string | null
|
|
zone: string
|
|
sector: string
|
|
}
|
|
|
|
export function ResponsesTable({ rows }: { rows: DisplayRow[] }) {
|
|
const [expanded, setExpanded] = useState<Set<number>>(new Set())
|
|
|
|
function toggle(submissionNum: number) {
|
|
setExpanded((prev) => {
|
|
const next = new Set(prev)
|
|
if (next.has(submissionNum)) next.delete(submissionNum)
|
|
else next.add(submissionNum)
|
|
return next
|
|
})
|
|
}
|
|
|
|
return (
|
|
<table className="admin-table">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Fecha</th>
|
|
<th>Código</th>
|
|
<th>Pregunta</th>
|
|
<th>Valor</th>
|
|
<th className="admin-col-optional">Departamento</th>
|
|
<th className="admin-col-optional">Sector</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rows
|
|
.filter((row) => row.isFirstInGroup || expanded.has(row.submissionNum))
|
|
.map((row) => {
|
|
const groupClass =
|
|
row.submissionNum % 2 === 0 ? 'admin-group-even' : 'admin-group-odd'
|
|
const isExpanded = expanded.has(row.submissionNum)
|
|
const trClass = row.isFirstInGroup
|
|
? `${groupClass} admin-group-start admin-row-toggle`
|
|
: groupClass
|
|
|
|
return (
|
|
<tr
|
|
key={row.key}
|
|
className={trClass}
|
|
onClick={row.isFirstInGroup ? () => toggle(row.submissionNum) : undefined}
|
|
onKeyDown={
|
|
row.isFirstInGroup
|
|
? (e) => {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault()
|
|
toggle(row.submissionNum)
|
|
}
|
|
}
|
|
: undefined
|
|
}
|
|
role={row.isFirstInGroup ? 'button' : undefined}
|
|
tabIndex={row.isFirstInGroup ? 0 : undefined}
|
|
aria-expanded={row.isFirstInGroup ? isExpanded : undefined}
|
|
>
|
|
<td>
|
|
{row.isFirstInGroup && (
|
|
<span className="admin-toggle-icon" aria-hidden="true">
|
|
{isExpanded ? '▼' : '▶'}
|
|
</span>
|
|
)}
|
|
{row.submissionNum}
|
|
</td>
|
|
<td>{row.date}</td>
|
|
<td>{row.code}</td>
|
|
<td className="admin-prompt">{row.prompt}</td>
|
|
<td>
|
|
{row.rendered === null ? (
|
|
<span className="admin-nodata">sin dato</span>
|
|
) : (
|
|
row.rendered
|
|
)}
|
|
</td>
|
|
<td className="admin-col-optional">{row.zone}</td>
|
|
<td className="admin-col-optional">{row.sector}</td>
|
|
</tr>
|
|
)
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
)
|
|
}
|