Page MenuHomeSealhub
Files F9583626

table.ts
No OneTemporary
Actions

table.ts
View Options

/* eslint-disable @typescript-eslint/no-unsafe-member-access */
/* eslint-disable @typescript-eslint/no-unsafe-argument */
/* eslint-disable @typescript-eslint/no-explicit-any */
import Router from "@koa/router";
import { hasShape, is, predicates } from "@sealcode/ts-predicates";
import { Context } from "koa";
import qs from "qs";
import { FlatTemplatable, tempstream } from "tempstream";
import { FormField } from "../fields/field.js";
import { Table as TableField } from "../fields/table.js";
import { FormReaction } from "../form-types.js";
import { Form } from "../form.js";
import { FormControl, FormControlContext } from "./form-control.js";
export type TableControlOptions<F extends Record<string, FormField>> = {
render_fields: {
[field_name in keyof F]: (
fctx: FormControlContext,
name: string,
value: string
) => FlatTemplatable | Promise<FlatTemplatable>;
};
allow_removing?: boolean;
label_add?: string;
label: string;
label_remove?: string;
} & (
| { allow_adding: false }
| {
allow_adding: true;
make_new_row: (
ctx: Context
) => Promise<{ [field_name in keyof F]: unknown }>;
}
);
export class Table<F extends Record<string, FormField>> extends FormControl {
role = <const>"input";
constructor(
public table_field: TableField<F>,
public options: TableControlOptions<F>
) {
super();
}
async render(fctx: FormControlContext): Promise<FlatTemplatable> {
let { parsed: rows } = await this.table_field.getValue(
fctx.ctx,
fctx.data
);
if (!rows) {
rows = [];
}
return tempstream/* HTML */ `<turbo-frame
id="${this.getFrameID()}"
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(" ")}"
>
<label>${this.options.label}</label>
<div class="table__wrapper">
<table>
<tbody>
${rows?.map((row, row_index) => {
return /* HTML */ tempstream`<tr>
${Object.entries(this.table_field.columns).map(([key]) => {
return tempstream`<td>${this.options.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>`;
})}
${
this.options.allow_removing
? /* HTML */ `<td>
<input
type="submit"
data-turbo-frame="${this.getFrameID()}"
value="${this.options
.label_remove ||
"remove"}"
form="${fctx.form_id}"
formnovalidate
formaction="${this.getActionURL(
this.table_field
.name,
{
remove: {
index: row_index,
},
}
)}"
/>
</td>`
: ""
}
</tr>`;
})}
</tbody>
</table>
${this.options.allow_adding
? /* HTML */ `<input
type="submit"
value="${this.options.label_add || "add"}"
form="${fctx.form_id}"
formnovalidate
formaction="${this.getActionURL(
this.table_field.name,
{
insert: { index: rows.length, value: {} },
}
)}"
/>`
: ""}
</div>
</turbo-frame>`;
}
getFrameID() {
return `array-frame-${this.table_field.name}`;
}
getActionURL(field_name: string, action: Record<string, unknown>) {
return `./?${qs.stringify({
action,
field_name,
})}`;
}
mount(router: Router, form: Form<any, any>) {
router.post("/", async (ctx, next) => {
const action = ctx.$body.action;
const field_name = ctx.$body.field_name;
if (
!is(action, predicates.object) ||
!is(field_name, predicates.string)
) {
await next();
return;
}
if (
this.options.allow_adding &&
hasShape(
{
insert: predicates.shape({ index: predicates.string }),
},
action
)
) {
if (field_name !== this.table_field.name) {
await next();
return;
}
if (!ctx.$body[this.table_field.name]) {
ctx.$body[this.table_field.name] = {};
}
(ctx.$body[this.table_field.name] as any)[action.insert.index] =
await this.options.make_new_row(ctx);
}
if (
hasShape(
{
remove: predicates.shape({ index: predicates.string }),
},
action
)
) {
if (field_name !== this.table_field.name) {
await next();
return;
}
if (!ctx.$body[this.table_field.name]) {
ctx.$body[this.table_field.name] = {};
}
(ctx.$body[this.table_field.name] as any) = Object.fromEntries(
Object.entries(
Object.values(
ctx.$body[this.table_field.name] as any
).filter(
(_, index) => index != parseInt(action.remove.index)
)
)
);
}
ctx.override_reaction = {
action: "stay",
content: await form.render(
ctx,
{
raw_values: await form.extractRawValues(ctx),
messages: [],
},
false
),
} as FormReaction;
await next();
});
}
}

File Metadata

Mime Type
text/html
Expires
Sat, Oct 11, 10:16 (17 h, 35 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
982396
Default Alt Text
table.ts (5 KB)

Event Timeline