Page MenuHomeSealhub
Files F4637518

table.ts
No OneTemporary
Actions

table.ts
View Options

import { FlatTemplatable } from "tempstream";
import { FormField } from "../fields/field.js";
import { Table as TableField } from "../fields/table.js";
import { FormControl, FormControlContext } from "./form-control.js";
export class Table<F extends Record<string, FormField>> extends FormControl {
role = <const>"input";
constructor(
public table_field: TableField<F>,
public render_fields: {
[field_name in keyof F]: (
fctx: FormControlContext,
name: string,
value: string
) => string;
}
) {
super();
}
async render(fctx: FormControlContext): Promise<FlatTemplatable> {
const { parsed: rows } = await this.table_field.getValue(
fctx.ctx,
fctx.data
);
if (!rows) {
return "";
}
return /* HTML */ `<div
class="${[
"form-input__wrapper",
"form-input__wrapper--type--table",
"form-input__wrapper--options-count--" + rows.length.toString(),
...(rows.length >= 5
? ["form-input__wrapper--options-count--5-or-more"]
: []),
...(rows.length >= 10
? ["form-input__wrapper--options-count--10-or-more"]
: []),
...(rows.length >= 15
? ["form-input__wrapper--options-count--15-or-more"]
: []),
...(rows.length >= 20
? ["form-input__wrapper--options-count--20-or-more"]
: []),
].join(" ")}"
>
<div class="table__wrapper">
<table>
<tbody>
<tr>
${rows
?.map((row, row_index) => {
return /* HTML */ `<tr>
${Object.entries(
this.table_field.columns
)
.map(([key]) => {
return `<td>${this.render_fields[
key
](
fctx,
`${this.table_field.name}[${row_index}][${key}]`,
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
row[key] as string
)}</td>`;
})
.join("")}
</tr>`;
})
.join("")}
</tr>
</tbody>
</table>
</div>
</div>`;
}
}

File Metadata

Mime Type
text/html
Expires
Tue, May 27, 23:47 (1 d, 17 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
665534
Default Alt Text
table.ts (1 KB)

Event Timeline