86 lines
2.8 KiB
TypeScript
86 lines
2.8 KiB
TypeScript
// The project's documents, one row each, with where they are in the pipeline and how many lines wait
|
|
// for a person. A server component: it holds no state, and every string is passed in.
|
|
|
|
import type { ReactElement } from "react"
|
|
import type { DocumentView } from "../contract/index.js"
|
|
|
|
export interface DocumentListLabels {
|
|
readonly caption: string
|
|
readonly empty: string
|
|
readonly file: string
|
|
readonly status: string
|
|
readonly pages: string
|
|
readonly pending: string
|
|
readonly approved: string
|
|
readonly uploaded: string
|
|
readonly actions: string
|
|
/** `Download {filename}`: a same-origin, project-scoped file stream. */
|
|
readonly download: string
|
|
/** `Review {filename}`: the link's accessible name, so a list of links is not a list of "Review". */
|
|
readonly review: string
|
|
/** The status and failure texts, by code. */
|
|
readonly statuses: Readonly<Record<DocumentView["status"], string>>
|
|
readonly failures: Readonly<Record<NonNullable<DocumentView["failureCode"]>, string>>
|
|
}
|
|
|
|
export function DocumentList({
|
|
documents,
|
|
hrefFor,
|
|
downloadHrefFor,
|
|
labels,
|
|
formatDate,
|
|
}: {
|
|
documents: readonly DocumentView[]
|
|
hrefFor: (fileId: string) => string
|
|
downloadHrefFor: (fileId: string) => string
|
|
labels: DocumentListLabels
|
|
formatDate: (iso: string) => string
|
|
}): ReactElement {
|
|
if (documents.length === 0) {
|
|
return <p>{labels.empty}</p>
|
|
}
|
|
return (
|
|
<table>
|
|
<caption>{labels.caption}</caption>
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">{labels.file}</th>
|
|
<th scope="col">{labels.status}</th>
|
|
<th scope="col">{labels.pages}</th>
|
|
<th scope="col">{labels.pending}</th>
|
|
<th scope="col">{labels.approved}</th>
|
|
<th scope="col">{labels.uploaded}</th>
|
|
<th scope="col">{labels.actions}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{documents.map((document) => (
|
|
<tr key={document.fileId}>
|
|
<th scope="row">
|
|
<a href={hrefFor(document.fileId)} aria-label={labels.review.replace("{filename}", document.filename)}>
|
|
{document.filename}
|
|
</a>
|
|
</th>
|
|
<td>
|
|
{labels.statuses[document.status]}
|
|
{document.failureCode ? ` ${labels.failures[document.failureCode]}` : ""}
|
|
</td>
|
|
<td>{document.pageCount ?? ""}</td>
|
|
<td>{document.pending}</td>
|
|
<td>{document.approved}</td>
|
|
<td>{formatDate(document.uploadedAt)}</td>
|
|
<td>
|
|
<a
|
|
href={downloadHrefFor(document.fileId)}
|
|
aria-label={labels.download.replace("{filename}", document.filename)}
|
|
>
|
|
{labels.download.replace("{filename}", document.filename)}
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)
|
|
}
|